/* ── CONTENEDOR DE AVATAR PREMIUM (GLOBAL) ── */
.avatar-premium-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    transition: all 0.3s ease;
    background: transparent !important;
    /* Evita que el contenido desborde en hover */
    overflow: visible;
}

/* El marco animado */
.avatar-premium-container .avatar-frame {
    position: absolute;
    top: 38%;
    left: 49%;
    transform: translate(-50%, -50%) scale(1.3) translateZ(0);
    width: 101%;
    height: 113%;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.3s ease;
    /* Evitar que el GIF se recorte de forma extraña */
    object-fit: contain;
    will-change: transform;
}

/* Imagen de usuario dentro del contenedor premium */
.avatar-premium-container .user-avatar {
    border-radius: 50%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.3s ease;
    border: 2px solid transparent;
    /* Clip para que el avatar no sobresalga del círculo en hover */
    clip-path: circle(50% at 50% 50%);
}

/* Variante para el perfil (más grande, ya tiene tamaños en perfil.css) */
.avatar-container.premium.avatar-premium-container .user-avatar {
    width: 73% !important;
    height: 71% !important;
    clip-path: circle(50% at 50% 50%);
}

/* Ajuste del marco para el perfil */
.avatar-container.premium.avatar-premium-container .avatar-frame {
    width: 100%;
    height: 110%;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
}

/* Clase para ocultar el marco si el usuario eligió "ninguno" */
.avatar-frame.frame-hidden {
    display: none !important;
}

/* ── EFECTO BORDE MORADO (CUANDO NO HAY MARCO) ── */

/* 1. Para usuarios premium que quitan el marco */
.avatar-frame.frame-hidden + .user-avatar {
    border: 2px solid #8b5cf6 !important;
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

/* 2. Para usuarios gratuitos en todo el aplicativo */
.free-user-avatar {
    border: 2px solid #8b5cf6 !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
    border-radius: 50%;
    object-fit: cover;
}

/* Hover: solo escala el avatar, el clip lo mantiene dentro del círculo */
.avatar-premium-container:hover .user-avatar {
    transform: scale(1.06);
}

/* ── MARCO CÓSMICO ADMIN ── */
@keyframes cosmic-pulse {
    0%   { filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.7))  drop-shadow(0 0 14px rgba(167, 139, 250, 0.4)); }
    50%  { filter: drop-shadow(0 0 14px rgba(139, 92, 246, 1))   drop-shadow(0 0 28px rgba(167, 139, 250, 0.7)); }
    100% { filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.7))  drop-shadow(0 0 14px rgba(167, 139, 250, 0.4)); }
}

.avatar-frame.admin-cosmic-frame {
    animation: cosmic-pulse 2.5s ease-in-out infinite !important;
    top: 38% !important;
    left: 51% !important;
    transform: translate(-50%, -50%) scale(1.35) translateZ(0) !important;
    width: 100% !important;
    height: 109% !important;
    object-fit: contain !important;
    will-change: transform, filter !important;
}

/* Versión en la página de perfil (más grande) */
.avatar-container.premium.avatar-premium-container .avatar-frame.admin-cosmic-frame {
    animation: cosmic-pulse 2.5s ease-in-out infinite !important;
    top: 47% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 110% !important;
    object-fit: contain !important;
}

/* Optimización para móviles: desactivar sombras pesadas que congelan el scroll */
@media (max-width: 768px) {
    .avatar-frame.admin-cosmic-frame {
        animation: none !important;
        filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.5)) !important;
    }
}