/* badges-asesores.css - Estilos completos para badges, colores y bordes */

@keyframes rotateBorder {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes eliteGlow {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(121, 85, 72, 0.4), 0 0 0 0 rgba(253, 248, 242, 0.4);
        border-color: #d7ccc8;
    }
    50% {
        box-shadow: 0 6px 20px rgba(121, 85, 72, 0.6), 0 0 12px 2px rgba(253, 248, 242, 0.9);
        border-color: #fdf8f2;
    }
}

/* --- 1. ESTILOS GENERALES DE LAS TARJETAS --- */

.advisor-card {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    border: none;
}

/* --- 2. TARJETA NIVEL ÉLITE (Chocolate Corporativo con detalles Beige/Crema) --- */
.advisor-card.card-elite {
    box-shadow: 0 15px 35px rgba(121, 85, 72, 0.25);
}

.advisor-card.card-elite::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: conic-gradient(
        transparent 0deg,
        transparent 90deg,
        #fdf8f2 140deg,
        #795548 180deg,
        #fdf8f2 220deg,
        transparent 270deg,
        transparent 360deg
        );
    animation: rotateBorder 4s linear infinite;
    z-index: 1;
}

.advisor-card.card-elite::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #ffffff;
    border-radius: 12px;
    z-index: 2;
}

.advisor-card.card-elite > * {
    position: relative;
    z-index: 3;
}

/* --- 3. TARJETA DIAMANTE (Actualizada a Azul Dinámico / Celeste) --- */
.advisor-card.active-advisor-target.card-diamond {
    box-shadow: 0 15px 35px rgba(14, 165, 233, 0.25);
}

.advisor-card.active-advisor-target.card-diamond::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: conic-gradient(
        transparent 0deg,
        transparent 90deg,
        #e0f2fe 140deg,
        #0ea5e9 180deg,
        #e0f2fe 220deg,
        transparent 270deg,
        transparent 360deg
        );
    animation: rotateBorder 5s linear infinite;
    z-index: 1;
}

.advisor-card.active-advisor-target.card-diamond::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #ffffff;
    border-radius: 12px;
    z-index: 2;
}

.advisor-card.active-advisor-target.card-diamond > * {
    position: relative;
    z-index: 3;
}

/* --- 4. TARJETA ORO (Dorado) --- */
.advisor-card.active-advisor-target.card-gold {
    box-shadow: 0 15px 35px rgba(217, 119, 6, 0.2);
}

.advisor-card.active-advisor-target.card-gold::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: conic-gradient(
        transparent 0deg,
        transparent 90deg,
        #fef3c7 140deg,
        #d97706 180deg,
        #fef3c7 220deg,
        transparent 270deg,
        transparent 360deg
        );
    animation: rotateBorder 5s linear infinite;
    z-index: 1;
}

.advisor-card.active-advisor-target.card-gold::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #ffffff;
    border-radius: 12px;
    z-index: 2;
}

.advisor-card.active-advisor-target.card-gold > * {
    position: relative;
    z-index: 3;
}

/* --- 5. TARJETA PLATA (Gris Metalizado) --- */
.advisor-card.active-advisor-target.card-silver {
    box-shadow: 0 15px 35px rgba(100, 116, 139, 0.2);
}

.advisor-card.active-advisor-target.card-silver::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: conic-gradient(
        transparent 0deg,
        transparent 90deg,
        #f1f5f9 140deg,
        #64748b 180deg,
        #f1f5f9 220deg,
        transparent 270deg,
        transparent 360deg
        );
    animation: rotateBorder 5s linear infinite;
    z-index: 1;
}

.advisor-card.active-advisor-target.card-silver::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #ffffff;
    border-radius: 12px;
    z-index: 2;
}

.advisor-card.active-advisor-target.card-silver > * {
    position: relative;
    z-index: 3;
}

/* --- 6. TARJETA BRONCE (Cobre / Naranja Oscuro) --- */
.advisor-card.active-advisor-target.card-bronze {
    box-shadow: 0 15px 35px rgba(194, 65, 12, 0.2);
}

.advisor-card.active-advisor-target.card-bronze::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: conic-gradient(
        transparent 0deg,
        transparent 90deg,
        #ffedd5 140deg,
        #c2410c 180deg,
        #ffedd5 220deg,
        transparent 270deg,
        transparent 360deg
        );
    animation: rotateBorder 5s linear infinite;
    z-index: 1;
}

.advisor-card.active-advisor-target.card-bronze::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #ffffff;
    border-radius: 12px;
    z-index: 2;
}

.advisor-card.active-advisor-target.card-bronze > * {
    position: relative;
    z-index: 3;
}

