/* ============================================
   MODALES, AVATARES Y MENÚ DE USUARIO
   ============================================
   Hoja DIFERIDA (media="print" + onload). Nada de lo que se ponga aquí puede
   afectar a la maquetación de algo visible en el primer pintado: llega tarde
   a propósito y recolocaría la página delante del usuario.
   Los enlaces del header vivían aquí y por eso se fueron a
   css/layout/header-links.css — ver la cabecera de ese archivo.
   ============================================ */

/* ============================================
   MODAL PUBLICAR - Estilo NOCTURNO EUFORIA
   ============================================ */

.publish-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(255, 0, 0, 0.18) 0%, transparent 60%),
        radial-gradient(ellipse at 30% 70%, rgba(255, 69, 0, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 30%, rgba(200, 0, 0, 0.1) 0%, transparent 50%),
        rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px) saturate(1.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}

.publish-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Particulas ambientales en el fondo */
.publish-modal-overlay::before,
.publish-modal-overlay::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.publish-modal-overlay::before {
    width: 300px;
    height: 300px;
    top: 10%;
    right: 5%;
    background: radial-gradient(circle, rgba(255, 30, 0, 0.12) 0%, transparent 70%);
    animation: ambient-float-1 6s ease-in-out infinite;
}

.publish-modal-overlay::after {
    width: 250px;
    height: 250px;
    bottom: 15%;
    left: 8%;
    background: radial-gradient(circle, rgba(255, 80, 0, 0.1) 0%, transparent 70%);
    animation: ambient-float-2 8s ease-in-out infinite;
}

@keyframes ambient-float-1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    50% { transform: translate(-30px, 20px) scale(1.3); opacity: 1; }
}

@keyframes ambient-float-2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(20px, -25px) scale(1.2); opacity: 0.9; }
}

.publish-modal-container {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 30, 0, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(255, 69, 0, 0.08) 0%, transparent 40%),
        linear-gradient(145deg, #0d0000 0%, #050000 40%, #000000 60%, #080202 100%);
    border: 2px solid transparent;
    border-radius: 24px;
    padding: 40px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
    box-shadow:
        0 0 120px rgba(255, 0, 0, 0.2),
        0 25px 60px rgba(0, 0, 0, 0.95),
        0 0 60px rgba(255, 69, 0, 0.15),
        inset 0 1px 0 rgba(255, 100, 50, 0.15),
        inset 0 -1px 0 rgba(255, 69, 0, 0.1);
    animation: modal-border-glow 3s ease-in-out infinite;
    overflow: hidden;
}

/* Resplandor rojo interno superior */
.publish-modal-container::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 26px;
    padding: 2px;
    background: linear-gradient(45deg, #ff0000, #ff6b35, #cc0000, #ff4500, #ff0000, #ff6b35);
    background-size: 400% 400%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: border-rotate 3s linear infinite;
    z-index: -1;
}

/* Halo de luz roja interna */
.publish-modal-container::after {
    content: '';
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
    background: radial-gradient(ellipse, rgba(255, 20, 0, 0.12) 0%, transparent 70%);
    pointer-events: none;
    animation: inner-halo-pulse 4s ease-in-out infinite;
}

@keyframes inner-halo-pulse {
    0%, 100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

@keyframes border-rotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes modal-border-glow {
    0%, 100% {
        box-shadow:
            0 0 80px rgba(255, 0, 0, 0.15),
            0 25px 60px rgba(0, 0, 0, 0.95),
            0 0 40px rgba(255, 69, 0, 0.1),
            0 0 200px rgba(255, 30, 0, 0);
    }
    50% {
        box-shadow:
            0 0 140px rgba(255, 0, 0, 0.3),
            0 25px 60px rgba(0, 0, 0, 0.95),
            0 0 80px rgba(255, 69, 0, 0.2),
            0 0 200px rgba(255, 30, 0, 0.08);
    }
}

.publish-modal-overlay.active .publish-modal-container {
    transform: scale(1) translateY(0);
}

.publish-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 69, 0, 0.1);
    border: 1px solid rgba(255, 107, 53, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 107, 53, 0.8);
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 69, 0, 0.1);
    z-index: 100;
}

.publish-modal-close:hover {
    background: rgba(255, 69, 0, 0.2);
    border-color: rgba(255, 107, 53, 0.6);
    color: #ff6b35;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 20px rgba(255, 69, 0, 0.3);
}

.publish-modal-close svg {
    width: 20px;
    height: 20px;
}

/* Animación del ícono */
.publish-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 28px;
}

/* Resplandor ambiental detras del fuego */
.publish-animation::before {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 30, 0, 0.3) 0%, rgba(255, 69, 0, 0.1) 40%, transparent 70%);
    animation: fire-ambient-glow 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes fire-ambient-glow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.2); opacity: 1; }
}

.publish-fire {
    font-size: 56px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fire-pulse-euphoria 1s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 69, 0, 0.8)) drop-shadow(0 0 60px rgba(255, 0, 0, 0.4));
    z-index: 2;
}

@keyframes fire-pulse-euphoria {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1) rotate(-3deg);
        filter: drop-shadow(0 0 35px rgba(255, 69, 0, 0.8)) drop-shadow(0 0 70px rgba(255, 0, 0, 0.5));
    }
    25% {
        transform: translate(-50%, -50%) scale(1.15) rotate(3deg);
        filter: drop-shadow(0 0 45px rgba(255, 69, 0, 1)) drop-shadow(0 0 90px rgba(255, 0, 0, 0.6));
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3) rotate(-3deg);
        filter: drop-shadow(0 0 55px rgba(255, 69, 0, 1)) drop-shadow(0 0 110px rgba(255, 0, 0, 0.7));
    }
    75% {
        transform: translate(-50%, -50%) scale(1.15) rotate(3deg);
        filter: drop-shadow(0 0 45px rgba(255, 69, 0, 1)) drop-shadow(0 0 90px rgba(255, 0, 0, 0.6));
    }
}

.publish-ring {
    position: absolute;
    inset: 5px;
    border: 2px solid rgba(255, 30, 0, 0.7);
    border-radius: 50%;
    animation: ring-expand-fire 2s ease-out infinite;
    box-shadow: 0 0 25px rgba(255, 30, 0, 0.5), inset 0 0 25px rgba(255, 69, 0, 0.2);
}

.publish-ring::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1.5px solid rgba(255, 69, 0, 0.4);
    border-radius: 50%;
    animation: ring-expand-fire 2s ease-out 0.5s infinite;
}

.publish-ring::after {
    content: '';
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(255, 100, 0, 0.25);
    border-radius: 50%;
    animation: ring-expand-fire 2s ease-out 1s infinite;
}

@keyframes ring-expand-fire {
    0% {
        transform: scale(0.8);
        opacity: 1;
        border-color: rgba(255, 30, 0, 0.9);
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
        border-color: rgba(255, 69, 0, 0);
    }
}

/* Título y texto */
.publish-title {
    color: white;
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 16px 0;
    line-height: 1.3;
    text-shadow: 0 0 30px rgba(255, 107, 53, 0.3);
    background: linear-gradient(90deg, #ffffff 0%, #ff6b35 50%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: title-glow 3s ease-in-out infinite;
}

@keyframes title-glow {
    0%, 100% { background-position: 0% center; filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3)); }
    50% { background-position: 100% center; filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.6)); }
}

/* ⚠️ Acotado al modal, y no `.publish-text` a secas: esa clase la lleva TAMBIÉN el
   texto del enlace «Publicar» del header (`<p class="name-tag publish-text">`), así
   que el párrafo de un modal le estaba imponiendo su interlineado y sus 24px de
   margen inferior — el enlace del header medía 64px de alto cuando su contenido
   pide 40, y el margen llegaba tarde porque esta hoja va en diferido: la píldora
   crecía 24px sola. Los tres modales (buyer, vendor y glory) usan este contenedor. */
.publish-modal-container .publish-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 24px 0;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Features */
.publish-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 28px;
}

