/*
 * Archivo: css/chat-style.css
 * Descripción: Hoja de estilos para la aplicación de chat.
 * Autor: KORVUS
 * Versión: 5.6 (FIXED - Grid Restaurado & Modals Unificados)
 */

/* --- 1. VARIABLES Y ESTILOS BASE --- */

* {
    box-sizing: border-box;
}

:root {
    /* Tema Oscuro (Neón KORVUS) por defecto */
    --bg-color: #050505;
    --panel-color: #111;
    --panel-secondary-color: #1a1a1a;
    --text-color: #F5F5F5;
    --text-secondary-color: #aaa;
    --border-color: #333;
    --accent-color: #00BFFF;
    --action-color: #FF00FF;
    --success-color: #39FF14;
    --glow-style: 0 0 8px var(--accent-color);
    --button-secondary-bg: #333;
    --button-secondary-text: #f1f1f1;
    --button-secondary-hover: #444;
    --accent-text-color: #fff;
    --input-bg-color: #222;

    /* Variables RGB para animaciones de resaltado */
    --accent-color-rgb: 0, 191, 255; /* RGB de #00BFFF */
    --action-color-rgb: 255, 0, 255; /* RGB de #FF00FF */

    /* Variables de Color Neón para Llamadas */
    --neon-pink: #ff00ff;
    --neon-blue: #00ffff;
    --neon-green: #00ff00;
    --call-bg-color: #121212;
    --control-bg-color: rgba(40, 40, 40, 0.8);

    /* Colores de texto para mensajes (para traducciones) */
    --message-received-text-color: #E0E0E0;
    --message-sent-text-color: #FFFFFF;

    /* Variables para animación de resaltado de mensajes */
    --primary-color: var(--accent-color);
    --background-color-light: var(--panel-color);
}

body.light-theme {
    /* Tema Claro */
    --bg-color: #f0f4f7;
    --panel-color: #ffffff;
    --panel-secondary-color: #fdfdfd;
    --text-color: #000000;
    --text-secondary-color: #6d6d6d;
    --border-color: #e0e0e0;
    --accent-color: #3390ec;
    --action-color: #d94295;
    --success-color: #31a924;
    --glow-style: 0 4px 15px rgba(0, 0, 0, 0.1);
    --button-secondary-bg: #e0e0e0;
    --button-secondary-text: #333;
    --button-secondary-hover: #d0d0d0;
    --accent-text-color: #fff;
    --input-bg-color: #f0f0f0;
    --accent-hover-color: #2a7abc;

    /* Variables RGB para animaciones de resaltado */
    --accent-color-rgb: 51, 144, 236;
    --action-color-rgb: 217, 66, 149;

    /* Colores de texto para mensajes */
    --message-received-text-color: #333333;
    --message-sent-text-color: #FFFFFF;

    /* Variables para animación */
    --primary-color: var(--accent-color);
    --background-color-light: var(--panel-color);
}

body,
html {
    height: 100%;
    margin: 0;
    font-family: 'Segoe UI', system-ui;
    background-color: var(--bg-color);
    color: var(--text-color);
}




/* --- 2. ESTRUCTURA PRINCIPAL DE LA APP --- */

.app-container {
    display: flex;
    height: 100vh;
    /* Agrega esto para asegurar transiciones suaves */
    transition: all 0.3s ease;
}

/* NOTA: El modo streaming se maneja en la Sección 30 (Fix Definitivo) */

.nav-bar {
    width: 70px;
    background-color: var(--panel-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    border-right: 1px solid var(--border-color);
    z-index: 10;
}

.nav-icon {
    font-size: 28px;
    padding: 15px 0;
    cursor: pointer;
    color: var(--text-secondary-color);
    transition: all 0.2s ease;
}

.nav-icon:hover {
    color: var(--accent-color);
}

.nav-icon.active {
    color: var(--accent-color);
}

body.dark-theme .nav-icon.active {
    text-shadow: var(--glow-style);
}

.chat-list-panel {
    width: 30%;
    max-width: 400px;
    background-color: var(--panel-color);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
}

.conversation-panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-color);
    position: relative;
}

.placeholder-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.placeholder-text {
    background-color: var(--panel-color);
    padding: 15px 25px;
    border-radius: 20px;
    color: var(--text-secondary-color);
}


/* --- 3. PANEL DE LISTA DE CHATS --- */

.chat-list-header {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-list-header .search-icon {
    color: var(--text-secondary-color);
    cursor: pointer;
}

.search-bar {
    width: 100%;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 8px 15px;
    color: var(--text-color);
}

.chat-list {
    overflow-y: auto;
    flex-grow: 1;
}

/* CIRUGÍA: Estilos para el Skeleton de carga de chats */
.skeleton-item {
    border-bottom: 1px solid var(--border-color);
    padding: 10px 15px;
    display: flex;
    align-items: center;
}

.skeleton-item .avatar {
    background-color: var(--panel-secondary-color);
    animation: skeleton-pulse 1.5s infinite;
    border: none !important;
}

.skeleton-item .chat-details div {
    height: 12px;
    margin-bottom: 8px;
    background-color: var(--panel-secondary-color);
    animation: skeleton-pulse 1.5s infinite;
    border-radius: 4px;
}

/* =========================================================
   BLOQUE ACTUALIZADO: ITEM DE CHAT (3 LÍNEAS)
   ========================================================= */

.chat-item {
    display: flex;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    position: relative;
    z-index: 1;
    
    /* CAMBIOS PARA 3 LÍNEAS: */
    height: auto !important; /* Dejar que crezca según el contenido */
    min-height: 8px;        /* Un poco más alto que antes */
    padding: 10px 15px;      /* Más espacio interno */
    align-items: flex-start; /* Alinear todo arriba, no al centro */
}

.chat-item.active {
    background-color: var(--accent-color);
}

.chat-item.active .chat-name,
.chat-item.active .chat-timestamp,
.chat-item.active .chat-preview-line span,
.chat-item.active .chat-status-line { /* Agregamos status-line al active */
    color: white;
}

/* 1. Ajuste del Avatar: Quitamos el overflow hidden de aquí para que el borde se vea */
.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #1a1a1a; /* Fondo oscuro inicial */
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
    font-family: 'Orbitron', sans-serif;
    flex-shrink: 0;
    margin-top: 5px;
    position: relative;
    box-sizing: border-box; /* Importante para que el borde no sume tamaño */
}

/* 2. La imagen: Ella sí lleva el recorte redondo */
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%; /* El recorte se lo hace la imagen a sí misma */
    position: absolute;
    top: 0;
    left: 0;
    border: none;
}

/* 3. Evitar recuadros blancos mientras carga */
.avatar-img:not([src]), 
.avatar-img[src=""], 
.avatar-img[src="null"] {
    display: none !important;
}

/* ================================================================= */
/* --- REPASO DE LOS COLORES DE ESTADO (Para que no se borren) --- */
/* ================================================================= */

/* Forzamos que el borde sea visible sobre el fondo oscuro */
.avatar.status-online  { border: 3px solid #4CAF50 !important; } /* Verde */
.avatar.status-busy    { border: 3px solid #F44336 !important; } /* Rojo */
.avatar.status-away    { border: 3px solid #FFC107 !important; } /* Amarillo */
.avatar.status-offline { border: 3px solid #9E9E9E !important; } /* Gris */

/* Especial para Grupos: Borde neutro o sin borde si prefieres */
.avatar.status-group { 
    border: 2px solid var(--border-color) !important; 
}

.chat-details {
    flex-grow: 1;
    overflow: hidden;
    /* CAMBIOS: Flex column para apilar las 3 líneas */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 65px; 
}

/* LÍNEA 1: Nombre y Fecha */
.chat-header-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

/* LÍNEA 2 (NUEVA): Frase de Estado / Marquesina */
.chat-status-line {
    margin-bottom: 4px; /* Separación con el mensaje de abajo */
    font-size: 0.8rem;
    color: var(--accent-color); 
    height: 18px; 
    line-height: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* LÍNEA 3: Último mensaje */
.chat-preview-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0; 
    font-size: 0.85rem;
    color: var(--text-secondary-color);
}

.chat-name {
    font-weight: bold;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
}

.chat-preview-line span,
.chat-timestamp {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-timestamp {
    font-size: 0.75em;
    color: #888;
    margin-left: auto;
    flex-shrink: 0;
}

.unread-badge {
    background-color: var(--success-color);
    color: white;
    font-weight: bold;
    font-size: 0.8rem;
    border-radius: 10px;
    padding: 2px 8px;
    margin-left: 5px;
}


/* --- 4. PANEL DE CONVERSACIÓN --- */

/* ======================================================
   ESTILOS PARA MENSAJES FIJADOS (BARRA SUPERIOR)
   ====================================================== */

/* --- Contenedor Principal de la Barra Superior --- */
.pinned-messages-area {
    position: sticky; /* Se queda fijo arriba */
    top: 60px; /* Ajusta según la altura de tu cabecera principal */
    z-index: 9; /* Debe estar por encima del contenido pero debajo de modales */
    background: var(--panel-secondary-color);
    border-bottom: 1px solid var(--border-color);
    padding: 8px 15px;
    display: none; /* Se muestra con JS cuando hay mensajes */
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    overflow: visible;
}

body.dark-theme .pinned-messages-area {
    background: var(--panel-secondary-color);
    border-bottom-color: var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* --- Contenedor Interno (Para Flexbox) --- */
.pinned-messages-container {
    display: flex;
    align-items: center;
    width: 100%;
}

/* --- Item Individual de Mensaje Fijado --- */
.pinned-message-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* --- Contenido Clickeable del Mensaje (Icono + Texto) --- */
.pinned-message-content {
    display: flex;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
    margin-right: 10px;
}

/* --- Icono Principal del Mensaje Fijado --- */
.pinned-icon {
    color: var(--accent-color);
    margin-right: 10px;
    font-size: 20px;
}
body.dark-theme .pinned-icon {
     color: var(--accent-color);
}

/* --- Contenedor del Texto (Remitente + Vista Previa) --- */
.pinned-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* --- Nombre del Remitente --- */
.pinned-sender {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--text-color);
    margin-bottom: 2px;
}
body.dark-theme .pinned-sender {
    color: var(--text-color);
}

/* --- Vista Previa del Contenido --- */
.pinned-preview {
    font-size: 0.85em;
    color: var(--text-secondary-color);
    display: flex;
    align-items: center;
}
body.dark-theme .pinned-preview {
    color: var(--text-secondary-color);
}
.pinned-preview .material-icons {
    font-size: 16px;
    margin-right: 4px;
    vertical-align: middle;
}

/* --- Botón para Cerrar/Desfijar --- */
.pinned-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.pinned-close-btn i.material-icons {
    font-size: 18px;
    color: var(--text-secondary-color);
}
body.dark-theme .pinned-close-btn i.material-icons {
    color: var(--text-secondary-color);
}

.pinned-close-btn:hover {
    background-color: var(--button-secondary-hover);
}
body.dark-theme .pinned-close-btn:hover {
    background-color: var(--button-secondary-hover);
}

/* --- Estilos para el Menú Contextual (Añadir la opción) --- */
.pin-option i.material-icons {
    margin-right: 10px;
}
.pin-option span {
    vertical-align: middle;
}

/* --- Indicador Visual en el Mensaje Original --- */
.pinned-indicator {
    display: none;
    align-items: center;
    font-size: 0.75em;
    color: var(--text-secondary-color);
    margin-right: 5px;
}
body.dark-theme .pinned-indicator {
    color: var(--text-secondary-color);
}
.pinned-indicator i.material-icons {
    font-size: 14px;
    margin-right: 3px;
    vertical-align: middle;
}

/* ============================================ 
   EFECTO ULTRA MEGA VISIBLE "AQUÍ ESTOY" 
   ============================================ */
.highlight-message {
    position: relative;
    animation: 
        megaFlash 1s ease-in-out,
        glowPulse 2s ease-in-out;
    background: radial-gradient(
        ellipse at center,
        rgba(74, 163, 240, 0.5) 0%,
        rgba(74, 163, 240, 0.3) 50%,
        rgba(74, 163, 240, 0.1) 100%
    ) !important;
    border: 4px solid #4AA3F0 !important;
    border-radius: 10px !important;
    padding: 12px !important;
    box-shadow: 
        0 0 50px rgba(74, 163, 240, 1),
        0 0 80px rgba(74, 163, 240, 0.6),
        inset 0 0 30px rgba(74, 163, 240, 0.4),
        0 10px 40px rgba(0, 0, 0, 0.3);
    transform: scale(1.03);
    z-index: 100;
}

/* Flash inicial blanco */
@keyframes megaFlash {
    0% {
        background: rgba(255, 255, 255, 0);
        transform: scale(0.98);
    }
    20% {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 
            0 0 80px rgba(255, 255, 255, 1),
            0 0 120px rgba(74, 163, 240, 1);
        transform: scale(1.06);
    }
    40% {
        background: rgba(74, 163, 240, 0.6);
        transform: scale(1.03);
    }
}

/* Pulso continuo de brillo */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 
            0 0 30px rgba(74, 163, 240, 0.8),
            0 10px 30px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 
            0 0 60px rgba(74, 163, 240, 1),
            0 0 100px rgba(74, 163, 240, 0.8),
            inset 0 0 40px rgba(74, 163, 240, 0.6),
            0 15px 50px rgba(0, 0, 0, 0.4);
    }
}

/* Indicador "AQUÍ ESTOY" flotante */
.highlight-message::before {
    content: '👉 AQUÍ ESTOY';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background: linear-gradient(135deg, #4AA3F0, #2E8FDF);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    box-shadow: 
        0 5px 20px rgba(74, 163, 240, 0.8),
        0 0 30px rgba(74, 163, 240, 0.6);
    animation: popLabel 2.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    white-space: nowrap;
    z-index: 101;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

@keyframes popLabel {
    0% {
        top: -20px;
        transform: translateX(-50%) scale(0) rotate(-10deg);
        opacity: 0;
    }
    15% {
        top: -45px;
        transform: translateX(-50%) scale(1.2) rotate(5deg);
        opacity: 1;
    }
    25%, 75% {
        top: -40px;
        transform: translateX(-50%) scale(1) rotate(0deg);
        opacity: 1;
    }
    90% {
        top: -40px;
        transform: translateX(-50%) scale(0.9) rotate(-5deg);
        opacity: 0.7;
    }
    100% {
        top: -30px;
        transform: translateX(-50%) scale(0) rotate(10deg);
        opacity: 0;
    }
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.live-dot-blink {
    height: 10px; width: 10px; background-color: white;
    border-radius: 50%; display: inline-block;
    animation: blink 1s infinite;
}
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0.2; } 100% { opacity: 1; } }

/* Flecha parpadeante lateral */
.highlight-message::after {
    content: '➤';
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    color: #4AA3F0;
    animation: arrowBounce 1s ease-in-out infinite;
    text-shadow: 0 0 15px rgba(74, 163, 240, 1);
}

@keyframes arrowBounce {
    0%, 100% { 
        left: -40px;
        opacity: 1;
        filter: drop-shadow(0 0 5px rgba(74, 163, 240, 1));
    }
    50% { 
        left: -25px;
        opacity: 0.6;
        filter: drop-shadow(0 0 15px rgba(74, 163, 240, 1));
    }
}

/* --- Ajustes Responsivos (Opcional) --- */
@media (max-width: 768px) {
    .pinned-messages-area {
        top: 50px;
        padding: 6px 10px;
    }
    .pinned-icon {
        margin-right: 8px;
    }
    .pinned-sender {
        font-size: 0.85em;
    }
    .pinned-preview {
        font-size: 0.8em;
    }
    .pinned-close-btn i.material-icons {
        font-size: 16px;
    }
}

/* 4.1 Encabezado */
.conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--panel-color);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.header-info {
    flex-grow: 1;
    min-width: 0;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

/* Efecto al pasar el mouse por encima */
.header-info:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Ajuste para tema claro si lo usas */
body.light-theme .header-info:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.header-info h5 {
    margin: 0;
    font-family: 'Orbitron';
    color: var(--text-color);
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-info p {
    font-size: 0.8rem;
    color: var(--success-color);
    margin: 2px 0 0 0;
}

body.dark-theme .header-info p {
    text-shadow: 0 0 5px var(--success-color), 0 0 8px var(--success-color);
}

.conversation-header .header-icons {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary-color);
}

.conversation-header .header-icons .material-icons {
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.conversation-header .header-icons .material-icons:hover {
    background-color: var(--button-secondary-hover);
}

.conversation-header .header-icons .icon-btn {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* 4.2 Área de Mensajes */
.message-area {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    padding-right: 12px;
    display: flex;
    flex-direction: column;
}

.date-header {
    text-align: center;
    margin: 15px 0;
    font-weight: bold;
    color: #888;
    background-color: rgba(42, 42, 42, 0.8);
    padding: 5px 10px;
    border-radius: 10px;
    /* FIX: Cambiado a align-self para centrar en flex column */
    align-self: center;
    font-size: 0.8em;
}

.mensaje {
    padding: 8px 12px;
    border-radius: 18px;
    margin-bottom: 10px;
    max-width: 75%;
    line-height: 1.4;
    font-family: 'Segoe UI', system-ui;
    font-size: 0.95rem;
    
    /* FIX: width: fit-content hace que la burbuja se ajuste al texto */
    width: fit-content;
    display: flex;
    flex-direction: column;
    word-break: break-word;
    text-align: left;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0; /* Evita que se encoja */
}

.mensaje.recibido {
    background-color: var(--panel-color);
    color: var(--text-color);
    align-self: flex-start;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.mensaje.enviado {
    background-color: var(--accent-color);
    color: white;
    align-self: flex-end;
}

/* --- [FIX DE COLOR] CORRECCIÓN PARA MENSAJES ENVIADOS EN MODO OSCURO --- */
body.dark-theme .mensaje.enviado {
    /* Mantener el gradiente neon original del tema */
    background: linear-gradient(90deg, var(--action-color), #8A2BE2);
    box-shadow: 0 0 8px var(--action-color);
    
    /* FIX: Forzar texto blanco y añadir sombra para contraste */
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Asegurar que los enlaces dentro de la burbuja también sean blancos */
body.dark-theme .mensaje.enviado a {
    color: #ffffff !important;
    text-decoration: underline;
}

.media-title {
    font-size: 0.85em;
    font-weight: 600;
    color: var(--text-color);
    padding: 4px 8px;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
    display: block;
}

.mensaje.enviado .media-title {
    color: white;
}

.mensaje.mensaje-audio, .mensaje.mensaje-video {
    padding: 8px 12px;
}

.mensaje .sent-image {
    max-width: 200px;
    max-height: 300px;
    width: auto;
    height: auto;
    border-radius: 8px;
    display: block;
    cursor: pointer;
    margin-top: 5px;
}

.mensaje .sent-video {
    width: 100%;
    max-width: 250px;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background-color: #000;
    border-radius: 8px;
    display: block;
}

.mensaje.mensaje-con-imagen {
    padding: 5px;
    background: transparent;
    box-shadow: none;
    max-width: 260px;
}

.image-caption {
    padding: 5px 10px 0 10px;
    margin: 0;
    font-size: 0.9em;
    line-height: 1.4;
}

.mensaje.mensaje-sticker {
    background: transparent;
    padding: 0;
    box-shadow: none;
    max-width: fit-content;
    overflow: visible;
    display: block;
    margin-bottom: 10px;
}

.mensaje-sticker img {
    width: 120px;
    height: 120px;
    display: block;
    border-radius: 50%;
}

body.dark-theme .mensaje.enviado.mensaje-sticker {
    background: transparent;
    box-shadow: none;
}

.message-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 5px;
    float: right;
    clear: both;
}

.message-time {
    font-size: 0.75em;
    color: var(--text-secondary-color);
}


.mensaje.enviado .message-time {
    color: rgba(255, 255, 255, 0.9);
}


.message-status {
    font-size: 1rem;
    color: var(--text-secondary-color);
    margin-left: 5px;
    line-height: 1;
}

.mensaje.enviado .message-status {
    color: rgba(255, 255, 255, 0.9);
}

.mensaje.enviado .message-status.visto {
    color: var(--accent-color);
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.mensaje.recibido .message-meta {
    justify-content: flex-start;
}

/* 4.3 Pie de Página (Input de Mensaje) */
.conversation-footer {
    position: relative;
    background-color: var(--panel-color);
    flex-shrink: 0;
    border-top: 1px solid var(--border-color);
    padding: 8px 12px;
}

.message-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
}

.message-input-container {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    background-color: var(--input-bg-color);
    border-radius: 24px;
    padding: 4px 8px;
}

.message-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 16px;
    padding: 10px 5px;
    line-height: 1.4;
    resize: none;
    max-height: 120px;
    overflow-y: auto;
    word-wrap: break-word;
    min-height: 22px;
    box-sizing: border-box;
}

.message-input:focus {
    outline: none;
}

.message-input:empty::before {
    content: attr(placeholder);
    color: var(--text-secondary-color);
    pointer-events: none;
    display: block;
}

.conversation-footer .icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary-color);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.conversation-footer .icon-btn:hover {
    background-color: var(--button-secondary-hover);
}

.voice-send-btn {
    background-color: var(--accent-color);
    color: var(--accent-text-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.voice-send-btn .material-icons {
    font-size: 24px;
}

.emoji-btn {
    flex-shrink: 0;
}

/* 4.4 Paneles Emergentes del Footer */
.sticker-panel,
.attachment-menu {
    position: absolute;
    bottom: 65px;
    left: 12px;
    right: 12px;
    background-color: #2c2f33;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    z-index: 50;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.sticker-panel.visible,
.attachment-menu.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* 🔥 BLOQUEO TOTAL DEL MENÚ DURANTE STREAMING */
body.live-mode-active .attachment-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.live-mode-active .attachment-menu.visible {
    display: none !important;
}

/* 🔥 BOTÓN VISIBLE PERO CON FEEDBACK VISUAL */
body.live-mode-active #toggle-attachment-menu,
body.live-mode-active .attachment-btn {
    opacity: 1 !important; /* ✅ Ahora sí visible */
    cursor: pointer !important; /* ✅ Cursor normal */
    pointer-events: auto !important; /* ✅ Permite clics */
}

/* 🔥 FEEDBACK VISUAL AL HACER HOVER */
body.live-mode-active #toggle-attachment-menu:hover,
body.live-mode-active .attachment-btn:hover {
    background-color: rgba(255, 71, 87, 0.15) !important; /* Rojo suave */
    color: #ff4757 !important;
}
.emoji-panel,
.wink-panel {
    width: 100%;
    height: 100%;
    background-color: transparent;
    box-shadow: none;
    border-radius: 0;
    z-index: auto;
    overflow: hidden;
    transition: none;
}

#emoji-panel emoji-picker {
    width: 100%;
    height: 100%;
    --background: transparent;
    --category-label-background: transparent;
    --border-radius: 12px;
    --outline: none;
    --indicator-color: #0a84ff;
    --hover-background: rgba(255, 255, 255, 0.1);
    --button-size: 38px;
}

.attachment-menu {
    padding: 10px;
}

.attachment-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    text-align: center;
}

.attachment-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #b0b3b8;
    font-size: 12px;
}

.attachment-item i {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    transition: transform 0.2s;
    color: white;
}

.attachment-item:hover i {
    transform: scale(1.1);
}

.attachment-item[data-type="gallery"] i,
.attachment-item[data-type="document"] i {
    background-color: #5292E4;
}

.attachment-item[data-type="camera"] i,
.attachment-item[data-type="location"] i {
    background-color: #31C35B;
}

.attachment-item[data-type="audio"] i,
.attachment-item[data-type="contact"] i {
    background-color: #E2602F;
}


/* --- 5. MENÚ LATERAL DESLIZANTE --- */

.slide-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100%;
    background-color: var(--panel-color);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}

.slide-menu.visible {
    transform: translateX(0);
}

/* --- CABECERA DEL PERFIL EN SIDEBAR (MEJORADO) --- */
.user-profile-header {
    display: flex;
    align-items: center;
    padding: 25px 20px; /* Más amplitud */
    background-color: var(--panel-secondary-color);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.3s ease;
    gap: 15px; /* Separación perfecta */
}

.user-profile-header:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Efecto hover */
}

/* La foto del avatar en sidebar */
.user-profile-header .avatar-circle {
    width: 65px; /* Tamaño grande para el Kapi */
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    /* ESTILOS APLICADOS PARA EL AVATAR: Fondo rosado intenso */
    background-color: #ff00cc; /* El color rosado intenso */
    border: 2px solid #ff00cc; /* Borde del mismo color para resaltar */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* El contenedor del texto */
.user-info-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* El Nombre (Jomar Perez) */
.user-info-text h4 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    /* ESTILOS APLICADOS PARA EL NOMBRE: Blanco con resplandor */
    color: #ffffff; /* Blanco base */
    font-size: 1.1rem; /* Letra más grande y legible */
    font-weight: 600;
    /* Efecto de brillo rosado alrededor de las letras blancas */
    text-shadow: 0px 0px 8px rgba(255, 0, 204, 0.6); 
    opacity: 1; /* Esto quita lo "opaco" */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px; /* Mantener el margen inferior para separación */
}

/* El Usuario (@elieli5) */
.user-info-text span {
    /* ESTILOS APLICADOS PARA EL USUARIO: Verde lima brillante */
    font-size: 0.9rem;
    color: #00ff00; /* Verde lima brillante estilo hacker/matrix */
    font-weight: 400;
    opacity: 1; /* Asegura que no se vea gris */
    margin-top: 2px; /* Añadir margen superior para separación */
}

.account-options {
    display: none; /* Esto es lo importante: oculto al inicio */
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--panel-secondary-color);
    border-bottom: 1px solid var(--border-color);
}


.menu-options {
    list-style: none;
    padding: 10px 0;
    margin: 0;
    flex-grow: 1;
    overflow-y: auto;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.menu-item:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

body.dark-theme .menu-item:hover {
    background-color: #252525;
}

.menu-item .material-icons {
    margin-right: 25px;
    color: var(--text-secondary-color);
}

.menu-item span {
    font-size: 1rem;
    color: var(--text-color);
}

.menu-footer {
    padding: 15px 20px;
    font-size: 0.8rem;
    color: var(--text-secondary-color);
}

.toggle-switch {
    margin-left: auto;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 22px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--accent-color);
}

input:checked+.slider:before {
    transform: translateX(18px);
}


/* ================================================================= */
/* --- [SECCIÓN 6] MODALES (ESTILOS INTERNOS Y ESPECÍFICOS) --- */
/* NOTA: La estructura y posicionamiento (Backdrop/Generic) se manejan en la SECCIÓN 19 */
/* ================================================================= */

/* --- BLOQUE DESACTIVADO (Controlado por Sección 19) --- */
/*



/* --- ESTILOS INTERNOS (Headers, Footers, Botones) - MANTENER ACTIVO --- */

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.modal-header h3 {
    margin: 0;
    font-family: 'Orbitron';
    color: var(--accent-color);
    font-size: 1.1rem;
}

.modal-header .material-icons {
    cursor: pointer;
    color: var(--text-secondary-color);
    transition: color 0.2s;
    margin-left: 10px;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex-grow: 1;
}

.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.modal-btn {
    background-color: transparent;
    border: none;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
}

.modal-btn-primary {
    color: var(--action-color);
}

/* --- MODAL DE PREVISUALIZACIÓN DE ARCHIVOS --- */

.modal-content.preview-modal {
    background-color: var(--panel-color);
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
    width: 90%;
    max-width: 740px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.preview-modal .modal-header h5 {
    margin: 0;
    font-family: 'Orbitron';
    color: var(--accent-color);
    font-size: 1.1rem;
}

.preview-modal .modal-body {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-modal .modal-footer {
    justify-content: initial;
    align-items: center;
    gap: 10px;
}

.preview-modal .modal-footer .message-input {
    flex-grow: 1;
    padding: 10px 15px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: 0.9rem;
}

.preview-modal .modal-footer .modal-btn {
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: background-color 0.2s ease;
}

.preview-modal .modal-footer .modal-btn.cancel {
    background-color: var(--button-secondary-bg);
    color: var(--button-secondary-text);
}

.preview-modal .modal-footer .modal-btn.cancel:hover {
    background-color: var(--button-secondary-hover);
}

.preview-modal .modal-footer .modal-btn.send {
    background-color: var(--accent-color);
    color: var(--accent-text-color);
}

.preview-modal .modal-footer .modal-btn.send:hover {
    background-color: var(--accent-hover-color);
}

/* Estilos para el modal de previsualización */
#preview-content-container {
    border: 1px dashed var(--border-color);
    transition: all 0.3s ease;
}

#preview-caption:focus {
    border-color: var(--accent-color);
    outline: none;
}


.image-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    display: block;
}

.preview-modal .modal-body .audio-preview,
.preview-modal .modal-body .video-preview {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}

.file-preview-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    height: 100%;
}

.file-preview-container i.material-icons {
    font-size: 80px;
    color: #5C6BC0;
}

.file-preview-container .file-name {
    margin-top: 15px;
    font-size: 1rem;
    color: var(--text-color);
    word-break: break-all;
}

/* --- OVERLAY DE IMAGEN INDEPENDIENTE (ZOOM) --- */
/* Este bloque se mantiene activo porque es un sistema separado al modal genérico */

#image-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#image-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

#image-modal-content {
    max-width: 90vw;
    max-height: 90vh;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    background-color: #222;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

#image-modal-overlay.visible #image-modal-content {
    transform: scale(1);
}