/* --- 7. TARJETA EN CAMINO (Actualizada a Morado / Violeta) --- */
.advisor-card.active-advisor-target.card-en-camino {
    box-shadow: 0 15px 35px rgba(124, 58, 237, 0.2);
}

.advisor-card.active-advisor-target.card-en-camino::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: conic-gradient(
        transparent 0deg,
        transparent 90deg,
        #e9d5ff 140deg,
        #7c3aed 180deg,
        #e9d5ff 220deg,
        transparent 270deg,
        transparent 360deg
        );
    animation: rotateBorder 5s linear infinite;
    z-index: 1;
}

.advisor-card.active-advisor-target.card-en-camino::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #ffffff;
    border-radius: 12px;
    z-index: 2;
}

.advisor-card.active-advisor-target.card-en-camino > * {
    position: relative;
    z-index: 3;
}

/* --- 8. TARJETA SIN NIVEL / NORMAL (Rojo Base de Alerta) --- */
.advisor-card.active-advisor-target.card-sin-nivel {
    box-shadow: 0 15px 35px rgba(225, 29, 72, 0.2);
}

.advisor-card.active-advisor-target.card-sin-nivel::before {
    content: '';
    position: absolute;
    top: -150%;
    left: -150%;
    width: 400%;
    height: 400%;
    background: conic-gradient(
        transparent 0deg,
        transparent 90deg,
        #ffe4e6 140deg,
        #e11d48 180deg,
        #ffe4e6 220deg,
        transparent 270deg,
        transparent 360deg
        );
    animation: rotateBorder 5s linear infinite;
    z-index: 1;
}

.advisor-card.active-advisor-target.card-sin-nivel::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: #ffffff;
    border-radius: 12px;
    z-index: 2;
}

.advisor-card.active-advisor-target.card-sin-nivel > * {
    position: relative;
    z-index: 3;
}


/* Estilos de los Badges (Insignias) */

.advisor-badge-elite {
    background: linear-gradient(135deg, #795548, #a1887f);
    color: #ffffff;
    font-weight: 900;
    letter-spacing: 0.5px;
    border: 2px solid #fdf8f2;
    text-transform: uppercase;
    animation: eliteGlow 2.5s ease-in-out infinite;
}

.advisor-badge-diamond {
    background: linear-gradient(135deg, #0ea5e9, #38bdf8);
    color: #ffffff;
    font-weight: 900;
    border: 1.5px solid #e0f2fe;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4);
}

.advisor-badge-gold {
    background: linear-gradient(135deg, #d97706, #fbbf24);
    color: #451a03;
    font-weight: 900;
    border: 1.5px solid #fef3c7;
    box-shadow: 0 4px 15px rgba(217, 119, 6, 0.4);
}

.advisor-badge-silver {
    background: linear-gradient(135deg, #64748b, #94a3b8);
    color: #ffffff;
    font-weight: 900;
    border: 1.5px solid #f1f5f9;
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.4);
}

.advisor-badge-bronze {
    background: linear-gradient(135deg, #c2410c, #ea580c);
    color: #ffffff;
    font-weight: 900;
    border: 1.5px solid #ffedd5;
    box-shadow: 0 4px 12px rgba(194, 65, 12, 0.4);
}

.advisor-badge-en-camino {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #ffffff;
    font-weight: 900;
    border: 1.5px solid #e9d5ff;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

.advisor-badge-normal {
    background: linear-gradient(135deg, #e11d48, #fb7185);
    color: #ffffff;
    font-weight: 900;
    border: 1.5px solid #ffe4e6;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.4);
}

.legend-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.legend-dot.advisor-badge-elite {
    background: #795548;
    border: 1.5px solid #d7ccc8;
    box-shadow: none;
    animation: none;
}
.legend-dot.advisor-badge-diamond {
    background: #0ea5e9;
    border: 1.5px solid #e0f2fe;
    box-shadow: none;
}
.legend-dot.advisor-badge-gold {
    background: #d97706;
    border: 1.5px solid #fef3c7;
    box-shadow: none;
}
.legend-dot.advisor-badge-silver {
    background: #64748b;
    border: 1.5px solid #f1f5f9;
    box-shadow: none;
}
.legend-dot.advisor-badge-bronze {
    background: #c2410c;
    border: 1.5px solid #ffedd5;
    box-shadow: none;
}
.legend-dot.advisor-badge-en-camino {
    background: #7c3aed;
    border: 1.5px solid #e9d5ff;
    box-shadow: none;
}
.legend-dot.advisor-badge-normal {
    background: #e11d48;
    border: 1.5px solid #ffe4e6;
    box-shadow: none;
}

.legend-group-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    margin: 0 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #f1f5f9;
}