.feature-tag {
    background: rgba(255, 30, 0, 0.12);
    border: 1px solid rgba(255, 69, 0, 0.35);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 0 12px rgba(255, 69, 0, 0.4);
    box-shadow: 0 0 12px rgba(255, 30, 0, 0.1), inset 0 0 12px rgba(255, 69, 0, 0.05);
    transition: all 0.3s ease;
}

.feature-tag:hover {
    background: rgba(255, 30, 0, 0.25);
    border-color: rgba(255, 69, 0, 0.6);
    box-shadow: 0 0 25px rgba(255, 30, 0, 0.25), inset 0 0 15px rgba(255, 69, 0, 0.08);
    transform: translateY(-1px);
}

/* Botones */
.publish-btn {
    width: 100%;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    margin-bottom: 16px;
}

.publish-btn--primary {
    background: linear-gradient(135deg, #ff4500 0%, #ff0000 50%, #ff2200 100%);
    background-size: 200% 200%;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 
        0 4px 20px rgba(255, 69, 0, 0.4),
        0 0 30px rgba(255, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: btn-fire-glow 2s ease-in-out infinite, btn-gradient-shift 3s ease infinite;
    position: relative;
    overflow: hidden;
}

/* Efecto de brillo que pasa */
.publish-btn--primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: btn-shine 2s ease-in-out infinite;
}

@keyframes btn-shine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

@keyframes btn-fire-glow {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(255, 69, 0, 0.4), 0 0 30px rgba(255, 0, 0, 0.2), 0 0 80px rgba(255, 69, 0, 0), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 6px 30px rgba(255, 69, 0, 0.6), 0 0 50px rgba(255, 0, 0, 0.4), 0 0 80px rgba(255, 69, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

@keyframes btn-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.publish-btn--primary:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 8px 40px rgba(255, 69, 0, 0.7),
        0 0 60px rgba(255, 0, 0, 0.5),
        0 0 100px rgba(255, 69, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    animation: none;
}

.publish-btn--primary:hover::before {
    animation: btn-shine-fast 0.8s ease-in-out infinite;
}

@keyframes btn-shine-fast {
    0% { left: -100%; }
    100% { left: 200%; }
}

.publish-disclaimer {
    font-size: 13px;
    color: rgba(255, 107, 53, 0.7);
    margin: 0;
    letter-spacing: 0.5px;
}

.publish-login {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 16px 0 0 0;
}

.publish-login a {
    color: #ff6b35;
    text-decoration: none;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(255, 107, 53, 0.3);
    transition: all 0.3s ease;
}

.publish-login a:hover {
    color: #ff4500;
    text-shadow: 0 0 20px rgba(255, 107, 53, 0.6);
}

/* ============================================
   MODAL VENDOR - Gloria y Triunfo
   ============================================ */

.vendor-glory {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 30, 0, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(255, 69, 0, 0.08) 0%, transparent 40%),
        linear-gradient(145deg, #0d0000 0%, #050000 40%, #000000 60%, #080202 100%);
    border-color: transparent;
    position: relative;
}

.vendor-glory::after {
    background: radial-gradient(ellipse, rgba(255, 20, 0, 0.12) 0%, transparent 70%);
}

/* Botón de cerrar VENDOR - hereda estilo base, sin override */

.glory-animation {
    position: relative;
    height: 110px;
    margin-bottom: 24px;
    z-index: 1;
}

/* Resplandor ambiental rojo */
.glory-animation::before {
    content: '';
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 30, 0, 0.3) 0%, rgba(255, 69, 0, 0.1) 40%, transparent 70%);
    animation: glory-ambient-glow 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes glory-ambient-glow {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.3); opacity: 1; }
}

.glory-crown {
    font-size: 64px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: crown-shine 2s ease-in-out infinite;
    filter: drop-shadow(0 0 35px rgba(255, 30, 0, 0.9)) drop-shadow(0 0 70px rgba(255, 0, 0, 0.4));
    z-index: 2;
}

@keyframes crown-shine {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1) rotate(-5deg);
        filter: drop-shadow(0 0 30px rgba(255, 30, 0, 0.8)) drop-shadow(0 0 60px rgba(255, 0, 0, 0.3));
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15) rotate(5deg);
        filter: drop-shadow(0 0 50px rgba(255, 30, 0, 1)) drop-shadow(0 0 100px rgba(255, 0, 0, 0.6));
    }
}

.glory-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-size: 28px;
    animation: sparkles-float 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 69, 0, 0.6));
}

@keyframes sparkles-float {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(-12px); opacity: 1; }
}

.glory-title {
    color: white;
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 16px 0;
    line-height: 1.3;
    text-shadow: 0 0 30px rgba(255, 107, 53, 0.3);
    background: linear-gradient(90deg, #ffffff 0%, #ff6b35 50%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: title-glow 3s ease-in-out infinite;
}

.glory-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 24px 0;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.stat-number {
    font-size: 32px;
}

.stat-label {
    font-size: 12px;
    color: rgba(255, 107, 53, 0.8);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.publish-btn--glory {
    background: linear-gradient(135deg, #ff4500 0%, #ff0000 50%, #ff2200 100%);
    background-size: 200% 200%;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    box-shadow: 0 4px 20px rgba(255, 69, 0, 0.4), 0 0 30px rgba(255, 0, 0, 0.2);
    animation: btn-fire-glow 2s ease-in-out infinite, btn-gradient-shift 3s ease infinite;
    position: relative;
    overflow: hidden;
}

.publish-btn--glory:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 40px rgba(255, 69, 0, 0.7), 0 0 60px rgba(255, 0, 0, 0.5);
}

/* Mobile: quitar animaciones pesadas (backdrop-filter, box-shadow blur grande,
   mask animado, filter drop-shadow) que saturan el compositor en GPUs móviles
   y se perciben como el modal "temblando"/moviéndose mientras está abierto. */
@media screen and (max-width: 768px) {
    .publish-modal-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .publish-modal-container,
    .publish-modal-container::before,
    .publish-modal-container::after {
        animation: none;
    }

    .publish-animation::before,
    .publish-fire,
    .publish-ring,
    .publish-ring::before,
    .glory-animation::before,
    .glory-crown,
    .glory-sparkles,
    .publish-title,
    .glory-title,
    .publish-btn--primary,
    .publish-btn--glory {
        animation: none !important;
    }
}

/* Responsive */
@media screen and (max-width: 480px) {
    .publish-modal-container {
        padding: 28px 20px;
    }

    .publish-modal-overlay::before,
    .publish-modal-overlay::after {
        display: none;
    }

    .publish-animation {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }

    .publish-fire {
        font-size: 44px;
    }

    .publish-title {
        font-size: 22px;
    }

    /* Acotado igual que la regla base: si solo se acotara una, la otra dejaría de
       ganarle por especificidad y el modal cambiaría de tamaño en móvil. */
    .publish-modal-container .publish-text {
        font-size: 14px;
    }

    .feature-tag {
        font-size: 12px;
        padding: 5px 10px;
    }

    .glory-crown {
        font-size: 50px;
    }

    .glory-animation {
        height: 90px;
    }

}


/* ============================================
   MODAL EUFORIA NOCTURNA - Triunfo, Prosperidad & Placer
   ============================================ */

.euphoria-night {
    background: linear-gradient(145deg, #0d0d0d 0%, #1a0a1a 25%, #0f050f 50%, #0a0a0a 75%, #000000 100%);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.euphoria-night::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 26px;
    padding: 2px;
    background: linear-gradient(45deg, #ff00ff, #ff0066, #ff4500, #ff00ff, #9400d3);
    background-size: 400% 400%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: euphoria-border 4s linear infinite;
    z-index: -1;
}

@keyframes euphoria-border {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Partículas flotantes */
.euphoria-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.euphoria-particles::before,
.euphoria-particles::after {
    content: '✦ ✧ ✦';
    position: absolute;
    font-size: 20px;
    color: rgba(255, 0, 255, 0.3);
    animation: particles-float 8s ease-in-out infinite;
}

.euphoria-particles::before {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.euphoria-particles::after {
    bottom: 20%;
    right: 10%;
    animation-delay: 4s;
}

@keyframes particles-float {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
    50% { transform: translateY(-20px) rotate(180deg); opacity: 0.6; }
}

/* Animación principal */
.euphoria-animation {
    position: relative;
    height: 100px;
    margin-bottom: 20px;
}

.euphoria-crown {
    font-size: 56px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: euphoria-pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255, 0, 255, 0.6)) drop-shadow(0 0 60px rgba(255, 0, 100, 0.4));
    z-index: 2;
}

@keyframes euphoria-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
    50% { transform: translate(-50%, -50%) scale(1.15) rotate(3deg); }
}

/* Rayos de energía */
.euphoria-rays {
    position: absolute;
    inset: -40px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 0, 255, 0.1) 20deg,
        transparent 40deg,
        rgba(255, 0, 100, 0.1) 60deg,
        transparent 80deg,
        rgba(255, 69, 0, 0.1) 100deg,
        transparent 120deg,
        rgba(148, 0, 211, 0.1) 140deg,
        transparent 160deg
    );
    border-radius: 50%;
    animation: euphoria-rays-spin 8s linear infinite;
    z-index: 1;
}

@keyframes euphoria-rays-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Sparkles */
.euphoria-sparkles {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    font-size: 20px;
    animation: euphoria-sparkle-float 2s ease-in-out infinite;
    z-index: 3;
}

@keyframes euphoria-sparkle-float {
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(-8px); opacity: 1; }
}