#image-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 36px;
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
}

#image-modal-close:hover {
    transform: scale(1.2) rotate(90deg);
    color: var(--action-color);
    background-color: rgba(255, 255, 255, 0.2);
}

/* --- MODALES ESPECÍFICOS (UBICACIÓN Y CONTACTOS) --- */

.location-modal-content,
.contact-modal-content {
    width: 400px;
    height: 550px;
    max-width: 95vw;
    max-height: 95vh;
}

.location-modal-content .modal-body {
    padding: 0;
    display: flex;
    flex-direction: column;
}

#map-canvas {
    width: 100%;
    height: 300px;
    background-color: #333;
    border-bottom: 1px solid var(--border-color);
}

.location-options {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
    overflow-y: auto;
}

.location-option-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.location-option-item:hover {
    background-color: var(--button-secondary-hover);
}

.location-option-item i {
    font-size: 24px;
    color: var(--accent-color);
}

.location-option-item span {
    color: var(--text-color);
    font-size: 0.95rem;
}

.location-option-item p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary-color);
}

.location-option-item.current-location i {
    color: var(--success-color);
}

.location-option-item.live-location i {
    color: var(--action-color);
}

.location-nearby-header {
    font-size: 0.85rem;
    color: var(--text-secondary-color);
    margin-top: 10px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.contact-modal-content .modal-body {
    padding: 10px 0;
    display: flex;
    flex-direction: column;
}

.contact-search-input {
    width: calc(100% - 40px);
    margin: 0 20px 15px 20px;
    padding: 10px 15px;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-color);
    color: var(--text-color);
    font-size: 0.95rem;
}

.contact-search-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 5px var(--accent-color);
}

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    overflow-y: auto;
}

.contact-list-item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--border-color);
}

.contact-list-item:last-child {
    border-bottom: none;
}

.contact-list-item:hover {
    background-color: var(--button-secondary-hover);
}

.contact-list-item .avatar {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
    margin-right: 15px;
}

.contact-list-item .contact-info {
    flex-grow: 1;
}

.contact-list-item .contact-name {
    font-weight: bold;
    color: var(--text-color);
}

.contact-list-item .contact-phone {
    font-size: 0.85em;
    color: var(--text-secondary-color);
}

.contact-list-item input[type="checkbox"] {
    margin-left: auto;
    accent-color: var(--accent-color);
    width: 18px;
    height: 18px;
}

/* 6.4 Placeholder de Subida y Previsualización */
.preview-image-container {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
}

.preview-image-container .image-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.uploading-placeholder {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 300px;
    position: relative;
    overflow: hidden;
}

.uploading-placeholder .file-icon {
    font-size: 36px;
    color: #999;
}

.uploading-placeholder .file-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.uploading-placeholder .file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9em;
}

.uploading-placeholder .upload-status {
    font-size: 0.8em;
    color: #aaa;
}

.uploading-placeholder .progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background-color: #8A2BE2;
    transition: width 0.2s ease-in-out;
}

.uploading-placeholder .cancel-upload {
    margin-left: auto;
    cursor: pointer;
    color: #ccc;
}

.uploading-placeholder .cancel-upload:hover {
    color: white;
}
/* --- 7. COMPONENTES GENÉRICOS (Listas, Perfil, etc.) --- */

.profile-summary {
    text-align: center;
    margin-bottom: 25px;
}

.profile-pic {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--action-color);
    margin: 0 auto 15px auto;
    border: 2px solid var(--action-color);
}

body.dark-theme .profile-pic {
    box-shadow: 0 0 10px var(--action-color);
}

.profile-name {
    font-size: 1.2rem;
    font-weight: bold;
}

.profile-status {
    font-size: 0.9rem;
    color: var(--success-color);
}

body.dark-theme .profile-status {
    text-shadow: 0 0 5px var(--success-color), 0 0 8px var(--success-color);
}

/* =========================================================
   AQUÍ PEGAS TU NUEVO CÓDIGO (BLOQUE AGREGADO)
   ========================================================= */

/* Selector de Estado Estilo Neón */
.profile-status-select {
    background-color: transparent;
    color: var(--text-secondary-color);
    border: 1px solid var(--border-color);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    width: 100%;
    margin-top: 5px;
}

.profile-status-select:hover {
    border-color: var(--accent-color);
    color: var(--text-color); /* ← VARIABLE CORRECTA */
    box-shadow: 0 0 8px rgba(0, 191, 255, 0.2);
}

.profile-status-select option {
    background-color: #1e1e1e; /* Fondo oscuro para las opciones */
    color: white;
}

.list-item {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.list-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--success-color);
    color: #fff;
    margin-right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
}

.list-item-info {
    flex-grow: 1;
}

.list-item-name {
    font-weight: bold;
    color: var(--text-color);
}

.list-item-subtext {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    font-size: 0.9rem;
}

.info-item .material-icons {
    margin-right: 20px;
    color: var(--text-secondary-color);
    padding-top: 2px;
}

.info-text-link {
    color: var(--accent-color);
    text-decoration: none;
    word-break: break-all;
}

.age-display {
    color: var(--text-secondary-color);
    margin-left: 8px;
}

.modal-input {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--accent-color);
    color: var(--text-color);
    font-size: 1.1rem;
    padding: 8px 0;
}

.info-input {
    display: none;
    width: 100%;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 5px;
    color: var(--text-color);
    padding: 8px;
    font-family: 'Segoe UI', system-ui;
}

.info-input:focus {
    border-color: var(--action-color);
    box-shadow: 0 0 8px var(--action-color);
    outline: none;
}

.camera-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--accent-color);
    color: var(--panel-secondary-color);
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
    cursor: pointer;
}

.modal-generic.edit-mode .info-view {
    display: none;
}

.modal-generic.edit-mode .info-input {
    display: block;
}

.modal-generic #edit-profile-btn {
    display: inline-block;
}

.modal-generic.edit-mode #edit-profile-btn {
    display: none;
}

.modal-generic #save-profile-btn {
    display: none;
}

.modal-generic.edit-mode #save-profile-btn {
    display: inline-block;
}

.divider {
    border-top: 1px solid var(--border-color);
    margin: 20px 0;
}

.history-archive {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
}

.history-badge {
    color: var(--accent-color);
    font-weight: bold;
}

.add-album-btn {
    color: var(--accent-color);
    font-weight: bold;
    padding: 15px 0;
    cursor: pointer;
}

.album-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    margin-top: 10px;
}

.album-item {
    width: 100%;
    padding-bottom: 100%;
    background-color: #333;
    border-radius: 8px;
}

.settings-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
}

/* ================================================================= */
/* --- [SECCIÓN 8] TRADUCCIÓN Y BÚSQUEDA EN CHAT --- */
/* ================================================================= */

.msg-original {
    margin: 0 !important;
    padding: 0 !important;
    color: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
}

/* --- ESTILOS PARA TRADUCCIÓN --- */
.msg-traduccion {
    padding: 8px 0 2px 0; /* Espacio entre original (oculto) y traducción */
    margin: 0;
    font-size: 0.95rem; /* Ligeramente más pequeño que el original */
    font-style: italic;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* Línea separadora */
    margin-top: 8px; /* Espacio sobre la línea */
}

/* Ocultar por defecto si se añade y luego se oculta */
.msg-traduccion[style*="display: none;"] {
    display: none;
}

.mensaje.recibido .msg-traduccion {
    color: var(--message-received-text-color, #E0E0E0);
}

.mensaje.enviado .msg-traduccion {
    color: var(--message-sent-text-color, #FFFFFF);
}

.msg-traduccion em {
    opacity: 0.7;
}

/* Resaltado para las búsquedas */
.search-highlight {
    background-color: #ffd54f; /* Color amarillo/ámbar agradable */
    color: #000000; /* Texto negro para contraste */
    font-weight: bold;
    border-radius: 2px;
    padding: 0 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Para el modo oscuro, el amarillo sigue funcionando bien con texto negro */
body.dark-theme .search-highlight {
    background-color: #ffca28; 
    color: #000000;
}

/* Resaltado ACTIVO (cuando navegas con las flechas en la búsqueda dentro del chat) */
.search-highlight.active-highlight {
    background-color: #ff6f00; /* Naranja más fuerte */
    color: white;
    transform: scale(1.1);
    transition: all 0.2s ease;
    border: 1px solid white;
}

#in-chat-search-bar {
    display: none;
    align-items: center;
    padding: 8px 15px;
    background-color: var(--panel-secondary-color);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

#in-chat-search-bar.visible {
    display: flex;
}

#in-chat-search-bar .search-input {
    flex-grow: 1;
    border: none;
    background: transparent;
    color: var(--text-color);
    margin: 0 10px;
    outline: none;
    font-size: 0.9rem;
}

#in-chat-search-bar .material-icons {
    color: var(--text-secondary-color);
    cursor: pointer;
}

#in-chat-search-bar .search-nav-buttons button {
    background: none;
    border: none;
    padding: 0 5px;
    cursor: pointer;
    color: var(--text-secondary-color);
    border-radius: 50%;
}

#in-chat-search-bar .search-nav-buttons button:hover,
#close-search-btn:hover {
    background-color: var(--button-secondary-hover);
    color: var(--text-color);
}

#search-results-count {
    font-size: 14px;
    color: var(--text-secondary-color);
    margin: 0 10px;
}

.no-results-placeholder {
    padding: 20px;
    text-align: center;
    color: var(--text-secondary-color);
}

.search-results-header {
    padding: 10px 15px 5px 15px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--accent-color);
    text-transform: uppercase;
}

/* ================================================================= */
/* --- [SECCIÓN 9] MENÚ DESPLEGABLE DE LA CONVERSACIÓN --- */
/* ================================================================= */

.menu-container {
    position: relative;
    display: flex;
    align-items: center;
}

/* Corrección del Menú de tres puntos (⋮) y dropdown general */
#conversation-menu-dropdown, 
.dropdown-menu {
    position: absolute;
    top: 50px;
    right: 10px;
    min-width: 220px;
    width: auto;
    background: rgba(26, 26, 26, 0.98); /* Fondo sólido para legibilidad */
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    list-style: none;
    margin: 5px 0 0 0;
    padding: 8px 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
}

#conversation-menu-dropdown.visible,
.dropdown-menu.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

#conversation-menu-dropdown li,
.dropdown-menu li {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    color: var(--text-color);
    font-size: 0.95rem;
    white-space: nowrap;
}

#conversation-menu-dropdown li:hover,
.dropdown-menu li:hover {
    background: rgba(255, 255, 255, 0.08);
}

#conversation-menu-dropdown li i,
.dropdown-menu li .material-icons {
    font-size: 20px;
    color: var(--text-secondary-color);
    width: 24px;
    text-align: center;
    margin-right: 3px; /* Pequeño ajuste de espaciado */
}

/* Estilo especial para el botón de Salir o Destructivo (Rojo) */
#conversation-menu-dropdown li.leave-option,
#conversation-menu-dropdown li.destructive,
.dropdown-menu li.destructive {
    color: #ff5252;
}

#conversation-menu-dropdown li.leave-option i,
#conversation-menu-dropdown li.destructive i,
.dropdown-menu li.destructive .material-icons {
    color: #ff5252;
}

#conversation-menu-dropdown hr,
.dropdown-menu hr {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin: 4px 0;
}
#info-desc-text {
    word-break: break-word; /* Rompe palabras largas para que no desborden */
    overflow-wrap: break-word;
    max-width: 100%;
    line-height: 1.5;
}
/* ================================================================= */
/* --- [SECCIÓN 10] MODAL DE CONFIRMACIÓN (CHECKBOX) --- */
/* =================================0================================= */

.modal-body .modal-checkbox-wrapper {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9em;
    color: var(--text-secondary-color);
}

.modal-checkbox-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color);
}

/* ================================================================= */
/* --- [SECCIÓN 11] ANIMACIONES Y ALERTA (ZUMBIDO) --- */
/* ================================================================= */

/* Animación de Flash Amarillo */
@keyframes flashYellow {
    0% { background-color: rgba(255, 255, 0, 0.1); transform: scale(1); }
    50% { background-color: rgba(255, 235, 59, 0.6); transform: scale(1.02); }
    100% { background-color: transparent; transform: scale(1); }
}

.highlight-flash {
    animation: flashYellow 1.5s ease-out;
    border: 2px solid #ffeb3b !important; /* Borde amarillo brillante */
    box-shadow: 0 0 15px rgba(255, 235, 59, 0.5);
    transition: all 0.3s;
}

@keyframes highlightFlash {      
    0% {           
        background-color: var(--accent-color);        
        transform: scale(1.02);        
        box-shadow: 0 0 10px var(--accent-color);      
    }      
    50% {           
        background-color: rgba(74, 163, 240, 0.3);      
    }      
    100% {           
        background-color: transparent;        
        transform: scale(1);        
        box-shadow: none;      
    }
}

/* CIRUGÍA: Animación de pulso para Skeletons */
@keyframes skeleton-pulse {
    0% { background-color: #1a1a1a; }
    50% { background-color: #333; }
    100% { background-color: #1a1a1a; }
}

@keyframes app-shake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
}

.app-container.shake {
    animation: app-shake 1.2s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes nudge-pulse {
    0% { background-color: var(--button-secondary-hover); transform: scale(1); }
    50% { background-color: var(--accent-color); transform: scale(1.02); }
    100% { background-color: var(--button-secondary-hover); transform: scale(1); }
}

.chat-item.nudge-alert {
    animation: nudge-pulse 1s ease-in-out 3;
}

/* Animación para la aparición de elementos (como el menú contextual) */
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ================================================================= */
/* --- [SECCIÓN 12] MODAL DE VISTA DE LLAMADAS --- */
/* ================================================================= */

.modal-panel-view {
    background-color: var(--panel-secondary-color);
    color: var(--text-color);
    width: 450px;
    max-width: 90%;
    max-height: 90vh;
    border-radius: 15px;
    border: 1px solid var(--accent-color);
    display: flex;
    flex-direction: column;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

body.dark-theme .modal-panel-view {
    box-shadow: var(--glow-style);
}

.modal-backdrop.visible .modal-panel-view {
    transform: scale(1);
}

.calls-actions-menu {
    padding: 10px 0;
}

.calls-actions-menu .menu-item {
    padding: 12px 20px;
    gap: 20px;
}

.calls-actions-menu .menu-item span {
    color: var(--text-color);
}

.calls-actions-menu .menu-item .material-icons {
    color: var(--text-secondary-color);
    margin-right: 0;
}

.calls-actions-menu .menu-item#start-new-call-btn span,
.calls-actions-menu .menu-item#start-new-call-btn .material-icons {
    color: var(--accent-color);
}

hr.modal-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0;
}

.call-history-list {
    padding: 15px 20px;
}

h5.call-list-header {
    margin: 0 0 15px 0;
    font-size: 0.9rem;
    color: var(--accent-color);
    text-transform: uppercase;
}

.call-log-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.call-type-icon {
    font-size: 20px;
}

.call-type-icon.incoming {
    color: var(--success-color);
}

.call-type-icon.outgoing {
    color: var(--accent-color);
}

.call-type-icon.missed {
    color: var(--action-color);
}

.call-log-details {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

.call-log-name {
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.call-log-time {
    font-size: 0.85rem;
    color: var(--text-secondary-color);
}

/* ================================================================= */
/* --- [SECCIÓN 13] FIX DE SCROLLBAR --- */
/* ================================================================= */

.chat-list, .message-area, .modal-body, .menu-options, .emoji-panel-body,
.wink-panel-body, .contact-list, .gallery-thumbnails-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--panel-secondary-color);
}

.chat-list::-webkit-scrollbar, .message-area::-webkit-scrollbar, .modal-body::-webkit-scrollbar,
.menu-options::-webkit-scrollbar, .emoji-panel-body::-webkit-scrollbar, .wink-panel-body::-webkit-scrollbar,
.contact-list::-webkit-scrollbar, .gallery-thumbnails-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.chat-list::-webkit-scrollbar-track, .message-area::-webkit-scrollbar-track, .modal-body::-webkit-scrollbar-track,
.menu-options::-webkit-scrollbar-track, .emoji-panel-body::-webkit-scrollbar-track, .wink-panel-body::-webkit-scrollbar-track,
.contact-list::-webkit-scrollbar-track, .gallery-thumbnails-scroll::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.chat-list::-webkit-scrollbar-thumb, .message-area::-webkit-scrollbar-thumb, .modal-body::-webkit-scrollbar-thumb,
.menu-options::-webkit-scrollbar-thumb, .emoji-panel-body::-webkit-scrollbar-thumb, .wink-panel-body::-webkit-scrollbar-thumb,
.contact-list::-webkit-scrollbar-thumb, .gallery-thumbnails-scroll::-webkit-scrollbar-thumb {
    background-color: var(--accent-color);
    border-radius: 4px;
    border: 2px solid var(--panel-secondary-color);
}

.chat-list::-webkit-scrollbar-thumb:hover, .message-area::-webkit-scrollbar-thumb:hover, .modal-body::-webkit-scrollbar-thumb:hover,
.menu-options::-webkit-scrollbar-thumb:hover, .emoji-panel-body::-webkit-scrollbar-thumb:hover, .wink-panel-body::-webkit-scrollbar-thumb:hover,
.contact-list::-webkit-scrollbar-thumb:hover, .gallery-thumbnails-scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--action-color);
}

/* ================================================================= */
/* --- [SECCIÓN 14] FIX DE Z-INDEX DEL NUDGE COOLDOWN --- */
/* ================================================================= */

#nudge-cooldown-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background-color: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 40;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

#nudge-cooldown-overlay.visible {
    visibility: visible;
    opacity: 1;
}

#nudge-cooldown-timer {
    color: #FFF;
    font-weight: bold;
    font-size: 0.9em;
    padding: 0 10px;
}

/* ================================================================= */
/* --- [SECCIÓN 15] ESTILOS DE GRABACIÓN DE AUDIO --- */
/* ================================================================= */

.icon-btn.is-recording {
    color: #F44336 !important;
    animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}

.mensaje audio {
    width: 250px;
    height: 40px;
    filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg);
}

.mensaje.enviado audio {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(240deg);
}

/* ================================================================= */
/* --- [SECCIÓN 16] ESTILOS DE UI DE LLAMADAS --- */
/* ================================================================= */

.btn-call {
    flex: 1;
    font-weight: bold;
    padding: 12px;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-call-accept {
    background-color: var(--success-color);
    color: #000;
}

.btn-call-accept:hover {
    opacity: 0.8;
}

.btn-call-reject {
    background-color: #F44336;
    color: white;
}

.btn-call-reject:hover {
    background-color: #D32F2F;
}

.btn-icon-call {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all .2s ease;
    cursor: pointer;
    border: none;
    background-color: var(--button-secondary-bg);
    color: var(--text-color);
}

.btn-icon-call:hover {
    background-color: var(--button-secondary-hover);
}

.btn-icon-call.btn-call-reject {
    background-color: #D32F2F;
    color: white;
}

.btn-icon-call.btn-call-reject:hover {
    background-color: #B71C1C;
}

.call-pulse-ring {
    animation: pulse-ring 2s cubic-bezier(.455, .03, .515, .955) infinite;
    font-size: 2.5rem;
}

@keyframes pulse-ring {
    0% { transform: scale(.8); opacity: 1; }
    80%, 100% { transform: scale(1.2); opacity: 0; }
}

/* ================================================================= */
/* --- [SECCIÓN 17] TARJETAS DE MENSAJE (UBICACIÓN, CONTACTO) --- */
/* ================================================================= */

.contact-container {
    padding: 10px 12px;
}

.location-header,
.contact-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8em;
    font-weight: bold;
    opacity: 0.8;
    margin-bottom: 5px;
}

.location-header .material-icons,
.contact-header .material-icons {
    font-size: 1.2em;
}

.contact-name {
    font-size: 1em;
    font-weight: 500;
}

.contact-phone {
    font-size: 0.85em;
    opacity: 0.9;
    margin-top: 2px;
}

.mensaje.mensaje-ubicacion,
.mensaje.mensaje-contacto {
    padding: 0;
}

.mensaje-ubicacion .location-container {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--panel-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.mensaje-ubicacion .location-container:hover {
    transform: scale(1.02);
}

.mensaje-ubicacion .location-map-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background-color: #e0e0e0;
}

.mensaje-ubicacion .location-map-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #667eea;
}

.mensaje-ubicacion .location-map-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
}

.mensaje-ubicacion .location-map-wrapper.image-loaded::before,
.mensaje-ubicacion .location-map-wrapper.image-error::before {
    display: none;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.mensaje-ubicacion .location-address {
    padding: 10px 12px;
    background-color: var(--panel-color);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mensaje-ubicacion .location-address strong {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--text-color);
}

.mensaje-ubicacion .location-address span {
    font-size: 0.85em;
    color: var(--text-secondary-color);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mensaje.enviado.mensaje-ubicacion .location-container {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.9), rgba(255, 0, 255, 0.9));
}

.mensaje.enviado.mensaje-ubicacion .location-address {
    background: transparent;
}

.mensaje.enviado.mensaje-ubicacion .location-address strong,
.mensaje.enviado.mensaje-ubicacion .location-address span {
    color: white;
}

.mensaje.recibido.mensaje-ubicacion .location-container {
    background-color: var(--panel-color);
}

body.dark-theme .mensaje-ubicacion .location-container:hover {
    box-shadow: 0 0 12px var(--accent-color);
}

.location-map-fallback-inline {
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    gap: 10px;
}

.location-map-fallback-inline .material-icons {
    font-size: 64px;
}

.location-map-fallback-inline span {
    font-size: 0.9em;
    text-align: center;
    line-height: 1.4;
}

/* ============================================================================= */
/* --- [SECCIÓN 18] ESTILOS DE GALERÍA Y PREVISUALIZACIÓN (CONSOLIDADOS) --- */
/* ============================================================================= */

.mensaje.mensaje-galeria {
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    width: fit-content;
    max-width: 75%;
}

.mensaje-galeria .gallery-grid {
    display: grid;
    gap: 3px;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--panel-color);
}

.mensaje.enviado .gallery-grid {
    background: linear-gradient(90deg, var(--action-color), #8A2BE2);
}

.gallery-grid.count-1 { grid-template-columns: 1fr; }
.gallery-grid.count-2, .gallery-grid.count-4 { grid-template-columns: repeat(2, 1fr); }
.gallery-grid.count-3, .gallery-grid.count-5, .gallery-grid.count-6,
.gallery-grid.count-7, .gallery-grid.count-8, .gallery-grid.count-9 {
    grid-template-columns: repeat(3, 1fr);
}

.gallery-item {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: #333;
    overflow: hidden;
    cursor: pointer;
}

.gallery-item img, .gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
}

.gallery-item:hover img, .gallery-item:hover video {
    transform: scale(1.05);
}

.gallery-item-more {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    font-weight: bold;
    color: white;
}

.gallery-caption {
    padding: 8px 10px;
    margin: 0;
    font-size: 0.9em;
    line-height: 1.4;
    color: var(--text-color);
}

.mensaje.enviado .gallery-caption {
    color: white;
}

.multi-preview-modal {
    max-width: 600px !important;
}

.multi-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 5px;
    width: 100%;
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
}

.multi-preview-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}

.multi-preview-item img, .multi-preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.multi-preview-item.video::before {
    content: 'play_arrow';
    font-family: 'Material Icons';
    position: absolute;
    font-size: 32px;
    color: white;
    text-shadow: 0 0 5px rgba(0,0,0,0.8);
    z-index: 1;
}

.multi-preview-item .remove-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    z-index: 2;
}

.multi-preview-item .remove-btn:hover {
    background-color: var(--action-color);
}

.gallery-upload-placeholder .gallery-grid {
    opacity: 0.5;
}

.gallery-upload-status {
    text-align: center;
    padding: 8px;
    font-size: 0.9em;
    color: var(--text-secondary-color);
}

.gallery-progress-bar {
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 8px 10px;
    overflow: hidden;
}

.gallery-progress-bar .progress-bar {
    width: 0%;
    height: 100%;
    background-color: var(--accent-color);
    transition: width 0.3s ease;
}

/* ================================================================= */
/* --- [SECCIÓN 19] CONTENEDOR MODAL PRINCIPAL (V11 - UNIVERSAL FIX) --- */
/* ================================================================= */

/* 1. EL FONDO OSCURO (WRAPPER) */
/* Aplica a cualquier fondo, tenga ID o no */
.modal-backdrop,
.modal-overlay,

.panel-modal-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important; /* CORREGIDO: 100% evita el desbordamiento por scrollbars */
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
    z-index: 2000 !important;
    
    /* CENTRADO FLEXBOX OBLIGATORIO */
    display: none; 
    align-items: center !important;     /* Centra verticalmente */
    justify-content: center !important; /* Centra horizontalmente */
    
    /* Efectos */
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. ACTIVACIÓN (VISIBLE) */
/* Fuerza el display flex cuando la clase 'visible', 'active' o 'show' esté presente */
.modal-backdrop.visible, .modal-backdrop.active, .modal-backdrop.show,
.modal-overlay.visible, .modal-overlay.active, .modal-overlay.show,
#modal-container.visible, #modal-container.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 3. LAS TARJETAS (EL CONTENIDO DEL MODAL) */
/* IMPORTANTE: Quitamos '#modal-container' del inicio para que aplique a TODOS */
.modal-generic,
.create-group-modal,
.modal-content-info,
.modal-panel-view,
.profile-modal-container,
.profile-modal-content,
.confirm-dialog,
.emoji-modal-content,
.wink-modal-content,
.pinned-list-modal {
    background-color: var(--panel-secondary-color) !important;
    color: var(--text-color) !important;
    border: 1px solid var(--accent-color) !important;
    border-radius: 15px !important;
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.2), 0 20px 60px rgba(0,0,0,0.6) !important;
    
    /* TAMAÑO Y POSICIÓN */
    width: 90% !important;
    max-width: 450px !important; 
    min-width: 280px !important;
    
    /* LA SOLUCIÓN DEFINITIVA AL CENTRADO: */
    height: auto !important;           /* Deja que el contenido defina la altura */
    max-height: 85vh !important;       /* Evita que sea más alto que la pantalla */
    margin: auto !important;           /* Obliga a centrarse en el Flexbox padre */
    
    /* ESTRUCTURA INTERNA */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    position: relative !important;
    
    /* ANIMACIÓN */
    transform: scale(0.95);
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 4. ESTADO ACTIVO DE LA TARJETA (ESCALA) */
.modal-backdrop.visible .modal-generic,
.modal-backdrop.active .modal-generic,
.modal-backdrop.show .modal-generic,
.modal-overlay.visible .modal-generic,
.modal-overlay.active .modal-generic,
.modal-overlay.show .modal-generic,
.modal-backdrop.visible .create-group-modal,
.modal-backdrop.active .create-group-modal,
.modal-backdrop.show .create-group-modal,
.modal-overlay.visible .create-group-modal,
.modal-overlay.active .create-group-modal,
.modal-overlay.show .create-group-modal,
.modal-backdrop.visible .modal-content,
.modal-backdrop.active .modal-content,
.modal-backdrop.show .modal-content,
.modal-overlay.visible .modal-content,
.modal-overlay.active .modal-content,
.modal-overlay.show .modal-content,
#modal-container.visible [class*="modal"] {
    transform: scale(1) !important;
}

/* 5. CORRECCIONES DE CABECERA Y PIE (Para que no se aplasten) */
.modal-header, 
.pinned-list-modal .modal-header {
    flex-shrink: 0 !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid var(--border-color) !important;
    min-height: 50px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-footer {
    flex-shrink: 0 !important;
    padding: 15px 20px !important;
    border-top: 1px solid var(--border-color) !important;
    min-height: 50px !important;
    display: flex;
    align-items: center;
}

/* 6. CORRECCIÓN DEL SCROLL INTERNO */
.modal-body,
.modal-body-info,
.profile-scroll-area,
.pinned-list-body,
.emoji-panel-body,
.wink-panel-body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 20px !important;
    flex-grow: 1 !important;
    /* Esto es vital para Firefox/Chrome en flex containers anidados: */
    min-height: 0 !important; 
    height: auto !important;
    
    /* Scrollbar */
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) rgba(255,255,255,0.05);
}

/* SCROLLBAR STYLE */
.modal-body::-webkit-scrollbar,
.modal-body-info::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb,
.modal-body-info::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 4px; }