/* Título */
.euphoria-title {
    background: linear-gradient(90deg, #ff00ff, #ff0066, #ff4500, #ff00ff, #9400d3);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: euphoria-title-glow 3s linear infinite;
    font-weight: 800;
    text-shadow: 0 0 40px rgba(255, 0, 255, 0.3);
}

@keyframes euphoria-title-glow {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

/* Texto */
.euphoria-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.7;
    text-shadow: 0 0 20px rgba(255, 0, 200, 0.2);
}

.euphoria-text strong {
    color: #ff00ff;
    text-shadow: 0 0 15px rgba(255, 0, 255, 0.5);
}

/* Stats grid */
.euphoria-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 28px 0;
    padding: 16px;
    background: rgba(255, 0, 255, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(255, 0, 255, 0.2);
}

.euphoria-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.euphoria-stat-number {
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, #ff00ff, #ff4500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 10px rgba(255, 0, 255, 0.5));
}

.euphoria-stat-label {
    font-size: 11px;
    color: rgba(255, 200, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
}

/* Features tags */
.euphoria-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
}

.euphoria-tag {
    background: rgba(255, 0, 200, 0.1);
    border: 1px solid rgba(255, 0, 255, 0.4);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 12px;
    color: rgba(255, 220, 255, 0.95);
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
    transition: all 0.3s ease;
    font-weight: 500;
}

.euphoria-tag:hover {
    background: rgba(255, 0, 200, 0.2);
    border-color: rgba(255, 0, 255, 0.7);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.3);
    transform: translateY(-2px);
}

/* Botón Euphoria */
.euphoria-btn {
    background: linear-gradient(135deg, #ff00ff 0%, #ff0066 25%, #ff4500 50%, #ff0066 75%, #ff00ff 100%);
    background-size: 400% 400%;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 18px 32px;
    border-radius: 50px;
    border: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    animation: euphoria-btn-gradient 4s ease infinite, euphoria-btn-glow 2s ease-in-out infinite;
    box-shadow: 0 4px 30px rgba(255, 0, 255, 0.4), 0 0 60px rgba(255, 0, 100, 0.2);
}

@keyframes euphoria-btn-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes euphoria-btn-glow {
    0%, 100% { box-shadow: 0 4px 30px rgba(255, 0, 255, 0.4), 0 0 60px rgba(255, 0, 100, 0.2); }
    50% { box-shadow: 0 6px 40px rgba(255, 0, 255, 0.6), 0 0 80px rgba(255, 0, 100, 0.4); }
}

.euphoria-btn .btn-text {
    position: relative;
    z-index: 2;
}

.euphoria-btn .btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: btn-euphoria-shine 2s ease-in-out infinite;
    z-index: 1;
}

@keyframes btn-euphoria-shine {
    0% { left: -100%; }
    50%, 100% { left: 200%; }
}

.euphoria-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 50px rgba(255, 0, 255, 0.7), 0 0 100px rgba(255, 0, 100, 0.5);
}

/* Footer */
.euphoria-footer {
    font-size: 12px;
    color: rgba(255, 200, 255, 0.6);
    margin-top: 20px;
    letter-spacing: 0.5px;
}

/* Responsive Euphoria */
@media screen and (max-width: 480px) {
    .euphoria-stats {
        gap: 16px;
        padding: 12px;
    }
    
    .euphoria-stat-number {
        font-size: 22px;
    }
    
    .euphoria-stat-label {
        font-size: 9px;
    }
    
    .euphoria-crown {
        font-size: 44px;
    }
    
    .euphoria-tag {
        font-size: 11px;
        padding: 6px 12px;
    }
    
    .euphoria-btn {
        padding: 16px 24px;
        font-size: 14px;
    }
}

/* ============================================
   AVATARES ESTILO AI - Transparente, Negro, Blanco, Rojo, Verde
   ============================================ */

/* Variables de colores para avatares AI */
:root {
  --ai-claude-primary: #ffffff;
  --ai-claude-secondary: #e5e5e5;
  --ai-claude-glow: rgba(255, 255, 255, 0.4);
  --ai-grok-primary: #22c55e;
  --ai-grok-secondary: #16a34a;
  --ai-grok-glow: rgba(34, 197, 94, 0.4);
  --ai-gold: #ef4444;
  --ai-orange: #dc2626;
}

/* ============================================
   PROFILE SELECTED CON AVATAR AI
   ============================================ */
.profile-selected:has(.ai-avatar) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background 0.2s;
}

.profile:hover .profile-selected:has(.ai-avatar) {
  background: rgba(255, 255, 255, 0.05);
}

.profile-selected:has(.ai-avatar) .name-user {
  display: inline-block;
  color: white;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

/* ============================================
   AVATAR BASE - Estilo AI Moderno
   ============================================ */
.ai-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: white;
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 2px solid transparent;
  overflow: hidden;
}

.ai-avatar::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  padding: 2px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s;
}

.ai-avatar:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px var(--ai-glow-color, rgba(217, 119, 87, 0.5));
}

.ai-avatar:hover::before {
  opacity: 1;
}

/* ============================================
   VARIANTE CLAUDE - Blanco/Gris (Neutral)
   ============================================ */
.ai-avatar--claude {
  background: linear-gradient(135deg, #ffffff 0%, #d4d4d4 50%, #a3a3a3 100%);
  --ai-glow-color: rgba(255, 255, 255, 0.5);
  box-shadow: 
    0 2px 8px rgba(255, 255, 255, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
  color: #000000;
}

.ai-avatar--claude::before {
  background: conic-gradient(from 0deg, #ffffff, #d4d4d4, #a3a3a3, #ffffff);
  animation: claude-rotate 3s linear infinite;
}

.ai-avatar--claude .ai-avatar__inner {
  background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 50%);
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

@keyframes claude-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================
   VARIANTE GROK - Verde (Éxito/Activo)
   ============================================ */
.ai-avatar--grok {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
  --ai-glow-color: rgba(34, 197, 94, 0.5);
  box-shadow: 
    0 2px 8px rgba(34, 197, 94, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.ai-avatar--grok::before {
  background: conic-gradient(from 0deg, #22c55e, #16a34a, #15803d, #22c55e);
  animation: grok-pulse 2s ease-in-out infinite;
}

.ai-avatar--grok .ai-avatar__inner {
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

@keyframes grok-pulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.8;
  }
  50% { 
    transform: scale(1.05);
    opacity: 1;
  }
}

/* ============================================
   VARIANTE GOLD - Rojo (Alerta/Destacado)
   ============================================ */
.ai-avatar--gold {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
  --ai-glow-color: rgba(239, 68, 68, 0.5);
  box-shadow: 
    0 2px 8px rgba(239, 68, 68, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.ai-avatar--gold::before {
  background: conic-gradient(from 0deg, #ef4444, #dc2626, #b91c1c, #ef4444);
  animation: gold-shimmer 2s linear infinite;
}

@keyframes gold-shimmer {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
   VARIANTE DARK - Negro puro (Profesional)
   ============================================ */
.ai-avatar--dark {
  background: linear-gradient(135deg, #262626 0%, #0a0a0a 50%, #000000 100%);
  --ai-glow-color: rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.ai-avatar--dark::before {
  background: conic-gradient(from 0deg, #525252, #737373, #525252, #737373);
  animation: dark-rotate 4s linear infinite;
}

@keyframes dark-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================
   AVATAR CON IMAGEN DE PERFIL
   ============================================ */
.ai-avatar--image {
  background: transparent;
  padding: 0;
  border: 2px solid transparent;
}

.ai-avatar--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.ai-avatar--image:hover {
  border-color: var(--ai-claude-primary);
  box-shadow: 0 0 15px var(--ai-claude-glow);
}

/* ============================================
   INDICADOR DE ESTADO ONLINE
   ============================================ */
.ai-avatar__status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-dark-gray, #1a1d29);
  background: #22c55e;
  box-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
}

.ai-avatar__status--away {
  background: #f59e0b;
  box-shadow: 0 0 5px rgba(245, 158, 11, 0.5);
}

.ai-avatar__status--busy {
  background: #ef4444;
  box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
}

/* ============================================================
   AVATARES DE ROL — asignados automáticamente por rol de usuario
   angelito  → buyer  (busca emociones, ángel dorado)
   demonio   → vendor / admin (publica perfil, rojo fuego)
   ============================================================ */

/* ANGELITO — buyer: dorado celestial, espeja el buyer-angel icon */
.ai-avatar--angelito {
  background: radial-gradient(circle at 35% 28%,
    #fff9c4 0%, #FFD700 28%, #FFA500 62%, #e65100 100%);
  --ai-glow-color: rgba(255, 200, 0, 0.7);
  box-shadow:
    0 0 14px rgba(255, 210, 0, 0.65),
    0 0 28px rgba(255, 170, 0, 0.30),
    0 2px 6px rgba(180, 90, 0, 0.25),
    inset 0 1px 4px rgba(255, 255, 180, 0.7);
  color: #5d2c00;
  border: 1.5px solid rgba(255, 220, 50, 0.65);
  animation: angelito-breathe 2s ease-in-out infinite;
}

.ai-avatar--angelito::before {
  background: conic-gradient(from 0deg,
    #FFD700, #FFEC00, #FFC107, #FFD700, #FFA500, #FFD700);
  animation: angelito-halo 2.5s linear infinite;
}

.ai-avatar--angelito .ai-avatar__inner {
  background: radial-gradient(circle at 28% 22%,
    rgba(255, 255, 200, 0.85) 0%, transparent 52%);
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: angelito-shimmer 1.5s ease-in-out infinite alternate;
}

@keyframes angelito-breathe {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(255, 210, 0, 0.55),
      0 0 24px rgba(255, 170, 0, 0.25),
      inset 0 1px 3px rgba(255, 255, 180, 0.65);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 22px rgba(255, 220, 0, 0.9),
      0 0 45px rgba(255, 190, 0, 0.45),
      0 0  8px rgba(255, 240, 100, 0.5),
      inset 0 1px 5px rgba(255, 255, 220, 0.85);
    transform: scale(1.05);
  }
}

@keyframes angelito-halo {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes angelito-shimmer {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

.ai-avatar--angelito:hover {
  transform: scale(1.1);
  box-shadow:
    0 0 28px rgba(255, 220, 0, 1),
    0 0 55px rgba(255, 180, 0, 0.55),
    0 0 12px rgba(255, 255, 100, 0.7);
}

/* DEMONIO — vendor: rojo fuego, espeja el vendor-devil icon */
.ai-avatar--demonio {
  background: radial-gradient(circle at 35% 25%,
    #ff8040 0%, #FF3C00 28%, #DC0000 58%, #6b0000 100%);
  --ai-glow-color: rgba(255, 60, 0, 0.75);
  color: #fff0e8;
  border: 1.5px solid rgba(255, 80, 0, 0.55);
  animation: demonio-heat 2s ease-in-out infinite;
}

.ai-avatar--demonio::before {
  background: conic-gradient(from 0deg,
    #FF3C00, #ff8040, #FF5000, #DC0000, #ff6020, #FF3C00);
  animation: demonio-fire 1.6s linear infinite;
}

.ai-avatar--demonio .ai-avatar__inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 28% 20%, rgba(255, 200, 80, 0.6) 0%, transparent 42%),
    radial-gradient(ellipse at 68% 78%, rgba(120, 0, 0, 0.45) 0%, transparent 38%);
  animation: demonio-shimmer 1s ease-in-out infinite alternate;
}

@keyframes demonio-heat {
  0%, 100% {
    box-shadow:
      0 0 16px rgba(255,  60,  0, 0.85),
      0 0 32px rgba(220,  10,  0, 0.40),
      0 0  6px rgba(255, 140,  0, 0.55),
      inset 0 1px 4px rgba(255, 160, 80, 0.40);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 26px rgba(255,  80,  0, 1),
      0 0 52px rgba(220,  20,  0, 0.60),
      0 0 12px rgba(255, 180,  0, 0.70),
      inset 0 1px 6px rgba(255, 190, 100, 0.55);
    transform: scale(1.05);
  }
}

@keyframes demonio-fire {
  0%   { transform: rotate(0deg)   scale(1);    }
  25%  { transform: rotate(90deg)  scale(1.06); }
  50%  { transform: rotate(180deg) scale(1);    }
  75%  { transform: rotate(270deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(1);    }
}

@keyframes demonio-shimmer {
  from { opacity: 0.65; }
  to   { opacity: 1; }
}

.ai-avatar--demonio:hover {
  transform: scale(1.12);
  box-shadow:
    0 0 34px rgba(255,  80,  0, 1),
    0 0 68px rgba(220,  20,  0, 0.65),
    0 0 16px rgba(255, 200,  0, 0.75);
}

/* ============================================================
   MENÚ DE USUARIO ESTILO AI (PROTOTIPO)
   ============================================================ */

/* Profile container para usuario logueado - Evita conflictos con CSS original */
.profile.ai-theme-claude,
.profile.ai-theme-grok,
.profile.ai-theme-gold,
.profile.ai-theme-dark {
  position: relative !important;
  display: inline-flex !important;
  margin-left: auto;
  height: auto;
  cursor: pointer;
  z-index: 1001 !important;
  align-items: center;
  /* Padding inferior para extender el área de hover hasta el menú */
  padding-bottom: 12px;
  margin-bottom: -12px;
}

/* Evitar que el CSS original del header afecte el menú AI */
.profile.ai-theme-claude:hover,
.profile.ai-theme-grok:hover,
.profile.ai-theme-gold:hover,
.profile.ai-theme-dark:hover {
  position: relative;
  width: auto;
  height: auto;
  border: none;
  background: transparent;
  border-radius: 0;
  animation: none;
}

/* Crear un puente invisible entre el avatar y el menú */
.profile.ai-theme-claude::after,
.profile.ai-theme-grok::after,
.profile.ai-theme-gold::after,
.profile.ai-theme-dark::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
  z-index: 9999;
}

/* El menú AI se posiciona relativo al profile */
.ai-user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 280px;
  max-width: calc(100vw - 20px);
  margin-top: 4px;
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
}

/* Estado activo del menú (controlado por JS click toggle) */
.ai-user-menu--active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* Flecha del menú apuntando al avatar */
.ai-user-menu::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 20px;
  width: 14px;
  height: 14px;
  background: rgba(0, 0, 0, 0.92);
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  transform: rotate(45deg);
  z-index: 1;
}

/* Asegurar que el header-selected no tenga borde en hover */
.profile.ai-theme-claude:hover .profile-selected,
.profile.ai-theme-grok:hover .profile-selected,
.profile.ai-theme-gold:hover .profile-selected,
.profile.ai-theme-dark:hover .profile-selected {
  border-bottom: none;
}

/* OVERRIDE: Anular estilos antiguos del header.css que interfieren */
/* El menú AI no debe tener position:absolute ni width fijo en hover */
.profile.ai-theme-claude:hover,
.profile.ai-theme-grok:hover,
.profile.ai-theme-gold:hover,
.profile.ai-theme-dark:hover {
  position: relative !important;
  width: auto !important;
  border: none !important;
  background: transparent !important;
  animation: none !important;
}

/* Anular el border-bottom del profile-selected en hover */
.profile.ai-theme-claude:hover .profile-selected,
.profile.ai-theme-grok:hover .profile-selected,
.profile.ai-theme-gold:hover .profile-selected,
.profile.ai-theme-dark:hover .profile-selected {
  border-bottom: none !important;
}

/* BRIDGE: Pseudo-elemento invisible que conecta el avatar con el menú */
/* Evita que el menú se cierre al pasar el mouse entre ambos */
.profile.ai-theme-claude:hover::after,
.profile.ai-theme-grok:hover::after,
.profile.ai-theme-gold:hover::after,
.profile.ai-theme-dark:hover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 20px; /* Puente de 20px para cubrir el gap */
  background: transparent;
  z-index: 9999;
  pointer-events: auto;
}

/* Header del menú */
.ai-user-menu__header {
  padding: 12px;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-user-menu__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 18px;
  flex-shrink: 0;
}

.ai-user-menu__info {
  flex: 1;
  min-width: 0;
}

.ai-user-menu__role-icon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* Espacio extra para que los cuernos/cola del vendor no se corten */
  overflow: visible;
}

.ai-user-menu__role-icon-wrapper .role-icon {
  width: 48px;
  height: 48px;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ai-user-menu__role-icon-wrapper svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ══════════════════════════════════════════════════════
   BUYER — Dorado celestial intenso, mismo dinamismo que vendor
   ══════════════════════════════════════════════════════ */
.role-icon--buyer {
  position: relative;
  animation: buyer-breathe 2s ease-in-out infinite;
}

/* Imagen: negro → dorado, drop-shadow multicapa extremo */
.role-icon--buyer svg,
.role-icon--buyer .role-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
  animation: buyer-glow 1.5s ease-in-out infinite;
}

/* Aura interna dorada pulsante */
.role-icon--buyer::before {
  content: '';
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 220,   0, 0.6)  0%,
    rgba(255, 180,   0, 0.35) 30%,
    rgba(255, 140,   0, 0.15) 55%,
    transparent 75%);
  animation: buyer-aura-inner 1.8s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}

/* Aura exterior expansiva */
.role-icon--buyer::after {
  content: '';
  position: absolute;
  inset: -60px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 220,   0, 0.3)  0%,
    rgba(255, 180,   0, 0.15) 35%,
    rgba(255, 255, 200, 0.06) 60%,
    transparent 80%);
  animation: buyer-aura-outer 2s ease-in-out infinite alternate-reverse;
  z-index: 0;
  pointer-events: none;
}

/* Fondo ambiental celestial */
.role-icon--buyer .b-ambient {
  position: absolute;
  inset: -80px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 220,   0, 0.25) 0%,
    rgba(255, 255, 150, 0.1)  40%,
    transparent 70%);
  animation: buyer-ambient 2.2s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* 3 anillos de luz dorada con delay escalonado */
.role-icon--buyer .b-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(255, 214, 0, 0.9);
  pointer-events: none;
  z-index: 1;
}
.role-icon--buyer .b-ring-1 { animation: b-ring-expand 1.6s ease-out infinite 0s; }
.role-icon--buyer .b-ring-2 { animation: b-ring-expand 1.6s ease-out infinite 0.53s; }
.role-icon--buyer .b-ring-3 { animation: b-ring-expand 1.6s ease-out infinite 1.07s; }

/* ── Keyframes ── */
@keyframes buyer-breathe {
  0%, 100% { transform: scale(0.9) translateY(0);   }
  50%       { transform: scale(1.12) translateY(-3px); }
}

@keyframes buyer-glow {
  0%, 100% {
    filter:
      invert(1) sepia(1) saturate(5) hue-rotate(5deg)
      drop-shadow(0 0 12px rgba(255, 214,   0, 1))
      drop-shadow(0 0 35px rgba(255, 180,   0, 0.85))
      drop-shadow(0 0 70px rgba(255, 255, 150, 0.55));
  }
  50% {
    filter:
      invert(1) sepia(1) saturate(6) hue-rotate(5deg)
      drop-shadow(0 0 22px rgba(255, 220,   0, 1))
      drop-shadow(0 0 55px rgba(255, 180,   0, 1))
      drop-shadow(0 0 110px rgba(255, 255, 150, 0.75))
      drop-shadow(0 0 160px rgba(255, 200,   0, 0.3));
  }
}

@keyframes buyer-aura-inner {
  0%   { transform: scale(1);   opacity: 0.75; }
  100% { transform: scale(1.6); opacity: 1;    }
}

@keyframes buyer-aura-outer {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 1;   }
}

@keyframes buyer-ambient {
  0%, 100% { transform: scale(1);   opacity: 0.5; }
  50%       { transform: scale(1.3); opacity: 1;   }
}

@keyframes b-ring-expand {
  0%   { transform: translate(-50%,-50%) scale(0.8); opacity: 1; border-color: rgba(255, 220,   0, 1); }
  100% { transform: translate(-50%,-50%) scale(3.8); opacity: 0; border-color: rgba(255, 255, 150, 0); }
}

/* ══════════════════════════════════════════════════════
   VENDOR — Rojo fuego intenso, expansión amplificada
   ══════════════════════════════════════════════════════ */
.role-icon--vendor {
  position: relative;
  animation: vendor-breathe 2s ease-in-out infinite;
}

/* Imagen: contornos vivos con degradado de intensidad */
.role-icon--vendor svg,
.role-icon--vendor .role-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
  animation: vendor-glow 1.5s ease-in-out infinite;
}

/* Aura interna pulsante */
.role-icon--vendor::before {
  content: '';
  position: absolute;
  inset: -55px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,  60,   0, 0.85)  0%,
    rgba(255,  40,   0, 0.60) 22%,
    rgba(220,  10,   0, 0.35) 48%,
    rgba(150,   0,   0, 0.12) 70%,
    transparent 86%);
  animation: vendor-aura-inner 1.8s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}