/* 8. AJUSTES ESPECÍFICOS POR TIPO DE MODAL */

/* Modal de Perfil */
#modal-container .profile-modal-container {
    max-width: 420px !important;
}

/* UNIFICACIÓN DE .modal-content-info (FIX DE DUPLICIDAD) */
.modal-content-info {
    width: 380px !important;
    max-width: 90% !important;
    height: auto !important;
    min-height: 350px !important;
    max-height: 80vh !important;
    
    /* Sobreescribimos cualquier propiedad conflictiva */
    background-color: var(--panel-secondary-color) !important;
    color: var(--text-color) !important;
    font-family: 'Segoe UI', system-ui !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
}

/* Modal de Crear Grupo */
#modal-container .create-group-modal {
    max-height: 75vh !important;
}

/* 10. Responsivo para Celulares */
@media (max-width: 480px) {
    #modal-container .modal-generic,
    #modal-container [class*="modal"] {
        width: 95% !important;
        max-width: 95% !important;
        max-height: 85vh !important;
        margin: 0 !important;
    }
    
    #modal-container .modal-body,
    #modal-container .modal-body-info {
        padding: 12px !important;
    }
}

/* ================================================================= */
/* --- FIX ESPECÍFICO: MODAL DE PERFIL (ALTURA Y CENTRADO) --- */
/* ================================================================= */

/* El modal de perfil necesita altura flexible para centrarse */
.profile-modal-container,
.profile-modal-content {
    height: auto !important;        /* Deja que el contenido defina la altura */
    max-height: 90vh !important;    /* Pero nunca más alto que la pantalla */
    min-height: 400px !important;   /* Mínimo para que no se vea aplastado */
    
    /* Asegura que use todo el espacio disponible sin forzar altura fija */
    overflow-y: auto !important;
    
    /* Fuerza el centrado vertical perfecto */
    align-self: center !important;
    margin: auto !important;
}

/* El cuerpo del perfil debe ser scrollable si es muy largo */
.profile-body-section,
.profile-scroll-area {
    flex: 1 1 auto !important;      /* Crece/se encoge según necesidad */
    overflow-y: auto !important;
    min-height: 0 !important;        /* Permite que Firefox/Chrome lo compriman */
    max-height: calc(90vh - 120px) !important; /* Resta header y footer */
}

/* La cabecera y pie del perfil NO deben encogerse */
.profile-header-section,
.profile-close-bar,
.profile-footer-actions {
    flex-shrink: 0 !important;
    min-height: 60px !important;
}
/* ================================================================= */
/* --- ESTILOS DEL VISOR DE GALERÍA (Gallery Viewer Overlay) --- */
/* ================================================================= */

#gallery-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Fondo negro sólido para inmersión */
    z-index: 10000; /* Por encima incluso del modal normal */
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

#gallery-viewer-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.gallery-viewer-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* CABECERA DEL VISOR */
.gallery-viewer-header {
    width: 100%;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
    color: #fff;
    flex-shrink: 0;
    min-height: 60px;
    box-sizing: border-box;
}

.gallery-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gallery-info h3, 
.gallery-info p {
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gallery-info p {
    font-size: 0.85em;
    color: #ddd;
}

/* ACCIONES DE CABECERA */
.gallery-header-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 2;
}

.gallery-header-actions .gallery-icon-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 5px;
}

.gallery-header-actions .gallery-icon-btn i {
    font-size: 24px;
}

/* MENÚ DESPLEGABLE (MORE MENU) */
.gallery-more-menu {
    display: none;
    position: absolute;
    top: 50px;
    right: 20px;
    background-color: var(--panel-secondary-color);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 11;
    overflow: hidden;
}

.gallery-more-menu.visible {
    display: block;
}

.gallery-menu-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    cursor: pointer;
    color: var(--text-primary-color); /* Asegurar contraste */
}

.gallery-menu-item:hover {
    background-color: var(--button-secondary-hover);
}

/* ÁREA PRINCIPAL (MEDIA) */
.gallery-viewer-main {
    flex-grow: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    min-height: 0;
}

/* BOTONES DE NAVEGACIÓN (FLECHAS) */
.gallery-nav-btn {
    background: rgba(0,0,0,0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 20px 10px;
    z-index: 5;
    height: 100%;
    display: flex;
    align-items: center;
    border-radius: 0;
    transition: background 0.2s ease;
}

.gallery-nav-btn:hover {
    background: rgba(0,0,0,0.3);
}

.gallery-nav-btn i {
    font-size: 48px;
}

/* CONTENEDOR DE LA IMAGEN/VIDEO */
.gallery-media-container {
    flex-grow: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

#gallery-main-image,
#gallery-main-video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: none;
}

#gallery-main-audio {
    display: none;
    max-width: 80%;
}

/* BARRA DE MINIATURAS INFERIOR */
.gallery-thumbnails-bar {
    width: 100%;
    height: 90px;
    flex-shrink: 0;
    padding: 10px 0;
    box-sizing: border-box;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    z-index: 10;
    min-width: 0;
}

.gallery-thumbnails-scroll {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
}

.gallery-thumbnail {
    width: 60px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    transition: border-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.6;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #222;
}

.gallery-thumbnail:hover { opacity: 1; }

.gallery-thumbnail.active {
    border-color: var(--accent-color);
    opacity: 1;
}

.gallery-thumbnail img,
.gallery-thumbnail video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Icono superpuesto para videos */
.gallery-thumbnail.video::after {
    content: 'play_arrow';
    font-family: 'Material Icons';
    position: absolute;
    color: white;
    font-size: 24px;
    text-shadow: 0 0 4px black;
}

/* Icono superpuesto para audios */
.gallery-thumbnail.audio .material-icons {
    font-size: 32px;
    color: var(--text-secondary-color);
}

/* ================================================================= */
/* --- [SECCIÓN 20] RESPONSIVE Y AJUSTES FINALES --- */
/* ================================================================= */

@media (max-width: 1024px) {
    .chat-list-panel {
        width: 350px;
        max-width: 350px;
    }

    .conversation-panel {
        flex-grow: 1;
    }
}

@media (max-width: 768px) {
    .nav-bar {
        display: none;
    }

    .chat-list-panel {
        width: 45%;
        max-width: 45%;
    }

    .conversation-panel {
        width: 55%;
    }

    .chat-list-panel, .conversation-panel {
        flex-shrink: 0;
    }

    .gallery-viewer-header { padding: 10px 15px; }
    .gallery-info h3 { font-size: 1rem; }
    .gallery-info p { font-size: 0.75rem; }
    .gallery-icon-btn { width: 36px; height: 36px; }
    .gallery-icon-btn .material-icons { font-size: 20px; }
    .gallery-nav-btn { width: 40px; height: 40px; }
    .gallery-nav-btn .material-icons { font-size: 28px; }
    .gallery-nav-prev { left: 10px; }
    .gallery-nav-next { right: 10px; }
    .gallery-thumbnail { min-width: 60px; max-width: 60px; height: 60px; }
}

@media (max-width: 480px) {
    .chat-list-panel, .conversation-panel {
        display: none;
        width: 100%;
        min-width: 100%;
        position: absolute;
        top: 0; left: 0;
        height: 100%;
        z-index: 100;
    }

    .visible-mobile {
        display: flex !important;
    }

    #menu-toggle-button {
        display: none;
    }

    .back-button {
        display: block !important;
    }

    .conversation-panel {
        flex-direction: column;
        height: 100vh;
    }

    .conversation-header .back-button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
        font-size: 24px;
        cursor: pointer;
        color: var(--text-color);
        transition: color 0.2s;
    }

    .bottom-nav, .fab {
        display: flex !important;
    }
}

@media (min-width: 481px) {
    .conversation-header .back-button {
        display: none;
    }
    .bottom-nav, .fab {
        display: none !important;
    }
}

.call-controls-overlay .material-icons,
.incoming-call-controls .material-icons,
.local-video-container .material-icons {
    font-family: 'Material Icons' !important;
    font-weight: normal;
    font-style: normal;
    font-size: 28px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

/* ================================================================= */
/* --- [SECCIÓN 21] ESTILOS PARA MODO DE SELECCIÓN DE MENSAJES --- */
/* ================================================================= */

/* Estilo para un mensaje cuando está seleccionado */
.mensaje.selected {
    /* Usamos un overlay semitransparente en lugar de cambiar el fondo directamente */
    position: relative; /* Necesario para el pseudo-elemento */
    /* border: 1px solid var(--accent-color); /* Opcional: un borde si prefieres */
}

.mensaje.selected::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--accent-color-rgb), 0.3); /* Usa la variable RGB */
    border-radius: inherit; /* Hereda el borde redondeado del mensaje */
    pointer-events: none; /* Permite hacer clic a través del overlay */
    z-index: 1; /* Por si hay contenido interno con z-index */
}

/* Barra de acciones que aparece en la parte superior */
#selection-action-bar {
    /* Posicionamiento y Layout */
    /* position: absolute; Ya no es absoluto, se inserta antes del message-area */
    /* top: 0; left: 0; right: 0; */
    height: 60px; /* Altura similar a la cabecera original */
    background-color: var(--panel-color);
    z-index: 8; /* Debajo de la barra de fijados (9) y del header deslizante (10+) */
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; /* Evita que se encoja */
    animation: fadeInDownSelection 0.2s ease-out; /* Animación sutil */
}

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

#selection-action-bar .selection-controls,
#selection-action-bar .selection-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre botones */
}

#selection-action-bar #selection-count {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}

/* Estilo común para los botones de la barra */
#selection-action-bar .icon-btn {
    background: none;
    border: none;
    color: var(--text-secondary-color);
    cursor: pointer;
    width: 40px; /* Tamaño fijo */
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

#selection-action-bar .icon-btn:hover:not(:disabled) {
    background-color: var(--button-secondary-hover);
    color: var(--text-color); /* Cambia color al pasar el ratón */
}

#selection-action-bar .icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#selection-action-bar .icon-btn i {
    font-size: 24px; /* Tamaño del icono */
}

/* Botón específico para cancelar */
#selection-action-bar #cancel-selection-btn i {
    color: var(--text-color); /* El icono de cerrar más visible */
}
#selection-action-bar #cancel-selection-btn:hover {
    background-color: rgba(255, 0, 0, 0.2); /* Fondo rojo suave al pasar */
    color: #F44336; /* Icono rojo */
}


/* Para el botón de Reenviar, rotamos el icono de respuesta */
#selection-action-bar #forward-selection-btn i {
    transform: scaleX(1); /* Espejo horizontal */
}

/* ================================================================= */
/* --- [SECCIÓN 22] ESTILOS PARA EL MENÚ CONTEXTUAL DEL MENSAJE --- */
/* ================================================================= */

/* Contenedor de la barra de emojis dentro del menú contextual */
.menu-reaction-bar {
    display: flex;
    justify-content: space-around; /* Centra los emojis con espacio */
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Separador */
}

/* Estilo de cada emoji en la barra del menú */
.menu-reaction-emoji {
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.menu-reaction-emoji:hover {
    background-color: rgba(0, 0, 0, 0.08); /* Fondo gris claro al pasar el ratón */
    transform: scale(1.2); /* Efecto de zoom ligero */
}

#message-context-menu {
    position: absolute; /* Es un elemento flotante */
    z-index: 1100;      /* Debe estar por encima de casi todo */
    width: 240px;       /* Ancho fijo del menú */
    /* Reutilizamos la clase .dropdown-menu, pero aseguramos la visibilidad */
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity 0.1s ease, transform 0.1s ease;

    /* Nuevos estilos para la apariencia visual, adaptados al tema */
    background-color: var(--panel-secondary-color); /* Usar variable de tema */
    border: 1px solid var(--border-color); /* Usar variable de tema */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Sombra más consistente con el tema oscuro */
    overflow: hidden;
    min-width: 200px; /* Asegura un ancho mínimo, compatible con el width fijo */
    animation: fadeIn 0.1s ease-out; /* Animación de entrada */
}

#message-context-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Los estilos de 'li', 'hr', 'i', 'span' se heredan de .dropdown-menu */

/* ================================================================= */
/* --- [SECCIÓN 23] ESTILOS PARA RESPONDER (SOLUCIÓN CON POSICIONAMIENTO ABSOLUTO) --- */
/* ================================================================= */

/* El footer ya tiene 'position: relative', lo cual es perfecto para anclar la barra. */

/* Cuando estamos respondiendo, añadimos un padding superior para dejar espacio a la barra flotante. */
.conversation-footer.replying {
    padding-top: 60px; /* Altura de la barra (52px) + un pequeño margen */
}

/* La barra de respuesta ahora se posiciona de forma absoluta sobre el footer */
#reply-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 52px; /* Altura fija para la barra de respuesta */

    /* Estilos visuales */
    background-color: var(--panel-color); /* Mismo color que el footer para una integración limpia */
    border-bottom: 1px solid var(--border-color); /* Borde para separar del input */
    padding: 0 15px; /* Padding horizontal */
    display: flex;
    align-items: center;

    /* Animación de entrada desde arriba */
    animation: slideInFromTop 0.2s ease-out;
}

/* Contenido interno de la barra de respuesta */
.reply-bar-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-grow: 1;
    margin-right: 10px;
    padding-left: 12px;
    border-left: 3px solid var(--action-color); /* Línea vertical de color */
}

.reply-bar-content .reply-author {
    font-size: 0.9em;
    font-weight: bold;
    color: var(--action-color);
}

.reply-bar-content .reply-snippet {
    font-size: 0.85em;
    color: var(--text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón para cancelar la respuesta */
#cancel-reply-btn {
    background: none;
    border: none;
    color: var(--text-secondary-color);
    cursor: pointer;
    padding: 8px; /* Área de click más grande */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
    flex-shrink: 0;
}

#cancel-reply-btn:hover {
    background-color: var(--button-secondary-hover);
    color: #F44336;
}

/* --- ESTILOS PARA LA CITA DENTRO DE LA BURBUJA DEL MENSAJE (SIN CAMBIOS) --- */
.reply-quote {
    padding: 8px 10px;
    margin: 0 0 8px 0;
    background-color: rgba(0, 0, 0, 0.15);
    border-left: 3px solid var(--accent-color);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mensaje.enviado .reply-quote {
    background-color: rgba(255, 255, 255, 0.15);
    border-left-color: #fff;
}
.reply-quote-author {
    font-size: 0.85em;
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 2px;
}
.mensaje.enviado .reply-quote-author {
    color: #f0f0f0;
}
.reply-quote-content {
    font-size: 0.8em;
    color: var(--text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mensaje.enviado .reply-quote-content {
    color: rgba(255, 255, 255, 0.8);
}

/* ================================================================= */
/* --- [SECCIÓN 24] ESTILOS PARA LA EDICIÓN DE MENSAJES --- */
/* ================================================================= */

/* Contenedor del input de edición */
.edit-textarea {
    background-color: var(--input-bg-color);
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
    color: var(--text-color);
    font-size: 0.95rem;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    resize: vertical;
}

.edit-textarea:focus {
    outline: none;
    box-shadow: 0 0 8px var(--accent-color);
}

/* Contenedor para los botones de guardar/cancelar */
.edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Estilo general de los botones */
.save-edit-btn, .cancel-edit-btn {
    background: none;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
}

/* Botón de guardar */
.save-edit-btn {
    background-color: var(--accent-color);
    color: white;
}
.save-edit-btn:hover {
    opacity: 0.8;
}

/* Botón de cancelar */
.cancel-edit-btn {
    color: var(--text-secondary-color);
}
.cancel-edit-btn:hover {
    background-color: var(--button-secondary-hover);
}

/* Indicador de mensaje editado */
.edited-indicator {
    font-size: 0.7em;
    color: var(--text-secondary-color);
    margin-left: 5px;
    font-style: italic;
    display: inline;
}

.mensaje.enviado .edited-indicator {
    color: rgba(255, 255, 255, 0.7);
}

/* Nuevas animaciones añadidas */
@keyframes slideInFromTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ================================================================= */
/* --- [SECCIÓN 26] PANEL DE LISTA DE MENSAJES FIJADOS (TIPO TELEGRAM) --- */
/* ================================================================= */

/* ELIMINAMOS .chat-overlay, ya no se usa */

/* El panel superior (reemplaza el modal) */
#pinned-list-full-panel {
    /* Posición y Layout */
    position: sticky; /* Se pega debajo del header */
    top: 60px; /* Altura de tu header (ajusta si es necesario) */
    z-index: 10; /* Encima del chat, pero debajo de modales */
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 50vh; /* Máximo la mitad de la pantalla */
    
    /* Estilo */
    background-color: var(--panel-color);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);

    /* Animación de entrada */
    animation: slideDownPanel 0.3s ease-out forwards;
}

@keyframes slideDownPanel {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pinned-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.pinned-panel-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--accent-color);
}

.pinned-panel-header .pinned-panel-close-btn {
    cursor: pointer;
    color: var(--text-secondary-color);
    padding: 4px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}
.pinned-panel-header .pinned-panel-close-btn:hover {
    background-color: var(--button-secondary-hover);
    color: var(--text-color);
}

.pinned-panel-body {
    padding: 0;
    overflow-y: auto;
    flex-grow: 1;
}

.pinned-panel-footer {
    padding: 10px;
    border-top: 1px solid var(--border-color);
    text-align: center;
    flex-shrink: 0;
}

.pinned-panel-footer .modal-btn.destructive {
     color: #F44336;
     background: none;
     border: none;
     cursor: pointer;
     font-size: 0.9em;
     font-weight: bold;
     padding: 10px 15px;
     border-radius: 6px;
     transition: background-color 0.2s ease;
}
.pinned-panel-footer .modal-btn.destructive:hover {
    background-color: var(--button-secondary-hover);
}

/* Reutiliza los estilos de item que ya tenías */
.pinned-list-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.pinned-list-item:last-child {
    border-bottom: none;
}

.pinned-list-item:hover {
    background-color: var(--button-secondary-hover);
}
.pinned-item-icon {
    color: var(--accent-color);
    margin-right: 16px;
}
.pinned-item-icon .material-icons {
    font-size: 20px;
}
.pinned-item-details {
    flex-grow: 1;
    overflow: hidden;
}
.pinned-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.pinned-item-author {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9em;
}
.pinned-item-date {
    font-size: 0.75em;
    color: var(--text-secondary-color);
}
.pinned-item-content {
    font-size: 0.85em;
    color: var(--text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.unpin-single-btn {
    margin-left: 10px;
    color: var(--text-secondary-color);
    padding: 4px;
    border-radius: 50%;
}
.unpin-single-btn:hover {
    color: #F44336;
    background-color: var(--button-secondary-hover);
}

/* --- ESTILOS PARA EL OVERLAY DE CARGA --- */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(3px);
    display: none; /* Oculto por defecto */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9998; 
    color: white;
    font-size: 1.1rem;
    gap: 15px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

#loading-overlay.visible {
    display: flex;
    opacity: 1;
}

#loading-overlay .loader {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* --- ESTILOS PARA MENSAJES REENVIADOS --- */
.forwarded-message-wrapper {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 5px;
}

/* Fondo y borde para el mensaje citado */
.mensaje.recibido .forwarded-message-wrapper {
    background: rgba(0,0,0,0.1);
    border-left: 3px solid var(--accent-color); /* Color acento del receptor */
}
.mensaje.enviado .forwarded-message-wrapper {
    background: rgba(255,255,255,0.1);
    border-left: 3px solid var(--message-sent-text-color); /* Color acento del emisor */
}

/* Encabezado "Reenviado de:" */
.forwarded-header {
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 4px;
}
.mensaje.recibido .forwarded-header {
    color: var(--accent-color);
}
.mensaje.enviado .forwarded-header {
    color: var(--message-sent-text-color);
}
.forwarded-header .material-icons {
    font-size: 1rem;
    margin-right: 6px;
    transform: scaleX(1); /* Voltear el icono de 'reply' */
}

/* El contenido reenviado (imagen, texto, etc.) */
.forwarded-content {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Ajustes para que el contenido reenviado no tenga márgenes extra */
.forwarded-content > p.message-content {
    margin: 0;
    padding: 0;
}
.forwarded-content img.sent-image {
    max-width: 150px; /* Hacer las imágenes reenviadas más pequeñas */
    border-radius: 6px;
}
.forwarded-content audio.sent-audio {
    max-width: 200px;
}

/* ================================================================= */
/* --- ESTILOS PARA REACCIONES DEBAJO DEL MENSAJE --- */
/* ================================================================= */

/* Contenedor de la lista de reacciones */
.reaction-list {
    display: flex;
    flex-wrap: wrap; /* Permite que las reacciones pasen a la siguiente línea */
    gap: 4px; /* Espacio entre emojis */
    margin-top: 4px;
    
    /* Posicionamiento en la esquina inferior */
    position: absolute;
    bottom: -10px; /* Ligeramente por debajo de la burbuja */
    right: 12px; /* Alineado a la derecha de la burbuja */
}

/* Estilo para las burbujas enviadas (para alinear a la izquierda) */
.mensaje.enviado .reaction-list {
    right: 12px;
    left: auto;
}

/* Estilo para las burbujas recibidas (para alinear a la izquierda) */
.mensaje.recibido .reaction-list {
    left: 12px;
    right: auto;
}

/* Cada burbuja de reacción individual */
.reaction-item {
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.15); /* Fondo semitransparente */
    border-radius: 12px;
    padding: 2px 6px;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: transform 0.1s ease;
}

.reaction-item:hover {
    transform: scale(1.1);
}

/* Resaltado si el usuario actual reaccionó */
.reaction-item.user-reacted {
    background-color: #007bff; /* Un color de acento (ej: azul) */
    color: white;
}

/* Conteo de reacciones (si hay más de 1) */
.reaction-count {
    font-size: 12px;
    font-weight: 600;
    margin-left: 4px; /* Espacio entre emoji y número */
}

/* ================================================================= */
/* --- [SECCIÓN 27] ESTILOS PARA MODAL DE GRUPOS --- */
/* ================================================================= */

/* Estilos para Modal de Grupos */
.create-group-modal {
    max-width: 450px;
    width: 90%;
    height: 80vh; /* Alto fijo para permitir scroll interno */
    display: flex;
    flex-direction: column;
}

.group-info-section {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 0;
}

.avatar-upload-wrapper {
    position: relative;
    width: 70px;
    height: 70px;
    cursor: pointer;
}

.avatar-placeholder img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
}

.inputs-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.participants-list-container {
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-top: 10px;
}

.participant-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
}

.participant-item:hover {
    background-color: var(--button-secondary-hover); /* Usar una variable de hover existente */
}

.participant-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar-small {
    width: 35px;
    height: 35px;
    background-color: var(--accent-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Estilo para el placeholder del avatar en creación de grupo */
.avatar-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--background-color-hover); /* Color de fondo */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 2px solid var(--accent-color);
    cursor: pointer;
}

.avatar-placeholder i {
    font-size: 40px;
    color: var(--text-secondary-color);
}

.avatar-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.avatar-placeholder .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.avatar-placeholder:hover .overlay {
    opacity: 1;
}

/* --- ACTUALIZACIÓN: Switches y Ajustes para Gestionar Grupo --- */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  margin-left: 10px; /* Separación extra por si acaso */
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #444;
  transition: .4s;
  border-radius: 20px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px; width: 16px;
  left: 2px; bottom: 2px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--accent-color);
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* Modificadores redondos para el slider */
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}

/* Items de configuración */
.settings-item {
    cursor: pointer;
    transition: background-color 0.2s;
}

.settings-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* --- ESTILOS DEL MODAL DE PERFIL --- */

/* Estructura del modal */
.profile-modal {
    background-color: var(--background-color, #1c1c1c); /* Fondo oscuro */
    width: 100%;
    max-width: 400px;
    height: 85vh; /* Altura considerable */
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    color: white;
}

/* Barra superior de cierre */
.profile-close-bar {
    padding: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

/* Cabecera (Avatar y Nombre) */
.profile-header-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px 10px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent);
}

.avatar-container-large {
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
}

#profile-avatar-large {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-color, #0088cc);
}

.avatar-placeholder-large {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #555;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
}

#profile-name-large {
    margin: 5px 0;
    font-size: 1.4rem;
    text-align: center;
}

#profile-subtitle {
    margin: 0;
    color: #aaa;
    font-size: 0.9rem;
}

/* Barra de acciones (Silenciar, Buscar...) */
.profile-actions-bar {
    display: flex;
    justify-content: space-around;
    padding: 15px 0;
    border-bottom: 1px solid #333;
}

.action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.action-item span {
    font-size: 0.8rem;
    color: var(--accent-color, #0088cc);
}

.icon-btn-large {
    background: none;
    border: none;
    color: var(--accent-color, #0088cc);
    cursor: pointer;
}

/* Lista de miembros / Scroll */
.profile-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding: 10px 15px;
    background-color: var(--background-color-dark, #121212);
}

/* Badges de Roles (Propietario/Admin) */
.role-badge {
    font-size: 0.7em;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: bold;
    text-transform: uppercase;
}

.role-badge.owner {
    background-color: rgba(255, 193, 7, 0.2); /* Amarillo transparente */
    color: #ffc107;
    border: 1px solid #ffc107;
}

.role-badge.admin {
    background-color: rgba(33, 150, 243, 0.2); /* Azul transparente */
    color: #2196f3;
    border: 1px solid #2196f3;
}

/* Ajuste para items de la lista */
.member-item {
    padding: 10px;
    border-bottom: 1px solid #2a2a2a;
    cursor: pointer;
}
.member-item:hover {
    background-color: rgba(255,255,255,0.05);
}
/* ================================================================= */
/* --- [NUEVO] ESTILOS PARA LA VENTANA DE INFO DEL GRUPO --- */
/* ================================================================= */

/* Reutilizamos .modal-overlay si ya existe, si no, aquí aseguramos que se centre */
#modal-info-grupo {
    display: none; /* Oculto por defecto */
    /* Flex se aplica via JS */
    z-index: 2000;
}

/* Contenedor principal de la tarjeta */
/* NOTA: SE HA UNIFICADO EN LA SECCIÓN 19 PARA EVITAR DUPLICIDAD */
/* .modal-content-info { ... } */

/* Botón de cerrar (X) */
.close-btn-info {
    position: absolute;
    top: 10px; right: 15px;
    font-size: 24px; 
    cursor: pointer; 
    color: var(--text-secondary-color);
    z-index: 10;
    transition: color 0.2s;
}
.close-btn-info:hover {
    color: var(--accent-color);
}

/* Cabecera con Foto y Nombre */
.info-header-top {
    padding: 25px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent);
}

.avatar-large {
    width: 90px; height: 90px;
    background-color: var(--accent-color);
    color: white;
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 36px; font-weight: bold;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.info-text {
    text-align: center;
}

.info-text h2 { 
    margin: 0; 
    font-size: 1.3rem; 
    color: var(--text-color);
    font-weight: 600;
}

.info-text p { 
    margin: 5px 0 0; 
    color: var(--text-secondary-color); 
    font-size: 0.9rem; 
}

/* Botones de acción rápida (Silenciar, Buscar, Más) */
.action-buttons-grid {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-evenly !important; /* Centra los 3 botones */
    align-items: flex-start !important;
    width: 100% !important;
    padding: 15px 0 !important;
    gap: 0 !important;
    box-sizing: border-box;
    overflow: visible !important; /* CAMBIO: visible para que no corte nada */
}

.action-btn-item {
    flex: 1;
    max-width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    cursor: pointer;
    transition: opacity 0.2s;
}
.action-btn-item:hover { opacity: 0.8; }

.action-btn-item .icon-circle {
    width: 44px !important;            
    height: 44px !important;
    margin-bottom: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* CORRECCIÓN AQUÍ: Usamos una variable que SÍ existe */
    background-color: var(--button-secondary-bg) !important; 
    border-radius: 50%;
    color: var(--accent-color); /* Icono del color del tema */
    transition: background-color 0.2s;
}

.action-btn-item:hover .icon-circle {
    background-color: var(--button-secondary-hover) !important;
}

.action-btn-item span { 
    font-size: 0.75rem !important; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100%;
    text-align: center;
    padding: 0 2px;
    color: var(--accent-color); /* Texto del color del tema */
}

/* Lista de miembros */
.modal-body-info { 
    padding: 10px 0; 
    background-color: var(--panel-secondary-color);
    flex-grow: 1;
    overflow-y: auto;
}

.section-title {
    padding: 10px 20px 5px;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.member-list {
    display: flex;
    flex-direction: column;
}

.member-item {
    display: flex; align-items: center;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s;
    border-bottom: 1px solid transparent;
}
.member-item:hover { 
    background-color: var(--button-secondary-hover); 
}

.member-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background-color: #666;
    background-size: cover;
    background-position: center;
    display: flex; justify-content: center; align-items: center;
    margin-right: 15px;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
}

.member-details { display: flex; flex-direction: column; }
.member-name { 
    font-weight: 500; 
    color: var(--text-color);
    font-size: 0.95rem;
}
.member-status { 
    font-size: 0.8rem; 
    color: var(--text-secondary-color); 
    margin-top: 2px;
}

/* Opciones extra (Salir del grupo) */
.options-list {
    margin-top: 10px;
    border-top: 1px solid var(--border-color);
}

.options-list .option-row {
    padding: 15px 20px;
    display: flex; align-items: center;
    cursor: pointer;
    gap: 20px;
}
.options-list .option-row:hover { 
    background-color: var(--button-secondary-hover); 
}

.text-red { color: #ff5252 !important; }
.text-red i { color: #ff5252 !important; }

/* ===== ESTILOS PARA MODAL DE INFORMACIÓN DEL GRUPO ===== */

/* Overlay del modal - Compatible con tu estructura existente */
#modal-info-grupo.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Cuando el modal está visible */
#modal-info-grupo.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Contenido del modal */
/* UNIFICADO EN SECCIÓN 19 */

#modal-info-grupo.modal-overlay.active .modal-content-info {
    transform: scale(1);
}

/* Header del modal */
.modal-header-info {
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    padding: 20px;
    color: white;
    position: relative;
}

.close-btn-info {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    cursor: pointer;
    color: white;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.close-btn-info:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.info-header-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
}

.avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
}

.info-text h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.info-text p {
    margin: 5px 0 0 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Botones de acción */
.action-buttons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 15px 20px;
    background-color: var(--background-color-light);
    border-bottom: 1px solid var(--border-color);
}

.action-btn-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.action-btn-item:hover {
    background-color: var(--hover-color);
}

.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.action-btn-item span {
    font-size: 0.85rem;
    color: var(--text-color);
}

/* Cuerpo del modal */
.modal-body-info {
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
}

.section-title {
    font-size: 0.9rem;
    color: var(--text-secondary-color);
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Lista de miembros */
.member-list {
    margin-bottom: 20px;
}

.member-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 8px;
    padding-left: 10px;
}

.member-item:hover {
    background-color: var(--hover-color);
}

.member-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--primary-color);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
}