/* Aura exterior expansiva */
.role-icon--vendor::after {
  content: '';
  position: absolute;
  inset: -130px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,  40,   0, 0.55)  0%,
    rgba(220,  10,   0, 0.32) 28%,
    rgba(160,   0,   0, 0.14) 55%,
    rgba( 80,   0,   0, 0.04) 74%,
    transparent 86%);
  animation: vendor-aura-outer 2s ease-in-out infinite alternate-reverse;
  z-index: 0;
  pointer-events: none;
}

/* Halo ambiental muy amplio */
.role-icon--vendor .v-ambient {
  position: absolute;
  inset: -180px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(210,  15,   0, 0.38)  0%,
    rgba(170,   0,   0, 0.20) 30%,
    rgba(100,   0,   0, 0.08) 58%,
    rgba( 50,   0,   0, 0.02) 74%,
    transparent 85%);
  animation: vendor-ambient 2.2s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* Anillos con expansión amplificada */
.role-icon--vendor .v-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 3px solid rgba(255, 60, 0, 1);
  pointer-events: none;
  z-index: 1;
}
.role-icon--vendor .v-ring-1 { animation: v-ring-expand 1.8s ease-out infinite 0s; }
.role-icon--vendor .v-ring-2 { animation: v-ring-expand 1.8s ease-out infinite 0.6s; }
.role-icon--vendor .v-ring-3 { animation: v-ring-expand 1.8s ease-out infinite 1.2s; }

/* ── Keyframes ── */
@keyframes vendor-breathe {
  0%, 100% { transform: scale(0.9) translateY(0);    }
  50%       { transform: scale(1.12) translateY(-3px); }
}

@keyframes vendor-glow {
  0%, 100% {
    filter:
      brightness(1.12) saturate(3) contrast(1.06)
      drop-shadow(0 0  1px rgba(200,  20,   0, 1))
      drop-shadow(0 0  4px rgba(230,  50,   0, 0.9))
      drop-shadow(0 0 16px rgba(255,  80,   0, 0.85))
      drop-shadow(0 0 45px rgba(220,  20,   0, 0.65))
      drop-shadow(0 0 90px rgba(180,   0,   0, 0.40));
  }
  50% {
    filter:
      brightness(1.14) saturate(3.5) contrast(1.08)
      drop-shadow(0 0  1px rgba(220,  30,   0, 1))
      drop-shadow(0 0  5px rgba(255,  70,   0, 1))
      drop-shadow(0 0 26px rgba(255,  90,   0, 1))
      drop-shadow(0 0 70px rgba(220,  20,   0, 0.80))
      drop-shadow(0 0 140px rgba(180,   0,   0, 0.45));
  }
}

@keyframes vendor-aura-inner {
  0%   { transform: scale(1);    opacity: 0.82; }
  100% { transform: scale(1.70); opacity: 1;    }
}

@keyframes vendor-aura-outer {
  0%   { transform: scale(1);    opacity: 0.68; }
  100% { transform: scale(2.20); opacity: 1;    }
}

@keyframes vendor-ambient {
  0%, 100% { transform: scale(1);    opacity: 0.60; }
  50%       { transform: scale(1.60); opacity: 1;    }
}

@keyframes v-ring-expand {
  0%   { transform: translate(-50%,-50%) scale(0.8); opacity: 1;    border-color: rgba(255,  60,   0, 1);    border-width: 3px; }
  30%  { opacity: 0.80; border-color: rgba(255,  80,  10, 0.80); }
  65%  { opacity: 0.38; border-color: rgba(210,  20,   0, 0.38); }
  100% { transform: translate(-50%,-50%) scale(7.5); opacity: 0;    border-color: rgba(180,   0,   0, 0);    border-width: 1px; }
}

.ai-user-menu__name {
  color: white;
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-user-menu__role {
  color: #9ca3af;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

/* Indicador de estado online */
.ai-user-menu__role::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 5px #22c55e;
}

/* Estilos específicos por rol - Verde para Vendedor, Blanco para Comprador */
.ai-user-menu__role[data-role="vendor"] {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.ai-user-menu__role[data-role="vendor"]::before {
  background: #22c55e;
  box-shadow: 0 0 5px #22c55e;
}

.ai-user-menu__role[data-role="buyer"] {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.ai-user-menu__role[data-role="buyer"]::before {
  background: #ffffff;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Secciones del menú */
.ai-user-menu__section {
  padding: 4px 6px;
}

.ai-user-menu__label {
  color: #9ca3af;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 14px 6px 14px;
  margin: 0;
  display: block;
  opacity: 0.9;
}

/* Items del menú */
.ai-user-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 2px 6px;
  color: #e5e7eb;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  background: transparent;
  width: calc(100% - 12px);
  position: relative;
  text-align: left;
}

.ai-user-menu__item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: white;
}

.ai-user-menu__item--danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

/* ============================================
   BOTÓN ELIMINAR CUENTA - Estilo Transparente Rojo
   ============================================ */
.ai-user-menu__item--delete {
  margin-top: 2px;
  margin-bottom: 2px;
  color: #ef4444;
  background: transparent;
  border: none;
  position: relative;
}

.ai-user-menu__item--delete-prominent {
  margin-top: 8px;
  margin-bottom: 2px;
  color: #ffffff;
  background: rgba(220, 38, 38, 0.1);
  border: 1.5px solid #dc2626 !important;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.ai-user-menu__item--delete-prominent:hover {
  background: #dc2626;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.ai-user-menu__item--delete-prominent .ai-user-menu__icon {
  color: #dc2626;
  transition: color 0.2s ease;
}

.ai-user-menu__item--delete-prominent:hover .ai-user-menu__icon {
  color: #ffffff;
}

.ai-user-menu__item--delete:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ff0000;
}

/* ============================================
   ESTILOS ADICIONALES PARA MODAL DE ELIMINACIÓN
   ============================================ */

.delete-account-icon--warning-pulsing {
  color: #f59e0b;
  animation: delete-warning-pulse 1.5s infinite;
  background: rgba(245, 158, 11, 0.1);
  border-radius: 50%;
  padding: 15px;
  width: 80px !important;
  height: 80px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

@keyframes delete-warning-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(245, 158, 11, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.delete-account-title--warning {
  color: #f59e0b !important;
  font-size: 20px !important;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.delete-account-text--highlight {
  background: rgba(245, 158, 11, 0.05);
  border-left: 4px solid #f59e0b;
  padding: 15px !important;
  color: #e5e7eb !important;
  line-height: 1.5;
}

.delete-account-actions--vertical {
  flex-direction: column !important;
  gap: 12px !important;
}

.delete-account-btn--confirm-final {
  background: #dc2626 !important;
  color: white !important;
  width: 100%;
  padding: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px;
  border: 2px solid #ef4444 !important;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
  animation: final-btn-shake 4s infinite;
}

@keyframes final-btn-shake {
  0%, 90%, 100% { transform: translateX(0); }
  92%, 96% { transform: translateX(-2px); }
  94%, 98% { transform: translateX(2px); }
}

.delete-account-btn--cancel-link {
  background: transparent !important;
  color: #9ca3af !important;
  text-decoration: underline;
  font-size: 13px !important;
  border: none !important;
}

.delete-account-btn--cancel-link:hover {
  color: white !important;
}

.ai-user-menu__item--delete .ai-user-menu__icon {
  color: #ef4444;
}

.ai-user-menu__item--delete:hover .ai-user-menu__icon {
  color: #ff0000;
}

/* Separador visual antes de Eliminar Cuenta */
.ai-user-menu__item--delete::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 12px;
  right: 12px;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   BOTÓN PUBLICAR ANUNCIO - Estilo Rojo Notorio Móvil
   ============================================ */
.ai-user-menu__item--publish-red {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(185, 28, 28, 0.05) 100%);
  border: 2px solid #dc2626;
  color: #ffffff;
  position: relative;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin-bottom: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.ai-user-menu__item--publish-red:hover {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(185, 28, 28, 0.1) 100%);
  border-color: #ff0000;
  color: #ffffff;
  transform: translateX(6px) scale(1.02);
  box-shadow: 0 6px 25px rgba(220, 38, 38, 0.4), 0 0 30px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.ai-user-menu__item--publish-red .ai-user-menu__icon {
  color: #ff6b6b;
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
  filter: drop-shadow(0 0 4px rgba(220, 38, 38, 0.6));
}

.ai-user-menu__item--publish-red:hover .ai-user-menu__icon {
  color: #ff0000;
  transform: scale(1.1) rotate(-5deg);
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.8));
}

.ai-user-menu__item--publish-red .ai-user-menu__icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

.publish-text-red {
  color: #fecaca;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  text-shadow: 0 0 10px rgba(220, 38, 38, 0.5);
  transition: all 0.3s ease;
  white-space: nowrap;
}

.ai-user-menu__item--publish-red:hover .publish-text-red {
  color: #ffffff;
  text-shadow: 0 0 15px rgba(255, 0, 0, 0.7), 0 0 30px rgba(220, 38, 38, 0.4);
}

.publish-badge-red {
  margin-left: auto;
  margin-right: 2px;
  font-size: 16px;
  animation: fire-pulse-badge 1.2s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(255, 69, 0, 0.6));
}

@keyframes fire-pulse-badge {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(255, 69, 0, 0.5)); }
  50% { transform: scale(1.25); filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.9)); }
}