.member-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.member-name {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1rem;
}

.member-status {
    font-size: 0.85rem;
    color: var(--text-secondary-color);
}

/* Lista de opciones */
.options-list {
    margin-top: 20px;
}

.option-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.2s;
}

.option-row:hover {
    background-color: var(--hover-color);
}

.option-row i {
    font-size: 24px;
    color: var(--text-color);
}

.option-row span {
    font-size: 1rem;
    color: var(--text-color);
}

.option-row.text-red i,
.option-row.text-red span {
    color: #FF4444;
}

/* Scrollbar personalizado para el modal */
.modal-body-info::-webkit-scrollbar {
    width: 6px;
}

.modal-body-info::-webkit-scrollbar-track {
    background: var(--background-color-light);
}

.modal-body-info::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.modal-body-info::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary-color);
}

/* Responsive */
@media (max-width: 768px) {
    .modal-content-info {
        width: 95%;
        max-height: 95vh;
    }
    
    .avatar-large {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }
    
    .info-text h2 {
        font-size: 1.2rem;
    }
}
/* Hacer que el encabezado parezca clicable */
.header-info {
    flex-grow: 1;
    min-width: 0;
    /* AGREGAR ESTO: */
    cursor: pointer;
    padding: 5px 10px; /* Un poco de espacio para el hover */
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

/* Efecto al pasar el mouse por encima */
.header-info:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Brillo sutil */
}

/* Ajuste para tema claro si lo usas */
body.light-theme .header-info:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

#create-select-visibility {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Evita la selección de texto cuando la protección está activa */
.no-select-content {
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Opcional: difuminar contenido al perder el foco (evita capturas de pantalla externas) */
.no-select-content:not(:focus-within) {
    filter: blur(5px);
    transition: filter 0.3s;
}



/* ================================================================= */
/* --- [SECCIÓN FINAL] PROTECCIÓN Y SEGURIDAD (ANTI-CAPTURA) --- */
/* ================================================================= */

/* 1. Clase que activa restricciones en el cuerpo */
body.content-restricted {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Evita arrastrar o guardar imágenes/videos con clic derecho */
body.content-restricted img, 
body.content-restricted video {
    pointer-events: none !important;
    -webkit-user-drag: none !important;
}

/* 2. Ocultar contenido al imprimir (Ctrl+P) */
@media print {
    body.content-restricted * {
        display: none !important;
    }
    body.content-restricted::after {
        content: "🚫 CONTENIDO PROTEGIDO Y CONFIDENCIAL";
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-size: 24px;
        font-weight: bold;
        color: #000;
    }
}

/* 3. Pantalla Negra (Blocker) - FUSIONADO Y MEJORADO */
#screenshot-blocker {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100vw; 
    height: 100vh;
    background-color: #000;
    z-index: 2147483647; /* Máximo valor entero permitido en CSS */
    display: none; /* Se activa con JS (display: flex) */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    cursor: not-allowed;
}

/* 4. Marca de Agua (Watermark) - REFINADO */
.message-bubble {
    position: relative; /* Necesario para contener la marca */
    overflow: hidden;   /* Corta la marca si se sale de la burbuja */
}

.message-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    font-size: 1.2em; /* Un poco más pequeño para no molestar */
    font-weight: 900;
    color: rgba(128, 128, 128, 0.15); /* Gris transparente universal */
    pointer-events: none; /* Permite hacer clic a través de ella */
    user-select: none;
    white-space: nowrap;
    z-index: 0; /* Detrás del texto si el texto tiene z-index, o encima si es fondo */
    width: 150%; /* Más ancho para asegurar cobertura al rotar */
    text-align: center;
    font-family: sans-serif;
    letter-spacing: 2px;
}

/* Asegurar que el contenido del mensaje esté POR ENCIMA de la marca de agua */
.message-content, 
.media-title, 
.sent-image, 
.sent-video, 
.sent-audio {
    position: relative;
    z-index: 2; 
}

/* --- ESTILOS BARRA INTELIGENTE (Smart Actions) --- */
.smart-actions-bar {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 5px;
    margin-bottom: 5px;
    scrollbar-width: none; /* Ocultar scrollbar */
}

.smart-pill {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    transition: all 0.2s;
}

.smart-pill:hover, .smart-pill.active {
    background-color: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.smart-pill i {
    font-size: 14px;
}

/* Menú flotante de etiquetas */
.tags-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--panel-secondary-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 5px 0;
    min-width: 140px; /* Un poco más ancho para nombres largos */
    z-index: 100; /* Alto z-index para que flote sobre la lista */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    margin-top: 5px;
    max-height: 200px; /* Scroll si hay muchas etiquetas */
    overflow-y: auto;
}

.tags-dropdown.visible {
    display: block;
    animation: fadeIn 0.2s ease;
}

.tag-option {
    padding: 8px 15px;
    font-size: 0.85rem;
    color: var(--text-color);
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.tag-option:last-child {
    border-bottom: none;
}

.tag-option:hover {
    background-color: var(--button-secondary-hover);
}
/* Estilo del menú desplegable de etiquetas */
.dropdown-content .tag-option {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    border-bottom: 1px solid #333;
    font-size: 14px;
}

.dropdown-content .tag-option:hover {
    background-color: var(--accent-color); /* Tu color azul/morado */
    color: white;
}

/* Clase para mostrar el menú */
.show-menu {
    display: block !important;
}

/* ======================================================= */
/* FIX: ESTILOS DE CONTENIDO INFO GRUPO (Links, Hashtags)  */
/* ======================================================= */

/* 1. SEPARACIÓN DE SECCIONES */
/* Cada bloque (Descripción, Enlaces, etc.) debe tener esta clase en el HTML */
.info-section-block {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-section-block:last-child {
    border-bottom: none;
}

/* Título pequeño de cada sección (ej: "DESCRIPCIÓN") */
.info-section-label {
    font-size: 0.75rem;
    font-weight: bold;
    color: var(--accent-color); /* Azul Neón */
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 1px;
    opacity: 0.8;
}

/* 2. ESTILO DEL TEXTO BASE */
.info-content-text {
    font-size: 0.95rem;
    color: var(--text-color);
    line-height: 1.5;
    white-space: pre-wrap; /* Mantiene los saltos de línea */
    word-break: break-word;
}

/* 3. ARREGLAR LOS ENLACES (LINKS) */
/* Esto fuerza que cualquier <a> dentro de la info sea azul */
.modal-body-info a,
.info-content-text a {
    color: var(--accent-color) !important; /* Azul #00BFFF */
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
    border-bottom: 1px dotted var(--accent-color);
}

.modal-body-info a:hover,
.info-content-text a:hover {
    text-decoration: none;
    filter: brightness(1.2);
    border-bottom: 1px solid var(--accent-color);
}

/* 4. ESTILO PARA HASHTAGS (#etiqueta) */
.info-hashtag {
    display: inline-block;
    background-color: rgba(0, 191, 255, 0.15); /* Fondo azul suave */
    color: var(--accent-color);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.85rem;
    margin-right: 5px;
    margin-bottom: 5px;
    border: 1px solid rgba(0, 191, 255, 0.3);
}

/* 5. ESTILO PARA MENCIONES (@usuario) */
.info-mention {
    color: var(--action-color) !important; /* Rosa/Magenta */
    font-weight: bold;
    cursor: pointer;
    background-color: rgba(255, 0, 255, 0.1);
    padding: 2px 6px;
    border-radius: 6px;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none !important;
}

.info-mention:hover {
    background-color: rgba(255, 0, 255, 0.25);
    text-decoration: none;
}

/* Si usas un icono dentro de la mención */
.info-mention i {
    font-size: 0.8em;
}
/* Asegurar que el icono de mute siempre sea visible y tenga color */
.notification-mode-icon {
    font-size: 18px !important;
    margin-left: 8px;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Color cuando está activo (Sound) */
.notification-mode-icon[style*="volume_up"] {
    color: var(--accent-color) !important;
}

/* Color cuando está silenciado (Mute) */
.notification-mode-icon[style*="volume_off"] {
    color: #888 !important;
}

/* ================================================================= */
/* --- [SECCIÓN 28] ESTILOS MSN KAPI-LIVE --- */
/* ================================================================= */

/* Busca la sección 28 y añade esto */
.avatar.status-group { 
    border: 2px solid var(--border-color); /* Borde neutro */
    filter: none; 
    opacity: 1; 
}

/* Los Puntos de Estado (Borde del Avatar) */
.avatar.status-online { border: 3px solid #4CAF50; } /* Verde */
.avatar.status-busy    { border: 3px solid #F44336; } /* Rojo */
.avatar.status-away    { border: 3px solid #FFC107; } /* Amarillo */
.avatar.status-offline{ border: 3px solid #9E9E9E; filter: grayscale(100%); opacity: 0.8; } /* Gris */

/* La Frase Personal (Subnick) */
.chat-subnick {
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
    display: block;
    margin-top: 2px;
}

/* El Menú Flotante de Estado (Estilo MSN Moderno) */
.status-menu-dropdown {
    position: absolute;
    top: 60px; /* Ajustar según tu header */
    left: 10px;
    background: var(--panel-secondary-color); /* Usar variable de tema */
    border: 1px solid var(--border-color); /* Usar variable de tema */
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    width: 250px;
    z-index: 2000;
    display: none; /* Oculto por defecto */
    flex-direction: column;
    overflow: hidden;
    animation: slideDown 0.2s ease;
}
.status-menu-dropdown.visible { display: flex; }

.status-option {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
    color: var(--text-color); /* Usar variable de tema */
}
.status-option:hover { background: rgba(255,255,255,0.1); }
.status-dot-icon {
    width: 12px; height: 12px; border-radius: 50%; margin-right: 10px;
}
.dot-online { background: #4CAF50; box-shadow: 0 0 5px #4CAF50; }
.dot-busy    { background: #F44336; box-shadow: 0 0 5px #F44336; }
.dot-away    { background: #FFC107; box-shadow: 0 0 5px #FFC107; }
.dot-offline{ background: #9E9E9E; border: 1px solid #666; }

/* Input de Frase */
.status-phrase-container {
    padding: 10px;
    border-top: 1px solid var(--border-color); /* Usar variable de tema */
    background: rgba(0,0,0,0.2);
}
.status-phrase-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #666;
    color: var(--text-color); /* Usar variable de tema */
    padding: 5px;
    font-size: 0.9em;
    outline: none;
}
.status-phrase-input:focus { border-bottom-color: var(--accent-color); }

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

/* Contenedor principal del perfil (alinea el círculo y el texto) */
.header-profile {
    display: flex;
    align-items: center; /* Centra verticalmente */
    padding: 15px 10px;  /* Espaciado interno */
    gap: 12px;            /* Espacio entre el círculo y el texto */
    width: 100%;
    box-sizing: border-box;
}

/* El Círculo Rosado (Avatar) */
.user-profile-avatar {
    width: 50px;       /* Tamaño del círculo */
    height: 50px;      /* Tamaño del círculo */
    background-color: #ff00cc; /* EL COLOR ROSADO INTENSO DE TU FOTO */
    border-radius: 50%; /* Hace que sea redondo */
    overflow: hidden;   /* Recorta la imagen para que no salga del círculo */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #ff00cc; /* Borde del mismo color para dar fuerza */
    flex-shrink: 0;     /* Evita que el círculo se aplaste si la pantalla es pequeña */
    box-shadow: 0 0 10px rgba(255, 0, 204, 0.4); /* Pequeño resplandor rosado */
}

/* La imagen dentro del círculo */
.user-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la foto llene el círculo sin deformarse */
    display: block;    /* Elimina espacios extraños debajo de la imagen */
}

/* Contenedor de los textos (Nombre y @) */
.profile-text-info {
    display: flex;
    flex-direction: column; /* Pone el nombre arriba y el @ abajo */
    justify-content: center;
}

/* Estilo del Nombre (Jomar Perez) */
.user-profile-name {
    color: #ffffff; /* BLANCO PURO (quita lo gris/opaco) */
    font-size: 16px;
    font-weight: bold;
    margin: 0;
    line-height: 1.2;
    /* Efecto de brillo sutil alrededor de las letras blancas */
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.3); 
}

/* Estilo del Usuario (@elieli5) */
.user-profile-handle {
    color: #39ff14; /* VERDE NEÓN BRILLANTE (Estilo Matrix/Hacker) */
    font-size: 13px;
    font-weight: 500;
    margin: 2px 0 0 0; /* Separación pequeña del nombre */
    opacity: 1;      /* FUERZA VISIBILIDAD TOTAL (100%) */
    letter-spacing: 0.5px; /* Un poco de espacio para leer mejor */
}
/* --- ESTILOS DE LA CABECERA DEL PERFIL (NUEVO) --- */

.user-profile-header {
    display: flex;
    align-items: center;
    padding: 20px 15px; /* Espacio interno */
    background-color: var(--panel-secondary-color);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.3s ease;
    gap: 15px; /* Separación entre foto y texto */
}

.user-profile-header:hover {
    background-color: rgba(255, 255, 255, 0.05); /* Brillo al pasar el mouse */
}

/* Estilo para la foto de perfil */
.user-profile-header .avatar-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent-color); /* Borde Neón */
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.3); /* Resplandor suave */
    flex-shrink: 0;
}

/* Contenedor del texto */
.user-info-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    flex-grow: 1;
}

.user-info-text h4 {
    margin: 0;
    font-family: 'Orbitron', sans-serif;
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.user-info-text span {
    font-size: 0.85rem;
    color: var(--accent-color);
    font-weight: 400;
    opacity: 0.9;
}

/* Flecha animada */
.expand-arrow {
    transition: transform 0.3s ease;
    padding: 5px; /* Área de clic un poco más grande */
}
/* --- Estilos para el Perfil del Usuario Actual (Barra Lateral) --- */

/* Contenedor del avatar para posicionar el indicador */
.my-avatar-container {
    position: relative;
    display: inline-block;
    width: 50px; 
    height: 50px;
}

/* Asegura que la imagen del avatar llene el contenedor */
.my-avatar-container .user-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* El círculo indicador de estado */
.my-status-indicator {
    position: absolute;
    bottom: 2px; 
    right: 2px;  
    width: 13px;
    height: 13px;
    border-radius: 50%;
    /* CORREGIDO: Usamos el color real de fondo de tu panel para el borde */
    border: 2px solid var(--panel-secondary-color); 
    background-color: #95a5a6; 
    z-index: 10;
}

/* Estilo para la frase (Agregado por seguridad) */
.my-profile-status-phrase {
    font-size: 0.8rem;
    color: var(--text-secondary-color);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    font-style: italic;
}

/* Colores según el estado */
.my-status-indicator.online { background-color: #4CAF50; box-shadow: 0 0 4px #4CAF50; } /* Verde con brillo */
.my-status-indicator.busy { background-color: #F44336; }   /* Rojo */
.my-status-indicator.away { background-color: #FFC107; }   /* Amarillo */
.my-status-indicator.offline { background-color: #9E9E9E; } /* Gris */

/* Estilo para la frase de estado */
.my-profile-status-phrase {
    font-size: 0.8rem;
    color: #aaa; /* Un color más claro que el nombre */
    margin-top: 2px;
    white-space: nowrap; /* Evita que el texto pase a otra línea */
    overflow: hidden;    /* Oculta el texto que se desborda */
    text-overflow: ellipsis; /* Añade "..." al final si es muy largo */
    max-width: 180px; /* Ajusta el ancho máximo según necesites */
}
/* ================================================================= */
/* --- [SECCIÓN NUEVA] ESTILOS DEL PERFIL EDITABLE (MODAL) --- */
/* ================================================================= */

/* 1. Contenedor Principal del Modal */
.profile-modal-container {
    background-color: var(--panel-secondary-color);
    width: 400px;
    max-width: 90%;
    max-height: 90vh;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    overflow: hidden;
    color: var(--text-color);
}

/* 2. Botón de Cerrar (X) */
.profile-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    color: var(--text-secondary-color);
    cursor: pointer;
    font-size: 24px;
    z-index: 10;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.2s;
}
.profile-close-btn:hover {
    background-color: rgba(255,255,255,0.1);
    color: var(--accent-color);
}

/* 3. Cabecera (Avatar y Nombre) */
.profile-header-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), transparent);
    border-bottom: 1px solid var(--border-color);
}

/* Contenedor del Avatar para la superposición de la cámara */
.avatar-upload-container {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
}

.modal-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent-color);
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.2);
}

/* Botón de cámara superpuesto */
.avatar-edit-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: var(--action-color); /* Color rosa/magenta */
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--panel-secondary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}
.avatar-edit-overlay:hover {
    transform: scale(1.1);
}
.avatar-edit-overlay i {
    font-size: 18px;
}

/* Nombre en Vista */
.profile-header-section h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
}

/* Estado (Online/Offline) */
.status-text {
    margin: 5px 0 0;
    font-size: 0.9rem;
    color: var(--text-secondary-color);
    opacity: 0.8;
}

/* 4. Cuerpo y Lista de Información */
.profile-body-section {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* Lista de items */
.profile-info-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 10px;
    border-radius: 8px;
    background-color: rgba(255,255,255,0.02);
    border: 1px solid transparent;
}

/* Iconos de la izquierda */
.info-item > .material-icons {
    color: var(--accent-color);
    margin-top: 2px;
}

/* Etiquetas pequeñas (Usuario, Alias, etc.) */
.info-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary-color);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Texto del valor */
.info-item p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-color);
    word-break: break-word;
}

/* Items no editables (candado) */
.info-item.non-editable {
    opacity: 0.7;
    background: transparent;
}
.lock-icon {
    font-size: 16px;
    color: #555;
    margin-left: auto; /* Empuja el candado a la derecha */
}

/* 5. Inputs Estilo Neón (Modo Edición) */
.modal-input-neon {
    width: 100%;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px 10px;
    color: white;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box; /* Importante para que no se salga */
}

/* Efecto al hacer foco en el input */
.modal-input-neon:focus {
    border-color: var(--action-color); /* Borde rosa al escribir */
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.3); /* Resplandor */
    background: rgba(0,0,0,0.4);
}

/* TextArea (para la frase) */
.modal-input-neon.textarea {
    resize: none;
    min-height: 60px;
}

/* 6. Botones Neón */
.neon-button-secondary {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}
.neon-button-secondary:hover {
    background: rgba(0, 191, 255, 0.1);
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.2);
}

.profile-footer-actions {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 10px;
    background-color: rgba(0,0,0,0.2);
}

.neon-button-save {
    flex: 1;
    padding: 10px;
    background: var(--action-color); /* Rosa */
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
    transition: transform 0.1s;
}
.neon-button-save:active { transform: scale(0.98); }

.neon-button-cancel {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid #555;
    color: #aaa;
    border-radius: 8px;
    cursor: pointer;
}
.neon-button-cancel:hover { background: rgba(255,255,255,0.05); color: white; }

/* 7. CLASES DE UTILIDAD PARA MOSTRAR/OCULTAR (La Magia) */
/* Por defecto (Modo Vista): Ocultamos todo lo que tenga .edit-only */
.profile-modal-container:not(.editing) .edit-only {
    display: none !important;
}

/* Cuando activamos edición (.editing): Ocultamos lo que tenga .view-only */
.profile-modal-container.editing .view-only {
    display: none !important;
}

/* Asegurar que los elementos edit-only se muestren cuando estamos editando */
.profile-modal-container.editing .edit-only {
    display: block; /* O flex/inline-block según el elemento */
}
/* Excepción para el footer que usa flex */
.profile-modal-container.editing .profile-footer-actions.edit-only {
    display: flex !important;
}
/* --- ESTILO NEÓN PARA EL ARROBA (@usuario) --- */
.neon-username {
    color: #39ff14 !important; /* Verde Matrix intenso */
    text-shadow: 0 0 5px rgba(57, 255, 20, 0.6), 
                  0 0 10px rgba(57, 255, 20, 0.4);
    font-weight: bold;
    letter-spacing: 1px;
    font-family: 'Orbitron', sans-serif; /* Si tienes esta fuente, si no, usa la default */
}

/* --- ANIMACIÓN TIPO LETRERO (MARQUEE) --- */
.marquee-container {
    width: 100%;
    overflow: hidden; /* Esconde lo que se sale del cuadro */
    white-space: nowrap; /* Obliga al texto a estar en una sola línea */
    position: relative;
    /* Efecto de desvanecimiento en los bordes para que se vea profesional */
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.marquee-text {
    display: inline-block;
    padding-left: 100%; /* Empieza fuera de la pantalla a la derecha */
    animation: marquee-scroll 12s linear infinite; /* 12 segundos, velocidad constante, infinito */
    color: var(--text-secondary-color); /* Color gris/suave */
    font-style: italic;
    font-size: 0.85rem;
}

/* La animación física */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Ajuste especial para que no se vea enorme en la cabecera */
.header-marquee-wrapper {
    max-width: 350px; /* Ancho máximo en la cabecera */
    margin-top: 2px;
}
/* --- PUNTO DE ESTADO EN CABECERA --- */
.header-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px; /* Separación entre el punto y el texto */
    box-shadow: 0 0 8px currentColor; /* Resplandor del mismo color del punto */
    flex-shrink: 0; /* Evita que se aplaste */
}

/* Contenedor para alinear Punto + Marquesina */
.header-subtitle-container {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* O center si prefieres centrado */
    overflow: hidden;
}
/* El contenedor del punto */
.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
    background-color: #abbac3; /* Gris por defecto (desconectado) */
}

/* Cuando tiene la clase .online se pone verde */
.status-indicator.online {
    background-color: #28a745; /* Verde éxito */
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

/* Clase para ocultar elementos (usada en JS como d-none) */
.d-none {
    display: none !important;
}
.text-success {
    color: #28a745 !important;
    font-weight: 500;
}

.text-muted {
    color: #6c757d !important;
}.country-badge {
    background-color: #f1f1f1;
    color: #333;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 5px;
    border: 1px solid #ddd;
}
/* ================================================================= */
/* --- [SECCIÓN 29] CABECERA DINÁMICA DE GRUPOS Y STREAMING --- */
/* ================================================================= */

/* Contenedor de iconos: Asegura alineación y espaciado perfecto */
.header-icons {
    display: flex;
    align-items: center;
    gap: 8px; /* Espaciado entre tus "círculos" */
}

/* --- ESTILOS DEL BOTÓN STREAMING --- */
/* (Nota: El estilo del botón se ha movido a la Sección 31 para unificar) */

/* --- MENÚ DESPLEGABLE DE STREAMING --- */
/* (Nota: El estilo del menú se ha movido a la Sección 31 para unificar) */

/* --- OTROS ICONOS DE CABECERA --- */

/* Ocultar suavemente los iconos de llamada */
.private-chat-icon {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Icono de búsqueda en el chat (Círculo verde) */
#in-chat-search-button {
    color: var(--success-color); /* Verde neón #39FF14 */
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
}

#in-chat-search-button:hover {
    background-color: rgba(57, 255, 20, 0.1);
}

/* Menú de tres puntos (⋮) */
#conversation-menu-button {
    color: var(--text-secondary-color);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
}

#conversation-menu-button:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
/* Estilos para menciones en la información del grupo */
.mention-link {
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s;
}

.mention-link:hover {
    text-decoration: underline;
}

/* Estado: Usuario está en el grupo (Azul) */
.mention-member {
    color: #3b82f6; /* Azul tipo Tailwind/Bootstrap */
}

/* Estado: Usuario NO está en el grupo (Gris) */
.mention-non-member {
    color: #9ca3af; /* Gris medio */
}
/* ═══════════════════════════════════════════════════════════════════════════
   🎥 SISTEMA DE STREAMING PROFESIONAL - v3.5 FUSIÓN DEFINITIVA + EXTENSIONES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   VARIABLES ESPECÍFICAS DEL MÓDULO STREAMING
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    --pro-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --pro-border-color: rgba(255, 255, 255, 0.08);
    --pro-panel-bg: #1a1a1a;
    --pro-secondary-bg: #0f0f0f;
    --pro-text-primary: #ffffff;
    --pro-text-secondary: rgba(255, 255, 255, 0.6);
    --pro-accent-cyan: #00bfff;
    --pro-accent-red: #ff0066;
    --pro-accent-green: #39ff14;
    --pro-glow-cyan: 0 0 20px rgba(0, 191, 255, 0.4);
    --pro-glow-green: 0 0 20px rgba(57, 255, 20, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   [SECCIÓN 1] SISTEMA DE GRID ADAPTATIVO (ACTUALIZADO: 4 COLUMNAS)
   ═══════════════════════════════════════════════════════════════════════════ */

/* MANTENER NAVBAR VISIBLE EN MODO LIVE */
body.live-mode-active .nav-bar {
    display: flex !important;
    grid-column: 1;
    z-index: 100;
}

/* ESTADO BASE: Solo Video + Chat Live (Flotante) */
.app-container.streaming-active,
body.live-mode-active .app-container {
    display: grid !important;
    grid-template-columns: 70px 0px 0px 1fr !important;
    width: 100%;
    height: 100vh;
    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}

/* ESTADO 1: Usuario abre la Lista de Chats */
.app-container.streaming-active.show-chat-list {
    grid-template-columns: 70px 300px 0px 1fr !important;
}

/* ESTADO 2: Usuario abre una Conversación */
.app-container.streaming-active.show-conversation {
    grid-template-columns: 70px 0px 400px 1fr !important;
}

/* ESTADO 3: Modo "Todo Abierto" */
.app-container.streaming-active.show-chat-list.show-conversation {
    grid-template-columns: 70px 280px 350px 1fr !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [NUEVO] MODO OVERLAY / INCRUSTADO (ESTILO SUPERLIVE) - ACTUALIZADO
   ═══════════════════════════════════════════════════════════════════════════ */

/* 🔥 FONDO DEL SIDEBAR - TOTALMENTE TRANSPARENTE */
.app-container.streaming-active #pro-chat-sidebar,
.app-container.streaming-active #live-chat-column {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    width: 360px !important;
    height: 100vh !important;
    z-index: 500;
    border-left: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none;
}

.app-container.streaming-active #pro-chat-sidebar > *,
.app-container.streaming-active #live-chat-column > * {
    pointer-events: auto;
}

/* 🔥 HEADER "Chat en Vivo" - traslúcido glassmorphism */
.app-container.streaming-active #pro-chat-sidebar .chat-header,
.app-container.streaming-active #live-chat-column .chat-header,
.app-container.streaming-active #live-chat-header,
.app-container.streaming-active #pro-chat-sidebar > div:first-child {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    text-shadow: 0 1px 2px black;
}

/* ÁREA DE MENSAJES - transparente */
.app-container.streaming-active #pro-chat-sidebar .live-messages-area,
.app-container.streaming-active #pro-chat-sidebar #pro-chat-messages,
.app-container.streaming-active #live-chat-column .live-messages-area {
    background: transparent !important;
}

/* 🔥 MENSAJES - sin fondo, solo texto con sombra */
.app-container.streaming-active .chat-message {
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 4px;
    padding: 4px 8px;
}