/* Sección destacada para publicar */
.publish-section-highlight {
  padding: 2px 0;
  margin: 0;
}

/* Responsive para móvil */
@media screen and (max-width: 480px) {
  .publish-section-highlight {
    padding: 2px 0;
    margin: 0;
  }
  
  .ai-user-menu__item--publish-red {
    padding: 12px 1px 12px 8px;
    margin-bottom: 6px;
    border-width: 1.5px;
    box-sizing: border-box;
    width: calc(100% - 2px);
    margin-left: 1px;
    margin-right: 1px;
  }
  
  .ai-user-menu__item--publish-red .ai-user-menu__icon,
  .ai-user-menu__item--publish-red .ai-user-menu__icon svg {
    width: 20px;
    height: 20px;
  }
  
  .publish-text-red {
    font-size: 14px;
    letter-spacing: 0.2px;
  }
  
  .publish-badge-red {
    font-size: 14px;
    margin-left: 2px;
    margin-right: 0;
  }
  
  .ai-user-menu__item--publish-red:hover {
    transform: translateX(2px);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.35), 0 0 20px rgba(239, 68, 68, 0.2);
  }
}

/* Versión móvil más compacta */
@media screen and (max-width: 480px) {
  .ai-user-menu__item--delete {
    margin-top: 6px;
    margin-bottom: 2px;
    padding: 10px 10px;
    font-size: 12px;
  }
  
  .ai-user-menu__item--delete::after {
    left: 10px;
    right: 10px;
  }
}

/* ============================================
   MODAL ELIMINAR CUENTA
   ============================================ */
.delete-account-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.delete-account-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.delete-account-content {
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 32px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(239, 68, 68, 0.2);
  transform: scale(0.95);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.delete-account-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: transparent;
  border: 2px solid #ef4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ef4444;
}

.delete-account-icon svg {
  width: 32px;
  height: 32px;
}

.delete-account-title {
  color: white;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 12px 0;
}

.delete-account-text {
  color: #9ca3af;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.delete-account-actions {
  display: flex;
  gap: 12px;
}

.delete-account-btn {
  flex: 1;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.delete-account-btn--cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
}

.delete-account-btn--cancel:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.delete-account-btn--confirm {
  background: #dc2626;
  color: white;
}

.delete-account-btn--confirm:hover {
  background: #ff0000;
}

/* Password input */
.delete-account-password {
  margin-bottom: 24px;
  text-align: left;
}

.delete-account-password label {
  display: block;
  color: #9ca3af;
  font-size: 13px;
  margin-bottom: 8px;
}