/* 🔥 TEXTO legible sobre video */
.app-container.streaming-active .chat-username {
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,1) !important;
}

.app-container.streaming-active .chat-message-text {
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,1) !important;
}

/* 🔥 BARRA DE REACCIONES - traslúcida */
.app-container.streaming-active #live-reactions-bar {
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* 🔥 ÁREA DE INPUT - traslúcida abajo */
.app-container.streaming-active #pro-chat-sidebar .chat-input-area,
.app-container.streaming-active #live-chat-column .chat-input-area,
.app-container.streaming-active #live-chat-input-area {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}

/* 🔥 INPUT interno traslúcido */
.app-container.streaming-active .chat-input-wrapper,
.app-container.streaming-active .input-wrapper {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

@media (max-width: 768px) {
    .app-container.streaming-active #pro-chat-sidebar,
    .app-container.streaming-active #live-chat-column {
        width: 100% !important;
        /* En móvil quizás quieras un poco de fondo para leer mejor, o mantenerlo igual */
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%) !important;
        pointer-events: none;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   ASIGNACIÓN FIJA DE COLUMNAS
   ─────────────────────────────────────────────────────────────────────────── */

.app-container.streaming-active .nav-bar {
    grid-column: 1 !important;
}

.app-container.streaming-active .chat-list-panel {
    display: flex !important;
    grid-column: 2 !important;
    border-right: 1px solid var(--pro-border-color);
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    opacity: 1 !important;
    white-space: nowrap;
}

.app-container.streaming-active .conversation-panel {
    display: flex !important;
    grid-column: 3 !important;
    border-right: 1px solid var(--pro-border-color);
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
    opacity: 1 !important;
    white-space: nowrap;
}

/* CAMBIO 3: Asegurar Grid Column 4 */
#streaming-stage {
    grid-column: 4 !important;
    min-width: 0 !important;
}

/* CAMBIO 2: Liberar chat del grid para permitir overlay */
#live-chat-column,
#pro-chat-sidebar {
    grid-column: unset;
    min-width: unset;
}

/* ───────────────────────────────────────────────────────────────────────────
   FIX CRÍTICO: Ocultar área de mensajes normales durante streaming
   ─────────────────────────────────────────────────────────────────────────── */

.app-container.streaming-active .conversation-panel .message-area {
    display: none !important;
}

.app-container.streaming-active .conversation-panel .conversation-footer {
    display: none !important;
}

.app-container.streaming-active.show-conversation .conversation-panel .message-area,
.app-container.streaming-active.show-conversation .conversation-panel .conversation-footer {
    display: flex !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   AJUSTES VISUALES PARA COLAPSO SUAVE
   ─────────────────────────────────────────────────────────────────────────── */

.app-container.streaming-active:not(.show-chat-list) .chat-list-panel * {
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.app-container.streaming-active.show-chat-list .chat-list-panel * {
    opacity: 1;
    pointer-events: auto;
}

.app-container.streaming-active:not(.show-conversation) .conversation-panel * {
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.app-container.streaming-active.show-conversation .conversation-panel * {
    opacity: 1;
    pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [SECCIÓN 1.5] BOTÓN DE CIERRE EN CONVERSACIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

.conversation-close-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    margin-left: auto;
}

.conversation-close-btn i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.conversation-close-btn:hover {
    background: rgba(255, 71, 87, 0.15);
    border-color: #ff4757;
    color: #ff4757;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.2);
}

.conversation-close-btn:hover i {
    transform: rotate(90deg);
}

.conversation-close-btn:active {
    transform: scale(0.95);
}

.app-container.streaming-active .conversation-panel .conversation-header,
.app-container.streaming-active .conversation-panel .chat-header {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: var(--pro-panel-bg);
    border-bottom: 1px solid var(--pro-border-color);
}

.app-container.streaming-active .conversation-panel .conversation-header h3,
.app-container.streaming-active .conversation-panel .chat-header h3 {
    flex: 1;
    margin: 0;
    color: var(--pro-text-primary);
    font-size: 1rem;
    font-weight: 600;
}

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

.conversation-close-btn {
    animation: fadeInCloseBtn 0.3s ease-out;
}

.conversation-close-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: -35px;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
    animation: tooltipFadeIn 0.2s ease-out;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   [SECCIÓN 2] VIDEO STAGE - FIX DEFINITIVO (INTEGRADO)
   ═══════════════════════════════════════════════════════════════════════════ */

#streaming-stage {
    position: relative;
    width: 100%;
    height: 100vh;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--pro-border-color);
}

/* CORRECTOR DE POSICIÓN GRID CUANDO HAY PANELES ABIERTOS */
.app-container.streaming-active.show-conversation #streaming-stage {
    grid-column: 4;
}

.app-container.streaming-active.show-chat-list.show-conversation #streaming-stage {
    grid-column: 4;
}

/* ✅ VIDEO HIJO DIRECTO - POSICIÓN ABSOLUTA */
#streaming-stage > #pro-main-stream-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background: #000;
    z-index: 1;
}

#streaming-stage > #stream-preview-local {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 640px !important;
    max-height: 360px !important;
    object-fit: cover !important;
    transform: scaleX(1); /* ✅ SIN ESPEJO - Imagen natural */
    background: #000;
    z-index: 1;
}

/* Loader debe estar encima */
#pro-video-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* ───────────────────────────────────────────────────────────────────────────
   BOTÓN FLOTANTE TOGGLE SIDEBAR
   ─────────────────────────────────────────────────────────────────────────── */

.toggle-sidebar-btn {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 101;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--pro-text-primary);
    padding: 8px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    transition: var(--pro-transition);
}

.toggle-sidebar-btn:hover {
    background: var(--pro-accent-cyan);
    color: #000;
    box-shadow: var(--pro-glow-cyan);
    transform: scale(1.05);
}

/* ───────────────────────────────────────────────────────────────────────────
   OVERLAY SUPERIOR DEL STREAM
   ─────────────────────────────────────────────────────────────────────────── */

.live-header-overlay,
.stream-top-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 70px;
    padding-top: 60px !important; /* Espacio para el widget de progreso centrado */
}

.streamer-info-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.streamer-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 2px solid var(--pro-accent-cyan);
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
}

.streamer-details {
    display: flex;
    flex-direction: column;
}

.live-badge {
    background: var(--pro-accent-red);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: pulseLive 2s infinite;
    width: fit-content;
}

@keyframes pulseLive {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.stream-info,
.stream-title {
    flex: 1;
    margin: 0 15px;
    margin: 0 15px;
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
}

.stream-info h3 {
    color: white;
    font-size: 1rem;
    margin: 0 0 4px 0;
    font-weight: 600;
}

#pro-stream-duration,
.stream-stats {
    color: var(--pro-text-secondary);
    font-size: 0.85rem;
    display: flex;
    gap: 10px;
}

.viewer-count {
    color: white;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ───────────────────────────────────────────────────────────────────────────
   LOADER DEL VIDEO
   ─────────────────────────────────────────────────────────────────────────── */

.video-loader,
#pro-video-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.spinner-neon {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(0, 191, 255, 0.2);
    border-top-color: var(--pro-accent-cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* ───────────────────────────────────────────────────────────────────────────
   BARRA DE CONTROLES DEL BROADCASTER
   ─────────────────────────────────────────────────────────────────────────── */

.broadcaster-controls-bar,
.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 100;
}

#streaming-stage:hover .broadcaster-controls-bar,
.video-container:hover .video-controls {
    opacity: 1;
}

.control-btn,
.control-icon-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.control-icon-btn {
    background: none;
    border: none;
    padding: 5px;
    font-size: 1.2rem;
}

.control-btn:hover,
.control-icon-btn:hover {
    background: var(--pro-accent-cyan);
    color: #000;
    transform: translateY(-2px);
}

.control-icon-btn:hover {
    transform: scale(1.1);
}

.control-btn.destruct {
    background: rgba(255, 0, 102, 0.2);
    border-color: var(--pro-accent-red);
    margin-left: auto;
}

.control-btn.destruct:hover {
    background: var(--pro-accent-red);
    color: white;
}

.controls-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [SECCIÓN 3] CHAT LATERAL EN VIVO
   ═══════════════════════════════════════════════════════════════════════════ */

#live-chat-column,
#pro-chat-sidebar {
    background: var(--pro-secondary-bg);
    border-left: 1px solid var(--pro-border-color);
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* SE HAN ELIMINADO LAS REGLAS QUE FORZABAN GRID-COLUMN: 5 AQUÍ */

#live-chat-header,
.chat-header {
    padding: 15px;
    background: rgba(0, 0, 0, 0.35); /* ✅ CORREGIDO: Transparencia Forzada */
    backdrop-filter: blur(8px);       /* ✅ CORREGIDO: Efecto Glass */
    border-bottom: 1px solid var(--pro-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#live-chat-header span,
.chat-header h3 {
    color: var(--pro-text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.chat-header h3 {
    font-size: 1rem;
}

.live-messages-area,
#pro-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.live-messages-area::-webkit-scrollbar,
#pro-chat-messages::-webkit-scrollbar {
    width: 8px;
}

.live-messages-area::-webkit-scrollbar-track,
#pro-chat-messages::-webkit-scrollbar-track {
    background: var(--pro-secondary-bg);
}

.live-messages-area::-webkit-scrollbar-thumb,
#pro-chat-messages::-webkit-scrollbar-thumb {
    background: var(--pro-border-color);
    border-radius: 4px;
}

.live-messages-area::-webkit-scrollbar-thumb:hover,
#pro-chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--pro-accent-cyan);
}

.chat-message {
    display: flex;
    gap: 10px;
    animation: slideInMessage 0.3s ease-out;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px;
    border-radius: 8px;
    transition: background 0.2s;
}

.chat-message:hover {
    background: rgba(255, 255, 255, 0.05);
}

@keyframes slideInMessage {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.chat-message-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: bold;
    color: #000;
    flex-shrink: 0;
    background: var(--pro-accent-cyan);
}

#pro-chat-messages .chat-message-avatar {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
}

.chat-message-content {
    flex: 1;
    min-width: 0;
}

.chat-message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.chat-username {
    color: var(--pro-accent-cyan);
    font-size: 0.85rem;
    font-weight: 600;
}

.chat-timestamp {
    color: var(--pro-text-secondary);
    font-size: 0.75rem;
}

.chat-message-text {
    color: var(--pro-text-secondary);
    font-size: 0.9rem;
    word-wrap: break-word;
    margin-top: 4px;
}

.chat-welcome {
    text-align: center;
    color: var(--pro-text-secondary);
    font-size: 0.85rem;
    padding: 20px;
    opacity: 0.6;
}

#live-chat-input-area,
.chat-input-area {
    padding: 15px;
    background: rgba(0, 0, 0, 0.35); /* ✅ CORREGIDO: Transparencia Forzada */
    backdrop-filter: blur(8px);       /* ✅ CORREGIDO: Efecto Glass */
    border-top: 1px solid var(--pro-border-color);
}

.input-wrapper,
.chat-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--pro-secondary-bg);
    border: 1px solid var(--pro-border-color);
    border-radius: 20px;
    padding: 5px 10px;
    transition: border-color 0.3s;
}

.input-wrapper:focus-within,
.chat-input-wrapper:focus-within {
    border-color: var(--pro-accent-cyan);
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.2);
}

#pro-chat-input {
    flex: 1;
    background: transparent;
    border: none;
    color: white;
    padding: 8px;
    outline: none;
    font-size: 0.9rem;
}

#pro-chat-input::placeholder {
    color: var(--pro-text-secondary);
    opacity: 0.6;
}

#pro-send-btn,
.chat-send-btn {
    background: var(--pro-accent-cyan);
    color: #000;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

#pro-send-btn:hover,
.chat-send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   [SECCIÓN 4] BOTÓN STREAMING Y MENÚ
   ═══════════════════════════════════════════════════════════════════════════ */

#stream-button {
    color: var(--pro-accent-cyan);
    background: rgba(0, 191, 255, 0.1);
    border: 1px solid rgba(0, 191, 255, 0.3);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 1.2rem;
}

#stream-button:hover {
    background: var(--pro-accent-cyan);
    color: #000;
    box-shadow: 0 0 15px var(--pro-accent-cyan);
    transform: scale(1.05);
}

#stream-dropdown-menu {
    position: absolute;
    top: 65px;
    right: 100px;
    background: var(--pro-panel-bg);
    border: 1px solid var(--pro-accent-cyan);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    overflow: hidden;
    z-index: 1001;
    min-width: 200px;
}

#stream-dropdown-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#stream-dropdown-menu li {
    padding: 12px 20px;
    color: white;
    transition: background 0.2s;
    cursor: pointer;
}

#stream-dropdown-menu li:hover {
    background: var(--pro-accent-cyan);
    color: #000;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [SECCIÓN 5] MODAL DE CONFIGURACIÓN DE TRANSMISIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

#streaming-setup-container,
.streaming-setup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#streaming-setup-container.visible,
.streaming-setup-overlay.visible {
    display: flex !important;
    opacity: 1;
    animation: overlayFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes overlayFadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(12px);
    }
}

.streaming-setup-wrapper {
    background: linear-gradient(145deg, #0f0f0f 0%, #1a1a1a 100%);
    width: 100%;
    max-width: 920px;
    max-height: 88vh;
    border-radius: 24px;
    border: 1px solid rgba(57, 255, 20, 0.15);
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.9),
        0 0 0 1px rgba(57, 255, 20, 0.08),
        0 0 80px rgba(57, 255, 20, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.streaming-setup-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(57, 255, 20, 0.4) 50%,
        transparent 100%
    );
    opacity: 0.5;
}

.setup-header {
    padding: 22px 28px;
    background: rgba(57, 255, 20, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    position: relative;
}

.setup-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 28px;
    right: 28px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(57, 255, 20, 0.3) 50%,
        transparent 100%
    );
}

.setup-header h2 {
    color: #39ff14;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.5px;
    text-shadow: 
        0 0 20px rgba(57, 255, 20, 0.4),
        0 0 40px rgba(57, 255, 20, 0.2);
    display: flex;
    align-items: center;
    gap: 12px;
}

.setup-header h2 i.material-icons,
.setup-header h2 .fas {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.6));
}

.setup-header .close-btn,
#cancel-stream-setup-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ff4757;
    cursor: pointer;
    border-radius: 12px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
}

.setup-header .close-btn i,
#cancel-stream-setup-btn i {
    font-size: 22px;
    transition: transform 0.3s ease;
}

.setup-header .close-btn:hover,
#cancel-stream-setup-btn:hover {
    background: rgba(255, 71, 87, 0.15);
    border-color: #ff4757;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 20px rgba(255, 71, 87, 0.3),
        0 0 30px rgba(255, 71, 87, 0.2);
}

.setup-header .close-btn:hover i,
#cancel-stream-setup-btn:hover i {
    transform: rotate(90deg);
    color: #ff4757;
}

.setup-body {
    padding: 28px;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 28px;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(57, 255, 20, 0.3) transparent;
}

.setup-body::-webkit-scrollbar {
    width: 6px;
}

.setup-body::-webkit-scrollbar-track {
    background: transparent;
}

.setup-body::-webkit-scrollbar-thumb {
    background: rgba(57, 255, 20, 0.25);
    border-radius: 10px;
    transition: background 0.2s;
}

.setup-body::-webkit-scrollbar-thumb:hover {
    background: rgba(57, 255, 20, 0.45);
}

.setup-preview-area {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(57, 255, 20, 0.1);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.video-wrapper:hover {
    border-color: rgba(57, 255, 20, 0.3);
    box-shadow: 
        0 15px 40px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(57, 255, 20, 0.15);
}

#camera-loading-overlay,
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    z-index: 5;
}

.loading-overlay .spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(57, 255, 20, 0.2);
    border-top-color: #39ff14;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 15px;
}

.loading-overlay p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    font-weight: 500;
}

.preview-controls {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.preview-controls .icon-btn {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(57, 255, 20, 0.3);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.preview-controls .icon-btn:hover {
    background: #39ff14;
    color: #000;
    border-color: #39ff14;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 8px 20px rgba(57, 255, 20, 0.4),
        0 0 30px rgba(57, 255, 20, 0.3);
}

.preview-controls .icon-btn:active {
    transform: translateY(-1px) scale(0.98);
}

.preview-controls .icon-btn.disabled {
    background: rgba(255, 71, 87, 0.2);
    border-color: #ff4757;
    color: #ff4757;
}

.permission-warning {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 71, 87, 0.1);
    border: 1px solid rgba(255, 71, 87, 0.3);
    border-radius: 10px;
    color: #ff4757;
    font-size: 0.85rem;
    margin-top: 10px;
}

.permission-warning i {
    font-size: 18px;
}

.setup-form-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.neon-input,
#stream-title-field,
#stream-description-field,
#stream-quality-select {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    padding: 13px 16px !important;
    color: white !important;
    font-size: 0.95rem !important;
    font-family: 'Segoe UI', system-ui !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.neon-input:focus,
#stream-title-field:focus,
#stream-description-field:focus,
#stream-quality-select:focus {
    border-color: #39ff14 !important;
    background: rgba(57, 255, 20, 0.06) !important;
    box-shadow: 
        0 0 0 3px rgba(57, 255, 20, 0.12),
        0 4px 12px rgba(57, 255, 20, 0.15);
    transform: translateY(-1px);
}

textarea.neon-input,
#stream-description-field {
    min-height: 90px;
    max-height: 140px;
    resize: vertical;
    font-family: inherit !important;
    line-height: 1.5;
}

.neon-input::placeholder,
#stream-title-field::placeholder,
#stream-description-field::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-style: italic;
}

.char-counter {
    align-self: flex-end;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: -4px;
    font-weight: 500;
}

.radio-group {
    display: flex;
    gap: 18px;
    padding: 8px 0;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s;
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
}

.radio-group label:hover {
    color: white;
}

.radio-group input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #39ff14;
}

.setup-footer {
    padding: 20px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.2);
}

.neon-btn-primary,
#start-broadcast-btn {
    background: linear-gradient(135deg, #39ff14 0%, #2ecc71 100%);
    border: none;
    color: #000;
    padding: 14px 32px;
    border-radius: 50px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 6px 20px rgba(57, 255, 20, 0.35),
        0 0 40px rgba(57, 255, 20, 0.15);
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.neon-btn-primary::before,
#start-broadcast-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s;
}

.neon-btn-primary:not(:disabled):hover,
#start-broadcast-btn:not(:disabled):hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 10px 30px rgba(57, 255, 20, 0.5),
        0 0 60px rgba(57, 255, 20, 0.3);
}

.neon-btn-primary:not(:disabled):hover::before,
#start-broadcast-btn:not(:disabled):hover::before {
    left: 100%;
}

.neon-btn-primary:active,
#start-broadcast-btn:active {
    transform: translateY(-1px) scale(0.98);
}

.neon-btn-primary:disabled,
#start-broadcast-btn:disabled {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.3);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   [SECCIÓN 6] RESPONSIVE DESIGN
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1400px) {
    .app-container.streaming-active.show-chat-list.show-conversation {
        grid-template-columns: 70px 0px 320px 1fr !important; /* CORREGIDO */
    }
}

@media (max-width: 1200px) {
    .app-container.streaming-active {
        grid-template-columns: 70px 0px 1fr !important; /* CORREGIDO */
    }
    
    .app-container.streaming-active.show-chat-list {
        grid-template-columns: 70px 250px 1fr !important; /* CORREGIDO */
    }
    
    .app-container.streaming-active.show-conversation {
        grid-template-columns: 70px 0px 350px 1fr !important; /* CORREGIDO */
    }
    
    .app-container.streaming-active.show-conversation #live-chat-column,
    .app-container.streaming-active.show-conversation #pro-chat-sidebar {
        display: none;
    }
}

@media (max-width: 900px) {
    .setup-body {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .streaming-setup-wrapper {
        max-width: 95%;
        max-height: 92vh;
    }
}

@media (max-width: 768px) {
    .conversation-close-btn {
        width: 36px;
        height: 36px;
    }
    
    .conversation-close-btn i {
        font-size: 20px;
    }

    .app-container.streaming-active {
        grid-template-columns: 60px 0px 1fr !important; /* CORREGIDO */
    }
    
    #live-chat-column,
    #pro-chat-sidebar {
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        max-width: 300px;
        transform: translateX(100%);
        transition: transform 0.3s;
        z-index: 1000;
    }
    
    #live-chat-column.mobile-visible,
    #live-chat-column.visible,
    #pro-chat-sidebar.mobile-visible,
    #pro-chat-sidebar.visible {
        transform: translateX(0);
    }

    #streaming-stage {
        height: 100vh !important;
    }
    
    #streaming-stage > #pro-main-stream-video,
    #streaming-stage > #stream-preview-local {
        width: 100% !important;
        height: 100% !important;
    }
    
    .broadcaster-controls-bar,
    .video-controls {
        opacity: 1 !important;
        padding: 10px;
        gap: 5px;
    }
    
    .control-btn,
    .control-icon-btn {
        padding: 6px 8px;
        font-size: 0.75rem;
    }
    
    .stream-top-bar,
    .live-header-overlay {
        padding-left: 15px;
    }
    
    .toggle-sidebar-btn {
        left: 10px;
        top: 10px;
    }

    /* Widget de progreso en móvil: más compacto */
    #personal-progress-widget {
        width: calc(100% - 40px) !important;
        max-width: 320px;
        padding: 8px 12px !important;
    }
}

@media (max-width: 500px) {
    .setup-header {
        padding: 18px 20px;
    }
    
    .setup-header h2 {
        font-size: 1.1rem;
    }
    
    .setup-body {
        padding: 20px;
    }
    
    .neon-btn-primary,
    #start-broadcast-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .live-header-overlay,
    .stream-top-bar {
        padding: 12px;
        padding-top: 56px !important;
    }
    
    .streamer-avatar {
        width: 35px;
        height: 35px;
    }
    
    .stream-title,
    .stream-info h3 {
        font-size: 0.85rem;
    }
    
    .broadcaster-controls-bar {
        padding: 8px;
    }
    
    .control-btn {
        padding: 5px 8px;
        font-size: 0.7rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎥 BANNER DE NOTIFICACIÓN DE STREAMING EN VIVO
   ═══════════════════════════════════════════════════════════════════════════ */

.live-notification-banner {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, rgba(20, 20, 20, 0.98) 100%);
    backdrop-filter: blur(15px) saturate(150%);
    -webkit-backdrop-filter: blur(15px) saturate(150%);
    border: 1px solid rgba(57, 255, 20, 0.3);
    border-radius: 16px;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(57, 255, 20, 0.1),
        0 0 60px rgba(57, 255, 20, 0.15);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 320px;
    max-width: 420px;
    opacity: 0;
    transform: translateX(400px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.live-notification-banner.show {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.live-notif-content {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.live-notif-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #39ff14, #2ecc71);
    box-shadow: 0 0 15px rgba(57, 255, 20, 0.4);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    color: #000;
    position: relative;
    overflow: hidden;
}

.live-notif-avatar::before {
    content: '🔴';
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 14px;
    animation: pulseLiveNotif 2s ease-in-out infinite;
}

@keyframes pulseLiveNotif {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.1);
    }
}

.live-notif-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.live-notif-text strong {
    color: #39ff14;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
}

.live-notif-text span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.live-notif-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-join-live {
    background: linear-gradient(135deg, #39ff14 0%, #2ecc71 100%);
    color: #000;
    border: none;
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(57, 255, 20, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-join-live:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        0 6px 20px rgba(57, 255, 20, 0.5),
        0 0 30px rgba(57, 255, 20, 0.3);
}

.btn-join-live:active {
    transform: translateY(0) scale(0.98);
}

.btn-close-notif {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
}

.btn-close-notif:hover {
    background: rgba(255, 71, 87, 0.15);
    border-color: #ff4757;
    color: #ff4757;
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    .live-notification-banner {
        top: 10px;
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
        padding: 14px 16px;
    }
    
    .live-notif-avatar {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
    
    .live-notif-text strong {
        font-size: 0.9rem;
    }
    
    .live-notif-text span {
        font-size: 0.8rem;
    }
    
    .btn-join-live {
        padding: 7px 14px;
        font-size: 0.8rem;
    }
}

@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(400px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes slideOutToRight {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(400px) scale(0.9);
    }
}

.d-none {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN - v3.5 FUSIÓN DEFINITIVA
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   EXTENSIONES v4.0 - INTERACTIVIDAD Y MODERACIÓN
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   SISTEMA DE ROLES - BADGES Y COLORES (PASO 1)
   ═══════════════════════════════════════════════════════════════════════════ */

.role-badge {
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
    vertical-align: middle;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}

.chat-username {
    font-weight: bold;
    transition: color 0.3s ease;
}

.chat-message-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}

/* Animación sutil para badges */
.role-badge {
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ═══════════════════════════════════════════════════════════════════
   MENÚ CONTEXTUAL DE MODERACIÓN - PASO 2
   ═══════════════════════════════════════════════════════════════════ */

#mod-context-menu {
    position: fixed;
    z-index: 99999;
    background: #1a1a2e;
    border: 1px solid #00f2ff;
    border-radius: 12px;
    padding: 8px 0;
    min-width: 200px;
    box-shadow: 0 8px 32px rgba(0, 242, 255, 0.2);
    display: none;
    animation: menuFadeIn 0.15s ease-out;
}

@keyframes menuFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(-5px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.mod-menu-header {
    padding: 8px 16px 6px;
    font-size: 0.7rem;
    color: #00f2ff;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 4px;
}

.mod-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #e0e0e0;
    transition: background 0.15s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.mod-menu-item:hover {
    background: rgba(0, 242, 255, 0.1);
    color: #fff;
}

.mod-menu-item.destructive {
    color: #ff5252;
}

.mod-menu-item.destructive:hover {
    background: rgba(255, 82, 82, 0.1);
}

.mod-menu-item.success {
    color: #69ff47;
}

.mod-menu-item.success:hover {
    background: rgba(105, 255, 71, 0.1);
}

.mod-menu-item .menu-icon {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.mod-menu-separator {
    height: 1px;
    background: rgba(255,255,255,0.08);
    margin: 4px 0;
}

/* Toast de confirmación */
#mod-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1a1a2e;
    border: 1px solid #00f2ff;
    color: #fff;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 0.9rem;
    z-index: 99999;
    transition: transform 0.3s ease;
    box-shadow: 0 4px 20px rgba(0,242,255,0.3);
    pointer-events: none;
}

#mod-toast.show {
    transform: translateX(-50%) translateY(0);
}

/* Resaltado del mensaje seleccionado */
.chat-message.mod-selected {
    background: rgba(0, 242, 255, 0.08);
    border-radius: 8px;
    outline: 1px solid rgba(0, 242, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════
   MEJORAS UI/UX STREAMING - PASO 4
   ═══════════════════════════════════════════════════════════════════ */

/* --- Contador de Viewers Animado --- */
#live-viewer-count {
    transition: all 0.4s ease;
    display: inline-block;
}

#live-viewer-count.count-up {
    animation: countUp 0.4s ease;
    color: #69ff47;
}

#live-viewer-count.count-down {
    animation: countDown 0.4s ease;
    color: #ff5252;
}

@keyframes countUp {
    0%    { transform: translateY(5px); opacity: 0; }
    100% { transform: translateY(0);   opacity: 1; }
}

@keyframes countDown {
    0%    { transform: translateY(-5px); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}

/* --- Indicador de Calidad de Conexión --- */
#connection-quality {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    cursor: default;
}

#connection-quality .bar {
    width: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.2);
    transition: background 0.5s ease, height 0.3s ease;
}

#connection-quality .bar:nth-child(1) { height: 5px;  }
#connection-quality .bar:nth-child(2) { height: 9px;  }
#connection-quality .bar:nth-child(3) { height: 13px; }
#connection-quality .bar:nth-child(4) { height: 16px; }

#connection-quality.quality-excellent .bar { background: #69ff47; }
#connection-quality.quality-good      .bar:nth-child(-n+3) { background: #00f2ff; }
#connection-quality.quality-fair      .bar:nth-child(-n+2) { background: #ffd93d; }
#connection-quality.quality-poor      .bar:nth-child(1)    { background: #ff5252; }

/* --- Notificación flotante de entrada --- */
#viewer-join-notification {
    position: absolute;
    bottom: 80px;
    left: 20px;
    background: rgba(26, 26, 46, 0.95);
    border: 1px solid #00f2ff;
    border-radius: 25px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: #fff;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    max-width: 280px;
}

#viewer-join-notification.show {
    opacity: 1;
    transform: translateY(0);
}

#viewer-join-notification .notif-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00f2ff, #FF00FF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
}

#viewer-join-notification .notif-text strong {
    color: #00f2ff;
}

/* --- Barra de Admiración estilo TikTok --- */
.admiration-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.admiration-label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#admiration-bar-container {
    width: 120px;
    height: 6px;
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

#admiration-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00f2ff, #FF00FF, #39ff14);
    background-size: 200% 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
    position: relative;
}

#admiration-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FF00FF;
    box-shadow: 0 0 8px #FF00FF;
}

#admiration-percent {
    font-size: 0.7rem;
    color: #FF00FF;
    font-weight: bold;
}

/* --- Badge EN VIVO pulsante mejorado --- */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #ff0000;
    color: white;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 1px;
}

.live-badge::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: white;
    animation: livePulse 1.2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1);   }
    50%       { opacity: 0.4; transform: scale(0.8); }
}

/* --- Duración del stream mejorada --- */
#pro-stream-duration {
    font-family: 'Orbitron', monospace;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    letter-spacing: 1px;
}

/* --- Overlay de stats mejorado --- */
.stream-stats-overlay {
    position: absolute;
    top: 70px;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 15;
    pointer-events: none;
}

.stat-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 4px 10px;
    font-size: 0.78rem;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
}

.stat-pill .material-icons {
    font-size: 0.9rem;
    color: #00f2ff;
}

/* ═══════════════════════════════════════════════════════════════════
   SISTEMA DE EMOTES - PASO 5
   ═══════════════════════════════════════════════════════════════════ */

/* --- Panel de Emotes --- */
#emote-panel {
    position: absolute;
    bottom: 65px;
    right: 10px;
    width: 300px;
    background: #1a1a2e;
    border: 1px solid rgba(0, 242, 255, 0.3);
    border-radius: 16px;
    padding: 12px;
    z-index: 999;
    display: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    animation: emotePanelIn 0.2s ease-out;
}

@keyframes emotePanelIn {
    from { opacity: 0; transform: translateY(10px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Categorías --- */
.emote-categories {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 8px;
}

.emote-cat-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s;
    opacity: 0.5;
}

.emote-cat-btn.active,
.emote-cat-btn:hover {
    background: rgba(0, 242, 255, 0.15);
    opacity: 1;
}

/* --- Búsqueda de emotes --- */
#emote-search {
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 6px 12px;
    color: #fff;
    font-size: 0.82rem;
    margin-bottom: 10px;
    outline: none;
    box-sizing: border-box;
}

#emote-search::placeholder { color: rgba(255,255,255,0.3); }
#emote-search:focus { border-color: rgba(0, 242, 255, 0.4); }

/* --- Grid de emotes --- */
.emote-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,242,255,0.3) transparent;
}

.emote-grid::-webkit-scrollbar { width: 4px; }
.emote-grid::-webkit-scrollbar-thumb {
    background: rgba(0,242,255,0.3);
    border-radius: 2px;
}

/* --- Cada emote --- */
.emote-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 1.4rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s ease;
    position: relative;
}

.emote-item:hover {
    background: rgba(0, 242, 255, 0.15);
    transform: scale(1.25);
}

.emote-item:active {
    transform: scale(0.95);
}

/* Tooltip del emote */
.emote-item::after {
    content: attr(data-shortcode);
    position: absolute;
    bottom: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #00f2ff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 10;
}

.emote-item:hover::after { opacity: 1; }

/* --- Emotes en el chat --- */
.chat-emote {
    display: inline-block;
    font-size: 1.3rem;
    vertical-align: middle;
    line-height: 1;
    transition: transform 0.2s ease;
    cursor: default;
}

.chat-emote:hover {
    transform: scale(1.3);
}

/* Emote animado */
.chat-emote.animated {
    animation: emoteFloat 0.6s ease-out;
}

@keyframes emoteFloat {
    0%    { transform: scale(0) rotate(-10deg); opacity: 0; }
    60%   { transform: scale(1.3) rotate(5deg);  opacity: 1; }
    100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}

/* --- Botón de emotes en el input --- */
#emote-toggle-btn {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
    opacity: 0.6;
    line-height: 1;
}

#emote-toggle-btn:hover {
    opacity: 1;
    background: rgba(0,242,255,0.1);
    transform: scale(1.1);
}

#emote-toggle-btn.active {
    opacity: 1;
    filter: drop-shadow(0 0 6px #00f2ff);
}

/* --- Autocompletado de shortcodes --- */
#emote-autocomplete {
    position: absolute;
    bottom: 65px;
    left: 10px;
    background: #1a1a2e;
    border: 1px solid rgba(0,242,255,0.3);
    border-radius: 12px;
    padding: 6px;
    z-index: 998;
    display: none;
    max-width: 250px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
    font-size: 0.85rem;
    color: #e0e0e0;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
    background: rgba(0,242,255,0.15);
    color: #fff;
}

.autocomplete-item .ac-emoji { font-size: 1.2rem; }
.autocomplete-item .ac-code  { color: #00f2ff; font-size: 0.78rem; }

/* ═══════════════════════════════════════════════════════════════════
   SISTEMA DE REACCIONES EN VIVO - PASO 6
   ═══════════════════════════════════════════════════════════════════ */

/* Barra de botones de reacción */
#live-reactions-bar {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.reaction-live-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.reaction-live-btn:hover {
    background: rgba(0, 242, 255, 0.15);
    border-color: rgba(0, 242, 255, 0.4);
    transform: scale(1.2);
}

.reaction-live-btn:active {
    transform: scale(0.9);
}

/* Efecto de "rebote" al hacer clic */
.reaction-live-btn.clicked {
    animation: reactionClick 0.3s ease-out;
}

@keyframes reactionClick {
    0%    { transform: scale(1);   }
    50%   { transform: scale(1.4); }
    100% { transform: scale(1);   }
}

/* Contador encima del botón */
.reaction-live-btn .reaction-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--pro-accent-red);
    color: white;
    font-size: 0.6rem;
    font-weight: bold;
    border-radius: 10px;
    padding: 1px 5px;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
    pointer-events: none;
}

/* Contenedor de emojis flotantes */
#floating-reactions-container {
    position: absolute;
    bottom: 70px;
    right: 20px;
    width: 60px;
    height: 400px;
    pointer-events: none;
    overflow: hidden;
    z-index: 200;
}

/* Emoji flotante individual */
.floating-reaction {
    position: absolute;
    bottom: 0;
    font-size: 1.8rem;
    animation: floatUp 3.5s ease-out forwards;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(0.5) rotate(-10deg);
        opacity: 1;
    }
    20% {
        transform: translateY(-60px) scale(1.2) rotate(5deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-180px) scale(1) rotate(-5deg) translateX(10px);
        opacity: 0.9;
    }
    80% {
        transform: translateY(-300px) scale(0.8) rotate(8deg) translateX(-8px);
        opacity: 0.5;
    }
    100% {
        transform: translateY(-400px) scale(0.6) rotate(0deg);
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   SISTEMA DE POLLS/ENCUESTAS - PASO 7
   ═══════════════════════════════════════════════════════════════════ */

/* Modal de creación (broadcaster) */
#poll-creator-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.poll-creator-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.poll-creator-box {
    background: #1a1a2e;
    border: 1px solid rgba(0,242,255,0.3);
    border-radius: 16px;
    padding: 24px;
    width: 340px;
    max-width: 95vw;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}

.poll-creator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: bold;
    color: #00f2ff;
}

.poll-creator-header button {
    background: none;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.poll-creator-header button:hover { color: #ff5252; }

#poll-question-input,
.poll-option-input {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 14px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s;
}

#poll-question-input:focus,
.poll-option-input:focus {
    border-color: rgba(0,242,255,0.5);
}

#poll-options-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#poll-add-option-btn {
    background: none;
    border: 1px dashed rgba(0,242,255,0.3);
    color: #00f2ff;
    border-radius: 10px;
    padding: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

#poll-add-option-btn:hover {
    background: rgba(0,242,255,0.08);
}

.poll-creator-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

#poll-launch-btn {
    background: linear-gradient(135deg, #00f2ff, #0066ff);
    border: none;
    color: #000;
    font-weight: bold;
    padding: 10px 24px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}

#poll-launch-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,242,255,0.4);
}

/* Encuesta activa (visible para todos) */
#live-poll-display {
    position: absolute;
    bottom: 80px;
    left: 20px;
    width: 280px;
    background: rgba(10,10,30,0.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(0,242,255,0.3);
    border-radius: 16px;
    padding: 16px;
    z-index: 150;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    animation: pollSlideIn 0.4s ease-out;
}

@keyframes pollSlideIn {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.poll-question {
    color: #fff;
    font-weight: bold;
    font-size: 0.95rem;
    margin-bottom: 12px;
    line-height: 1.4;
}

/* Opciones de votación */
.poll-option-row {
    margin-bottom: 8px;
    cursor: pointer;
}

.poll-option-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 4px;
}

.poll-option-pct {
    color: #00f2ff;
    font-weight: bold;
}

.poll-bar-bg {
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
}

.poll-bar-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #00f2ff, #0066ff);
    transition: width 0.5s ease;
    min-width: 2px;
}

/* Ganador */
.poll-option-row.winner .poll-bar-fill {
    background: linear-gradient(90deg, #39ff14, #00f2ff);
    box-shadow: 0 0 8px rgba(57,255,20,0.5);
}

.poll-option-row.winner .poll-option-label {
    color: #39ff14;
}

/* Opción votada por mí */
.poll-option-row.my-vote .poll-bar-bg {
    border: 1px solid rgba(0,242,255,0.4);
}

.poll-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

#poll-total-votes {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

#poll-close-btn {
    background: rgba(255,82,82,0.15);
    border: 1px solid #ff5252;
    color: #ff5252;
    border-radius: 12px;
    padding: 4px 12px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

#poll-close-btn:hover {
    background: rgba(255,82,82,0.3);
}

/* Botón crear encuesta en controles del broadcaster */
#create-poll-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    transition: all 0.2s;
}

#create-poll-btn:hover {
    background: rgba(0,242,255,0.2);
    border-color: #00f2ff;
    color: #00f2ff;
}

/* ═══════════════════════════════════════════════════════════════════
   SISTEMA TAP TO SUPPORT - PASO 8
   ═══════════════════════════════════════════════════════════════════ */

/* Wrapper del engagement */
.engagement-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.engagement-label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Barra de progreso mejorada */
#engagement-bar-container {
    width: 150px;
    height: 8px;
    background: rgba(0,0,0,0.4);
    border-radius: 4px;
    overflow: visible;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
}

#engagement-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00f2ff, #FF00FF, #39ff14);
    background-size: 200% 100%;
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Brillo que pulsa */
#engagement-glow {
    position: absolute;
    top: -2px;
    left: 0;
    width: 0%;
    height: calc(100% + 4px);
    background: radial-gradient(ellipse, rgba(255,255,255,0.6), transparent);
    border-radius: 4px;
    filter: blur(4px);
    transition: width 0.4s ease;
    pointer-events: none;
}

#engagement-score {
    font-size: 0.75rem;
    color: #00f2ff;
    font-weight: bold;
    font-family: 'Orbitron', monospace;
}

.engagement-level {
    font-size: 0.7rem;
    padding: 2px 8px;
    background: rgba(0,242,255,0.15);
    border: 1px solid rgba(0,242,255,0.3);
    border-radius: 10px;
    color: #00f2ff;
    font-weight: bold;
}

/* Niveles con colores diferentes */
.engagement-level.level-1 { 
    background: rgba(255,100,100,0.15); 
    border-color: rgba(255,100,100,0.3);
    color: #ff6464;
}
.engagement-level.level-2 { 
    background: rgba(255,200,0,0.15); 
    border-color: rgba(255,200,0,0.3);
    color: #ffc800;
}
.engagement-level.level-3 { 
    background: rgba(0,242,255,0.15); 
    border-color: rgba(0,242,255,0.3);
    color: #00f2ff;
}
.engagement-level.level-4 { 
    background: rgba(57,255,20,0.15); 
    border-color: rgba(57,255,20,0.3);
    color: #39ff14;
    animation: levelPulse 2s ease-in-out infinite;
}

@keyframes levelPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(57,255,20,0.3); }
    50% { box-shadow: 0 0 15px rgba(57,255,20,0.6); }
}

/* Contenedor de corazones flotantes (tap visual) */
#tap-hearts-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 99;
    overflow: hidden;
}

/* Cada corazón que sale del tap */
.tap-heart {
    position: absolute;
    font-size: 2rem;
    pointer-events: none;
    user-select: none;
    animation: heartFloat 1.5s ease-out forwards;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

@keyframes heartFloat {
    0% {
        transform: translateY(0) scale(0.5) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translateY(-80px) scale(1.2) rotate(15deg);
        opacity: 0.8;
    }
    100% {
        transform: translateY(-160px) scale(0.8) rotate(30deg);
        opacity: 0;
    }
}

/* Efecto de onda al hacer tap */
.tap-ripple {
    position: absolute;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    pointer-events: none;
    animation: rippleExpand 0.6s ease-out forwards;
}

@keyframes rippleExpand {
    0% {
        width: 10px;
        height: 10px;
        opacity: 1;
    }
    100% {
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

/* Cursor especial en modo tap */
#streaming-stage.tap-mode {
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════
   SISTEMA DE GIFTS VIRTUALES - PASO 9
   ═══════════════════════════════════════════════════════════════════ */

/* Botón flotante para abrir panel */
#gifts-open-btn {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FF00FF, #00f2ff);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    box-shadow: 0 8px 24px rgba(255,0,255,0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#gifts-open-btn:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 12px 32px rgba(255,0,255,0.6);
}

.gift-btn-icon {
    font-size: 1.8rem;
    animation: giftBounce 2s ease-in-out infinite;
}

@keyframes giftBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(10deg); }
}

/* Panel de gifts */
#gifts-panel-container {
    position: absolute;
    bottom: 90px;
    left: 20px;
    width: 320px;
    background: rgba(10,10,30,0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,0,255,0.3);
    border-radius: 20px;
    padding: 16px;
    z-index: 140;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    animation: panelSlideUp 0.3s ease-out;
}

@keyframes panelSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.gifts-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.gifts-panel-header span {
    font-size: 1rem;
    font-weight: bold;
    color: #FF00FF;
}

#gifts-panel-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

#gifts-panel-close:hover { color: #ff5252; }

/* Grid de gifts */
.gifts-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,0,255,0.3) transparent;
}

.gifts-grid::-webkit-scrollbar { width: 4px; }
.gifts-grid::-webkit-scrollbar-thumb {
    background: rgba(255,0,255,0.3);
    border-radius: 2px;
}

/* Cada gift */
.gift-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.gift-item:hover {
    background: rgba(255,0,255,0.15);
    border-color: rgba(255,0,255,0.4);
    transform: translateY(-2px) scale(1.05);
}

.gift-item:active {
    transform: translateY(0) scale(0.98);
}

.gift-icon {
    font-size: 1.8rem;
    transition: transform 0.2s;
}

.gift-item:hover .gift-icon {
    transform: scale(1.2) rotate(5deg);
}

.gift-name {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.7);
    text-align: center;
}

.gift-cost {
    font-size: 0.75rem;
    font-weight: bold;
    color: #00f2ff;
    background: rgba(0,242,255,0.15);
    padding: 2px 6px;
    border-radius: 8px;
}

/* Tiers con colores */
.gift-item[data-tier="basic"] {
    border-color: rgba(100,200,255,0.2);
}

.gift-item[data-tier="premium"] {
    border-color: rgba(255,100,255,0.3);
    background: rgba(255,0,255,0.05);
}

.gift-item[data-tier="ultra"] {
    border-color: rgba(255,215,0,0.4);
    background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,0,255,0.1));
}

.gift-item[data-tier="ultra"] .gift-cost {
    background: linear-gradient(90deg, #FFD700, #FF00FF);
    color: #000;
}

/* Footer del panel */
.gifts-panel-footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-align: center;
}

#user-points-display {
    font-size: 0.85rem;
    color: #00f2ff;
    font-weight: 600;
}

/* Capa de animaciones Lottie */
#gifts-animation-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 200;
    overflow: hidden;
}

.gift-lottie-animation {
    position: absolute;
    width: 300px;
    height: 300px;
    pointer-events: none;
}

/* Notificación de gift recibido */
.gift-notification {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10,10,30,0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,0,255,0.4);
    border-radius: 16px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 180;
    animation: giftNotifSlide 0.4s ease-out;
    box-shadow: 0 8px 24px rgba(255,0,255,0.3);
}

@keyframes giftNotifSlide {
    from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.gift-notif-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF00FF, #00f2ff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: bold;
    color: #000;
}

.gift-notif-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gift-notif-text strong {
    color: #FF00FF;
    font-size: 0.9rem;
}

.gift-notif-text span {
    color: rgba(255,255,255,0.8);
    font-size: 0.8rem;
}

.gift-notif-icon {
    font-size: 1.5rem;
    animation: giftBounce 0.6s ease-in-out;
}

/* Combo counter */
.gift-combo-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: linear-gradient(135deg, #FF00FF, #ff0066);
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(255,0,102,0.5);
    animation: comboPulse 0.3s ease-out;
}

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

/* ═══════════════════════════════════════════════════════════════════
   LEADERBOARD + SISTEMA KIKRA - PASO 10
   ═══════════════════════════════════════════════════════════════════ */

/* Botón flotante Leaderboard */
#leaderboard-open-btn {
    position: absolute;
    bottom: 90px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 120;
    box-shadow: 0 8px 24px rgba(255,215,0,0.5);
    transition: all 0.3s ease;
}

#leaderboard-open-btn:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 12px 32px rgba(255,215,0,0.7);
}

#leaderboard-open-btn i {
    font-size: 1.6rem;
    color: #000;
}

.lb-btn-text {
    font-size: 0.6rem;
    font-weight: bold;
    color: #000;
    margin-top: -2px;
}

/* Panel del Leaderboard */
#leaderboard-container {
    position: absolute;
    top: 80px;
    right: 20px;
    width: 340px;
    background: rgba(10,10,30,0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,215,0,0.3);
    border-radius: 20px;
    padding: 0;
    z-index: 160;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7);
    animation: leaderboardSlide 0.4s ease-out;
}

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

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(135deg, rgba(255,215,0,0.1), transparent);
}

.leaderboard-header span {
    font-size: 1rem;
    font-weight: bold;
    color: #FFD700;
}

#leaderboard-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

#leaderboard-close:hover { color: #ff5252; }

/* Tabs */
.leaderboard-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(0,0,0,0.3);
}

.lb-tab {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
}

.lb-tab.active {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    border-color: #FFD700;
    font-weight: bold;
}

.lb-tab:hover:not(.active) {
    background: rgba(255,215,0,0.15);
}

/* Lista del ranking */
#leaderboard-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,215,0,0.3) transparent;
}

#leaderboard-list::-webkit-scrollbar { width: 4px; }
#leaderboard-list::-webkit-scrollbar-thumb {
    background: rgba(255,215,0,0.3);
    border-radius: 2px;
}

/* Item del ranking */
.leaderboard-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.leaderboard-item:hover {
    background: rgba(255,215,0,0.08);
    border-color: rgba(255,215,0,0.2);
    transform: translateX(4px);
}

/* Top 3 especiales */
.leaderboard-item.rank-1 {
    background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,215,0,0.05));
    border-color: #FFD700;
}

.leaderboard-item.rank-2 {
    background: linear-gradient(135deg, rgba(192,192,192,0.2), rgba(192,192,192,0.05));
    border-color: #C0C0C0;
}

.leaderboard-item.rank-3 {
    background: linear-gradient(135deg, rgba(205,127,50,0.2), rgba(205,127,50,0.05));
    border-color: #CD7F32;
}

.lb-rank-number {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.8);
}

.rank-1 .lb-rank-number { background: #FFD700; color: #000; }
.rank-2 .lb-rank-number { background: #C0C0C0; color: #000; }
.rank-3 .lb-rank-number { background: #CD7F32; color: #000; }

.lb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00f2ff, #FF00FF);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
    color: #000;
    position: relative;
}

/* Marcos según fase */
.lb-avatar.phase-1 { box-shadow: 0 0 8px rgba(100,200,255,0.5); }
.lb-avatar.phase-2 { box-shadow: 0 0 8px rgba(255,100,255,0.5); }
.lb-avatar.phase-3 { box-shadow: 0 0 12px rgba(0,242,255,0.7); animation: auraPulse 2s infinite; }
.lb-avatar.phase-4 { 
    box-shadow: 0 0 16px rgba(255,215,0,1); 
    animation: crownPulse 1.5s infinite;
    border: 2px solid #FFD700;
}

@keyframes auraPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(0,242,255,0.5); }
    50% { box-shadow: 0 0 20px rgba(0,242,255,0.9); }
}

@keyframes crownPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255,215,0,0.7); transform: scale(1); }
    50% { box-shadow: 0 0 24px rgba(255,215,0,1); transform: scale(1.05); }
}

.lb-user-info {
    flex: 1;
    min-width: 0;
}

.lb-username {
    font-weight: 600;
    font-size: 0.85rem;
    color: #fff;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lb-user-rank {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    display: block;
    margin-top: 2px;
}

.lb-stats {
    text-align: right;
}

.lb-points {
    font-weight: bold;
    font-size: 0.85rem;
    color: #FFD700;
    display: block;
}

.lb-level {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    display: block;
    margin-top: 2px;
}

/* Footer del leaderboard */
.leaderboard-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.3);
}

#my-rank-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
}

.my-rank-label {
    color: rgba(255,255,255,0.6);
}

#my-rank-number {
    color: #FFD700;
    font-weight: bold;
    font-size: 1rem;
}

#my-rank-level {
    color: #00f2ff;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════
   WIDGET DE PROGRESO PERSONAL - REUBICADO AL CENTRO SUPERIOR
   ═══════════════════════════════════════════════════════════════════ */

/* Widget de progreso personal - centrado arriba, sobre el header del stream */
#personal-progress-widget {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    background: rgba(10, 10, 30, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0, 242, 255, 0.22);
    border-radius: 14px;
    padding: 9px 16px;
    z-index: 106;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(0, 242, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 14px;
}

.progress-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.rank-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 6px currentColor);
    line-height: 1;
}

.rank-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.rank-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #00f2ff;
    white-space: nowrap;
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.4);
}

.rank-level {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

/* Barra de Kikra - versión compacta e inline */
.kikra-bar-container {
    position: relative;
    flex: 1;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-width: 80px;
}

.kikra-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00f2ff, #FF00FF, #39ff14);
    background-size: 200% 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    animation: kikraGradient 3s ease infinite;
}

@keyframes kikraGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.kikra-bar-text {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    font-size: 0.62rem;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 3px #000;
    white-space: nowrap;
    pointer-events: none;
}

/* Panel de misiones */
#missions-panel {
    position: absolute;
    bottom: 160px;
    left: 20px;
    width: 300px;
    background: rgba(10,10,30,0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0,242,255,0.3);
    border-radius: 16px;
    padding: 16px;
    z-index: 150;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

.missions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.missions-header span {
    font-size: 0.9rem;
    font-weight: bold;
    color: #00f2ff;
}

#missions-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
}

#missions-close:hover { color: #ff5252; }

.missions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mission-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    transition: all 0.2s;
}

.mission-item:hover {
    background: rgba(0,242,255,0.08);
    border-color: rgba(0,242,255,0.3);
}

.mission-item.completed {
    opacity: 0.5;
    border-color: rgba(57,255,20,0.3);
}

.mission-icon {
    font-size: 1.4rem;
}

.mission-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mission-name {
    font-size: 0.85rem;
    color: #fff;
    font-weight: 500;
}

.mission-progress {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
}

.mission-reward {
    font-size: 0.75rem;
    font-weight: bold;
    color: #39ff14;
    background: rgba(57,255,20,0.15);
    padding: 4px 8px;
    border-radius: 8px;
}

/* Notificación de Level Up */
#levelup-notification {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 300;
    animation: levelupPop 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes levelupPop {
    0% { transform: translate(-50%, -50%) scale(0) rotate(-10deg); opacity: 0; }
    60% { transform: translate(-50%, -50%) scale(1.2) rotate(5deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
}

.levelup-content {
    background: linear-gradient(135deg, rgba(0,242,255,0.95), rgba(255,0,255,0.95));
    padding: 30px 40px;
    border-radius: 24px;
    border: 2px solid #FFD700;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 40px rgba(255,215,0,0.6);
    display: flex;
    align-items: center;
    gap: 20px;
}

.levelup-icon {
    font-size: 4rem;
    animation: iconSpin 0.6s ease-out;
}

@keyframes iconSpin {
    from { transform: rotate(-180deg) scale(0); }
    to { transform: rotate(0deg) scale(1); }
}

.levelup-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.levelup-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #000;
    text-shadow: 0 2px 4px rgba(255,255,255,0.5);
}

.levelup-rank {
    font-size: 1.8rem;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}

.levelup-phase {
    font-size: 0.9rem;
    color: rgba(0,0,0,0.8);
}
/* ═══════════════════════════════════════════════════════════════════
   STICKERS PREMIUM - PASO 11
   ═══════════════════════════════════════════════════════════════════ */

/* Items de stickers con efecto especial */
.gift-item.sticker-item {
    background: linear-gradient(135deg, rgba(255,0,255,0.1), rgba(0,242,255,0.1));
    border: 1px solid rgba(255,0,255,0.3);
    position: relative;
    overflow: visible;
}

.gift-item.sticker-item::before {
    content: 'STICKER';
    position: absolute;
    top: -6px;
    right: -6px;
    background: linear-gradient(135deg, #FF00FF, #00f2ff);
    color: #000;
    font-size: 0.5rem;
    font-weight: bold;
    padding: 2px 4px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.gift-item.sticker-item:hover {
    background: linear-gradient(135deg, rgba(255,0,255,0.2), rgba(0,242,255,0.2));
    border-color: rgba(255,0,255,0.6);
    transform: translateY(-4px) scale(1.1);
}

.sticker-preview {
    animation: stickerPreviewBounce 1s ease-in-out infinite;
}

@keyframes stickerPreviewBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.15) rotate(5deg); }
}

/* Capa de animaciones de stickers */
#sticker-animation-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 220;
    overflow: hidden;
}

/* Animación base de sticker */
.sticker-animation {
    position: absolute;
    pointer-events: none;
    z-index: 221;
}

/* STICKER: Fire Bomb */
.sticker-fire {
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: fireExplosion 1.5s ease-out forwards;
}

@keyframes fireExplosion {
    0% { 
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 0;
    }
    30% { 
        transform: translate(-50%, -50%) scale(1.5) rotate(180deg);
        opacity: 1;
    }
    60% {
        transform: translate(-50%, -50%) scale(1.2) rotate(360deg);
        opacity: 0.8;
    }
    100% { 
        transform: translate(-50%, -50%) scale(2) rotate(540deg);
        opacity: 0;
    }
}

.sticker-fire-particle {
    position: absolute;
    font-size: 2rem;
    animation: fireParticle 1.2s ease-out forwards;
}