.delete-account-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.delete-account-input-wrap input {
  width: 100%;
  padding: 12px 44px 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: white;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.delete-account-input-wrap input:focus {
  border-color: #ef4444;
}

.delete-account-input-wrap input::placeholder {
  color: #6b7280;
}

.delete-account-toggle-pw {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

.delete-account-toggle-pw:hover {
  color: #9ca3af;
}

/* Error message */
.delete-account-error {
  color: #ef4444;
  font-size: 13px;
  margin: 8px 0 0;
  padding: 0;
}

/* Icono exito */
.delete-account-icon--success {
  border-color: #22c55e;
  color: #22c55e;
}

/* Icono error */
.delete-account-icon--error {
  border-color: #ef4444;
  color: #ef4444;
}

/* Spinner */
.delete-account-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #ef4444;
  border-radius: 50%;
  animation: delete-spin 0.7s linear infinite;
}

@keyframes delete-spin {
  to { transform: rotate(360deg); }
}

/* Responsive modal */
@media screen and (max-width: 480px) {
  .delete-account-content {
    padding: 24px 20px;
    border-radius: 16px;
  }

  .delete-account-icon {
    width: 56px;
    height: 56px;
  }

  .delete-account-icon svg {
    width: 28px;
    height: 28px;
  }

  .delete-account-title {
    font-size: 20px;
  }

  .delete-account-text {
    font-size: 13px;
  }

  .delete-account-actions {
    flex-direction: column-reverse;
  }

  .delete-account-btn {
    padding: 14px 20px;
  }

  .delete-account-input-wrap input {
    padding: 14px 44px 14px 14px;
  }
}

/* ============================================
   MODAL ACTUALIZAR CUENTA
   ============================================ */
.update-account-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.update-account-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.update-account-content {
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  padding: 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: scale(0.95);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.update-account-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.update-account-icon svg {
  width: 32px;
  height: 32px;
}

.update-account-icon--error {
  border-color: #ef4444;
  color: #ef4444;
}

.update-account-title {
  color: white;
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 12px 0;
}

.update-account-text {
  color: #9ca3af;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 24px 0;
}

/* Form fields */
.update-account-field {
  margin-bottom: 16px;
  text-align: left;
}

.update-account-field label {
  display: block;
  color: #9ca3af;
  font-size: 13px;
  margin-bottom: 8px;
}

.update-account-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.update-account-input-wrap input {
  width: 100%;
  padding: 12px 14px 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: white;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.update-account-input-wrap input:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

.update-account-input-wrap input::placeholder {
  color: #6b7280;
}

/* Phone row with country selector */
.update-account-phone-row {
  display: flex;
  gap: 8px;
}

.update-account-country-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.2s;
  white-space: nowrap;
}

.update-account-country-btn:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.update-account-country-btn .country-flag {
  font-size: 18px;
}

.update-account-country-btn .country-code {
  font-size: 13px;
  color: #9ca3af;
}

.update-account-country-btn .chevron {
  font-size: 10px;
  color: #6b7280;
  margin-left: 2px;
}

.update-account-phone-row .update-account-input-wrap {
  flex: 1;
}

/* Country dropdown */
.update-account-country-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: rgba(20, 20, 20, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
  display: none;
}

.update-account-country-list.active {
  display: block;
}

.update-account-country-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  color: #d1d5db;
  transition: background 0.15s;
}

.update-account-country-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Toggle password visibility */
.update-account-toggle-pw {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

.update-account-toggle-pw:hover {
  color: #9ca3af;
}

/* Error message */
.update-account-error {
  color: #ff3333;
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0 0;
  padding: 10px 12px;
  background: none;
  border: 1px solid #ff3333;
  border-radius: 6px;
}

/* Validación inline por campo - esquema compartido FieldValidation (mismo que Actualizar Perfil) */
.update-account-input-wrap input.invalid,
.update-account-country-btn.invalid {
  border-color: #ff4d4d !important;
  box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.2);
}

.update-account-content .field-error-msg {
  display: none;
  color: #ff4d4d;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 6px;
  padding-left: 2px;
}

.update-account-content .field-error-msg.visible {
  display: block;
  animation: updateAccountFadeInError 0.3s ease;
}

.update-account-content .field-error-msg i {
  margin-right: 4px;
}

@keyframes updateAccountFadeInError {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Actions */
.update-account-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.update-account-btn {
  flex: 1;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  font-family: inherit;
}

.update-account-btn--cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #d1d5db;
}

.update-account-btn--cancel:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

.update-account-btn--confirm {
  background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
  color: white;
}

.update-account-btn--confirm:hover {
  box-shadow: 0 4px 16px rgba(255, 0, 0, 0.3);
}

.update-account-btn--confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Code inputs for PIN verification */
.update-account-code-inputs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.update-account-code-input {
  width: 52px;
  height: 56px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  color: white;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}

.update-account-code-input:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

/* Resend code */
.update-account-resend {
  color: #9ca3af;
  font-size: 13px;
  margin-top: 16px;
}

.update-account-resend a {
  color: #ef4444;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}

.update-account-resend a:hover {
  text-decoration: underline;
}

.update-account-resend .timer {
  color: #6b7280;
}

/* Method Selection (same as registro.css) */
.update-account-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 8px;
}

.update-account-method {
  padding: 18px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.update-account-method:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.update-account-method.selected {
  border-color: #ff0000;
  background: rgba(255, 0, 0, 0.06);
}

.update-account-method.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.update-account-method-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.update-account-method-name {
  font-size: 13px;
  font-weight: 600;
  color: white;
  margin-bottom: 4px;
}

.update-account-method-desc {
  font-size: 11px;
  color: #9ca3af;
}

/* Web Code Display (same as registro.css) */
.update-account-web-code {
  margin: 16px 0;
  text-align: center;
}

.update-account-web-code.hidden {
  display: none;
}

.update-account-web-code-digits {
  display: inline-block;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 10px;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.1);
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid rgba(74, 222, 128, 0.3);
  font-family: 'Courier New', monospace;
  animation: updateCodeAppear 0.4s ease-out;
}

@keyframes updateCodeAppear {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* Success Icon (same as registro.css) */
.update-account-success-icon {
  width: 80px;
  height: 80px;
  background: #22c55e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  color: white;
  margin: 0 auto 24px;
  animation: updateScaleIn 0.5s ease;
}

@keyframes updateScaleIn {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Auto-fill animation on code inputs */
.update-account-code-input.auto-filled {
  border-color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.1) !important;
  animation: updateInputPop 0.3s ease-out;
}

@keyframes updateInputPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Spinner */
.update-account-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: white;
  border-radius: 50%;
  animation: update-spin 0.7s linear infinite;
}

@keyframes update-spin {
  to { transform: rotate(360deg); }
}

/* Responsive */
@media screen and (max-width: 480px) {
  .update-account-content {
    padding: 24px 20px;
  }

  .update-account-icon {
    width: 56px;
    height: 56px;
  }

  .update-account-icon svg {
    width: 28px;
    height: 28px;
  }

  .update-account-title {
    font-size: 20px;
  }

  .update-account-text {
    font-size: 13px;
  }

  .update-account-actions {
    flex-direction: column-reverse;
  }

  .update-account-btn {
    padding: 14px 20px;
  }

  .update-account-code-input {
    width: 46px;
    height: 50px;
    font-size: 20px;
  }

  .update-account-methods {
    grid-template-columns: 1fr;
  }

  .update-account-web-code-digits {
    font-size: 28px;
    letter-spacing: 8px;
    padding: 10px 18px;
  }
}

.ai-user-menu__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.ai-user-menu__item:hover .ai-user-menu__icon {
  opacity: 1;
}

/* Badges */
.ai-user-menu__badge {
  margin-left: auto;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.ai-user-menu__badge--pro {
  background: #22c55e;
}

/* Divider */
.ai-user-menu__divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
  margin: 12px 14px;
  border: none;
}

/* Footer del menú */
.ai-user-menu__footer {
  padding: 8px;
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 6px;
}

.ai-user-menu__btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.ai-user-menu__btn--primary {
  background: #22c55e;
  color: white;
}

.ai-user-menu__btn--primary:hover {
  background: #16a34a;
}

.ai-user-menu__btn--secondary {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.ai-user-menu__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ============================================
   TEMAS DE COLOR DINÁMICOS
   ============================================ */
.ai-theme-claude .ai-user-menu__badge {
  background: rgba(255, 255, 255, 0.2);
}

.ai-theme-claude .ai-user-menu__badge--pro {
  background: #22c55e;
}

.ai-theme-grok .ai-user-menu__badge {
  background: rgba(34, 197, 94, 0.2);
}

.ai-theme-grok .ai-user-menu__badge--pro {
  background: #22c55e;
}

/* ============================================
   ANIMACIONES
   ============================================ */
@keyframes ai-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
}

.ai-avatar--pulse {
  animation: ai-pulse 2s infinite;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media screen and (max-width: 480px) {
  .ai-user-menu {
    min-width: 240px;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    right: -10px;
    left: auto;
    position: absolute;
    top: 100%;
    margin-top: 8px;
    border-radius: 12px;
  }

  .ai-user-menu::before {
    right: 20px;
    top: -7px;
  }

  .ai-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  /* En móviles, el puente no es necesario porque usamos click */
  .profile.ai-theme-claude::after,
  .profile.ai-theme-grok::after,
  .profile.ai-theme-gold::after,
  .profile.ai-theme-dark::after {
    display: none;
  }

  /* Header compacto en móvil */
  .ai-user-menu__header {
    padding: 12px 14px;
    gap: 10px;
  }

  .ai-user-menu__avatar {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }

  .ai-user-menu__name {
    font-size: 14px;
  }

  /* Rol más compacto en móvil */
  .ai-user-menu__role {
    font-size: 11px;
    gap: 4px;
  }

  .ai-user-menu__role::before {
    width: 5px;
    height: 5px;
  }

  /* Secciones más compactas */
  .ai-user-menu__section {
    padding: 4px 6px;
  }
  
  .ai-user-menu__label {
    font-size: 10px;
    padding: 6px 10px;
  }
  
  .ai-user-menu__item {
    padding: 8px 10px;
    font-size: 13px;
    gap: 10px;
  }
  
  .ai-user-menu__icon {
    width: 18px;
    height: 18px;
  }
  
  .ai-user-menu__icon svg {
    width: 16px;
    height: 16px;
  }
  
  /* Divider más compacto */
  .ai-user-menu__divider {
    margin: 4px 10px;
  }
  
  /* Footer más compacto */
  .ai-user-menu__footer {
    padding: 10px;
    gap: 6px;
  }
  
  .ai-user-menu__btn {
    padding: 7px 10px;
    font-size: 11px;
  }
  
  /* Badges más pequeños */
  .ai-user-menu__badge {
    font-size: 9px;
    padding: 1px 6px;
  }
}

@media screen and (max-width: 320px) {
  .ai-user-menu {
    min-width: calc(100vw - 20px);
    right: 10px;
    left: 10px;
  }
}

@media screen and (min-width: 766px) {
  .ai-avatar {
    width: 38px;
    height: 38px;
    font-size: 15px;
  }
  
  .ai-user-menu {
    right: 0;
  }
}

/* ============================================
   TOGGLE ONLINE STATUS - Menú Vendor
   ============================================ */
.ai-user-menu__item--online {
  cursor: default;
  user-select: none;
}

.ai-user-menu__item--online:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Icono WiFi con color dinámico */
.ai-online-icon {
  transition: color 0.3s ease, filter 0.3s ease;
  flex-shrink: 0;
}

.ai-online-icon--on {
  color: #22c55e;
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.5));
}

.ai-online-icon--off {
  color: #ef4444;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.4));
}

/* Etiqueta "Conectado / Desconectado" */
.ai-online-label {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.3s ease;
}

.ai-online-label--on {
  color: #22c55e;
}

.ai-online-label--off {
  color: #ef4444;
}

/* Switch */
.ai-online-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 21px;
  flex-shrink: 0;
  cursor: pointer;
}

.ai-online-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.ai-online-slider {
  position: absolute;
  inset: 0;
  background-color: #ef4444;
  border-radius: 21px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.ai-online-slider::before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.ai-online-switch input:checked + .ai-online-slider {
  background-color: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.ai-online-switch input:checked + .ai-online-slider::before {
  transform: translateX(17px);
}

@media screen and (max-width: 480px) {
  .ai-online-label {
    font-size: 12px;
  }

  .ai-online-switch {
    width: 34px;
    height: 19px;
  }

  .ai-online-slider::before {
    height: 13px;
    width: 13px;
  }

  .ai-online-switch input:checked + .ai-online-slider::before {
    transform: translateX(15px);
  }
}