@keyframes fireParticle {
    0% { 
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% { 
        transform: translate(var(--x), var(--y)) scale(0.5) rotate(360deg);
        opacity: 0;
    }
}

/* STICKER: Love Wave */
.sticker-love {
    width: 300px;
    height: 300px;
    left: 50%;
    top: 30%;
    transform: translate(-50%, -50%);
    animation: loveWave 2s ease-out forwards;
}

@keyframes loveWave {
    0% { 
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    20% { 
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, 100%) scale(0.8);
        opacity: 0;
    }
}

.sticker-love-heart {
    position: absolute;
    font-size: 2.5rem;
    animation: loveHeart 1.8s ease-out forwards;
}

@keyframes loveHeart {
    0% { 
        transform: translateY(0) scale(0) rotate(0deg);
        opacity: 0;
    }
    30% {
        transform: translateY(-50px) scale(1.3) rotate(15deg);
        opacity: 1;
    }
    100% { 
        transform: translateY(-200px) scale(0.7) rotate(-15deg);
        opacity: 0;
    }
}

/* STICKER: Money Rain */
.sticker-money {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.sticker-money-bill {
    position: absolute;
    font-size: 2rem;
    top: -50px;
    animation: moneyFall 2.5s linear forwards;
}

@keyframes moneyFall {
    0% { 
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% { 
        transform: translateY(calc(100vh + 100px)) rotate(720deg);
        opacity: 0.7;
    }
}

/* STICKER: Party Blast */
.sticker-party {
    width: 250px;
    height: 250px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: partyBurst 1.5s ease-out forwards;
}

@keyframes partyBurst {
    0% { 
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
}

.sticker-party-confetti {
    position: absolute;
    font-size: 1.5rem;
    animation: confettiFall 2s ease-out forwards;
}

@keyframes confettiFall {
    0% { 
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% { 
        transform: translate(var(--x), var(--y)) rotate(var(--rotate)) scale(0.3);
        opacity: 0;
    }
}

/* STICKER: Star Storm */
.sticker-star {
    width: 100%;
    height: 100%;
}

.sticker-star-particle {
    position: absolute;
    font-size: 2rem;
    animation: starShoot 1.5s ease-out forwards;
    filter: drop-shadow(0 0 8px currentColor);
}

@keyframes starShoot {
    0% { 
        transform: translate(0, 0) scale(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% { 
        transform: translate(var(--x), var(--y)) scale(1.2) rotate(360deg);
        opacity: 0;
    }
}

/* STICKER: Thunder Strike */
.sticker-thunder {
    width: 100%;
    height: 100%;
}

.sticker-thunder-bolt {
    position: absolute;
    font-size: 4rem;
    color: #FFD700;
    text-shadow: 
        0 0 10px #FFD700,
        0 0 20px #FFD700,
        0 0 30px #FFA500;
    animation: thunderStrike 0.8s ease-out forwards;
    filter: drop-shadow(0 0 20px #FFD700);
}

@keyframes thunderStrike {
    0% { 
        transform: translateY(-100%) scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    40% { 
        transform: translateY(0) scale(1.5);
        opacity: 1;
    }
    60% {
        transform: translateY(0) scale(1.3);
        opacity: 0.8;
    }
    100% { 
        transform: translateY(20%) scale(1);
        opacity: 0;
    }
}

/* Flash de pantalla para thunder */
.thunder-flash {
    position: absolute;
    inset: 0;
    background: #FFD700;
    opacity: 0;
    pointer-events: none;
    animation: screenFlash 0.8s ease-out;
}

@keyframes screenFlash {
    0%, 100% { opacity: 0; }
    10%, 30%, 50% { opacity: 0.7; }
    20%, 40% { opacity: 0.3; }
}
/* ═══════════════════════════════════════════════════════════════════
   ALERTAS DE DONACIONES - PASO 12
   ═══════════════════════════════════════════════════════════════════ */

/* Overlay principal de alerta */
#donation-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Contenedor de la alerta */
.alert-container {
    background: linear-gradient(135deg, 
        rgba(10,10,30,0.98) 0%, 
        rgba(20,10,40,0.98) 50%, 
        rgba(10,10,30,0.98) 100%);
    backdrop-filter: blur(20px);
    border: 2px solid;
    border-image: linear-gradient(135deg, #FF00FF, #00F2FF, #FFD700) 1;
    border-radius: 24px;
    padding: 30px 40px;
    box-shadow: 
        0 0 40px rgba(255,0,255,0.6),
        0 0 80px rgba(0,242,255,0.4),
        inset 0 0 60px rgba(255,215,0,0.1);
    animation: alertSlideIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    position: relative;
    overflow: hidden;
    min-width: 400px;
    max-width: 600px;
}

@keyframes alertSlideIn {
    0% {
        transform: translateY(-100vh) scale(0.5) rotate(-10deg);
        opacity: 0;
    }
    60% {
        transform: translateY(0) scale(1.1) rotate(2deg);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Header de la alerta */
.alert-header {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    position: relative;
}

.alert-icon-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF00FF, #00F2FF);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 
        0 0 30px rgba(255,0,255,0.8),
        0 0 60px rgba(0,242,255,0.6);
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 0 30px rgba(255,0,255,0.8),
            0 0 60px rgba(0,242,255,0.6);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 
            0 0 50px rgba(255,0,255,1),
            0 0 100px rgba(0,242,255,0.8);
    }
}

#alert-gift-icon {
    font-size: 4rem;
    animation: iconSpin 1s ease-out;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}

@keyframes iconSpin {
    from {
        transform: rotate(-180deg) scale(0);
        opacity: 0;
    }
    to {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* Brillo animado */
.alert-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255,255,255,0.1) 45%,
        rgba(255,255,255,0.5) 50%,
        rgba(255,255,255,0.1) 55%,
        transparent 100%
    );
    animation: shine 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes shine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Cuerpo de la alerta */
.alert-body {
    text-align: center;
    margin-bottom: 20px;
}

.alert-donor-name {
    font-size: 2rem;
    font-weight: bold;
    background: linear-gradient(135deg, #FFD700, #FFA500, #FF00FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
    animation: nameGlow 1.5s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(255,215,0,0.5);
}

@keyframes nameGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.alert-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 15px;
}

.alert-action {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
}

.alert-gift-name {
    font-size: 1.4rem;
    font-weight: bold;
    color: #00F2FF;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(0,242,255,0.8);
}

.alert-amount {
    font-size: 2.5rem;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 
        0 0 20px rgba(255,215,0,0.8),
        0 4px 8px rgba(0,0,0,0.5);
    animation: amountBounce 0.8s ease-out;
}

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

/* Footer con barra de progreso */
.alert-footer {
    margin-top: 20px;
}

.alert-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}

.alert-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #FF00FF, #00F2FF, #FFD700);
    background-size: 200% 100%;
    animation: progressFill 5s linear forwards, gradientShift 2s ease infinite;
    border-radius: 3px;
}

@keyframes progressFill {
    from { width: 100%; }
    to { width: 0%; }
}

/* Partículas flotantes */
.alert-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.alert-particle {
    position: absolute;
    font-size: 1.5rem;
    animation: particleFloat 3s ease-out forwards;
    opacity: 0;
}

@keyframes particleFloat {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--x), var(--y)) rotate(var(--rotate)) scale(1.5);
        opacity: 0;
    }
}

/* Panel de configuración */
#alert-config-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
    background: rgba(10,10,30,0.95);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0,242,255,0.3);
    border-radius: 16px;
    padding: 20px;
    z-index: 160;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7);
}

.alert-config-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.alert-config-header span {
    font-size: 1rem;
    font-weight: bold;
    color: #00F2FF;
}

#alert-config-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}

#alert-config-close:hover {
    color: #ff5252;
}

.alert-config-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.config-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.config-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: rgba(255,255,255,0.8);
    font-size: 0.9rem;
}

.config-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #00F2FF;
    cursor: pointer;
}

.config-label-text {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 4px;
}

#alert-min-amount,
#alert-duration {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
}

#alert-min-amount:focus,
#alert-duration:focus {
    border-color: #00F2FF;
}

.config-test-btn {
    width: 100%;
    background: linear-gradient(135deg, #FF00FF, #00F2FF);
    border: none;
    color: #000;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.config-test-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,242,255,0.5);
}

.config-test-btn:active {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
    .alert-container {
        min-width: 300px;
        max-width: 90%;
        padding: 20px 25px;
    }
    
    .alert-icon-circle {
        width: 90px;
        height: 90px;
    }
    
    #alert-gift-icon {
        font-size: 3rem;
    }
    
    .alert-donor-name {
        font-size: 1.5rem;
    }
    
    .alert-gift-name {
        font-size: 1.1rem;
    }
    
    .alert-amount {
        font-size: 2rem;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   SISTEMA DE MEMBRESÍAS - PASO 13
   ═══════════════════════════════════════════════════════════════════ */

/* Botón flotante */
#membership-open-btn {
    position: absolute;
    bottom: 160px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 120;
    box-shadow: 0 8px 24px rgba(139,92,246,0.5);
    transition: all 0.3s ease;
    animation: membershipPulse 2s ease-in-out infinite;
}

@keyframes membershipPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(139,92,246,0.5); }
    50% { transform: scale(1.05); box-shadow: 0 12px 32px rgba(139,92,246,0.7); }
}

#membership-open-btn:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 12px 32px rgba(139,92,246,0.8);
}

#membership-open-btn i {
    font-size: 1.6rem;
    color: #fff;
}

.membership-btn-text {
    font-size: 0.6rem;
    font-weight: bold;
    color: #fff;
    margin-top: -2px;
}

/* Panel principal */
#membership-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    background: rgba(10,10,30,0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(139,92,246,0.3);
    border-radius: 20px;
    z-index: 170;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    animation: membershipSlideIn 0.4s ease-out;
}

@keyframes membershipSlideIn {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.membership-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(135deg, rgba(139,92,246,0.1), transparent);
}

.membership-header span {
    font-size: 1.1rem;
    font-weight: bold;
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    flex: 1;
    text-align: center;
}

.back-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

.back-btn:hover {
    color: #fff;
}

#membership-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}

#membership-close:hover {
    color: #ff5252;
}

/* Body con los tiers */
.membership-body {
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    overflow-y: auto;
    flex: 1;
}

/* Card de cada tier */
.membership-tier {
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
}

.membership-tier:hover {
    transform: translateY(-8px);
    border-color: rgba(139,92,246,0.5);
    box-shadow: 0 12px 32px rgba(139,92,246,0.3);
}

.membership-tier.tier-featured {
    border-color: #8B5CF6;
    background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(236,72,153,0.1));
    box-shadow: 0 8px 24px rgba(139,92,246,0.4);
}

.tier-ribbon {
    position: absolute;
    top: -1px;
    right: -1px;
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
    color: #fff;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 0 14px 0 14px;
    letter-spacing: 0.5px;
}

/* Badge del tier */
.tier-badge {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    position: relative;
}

.tier-badge.tier-kapi {
    background: linear-gradient(135deg, #60A5FA, #3B82F6);
    box-shadow: 0 0 20px rgba(96,165,250,0.5);
}

.tier-badge.tier-kikra {
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
    box-shadow: 0 0 20px rgba(139,92,246,0.6);
    animation: kikraPulse 2s ease-in-out infinite;
}

@keyframes kikraPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(139,92,246,0.6); }
    50% { box-shadow: 0 0 30px rgba(139,92,246,0.9); }
}

.tier-badge.tier-transtime {
    background: linear-gradient(135deg, #FFD700, #FFA500, #FF00FF);
    background-size: 200% 200%;
    box-shadow: 0 0 25px rgba(255,215,0,0.7);
    animation: transtimeShine 3s ease infinite;
}

@keyframes transtimeShine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.tier-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.tier-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: #fff;
    margin-top: 4px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Precio */
.tier-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Beneficios */
.tier-benefits {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    flex: 1;
}

.benefit-item {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    text-align: left;
    padding-left: 4px;
}

/* Botón de suscripción */
.tier-subscribe-btn {
    width: 100%;
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
    border: none;
    color: #fff;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tier-subscribe-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139,92,246,0.5);
}

.tier-subscribe-btn:active {
    transform: translateY(0);
}

/* Footer */
.membership-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.3);
}

.membership-note {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    text-align: center;
}

/* Modal de confirmación */
#membership-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.membership-confirm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
}

.membership-confirm-box {
    background: linear-gradient(135deg, rgba(20,20,40,0.98), rgba(30,20,50,0.98));
    border: 2px solid #8B5CF6;
    border-radius: 20px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 60px rgba(139,92,246,0.5);
    animation: confirmPop 0.3s ease-out;
}

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

.confirm-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    animation: iconBounce 0.6s ease-out;
}

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

.membership-confirm-box h3 {
    margin: 0 0 8px 0;
    font-size: 1.8rem;
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.confirm-price {
    font-size: 1.2rem;
    color: #FFD700;
    margin-bottom: 20px;
    font-weight: bold;
}

.confirm-message {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 20px;
    line-height: 1.5;
}

.confirm-balance {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    margin-bottom: 24px;
    font-size: 0.9rem;
}

.confirm-balance span:last-child {
    color: #00F2FF;
    font-weight: bold;
}

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

.confirm-btn-cancel,
.confirm-btn-ok {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.confirm-btn-cancel {
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.8);
}

.confirm-btn-cancel:hover {
    background: rgba(255,255,255,0.15);
}

.confirm-btn-ok {
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
    color: #fff;
}

.confirm-btn-ok:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139,92,246,0.5);
}

/* Indicador de membresía activa */
#my-membership-indicator {
    position: absolute;
    top: 80px;
    right: 20px;
    z-index: 115;
}

.my-membership-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(10,10,30,0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(139,92,246,0.4);
    border-radius: 12px;
    padding: 8px 14px;
    box-shadow: 0 4px 16px rgba(139,92,246,0.3);
}

.my-tier-icon {
    font-size: 1.4rem;
    animation: myTierIconPulse 2s ease-in-out infinite;
}

@keyframes myTierIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.my-tier-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.my-tier-name {
    font-size: 0.85rem;
    font-weight: bold;
    color: #8B5CF6;
}

.my-tier-expiry {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
}

/* Badges en chat según membresía */
.chat-username.member-kapi::before {
    content: '🐾';
    margin-right: 4px;
}

.chat-username.member-kikra::before {
    content: '⚡';
    margin-right: 4px;
    animation: memberBadgePulse 1.5s ease-in-out infinite;
}

.chat-username.member-transtime::before {
    content: '👑';
    margin-right: 4px;
    animation: crownPulse 1.5s ease-in-out infinite;
}

@keyframes memberBadgePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

/* Colores especiales en chat */
.chat-username.member-kapi {
    color: #60A5FA !important;
}

.chat-username.member-kikra {
    background: linear-gradient(135deg, #8B5CF6, #EC4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.chat-username.member-transtime {
    background: linear-gradient(135deg, #FFD700, #FFA500, #FF00FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: transtimeTextShine 3s ease infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .membership-body {
        grid-template-columns: 1fr;
        padding: 16px;
    }
    
    .membership-tier {
        padding: 20px;
    }
}
@keyframes entryFade {
    0% { opacity: 0; transform: scale(0.8); }
    20% { opacity: 1; transform: scale(1.1); }
    80% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.9); }
}
/* ═══════════════════════════════════════════════════════════════════
   SISTEMA DE LOGROS - PASO 14
   ═══════════════════════════════════════════════════════════════════ */

/* Botón flotante */
#achievements-open-btn {
    position: absolute;
    bottom: 230px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    box-shadow: 0 8px 24px rgba(245,158,11,0.5);
    transition: all 0.3s ease;
    position: relative;
}

#achievements-open-btn:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 12px 32px rgba(245,158,11,0.7);
}

#achievements-open-btn i {
    font-size: 1.8rem;
    color: #fff;
}

.achievements-btn-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: #EF4444;
    border-radius: 50%;
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: badgePulse 1.5s ease-in-out infinite;
}

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

/* Panel principal */
#achievements-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    background: rgba(10,10,30,0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 20px;
    z-index: 170;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    animation: achievementPanelSlide 0.4s ease-out;
}

@keyframes achievementPanelSlide {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Header */
.achievements-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(135deg, rgba(245,158,11,0.1), transparent);
}

.achievements-header span {
    font-size: 1.1rem;
    font-weight: bold;
    color: #F59E0B;
    flex: 1;
    text-align: center;
}

#achievements-close,
#achievements-back-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}

#achievements-close:hover {
    color: #ff5252;
}

/* Stats */
.achievements-stats {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 20px 24px;
    background: rgba(0,0,0,0.2);
}

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

.stat-value {
    font-size: 1.8rem;
    font-weight: bold;
    color: #F59E0B;
}

.stat-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,0.1);
}

/* Categorías */
.achievements-categories {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.category-tab {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
    transition: all 0.2s;
}

.category-tab.active {
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    color: #fff;
    border-color: #F59E0B;
}

.category-tab:hover:not(.active) {
    background: rgba(245,158,11,0.15);
}

/* Lista de logros */
.achievements-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

/* Item de logro */
.achievement-item {
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    gap: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.achievement-item:hover {
    transform: translateY(-2px);
    border-color: rgba(245,158,11,0.3);
    box-shadow: 0 8px 20px rgba(245,158,11,0.2);
}

/* Logro desbloqueado */
.achievement-item.unlocked {
    border-color: #F59E0B;
    background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(239,68,68,0.05));
}

.achievement-item.unlocked::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 40px 40px 0;
    border-color: transparent #F59E0B transparent transparent;
}

.achievement-item.unlocked::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 4px;
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Icono del logro */
.achievement-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(239,68,68,0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    position: relative;
}

.achievement-item.unlocked .achievement-icon {
    background: linear-gradient(135deg, #F59E0B, #EF4444);
    box-shadow: 0 0 20px rgba(245,158,11,0.5);
    animation: iconGlow 2s ease-in-out infinite;
}

@keyframes iconGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(245,158,11,0.5); }
    50% { box-shadow: 0 0 30px rgba(245,158,11,0.8); }
}

/* Logro bloqueado (gris) */
.achievement-item.locked .achievement-icon {
    filter: grayscale(100%);
    opacity: 0.4;
}

/* Contenido del logro */
.achievement-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.achievement-name {
    font-size: 0.95rem;
    font-weight: bold;
    color: #fff;
}

.achievement-item.locked .achievement-name {
    color: rgba(255,255,255,0.5);
}

.achievement-description {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.4;
}

/* Barra de progreso */
.achievement-progress {
    margin-top: 8px;
}

.achievement-progress-bar {
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.achievement-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #F59E0B, #EF4444);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.achievement-progress-text {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    text-align: right;
}

/* Recompensa */
.achievement-reward {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(245,158,11,0.15);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 0.75rem;
    color: #F59E0B;
    font-weight: bold;
    margin-top: 4px;
    width: fit-content;
}

/* Notificación de logro desbloqueado */
#achievement-notification {
    position: fixed;
    top: 100px;
    right: 20px;
    z-index: 500;
    animation: achievementNotifSlide 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes achievementNotifSlide {
    from {
        opacity: 0;
        transform: translateX(400px) rotate(10deg);
    }
    to {
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
}

.achievement-notif-content {
    background: linear-gradient(135deg, rgba(245,158,11,0.98), rgba(239,68,68,0.98));
    border: 2px solid #FFD700;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 
        0 12px 40px rgba(245,158,11,0.6),
        0 0 60px rgba(255,215,0,0.4);
    position: relative;
    overflow: hidden;
    min-width: 320px;
}

.achievement-notif-icon {
    font-size: 3rem;
    animation: notifIconBounce 0.8s ease-out;
}

@keyframes notifIconBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.3) rotate(15deg); }
}

.achievement-notif-text {
    flex: 1;
}

.achievement-notif-title {
    font-size: 0.75rem;
    font-weight: bold;
    color: rgba(0,0,0,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.achievement-notif-name {
    font-size: 1.1rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 6px;
}

.achievement-notif-reward {
    font-size: 0.9rem;
    color: #FFD700;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Brillo animado */
.achievement-notif-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255,255,255,0.2) 45%,
        rgba(255,255,255,0.6) 50%,
        rgba(255,255,255,0.2) 55%,
        transparent 100%
    );
    animation: notifShine 3s ease-in-out infinite;
}

@keyframes notifShine {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .achievements-body {
        grid-template-columns: 1fr;
        padding: 16px;
    }
    
    #achievement-notification {
        right: 10px;
        left: 10px;
    }
    
    .achievement-notif-content {
        min-width: auto;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   SISTEMA DE RACHA - PASO 15
   ═══════════════════════════════════════════════════════════════════ */

/* Indicador flotante de racha */
#streak-indicator {
    position: absolute;
    top: 140px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(10,10,30,0.9);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(239,68,68,0.4);
    border-radius: 12px;
    padding: 8px 14px;
    z-index: 115;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(239,68,68,0.3);
}

#streak-indicator:hover {
    transform: translateY(-2px);
    border-color: rgba(239,68,68,0.6);
    box-shadow: 0 6px 20px rgba(239,68,68,0.5);
}

.streak-flame {
    font-size: 1.6rem;
    animation: flameFlicker 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(239,68,68,0.6));
}

@keyframes flameFlicker {
    0%, 100% { transform: scale(1) rotate(-5deg); opacity: 1; }
    50% { transform: scale(1.1) rotate(5deg); opacity: 0.8; }
}

.streak-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.streak-count {
    font-size: 1.2rem;
    font-weight: bold;
    color: #EF4444;
    line-height: 1;
}

.streak-label {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
}

/* Panel de racha */
#streak-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    background: rgba(10,10,30,0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 20px;
    z-index: 170;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    animation: streakPanelSlide 0.4s ease-out;
}

@keyframes streakPanelSlide {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.streak-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(135deg, rgba(239,68,68,0.1), transparent);
}

.streak-panel-header span {
    font-size: 1.1rem;
    font-weight: bold;
    color: #EF4444;
    flex: 1;
    text-align: center;
}

#streak-close,
#streak-back-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}

#streak-close:hover {
    color: #ff5252;
}

/* Body del panel */
.streak-panel-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Stat principal */
.streak-main-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(245,158,11,0.1));
    border-radius: 16px;
    border: 2px solid rgba(239,68,68,0.3);
}

.streak-main-flame {
    font-size: 4rem;
    margin-bottom: 10px;
    animation: mainFlameFlicker 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(239,68,68,0.8));
}

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

.streak-main-count {
    font-size: 3rem;
    font-weight: bold;
    color: #EF4444;
    line-height: 1;
    margin-bottom: 8px;
}

.streak-main-label {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Estado de racha */
.streak-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(34,197,94,0.15);
    border: 1px solid rgba(34,197,94,0.3);
    border-radius: 12px;
}

.streak-status.inactive {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.3);
}

.status-icon {
    font-size: 1.5rem;
}

.status-text {
    font-size: 0.9rem;
    color: #22C55E;
    font-weight: 600;
}

.streak-status.inactive .status-text {
    color: #EF4444;
}

/* Calendario semanal */
.streak-calendar {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 16px;
}

.calendar-title {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.calendar-day {
    aspect-ratio: 1;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
}

.calendar-day.active {
    background: linear-gradient(135deg, #EF4444, #F59E0B);
    border-color: #EF4444;
    color: #fff;
    font-weight: bold;
}

.calendar-day.today {
    border-color: #00F2FF;
    box-shadow: 0 0 12px rgba(0,242,255,0.4);
}

.day-name {
    font-size: 0.6rem;
    margin-bottom: 2px;
}

.day-icon {
    font-size: 1rem;
}

/* Records */
.streak-records {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.record-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.record-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    text-align: center;
}

.record-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: #EF4444;
}

/* Hitos */
.streak-milestones {
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 16px;
}

.milestone-title {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.milestone-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.milestone-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    transition: all 0.2s;
}

.milestone-item:hover {
    border-color: rgba(239,68,68,0.3);
    background: rgba(239,68,68,0.05);
}

.milestone-item.completed {
    border-color: rgba(34,197,94,0.3);
    background: rgba(34,197,94,0.1);
}

.milestone-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.milestone-info {
    flex: 1;
    min-width: 0;
}

.milestone-name {
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
}

.milestone-reward {
    font-size: 0.75rem;
    color: #F59E0B;
}

.milestone-progress {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    flex-shrink: 0;
}

/* Protección */
.streak-protection {
    background: rgba(59,130,246,0.1);
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: 12px;
    padding: 16px;
}

.protection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-weight: bold;
    color: #3B82F6;
}

.protection-count {
    background: rgba(59,130,246,0.2);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85rem;
}

.protection-description {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.protection-buy-btn {
    width: 100%;
    background: linear-gradient(135deg, #3B82F6, #2563EB);
    border: none;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.protection-buy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59,130,246,0.4);
}

/* Notificación de racha */
#streak-notification {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    animation: streakNotifPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes streakNotifPop {
    from { opacity: 0; transform: translateX(-50%) scale(0.5); }
    to { opacity: 1; transform: translateX(-50%) scale(1); }
}

.streak-notif-content {
    background: linear-gradient(135deg, rgba(239,68,68,0.98), rgba(245,158,11,0.98));
    border: 2px solid #EF4444;
    border-radius: 16px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 12px 40px rgba(239,68,68,0.6);
    min-width: 280px;
}

.streak-notif-flame {
    font-size: 2.5rem;
    animation: notifFlameFlicker 1s ease-in-out infinite;
}

@keyframes notifFlameFlicker {
    0%, 100% { transform: scale(1) rotate(-10deg); }
    50% { transform: scale(1.2) rotate(10deg); }
}

.streak-notif-text {
    flex: 1;
}

.streak-notif-title {
    font-size: 0.75rem;
    font-weight: bold;
    color: rgba(0,0,0,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.streak-notif-count {
    font-size: 1.1rem;
    font-weight: bold;
    color: #000;
    margin-bottom: 4px;
}

.streak-notif-reward {
    font-size: 0.85rem;
    color: #FFD700;
    font-weight: bold;
}

/* Advertencia */
#streak-warning {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    animation: warningSlideUp 0.4s ease-out;
}

@keyframes warningSlideUp {
    from { opacity: 0; transform: translateX(-50%) translateY(100px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.streak-warning-content {
    background: rgba(239,68,68,0.95);
    border: 2px solid #EF4444;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(239,68,68,0.6);
    min-width: 320px;
    max-width: 90vw;
    position: relative;
}

.warning-icon {
    font-size: 2rem;
    flex-shrink: 0;
    animation: warningPulse 1.5s ease-in-out infinite;
}

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

.warning-text {
    flex: 1;
    color: #fff;
}

.warning-text strong {
    display: block;
    margin-bottom: 4px;
    font-size: 0.95rem;
}

.warning-text p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

#warning-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.8);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

#warning-close:hover {
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    #streak-indicator {
        top: 120px;
        right: 10px;
        padding: 6px 10px;
    }
    
    .streak-records {
        grid-template-columns: 1fr;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   SISTEMA DE NOTIFICACIONES - PASO 16
   ═══════════════════════════════════════════════════════════════════ */

/* Botón flotante */
#notifications-btn {
    position: absolute;
    bottom: 300px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    box-shadow: 0 8px 24px rgba(99,102,241,0.5);
    transition: all 0.3s ease;
    position: relative;
}

#notifications-btn:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 12px 32px rgba(99,102,241,0.7);
}

#notifications-btn i {
    font-size: 1.8rem;
    color: #fff;
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    background: #EF4444;
    border: 2px solid rgba(10,10,30,1);
    border-radius: 11px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    animation: badgePop 0.3s ease-out;
}

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

/* Panel de notificaciones */
#notifications-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    background: rgba(10,10,30,0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 20px;
    z-index: 170;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    animation: notifPanelSlide 0.4s ease-out;
}

@keyframes notifPanelSlide {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Header */
.notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(135deg, rgba(99,102,241,0.1), transparent);
}

.notifications-header > span {
    font-size: 1.1rem;
    font-weight: bold;
    color: #6366F1;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-action-btn,
#notifications-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.header-action-btn:hover {
    color: #6366F1;
}

#notifications-close {
    font-size: 1.2rem;
}

#notifications-close:hover {
    color: #ff5252;
}

/* Tabs */
.notifications-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: rgba(0,0,0,0.2);
    overflow-x: auto;
}

.notif-tab {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.8rem;
    white-space: nowrap;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.notif-tab.active {
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: #fff;
    border-color: #6366F1;
}

.notif-tab:hover:not(.active) {
    background: rgba(99,102,241,0.15);
}

.tab-count {
    background: rgba(255,255,255,0.2);
    padding: 2px 6px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: bold;
}

.notif-tab.active .tab-count {
    background: rgba(255,255,255,0.3);
}

/* Lista de notificaciones */
.notifications-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Item de notificación */
.notification-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.notification-item:hover {
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.3);
    transform: translateX(4px);
}

.notification-item.unread {
    border-left: 3px solid #6366F1;
    background: rgba(99,102,241,0.08);
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #6366F1;
    border-radius: 50%;
}

.notif-icon-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.2));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.notification-item.type-gift .notif-icon-wrapper {
    background: linear-gradient(135deg, rgba(236,72,153,0.2), rgba(239,68,68,0.2));
}

.notification-item.type-achievement .notif-icon-wrapper {
    background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(239,68,68,0.2));
}

.notification-item.type-streak .notif-icon-wrapper {
    background: linear-gradient(135deg, rgba(239,68,68,0.2), rgba(245,158,11,0.2));
}

.notif-content {
    flex: 1;
    min-width: 0;
}

.notif-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.notif-message {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.4;
}

.notif-time {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}

/* Estado vacío */
.notifications-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-icon {
    font-size: 4rem;
    opacity: 0.3;
    margin-bottom: 16px;
}

.empty-text {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
}

/* Panel de configuración */
#notif-settings-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    background: rgba(10,10,30,0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 20px;
    z-index: 175;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
}

.notif-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.notif-settings-header span {
    font-size: 1.1rem;
    font-weight: bold;
    color: #6366F1;
    flex: 1;
    text-align: center;
}

#notif-settings-close,
#notif-settings-back {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}

.notif-settings-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.section-title {
    font-size: 0.85rem;
    font-weight: bold;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.setting-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.setting-item:hover {
    background: rgba(99,102,241,0.08);
    border-color: rgba(99,102,241,0.3);
}

.setting-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.setting-name {
    font-size: 0.9rem;
    color: #fff;
    font-weight: 500;
}

.setting-desc {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

.setting-toggle {
    width: 44px;
    height: 24px;
    appearance: none;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}

.setting-toggle::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    transition: all 0.3s;
}

.setting-toggle:checked {
    background: #6366F1;
    border-color: #6366F1;
}

.setting-toggle:checked::before {
    left: 22px;
}

.clear-all-btn {
    width: 100%;
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    color: #EF4444;
    padding: 12px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.clear-all-btn:hover {
    background: rgba(239,68,68,0.25);
    border-color: rgba(239,68,68,0.5);
}

/* Toast flotante */
#notification-toast {
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 320px;
    max-width: 400px;
    background: rgba(10,10,30,0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99,102,241,0.4);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 600;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    animation: toastSlideIn 0.4s ease-out;
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(400px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toast-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.toast-content {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: 0.9rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}

.toast-message {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.3;
}

.toast-close-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

.toast-close-btn:hover {
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    #notification-toast {
        right: 10px;
        left: 10px;
        min-width: auto;
        max-width: none;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   BILLETERA VIRTUAL - PASO 17
   ═══════════════════════════════════════════════════════════════════ */

/* Botón flotante de billetera */
#wallet-btn {
    position: absolute;
    bottom: 370px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #10B981, #059669);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 120;
    box-shadow: 0 8px 24px rgba(16,185,129,0.5);
    transition: all 0.3s ease;
}

#wallet-btn:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 12px 32px rgba(16,185,129,0.7);
}

#wallet-btn i {
    font-size: 1.6rem;
    color: #fff;
}

.wallet-btn-text {
    font-size: 0.6rem;
    font-weight: bold;
    color: #fff;
    margin-top: -2px;
}

/* Panel de billetera */
#wallet-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    background: rgba(10,10,30,0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: 20px;
    z-index: 170;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    animation: walletPanelSlide 0.4s ease-out;
    overflow: hidden;
}

@keyframes walletPanelSlide {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Header */
.wallet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(135deg, rgba(16,185,129,0.1), transparent);
}

.wallet-header > span {
    font-size: 1.1rem;
    font-weight: bold;
    color: #10B981;
}

.wallet-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#wallet-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}

#wallet-close:hover {
    color: #ff5252;
}

/* Balance Section */
.wallet-balance-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 20px;
    background: rgba(0,0,0,0.2);
}

.balance-card {
    background: var(--card);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 18px;
    position: relative;
    overflow: hidden;
}

.balance-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
}

.balance-card.kc-real::before {
    background: linear-gradient(90deg, #00F2FF, #8B5CF6);
}

.balance-card.kc-bonus::before {
    background: linear-gradient(90deg, #FFD740, #FF4D8D);
}

.balance-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 1.5rem;
    opacity: 0.12;
}

.balance-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 10px;
}

.balance-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.dot-cyan { background: #00F2FF; }
.dot-gold { background: #FFD740; }

.balance-amount {
    font-family: 'Syne', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 6px;
}

.balance-amount .unit {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    margin-left: 3px;
}

.balance-cop {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 10px;
}

.balance-cop strong {
    color: #10B981;
}

.balance-subtitle {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    line-height: 1.3;
}

.balance-progress {
    margin-top: 10px;
}

.progress-bar-bg {
    height: 6px;
    background: rgba(0,0,0,0.4);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10B981, #059669);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.4);
}

/* Tabs */
.wallet-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.wallet-tab {
    flex: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.2s;
    font-family: 'Space Grotesk', sans-serif;
}

.wallet-tab.active {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
    border-color: #10B981;
}

.wallet-tab:hover:not(.active) {
    background: rgba(16,185,129,0.1);
}

/* Content Tabs */
.wallet-content-tab {
    display: none;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.wallet-content-tab.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Info Bar */
.info-bar {
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.03));
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
}

.info-bar .icon {
    font-size: 1rem;
}

.info-bar strong {
    color: #10B981;
}

/* Section Title */
.section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: rgba(255,255,255,0.8);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Earnings List */
.earnings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.earning-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
}

.earning-gift {
    font-size: 1.5rem;
}

.earning-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.earning-from {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

.earning-amount {
    font-size: 0.85rem;
    font-weight: 700;
    color: #10B981;
}

.earning-time {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
    text-align: right;
}

/* Empty States */
.earnings-empty,
.withdrawals-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.empty-icon {
    font-size: 3rem;
    opacity: 0.2;
    margin-bottom: 12px;
}

.empty-text {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.4);
}

/* Payment Methods Grid */
.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
}

.payment-method-card {
    background: rgba(255,255,255,0.03);
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.payment-method-card:hover {
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
}

.payment-method-card.selected {
    border-color: #10B981;
    background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.03));
}

.payment-method-card.selected::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 10px;
    width: 18px;
    height: 18px;
    background: #10B981;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
}

.method-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.method-info {
    flex: 1;
}

.method-name {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.method-desc {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
}

.method-fee {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    white-space: nowrap;
}

.fee-free {
    background: rgba(16,185,129,0.15);
    color: #10B981;
}

.fee-low {
    background: rgba(0,242,255,0.12);
    color: #00F2FF;
}

.fee-mid {
    background: rgba(255,215,64,0.12);
    color: #FFD740;
}

/* Withdraw Form */
.withdraw-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
}

.form-input {
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 14px;
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9rem;
    transition: all 0.2s;
    outline: none;
}

.form-input:focus {
    border-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.1);
}

.form-input::placeholder {
    color: rgba(255,255,255,0.3);
}

/* Fee Breakdown */
.fee-breakdown {
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px;
}

.fee-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.fee-row:last-child {
    border-bottom: none;
}

.fee-row.total {
    padding-top: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.fee-key {
    color: rgba(255,255,255,0.6);
}

.fee-val {
    font-weight: 600;
}

.fee-neg {
    color: #FF4D8D;
}

.fee-pos {
    color: #10B981;
    font-size: 1rem;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
}

.btn-primary {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #fff;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16,185,129,0.4);
}

.btn-fullwidth {
    width: 100%;
}

/* Packages Grid */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.package-card {
    background: rgba(255,255,255,0.03);
    border: 1.5px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.package-card:hover {
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-2px);
}

.package-card.popular {
    border-color: #FFD740;
    background: linear-gradient(135deg, rgba(255,215,64,0.1), rgba(255,215,64,0.03));
}

.package-card.popular::before {
    content: '⭐ POPULAR';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #FFD740;
    color: #000;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 3px;
    text-align: center;
}

.package-card.popular .package-icon {
    margin-top: 14px;
}

.package-icon {
    font-size: 1.8rem;
    margin-bottom: 6px;
}

.package-name {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.package-kc {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 2px;
}

.package-kc span {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

.package-bonus {
    font-size: 0.7rem;
    color: #10B981;
    margin-bottom: 10px;
    height: 16px;
}

.package-price {
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 6px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #00F2FF;
}

/* Withdrawals List */
.withdrawals-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.withdrawal-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
}

.withdrawal-method {
    font-size: 1.2rem;
}

.withdrawal-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.withdrawal-dest {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

.withdrawal-amount {
    font-size: 0.85rem;
    font-weight: 700;
    color: #10B981;
}

.withdrawal-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.status-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-done {
    background: rgba(16,185,129,0.15);
    color: #10B981;
}

.status-pending {
    background: rgba(255,215,64,0.15);
    color: #FFD740;
}

.status-proc {
    background: rgba(0,242,255,0.15);
    color: #00F2FF;
}

.withdrawal-time {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .wallet-balance-section {
        grid-template-columns: 1fr;
    }
    
    .payment-methods-grid {
        grid-template-columns: 1fr;
    }
    
    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ═══════════════════════════════════════════════════════════════════
   SISTEMA DE REFERIDOS - PASO 18
   ═══════════════════════════════════════════════════════════════════ */

/* Botón flotante */
#referrals-btn {
    position: absolute;
    bottom: 440px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #EC4899, #BE185D);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    box-shadow: 0 8px 24px rgba(236,72,153,0.5);
    transition: all 0.3s ease;
    position: relative;
}

#referrals-btn:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 12px 32px rgba(236,72,153,0.7);
}

#referrals-btn i {
    font-size: 1.8rem;
    color: #fff;
}

.referral-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    background: #10B981;
    border: 2px solid rgba(10,10,30,1);
    border-radius: 11px;
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

/* Panel de referidos */
#referrals-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 650px;
    max-height: 85vh;
    background: rgba(10,10,30,0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(236,72,153,0.3);
    border-radius: 20px;
    z-index: 170;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    animation: referralPanelSlide 0.4s ease-out;
    overflow: hidden;
}

@keyframes referralPanelSlide {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Header */
.referrals-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(135deg, rgba(236,72,153,0.1), transparent);
}

.referrals-header span {
    font-size: 1.1rem;
    font-weight: bold;
    color: #EC4899;
}

#referrals-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}

#referrals-close:hover {
    color: #ff5252;
}

/* Stats Grid */
.referral-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 20px;
    background: rgba(0,0,0,0.2);
}

.referral-stat-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.stat-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.stat-value {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #EC4899;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Panel content scrollable */
#referrals-panel > div:not(.referrals-header) {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

/* Código de referido */
.referral-code-section {
    margin-bottom: 20px;
}

.referral-code-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(236,72,153,0.2);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.code-display,
.link-display {
    display: flex;
    align-items: center;
    gap: 10px;
}

.code-label,
.link-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    min-width: 50px;
}

.code-value {
    font-family: 'Syne', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #EC4899;
    letter-spacing: 2px;
    flex: 1;
}

.link-input {
    flex: 1;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 12px;
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
    outline: none;
}

.code-copy-btn,
.link-copy-btn {
    background: linear-gradient(135deg, #EC4899, #BE185D);
    border: none;
    color: #fff;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.code-copy-btn:hover,
.link-copy-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(236,72,153,0.4);
}

.code-copy-btn i,
.link-copy-btn i {
    font-size: 1.1rem;
}

/* Share buttons */
.share-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.share-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s;
    font-family: 'Space Grotesk', sans-serif;
}

.share-btn i {
    font-size: 1rem;
}

.share-btn.whatsapp:hover {
    background: #25D366;
    border-color: #25D366;
}

.share-btn.telegram:hover {
    background: #0088cc;
    border-color: #0088cc;
}

.share-btn.twitter:hover {
    background: #1DA1F2;
    border-color: #1DA1F2;
}

/* Rewards Grid */
.rewards-section {
    margin-bottom: 20px;
}

.rewards-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reward-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
}

.reward-card:hover {
    background: rgba(236,72,153,0.08);
    border-color: rgba(236,72,153,0.3);
}

.reward-card.highlight {
    border-color: #EC4899;
    background: linear-gradient(135deg, rgba(236,72,153,0.1), rgba(236,72,153,0.03));
}

.reward-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.reward-info {
    flex: 1;
}

.reward-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.reward-desc {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

.reward-amount {
    font-size: 0.85rem;
    font-weight: 700;
    color: #10B981;
    background: rgba(16,185,129,0.15);
    padding: 6px 12px;
    border-radius: 12px;
}

/* Milestones */
.milestones-section {
    margin-bottom: 20px;
}

.milestone-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.milestone-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.milestone-item.completed {
    border-color: #10B981;
    background: rgba(16,185,129,0.1);
}

.milestone-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.milestone-info {
    flex: 1;
}

.milestone-name {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.milestone-progress {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

.milestone-reward {
    font-size: 0.8rem;
    font-weight: 700;
    color: #FFD740;
}

/* Referrals List */
.referrals-list-section {
    margin-bottom: 20px;
}

.referrals-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.filter-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    padding: 6px 14px;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
    font-family: 'Space Grotesk', sans-serif;
}

.filter-btn.active {
    background: #EC4899;
    color: #fff;
    border-color: #EC4899;
}

.referrals-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.referral-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.referral-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EC4899, #BE185D);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.referral-info {
    flex: 1;
}

.referral-name {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.referral-date {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
}

.referral-earnings {
    text-align: right;
}

.referral-kc {
    font-size: 0.85rem;
    font-weight: 700;
    color: #10B981;
    margin-bottom: 2px;
}

.referral-status {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
}

.referral-status.active {
    color: #10B981;
}

/* Empty state */
.referrals-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.empty-desc {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}

/* Copy Toast */
#copy-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(16,185,129,0.95);
    color: #fff;
    padding: 12px 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 8px 24px rgba(16,185,129,0.4);
    animation: toastSlideUp 0.3s ease-out;
}

@keyframes toastSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Welcome Modal */
#referral-welcome-modal {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.referral-welcome-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
}

.referral-welcome-box {
    background: linear-gradient(135deg, rgba(20,20,40,0.98), rgba(30,20,50,0.98));
    border: 2px solid #EC4899;
    border-radius: 24px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 60px rgba(236,72,153,0.5);
    animation: welcomePop 0.4s ease-out;
}

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

.welcome-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    animation: iconBounce 0.6s ease-out;
}

.welcome-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 12px;
}

.welcome-text {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 20px;
}

.welcome-text strong {
    color: #EC4899;
}

.welcome-bonus {
    background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(16,185,129,0.05));
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.bonus-icon {
    font-size: 2.5rem;
}

.bonus-text {
    flex: 1;
    text-align: left;
}

.bonus-title {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.6);
    margin-bottom: 4px;
}

.bonus-amount {
    font-family: 'Syne', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: #10B981;
}

.welcome-note {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .referral-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .share-buttons {
        grid-template-columns: 1fr;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   SISTEMA DE MINIJUEGOS - PASO 19
   ═══════════════════════════════════════════════════════════════════ */

/* Botón flotante */
#minigames-btn {
    position: absolute;
    bottom: 510px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #F59E0B, #DC2626);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    box-shadow: 0 8px 24px rgba(245,158,11,0.5);
    transition: all 0.3s ease;
    animation: minigamePulse 2s ease-in-out infinite;
}

@keyframes minigamePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

#minigames-btn:hover {
    transform: translateY(-4px) scale(1.15);
    box-shadow: 0 12px 32px rgba(245,158,11,0.7);
}

#minigames-btn i {
    font-size: 1.8rem;
    color: #fff;
}

/* Panel de control */
#minigames-control-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    background: rgba(10,10,30,0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 20px;
    z-index: 170;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    animation: minigamePanelSlide 0.4s ease-out;
    overflow: hidden;
}

@keyframes minigamePanelSlide {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.minigames-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(135deg, rgba(245,158,11,0.1), transparent);
}

.minigames-header span {
    font-size: 1.1rem;
    font-weight: bold;
    color: #F59E0B;
}

#minigames-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}

#minigames-close:hover {
    color: #ff5252;
}

/* Tabs de juegos */
.minigames-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.minigame-tab {
    flex: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
    font-family: 'Space Grotesk', sans-serif;
}

.minigame-tab.active {
    background: linear-gradient(135deg, #F59E0B, #DC2626);
    color: #fff;
    border-color: #F59E0B;
}

.minigame-tab:hover:not(.active) {
    background: rgba(245,158,11,0.1);
}

/* Content */
.minigame-tab-content {
    display: none;
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.minigame-tab-content.active {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.game-description {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    padding: 12px;
    background: rgba(245,158,11,0.1);
    border-left: 3px solid #F59E0B;
    border-radius: 8px;
}

/* Prize Setup */
.prizes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.prize-slot {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.prize-input {
    width: 100%;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    padding: 8px;
    color: #F59E0B;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    outline: none;
}

.prize-input:focus {
    border-color: #F59E0B;
}

.prize-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
}

/* Winners History */
.winners-history {
    margin-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 16px;
}

.winners-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 150px;
    overflow-y: auto;
}

.winner-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.winner-user {
    font-weight: 600;
}

.winner-game {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
}

.winner-amount {
    color: #10B981;
    font-weight: 700;
}

.winners-empty {
    text-align: center;
    padding: 20px;
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════════
   RULETA OVERLAY
   ═══════════════════════════════════════════════════════════════════ */

#ruleta-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(10px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.ruleta-container {
    text-align: center;
}

.ruleta-title {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #F59E0B;
    margin-bottom: 30px;
    text-shadow: 0 0 20px rgba(245,158,11,0.5);
    animation: titlePulse 1s ease-in-out infinite;
}

@keyframes titlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.ruleta-wheel {
    width: 350px;
    height: 350px;
    position: relative;
    margin: 0 auto;
}

.wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #F59E0B, #DC2626);
    border-radius: 50%;
    border: 4px solid #fff;
    z-index: 10;
    box-shadow: 0 0 30px rgba(245,158,11,0.8);
}

.wheel-pointer {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.wheel-segments {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 8px solid #fff;
    box-shadow: 0 0 40px rgba(245,158,11,0.6);
    position: relative;
    transition: transform 4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.wheel-segment {
    position: absolute;
    width: 50%;
    height: 50%;
    transform-origin: 100% 100%;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
}

.wheel-segment:nth-child(1) { background: #EF4444; transform: rotate(0deg); }
.wheel-segment:nth-child(2) { background: #F59E0B; transform: rotate(60deg); }
.wheel-segment:nth-child(3) { background: #10B981; transform: rotate(120deg); }
.wheel-segment:nth-child(4) { background: #3B82F6; transform: rotate(180deg); }
.wheel-segment:nth-child(5) { background: #8B5CF6; transform: rotate(240deg); }
.wheel-segment:nth-child(6) { background: #EC4899; transform: rotate(300deg); }

.ruleta-result {
    margin-top: 40px;
    animation: resultPop 0.5s ease-out;
}

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

.result-icon {
    font-size: 4rem;
    margin-bottom: 16px;
}

.result-text {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}

.result-amount {
    font-family: 'Syne', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: #10B981;
    text-shadow: 0 0 20px rgba(16,185,129,0.6);
}

/* ═══════════════════════════════════════════════════════════════════
   SORTEO OVERLAY
   ═══════════════════════════════════════════════════════════════════ */

#sorteo-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(10px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.sorteo-container {
    text-align: center;
    max-width: 600px;
    width: 90%;
}

.sorteo-title {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #EC4899;
    margin-bottom: 20px;
    text-shadow: 0 0 20px rgba(236,72,153,0.5);
}

.sorteo-participants {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.7);
    margin-bottom: 30px;
}

#participants-count {
    color: #F59E0B;
    font-weight: 700;
    font-size: 1.3rem;
}

.sorteo-names-roll {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
}

.sorteo-winner {
    animation: winnerReveal 0.6s ease-out;
}

@keyframes winnerReveal {
    from { transform: scale(0) rotate(-180deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
}

.winner-icon {
    font-size: 5rem;
    margin-bottom: 16px;
}

.winner-text {
    font-family: 'Syne', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #FFD700;
    margin-bottom: 12px;
    text-shadow: 0 0 30px rgba(255,215,0,0.8);
}

.winner-name {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 12px;
}

.winner-prize {
    font-size: 2.5rem;
    font-weight: 800;
    color: #10B981;
    text-shadow: 0 0 20px rgba(16,185,129,0.6);
}

/* ═══════════════════════════════════════════════════════════════════
   TRIVIA OVERLAY
   ═══════════════════════════════════════════════════════════════════ */

#trivia-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(10px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.trivia-container {
    max-width: 700px;
    width: 90%;
    background: rgba(20,20,40,0.95);
    border: 2px solid #8B5CF6;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(139,92,246,0.5);
}

.trivia-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.trivia-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #8B5CF6;
}

.trivia-timer {
    font-size: 1.5rem;
    font-weight: 800;
    color: #F59E0B;
    background: rgba(245,158,11,0.2);
    padding: 8px 16px;
    border-radius: 12px;
    min-width: 70px;
    text-align: center;
}

.trivia-timer.urgent {
    color: #EF4444;
    background: rgba(239,68,68,0.2);
    animation: timerPulse 0.5s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.trivia-question {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 24px;
    text-align: center;
    line-height: 1.5;
}

.trivia-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.trivia-option {
    background: rgba(255,255,255,0.05);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

.trivia-option:hover {
    background: rgba(139,92,246,0.2);
    border-color: #8B5CF6;
    transform: translateY(-2px);
}

.trivia-option.selected {
    background: rgba(139,92,246,0.3);
    border-color: #8B5CF6;
}

.trivia-option.correct {
    background: rgba(16,185,129,0.3);
    border-color: #10B981;
}

.trivia-option.incorrect {
    background: rgba(239,68,68,0.3);
    border-color: #EF4444;
}

.trivia-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.trivia-result {
    text-align: center;
    animation: triviaResultPop 0.5s ease-out;
}

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

.trivia-result-icon {
    font-size: 4rem;
    margin-bottom: 12px;
}

.trivia-result-text {
    font-family: 'Syne', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #10B981;
    margin-bottom: 12px;
}

.trivia-result-prize {
    font-size: 2.5rem;
    font-weight: 800;
    color: #F59E0B;
}

/* Responsive */
@media (max-width: 768px) {
    .prizes-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ruleta-wheel {
        width: 280px;
        height: 280px;
    }
    
    .trivia-options {
        grid-template-columns: 1fr;
    }
}
/* ═══════════════════════════════════════════════════════════════════
   FILTROS DE VIDEO - PASO 20
   ═══════════════════════════════════════════════════════════════════ */

/* Botón flotante */
#filters-btn {
    position: absolute;
    bottom: 580px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #A855F7, #EC4899);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
    box-shadow: 0 8px 24px rgba(168,85,247,0.5);
    transition: all 0.3s ease;
}

#filters-btn:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 12px 32px rgba(168,85,247,0.7);
}

#filters-btn i {
    font-size: 1.8rem;
    color: #fff;
}

#filters-btn.active {
    background: linear-gradient(135deg, #10B981, #059669);
    box-shadow: 0 8px 24px rgba(16,185,129,0.5);
}

/* Panel de filtros */
#filters-panel {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    background: rgba(10,10,30,0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(168,85,247,0.3);
    border-radius: 20px;
    z-index: 170;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
    animation: filtersPanelSlide 0.4s ease-out;
    overflow: hidden;
}

@keyframes filtersPanelSlide {
    from { opacity: 0; transform: translate(-50%, -60%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Header */
.filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(135deg, rgba(168,85,247,0.1), transparent);
}

.filters-header span {
    font-size: 1.1rem;
    font-weight: bold;
    color: #A855F7;
}

.filters-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#filters-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}

#filters-close:hover {
    color: #ff5252;
}

/* Preview */
.filters-preview {
    padding: 20px;
    background: rgba(0,0,0,0.3);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#filter-preview-canvas {
    width: 100%;
    height: auto;
    max-height: 200px;
    border-radius: 12px;
    background: #000;
    display: block;
}

.preview-label {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-top: 8px;
}

/* Body */
.filters-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Quick Filters */
.quick-filters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.quick-filter-btn {
    background: rgba(255,255,255,0.03);
    border: 2px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
    font-family: 'Space Grotesk', sans-serif;
    color: rgba(255,255,255,0.7);
    font-size: 0.75rem;
}

.quick-filter-btn:hover {
    background: rgba(168,85,247,0.1);
    border-color: rgba(168,85,247,0.3);
}

.quick-filter-btn.active {
    background: linear-gradient(135deg, rgba(168,85,247,0.2), rgba(236,72,153,0.1));
    border-color: #A855F7;
    color: #A855F7;
}

.filter-preview-icon {
    font-size: 1.5rem;
}

/* Filter Controls */
.filter-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}

.filter-value {
    font-weight: 700;
    color: #A855F7;
    min-width: 50px;
    text-align: right;
}

.filter-slider {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255,255,255,0.1);
    outline: none;
    -webkit-appearance: none;
}

.filter-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A855F7, #EC4899);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(168,85,247,0.5);
}

.filter-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A855F7, #EC4899);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(168,85,247,0.5);
}

.filter-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Toggle Switches */
.filter-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-toggle:hover {
    background: rgba(168,85,247,0.08);
    border-color: rgba(168,85,247,0.2);
}

.filter-toggle input[type="checkbox"] {
    display: none;
}

.toggle-slider {
    width: 44px;
    height: 24px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    position: relative;
    transition: all 0.3s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    top: 3px;
    left: 3px;
    transition: all 0.3s;
}

.filter-toggle input[type="checkbox"]:checked + .toggle-slider {
    background: linear-gradient(135deg, #A855F7, #EC4899);
}

.filter-toggle input[type="checkbox"]:checked + .toggle-slider::before {
    left: 23px;
}

.toggle-label {
    flex: 1;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
}

/* Actions */
.filters-actions {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.filters-actions .btn {
    flex: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .quick-filters-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* ═══════════════════════════════════════════════════════════════════
   MODO TEATRO - PASO 21
   ═══════════════════════════════════════════════════════════════════ */

/* Botones de teatro en header */
.theater-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

.theater-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.theater-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.4);
    transform: scale(1.05);
}

.theater-btn.active {
    background: linear-gradient(135deg, #00F2FF, #8B5CF6);
    border-color: #00F2FF;
}

.theater-btn i {
    font-size: 1.2rem;
}

/* Modo Teatro activo */
body.theater-mode {
    overflow: hidden;
}

body.theater-mode #streaming-stage {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex !important;
    flex-direction: column;
}

body.theater-mode .stage-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

body.theater-mode #streaming-stage:hover .stage-header {
    opacity: 1;
}

body.theater-mode #video-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.theater-mode #remote-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Fullscreen nativo */
body.fullscreen-mode {
    overflow: hidden;
}

#streaming-stage:-webkit-full-screen {
    width: 100%;
    height: 100%;
}

#streaming-stage:-moz-full-screen {
    width: 100%;
    height: 100%;
}

#streaming-stage:fullscreen {
    width: 100%;
    height: 100%;
}

/* Overlay de controles en fullscreen */
#theater-controls-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

body.theater-mode #theater-controls-overlay,
body.fullscreen-mode #theater-controls-overlay {
    display: block;
}

body.theater-mode #streaming-stage:hover ~ #theater-controls-overlay,
body.fullscreen-mode #streaming-stage:hover ~ #theater-controls-overlay,
#theater-controls-overlay:hover {
    opacity: 1;
}

.theater-overlay-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px 24px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: all;
}

.theater-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
}

.theater-overlay-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s;
    font-family: 'Space Grotesk', sans-serif;
}

.theater-overlay-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.05);
}

.theater-overlay-btn i {
    font-size: 1.1rem;
}

.theater-overlay-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: all;
}

.theater-stats {
    display: flex;
    gap: 20px;
}

.theater-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
}

.theater-stat i {
    font-size: 1.1rem;
    opacity: 0.8;
}

.theater-actions {
    display: flex;
    gap: 10px;
}

.theater-action-btn {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.theater-action-btn:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.1);
}

.theater-action-btn.active {
    background: linear-gradient(135deg, #00F2FF, #8B5CF6);
    border-color: #00F2FF;
}

.theater-action-btn i {
    font-size: 1.3rem;
}

/* Chat flotante en teatro */
#theater-chat-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 350px;
    height: 450px;
    background: rgba(10,10,30,0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0,242,255,0.3);
    border-radius: 16px;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8);
    animation: chatFloatSlideIn 0.3s ease-out;
}

@keyframes chatFloatSlideIn {
    from {
        opacity: 0;
        transform: translateX(400px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.theater-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: linear-gradient(135deg, rgba(0,242,255,0.1), transparent);
}

.theater-chat-header span {
    font-size: 0.9rem;
    font-weight: 700;
    color: #00F2FF;
}

#theater-chat-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
}

#theater-chat-close:hover {
    color: #fff;
}

.theater-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.theater-chat-input {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.3);
}

#theater-chat-input {
    flex: 1;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 8px 14px;
    color: #fff;
    font-size: 0.85rem;
    outline: none;
}

#theater-chat-input:focus {
    border-color: #00F2FF;
}

#theater-chat-send {
    background: linear-gradient(135deg, #00F2FF, #8B5CF6);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

#theater-chat-send:hover {
    transform: scale(1.1);
}

#theater-chat-send i {
    font-size: 1.1rem;
}

/* Indicador de atajos */
#keyboard-shortcuts-hint {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10,10,30,0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0,242,255,0.3);
    border-radius: 12px;
    padding: 16px 20px;
    z-index: 10003;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
    animation: shortcutsSlideUp 0.3s ease-out;
}

@keyframes shortcutsSlideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.shortcuts-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #00F2FF;
    margin-bottom: 10px;
    text-align: center;
}

.shortcuts-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.shortcut-item {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    gap: 8px;
}

kbd {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #00F2FF;
    min-width: 24px;
    text-align: center;
}

/* Picture in Picture */
video::-webkit-media-controls-panel {
    display: flex !important;
    opacity: 1 !important;
}

/* Responsive */
@media (max-width: 768px) {
    #theater-chat-float {
        width: 90%;
        right: 5%;
        bottom: 10px;
        height: 300px;
    }
    
    .shortcuts-list {
        grid-template-columns: 1fr;
    }
}

/* Animaciones de entrada/salida */
.theater-enter {
    animation: theaterEnter 0.4s ease-out;
}

@keyframes theaterEnter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.theater-exit {
    animation: theaterExit 0.3s ease-out;
}

@keyframes theaterExit {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* ── MODO CANAL: ocultar controles de chat privado/grupo ─────────────────── */
.conversation-panel.is-canal .private-chat-icon,
.conversation-panel.is-canal #nudge-button,
.conversation-panel.is-canal #wink-button,
.conversation-panel.is-canal #stream-button,
.conversation-panel.is-canal #stream-dropdown-menu,
.conversation-panel.is-canal #conversation-menu,
.conversation-panel.is-canal #conversation-menu-button {
    display: none !important;
}
.conversation-panel.is-canal #in-chat-search-button {
    display: none !important;
}