/* ============================================================
   TECNI-YA — Estilos de la app principal
   Extraído de index.html (29/09/2026) para que el navegador lo
   cachee por separado y el HTML se parsee más rápido.
   ⚠️ No borrar: sin este archivo la app se ve sin estilos.
   ============================================================ */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            /* Evita que el navegador espere un posible "doble toque" de zoom y
               haga que el PRIMER toque sobre el input del chat ya abra el teclado */
            touch-action: manipulation;
        }
        
        body {
            background: #0a0a0a;
            min-height: 100vh;
            padding: 0;
            position: relative;
        }
        
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(10,132,255,0.08) 0%, rgba(10,10,10,0) 70%);
            pointer-events: none;
            z-index: 0;
        }
        /* ===== SOPORTE PWA iOS: área segura (notch / barra de estado) =====
           Solo aplica cuando la app corre INSTALADA (app.js añade la clase
           `pwa-standalone` a <html>). En iOS, con la barra de estado translúcida, el
           contenido puede quedar bajo el notch/reloj; aquí reservamos el área segura
           arriba y abajo. En Android/PWA también sirve (env() = 0 si no hay notch).
           Al reservar arriba/abajo, el contenedor principal ajusta su altura para
           seguir llenando exactamente la pantalla. */
        html.pwa-standalone body {
            padding-top: env(safe-area-inset-top, 0px);
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        html.pwa-standalone .main-container {
            height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        }

        /* ===== AVISO iOS: "Añadir a pantalla de inicio" =====
           Solo aparece en iPhone/iPad + Safari y si la app NO está instalada (lo controla
           app.js añadiendo la clase .visible). Flota arriba, bajo el notch, sin tapar la barra
           de escribir. Usa el área segura (env) igual que el resto del soporte PWA. */
        .ios-install-hint {
            position: fixed;
            left: 10px;
            right: 10px;
            top: calc(env(safe-area-inset-top, 0px) + 10px);
            z-index: 4000;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            border-radius: 16px;
            background: rgba(28, 28, 30, 0.94);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
            color: #fff;
            opacity: 0;
            transform: translateY(-140%);
            transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
            pointer-events: none;
        }
        .ios-install-hint.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }
        .ios-install-hint-ico { font-size: 26px; line-height: 1; }
        .ios-install-hint-txt { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.35; }
        .ios-install-hint-txt strong { font-size: 13.5px; }
        .ios-install-hint-txt span { color: #c7c7cc; }
        .ios-install-hint-txt b { color: #0a84ff; }
        .ios-install-hint-share { font-size: 15px; }
        .ios-install-hint-close {
            margin-left: auto;
            flex: 0 0 auto;
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
        }
        .ios-install-hint-close:active { background: rgba(255, 255, 255, 0.22); }


        
        /* ===== PANTALLA DE ARRANQUE (bootstrap de sesión) =====
           Se muestra mientras se resuelve si hay sesión (onAuthStateChanged), para no
           enseñar el login "de paso" cuando el usuario ya está logueado. */
        .auth-bootstrap-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0a0a0a;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 22px;
            z-index: 10000;
        }
        .auth-bootstrap-loader.hidden { display: none; }
        .auth-bootstrap-logo {
            font-size: 34px;
            font-weight: 800;
            letter-spacing: 3px;
            color: #0a84ff;
            text-shadow: 0 0 24px rgba(10,132,255,0.35);
        }
        .auth-bootstrap-spinner {
            width: 34px;
            height: 34px;
            border: 3px solid rgba(255,255,255,0.15);
            border-top-color: #0a84ff;
            border-radius: 50%;
            animation: authBootstrapSpin 0.8s linear infinite;
        }
        @keyframes authBootstrapSpin { to { transform: rotate(360deg); } }

        /* ===== OVERLAY DE VERIFICACIÓN (PLAN B) =====
           Tapa la app unos instantes mientras se validan en segundo plano suspensión,
           dispositivo y correo. Es semi-transparente para que la app se intuya detrás
           (se siente rápida) pero bloquea los toques hasta confirmar que todo está OK. */
        .auth-verify-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(10, 10, 10, 0.72);
            backdrop-filter: blur(2px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9000;
        }
        .auth-verify-overlay.hidden { display: none; }
        .auth-verify-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
        }
        .auth-verify-spinner {
            width: 30px;
            height: 30px;
            border: 3px solid rgba(255,255,255,0.15);
            border-top-color: #0a84ff;
            border-radius: 50%;
            animation: authBootstrapSpin 0.8s linear infinite;
        }
        .auth-verify-text {
            color: #dddddd;
            font-size: 14px;
            letter-spacing: 0.5px;
        }

        .container {
            background: rgba(30, 30, 35, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 32px;
            padding: 48px 36px;
            width: 100%;
            max-width: 440px;
            margin: 0 auto;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(10,132,255,0.15);
            position: relative;
            z-index: 1;
        }
        
        .main-container {
            background: rgba(30, 30, 35, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 0;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            height: 100vh;
            overflow-y: auto;
            position: relative;
            z-index: 1;
        }
        
        /* ===== NUEVO DISEÑO: PANEL DE USUARIOS COMPACTO ===== */
        .users-panel {
            width: 320px;
            border-right: 1px solid rgba(255,255,255,0.08);
            display: flex;
            flex-direction: column;
            background: rgba(20, 20, 25, 0.8);
            transition: transform 0.3s ease, opacity 0.3s ease;
            position: relative;
            overflow-y: auto;
            scroll-behavior: smooth;
        }
        
        .users-panel.hidden-panel {
            display: none;
        }
        
        .chat-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: rgba(26, 26, 30, 0.8);
        }
        
        /* ===== HEADER COMPACTO DEL PANEL DE USUARIOS ===== */
        .users-header {
            padding: 14px 16px 12px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            background: rgba(30, 30, 35, 0.9);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            flex-shrink: 0;
            position: sticky;
            top: 0;
            z-index: 20;
        }
        
        .users-header-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            width: 100%;
            min-width: 0;
            cursor: pointer;
        }
        
        .users-header-left .profile-pic-small {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #8e8e93;
            box-shadow: 0 4px 16px rgba(0,0,0,0.35);
            flex-shrink: 0;
        }
        
        .users-header-left .user-info-compact {
            width: 100%;
            min-width: 0;
            text-align: center;
        }
        
        .users-header-left .user-info-compact strong {
            color: #fff;
            font-size: 15px;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .users-header-left .user-info-compact small {
            color: #888;
            font-size: 12px;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* ===== BOTÓN MENÚ HAMBURGUESA ===== */
        .hamburger-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(42, 42, 50, 0.9);
            border: none;
            color: #fff;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.2s;
        }
        .hamburger-btn:hover {
            background: rgba(60, 60, 70, 0.9);
        }
        
        /* ===== MENÚ DESPLEGABLE ===== */
        .dropdown-menu {
            display: none;
            position: absolute;
            top: calc(100% + 8px);
            right: 12px;
            left: auto;
            background: rgba(30, 30, 35, 0.98);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px;
            padding: 8px;
            z-index: 100;
            min-width: 220px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
            backdrop-filter: blur(10px);
        }
        .dropdown-menu.active {
            display: block;
            animation: fadeIn 0.15s ease-out;
        }
        .dropdown-menu button {
            background: none;
            border: none;
            color: #fff;
            padding: 10px 14px;
            width: 100%;
            text-align: left;
            font-size: 13px;
            border-radius: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: background 0.15s;
        }
        .dropdown-menu button:hover {
            background: rgba(255,255,255,0.08);
        }
        .dropdown-menu button.logout-btn {
            color: #ff6b6b;
            border-top: 1px solid rgba(255,255,255,0.08);
            margin-top: 4px;
            padding-top: 12px;
        }
        
        /* ===== BOTÓN "CAMBIAR FOTO" DEBAJO DEL HEADER ===== */
        .change-photo-wrapper {
            padding: 6px 12px;
            flex-shrink: 0;
        }
        .change-photo-btn {
            width: 100%;
            padding: 8px 14px;
            background: rgba(42, 42, 50, 0.9);
            border: 1px solid rgba(10,132,255,0.3);
            color: #0a84ff;
            border-radius: 40px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: background 0.2s, border-color 0.2s;
        }
        .change-photo-btn:hover {
            background: rgba(10,132,255,0.1);
            border-color: #0a84ff;
        }
        
        /* ===== BOTONES PRINCIPALES (FUERA DEL MENÚ) ===== */
        .main-action-buttons {
            padding: 4px 12px 6px;
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex-shrink: 0;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .main-action-btn {
            width: 100%;
            padding: 11px 16px;
            background: rgba(255,255,255,0.04);
            background: color-mix(in srgb, currentColor 10%, transparent);
            border: 1.5px solid;
            border-radius: 40px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
            letter-spacing: 0.3px;
        }
        .main-action-btn:hover {
            background: rgba(255,255,255,0.08);
            background: color-mix(in srgb, currentColor 18%, transparent);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        .main-action-btn:active {
            transform: scale(0.98);
        }
        
        /* ===== RECUADROS PUBLICITARIOS DE LA PANTALLA PRINCIPAL ===== */
        .recuadros-home {
            display: flex;
            gap: 8px;
            justify-content: center;
            padding: 6px 12px 2px;
            flex-shrink: 0;
        }
        .recuadro-home {
            flex: 1;
            max-width: calc(50% - 4px);
            aspect-ratio: 2 / 1;
            border-radius: 10px;
            overflow: hidden;
            background: rgba(42, 42, 50, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.1);
            cursor: pointer;
            position: relative;
            transition: transform 0.15s, box-shadow 0.2s;
        }
        .recuadro-home:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
        }
        .recuadro-home img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .recuadro-home .recuadro-home-label {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            font-size: 10px;
            color: #fff;
            background: rgba(0, 0, 0, 0.6);
            padding: 2px 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .recuadro-home-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #555;
            font-size: 11px;
        }

        /* ===== MI DISTRITO (privado, bajo la foto de perfil) ===== */
        .mi-distrito-wrapper {
            padding: 8px 12px 2px;
        }
        .mi-distrito-wrapper label {
            display: block;
            color: #888;
            font-size: 11px;
            margin-bottom: 4px;
        }
        .mi-distrito-wrapper select {
            width: 100%;
            padding: 8px 10px;
            background: rgba(42,42,50,0.9);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            color: #fff;
            font-size: 13px;
            outline: none;
        }
        
        /* ===== BARRA DE BÚSQUEDA ===== */
        .search-bar-wrapper {
            position: relative;
            padding: 8px 12px 4px;
            flex-shrink: 0;
        }
        .search-bar-wrapper::before {
            content: '🔍';
            position: absolute;
            left: 22px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 12px;
            opacity: 0.5;
            pointer-events: none;
        }
        .search-bar {
            padding: 8px 14px 8px 32px;
            background: rgba(42, 42, 50, 0.9);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 24px;
            color: #fff;
            font-size: 13px;
            width: 100%;
            transition: border-color 0.2s, box-shadow 0.2s;
            outline: none;
            box-sizing: border-box;
            -webkit-appearance: none;
            appearance: none;
        }
        .search-bar:focus {
            border-color: #0a84ff;
            box-shadow: 0 0 0 2px rgba(10,132,255,0.15);
        }
        .search-bar::placeholder {
            color: #666;
        }
        /* #searchUsers es type="search" a propósito (así el gestor de contraseñas del
           navegador NO lo rellena con tu correo). Se quitan los adornos nativos del
           input de búsqueda para que se vea exactamente igual que antes. */
        .search-bar::-webkit-search-cancel-button,
        .search-bar::-webkit-search-decoration,
        .search-bar::-webkit-search-results-button,
        .search-bar::-webkit-search-results-decoration {
            -webkit-appearance: none;
            appearance: none;
            display: none;
        }
        
        .users-list {
            padding: 8px 12px 12px;
            overflow: visible;
        }

        /* El panel izquierdo se desplaza como un solo bloque (estilo WhatsApp) */
        .users-panel > * {
            flex-shrink: 0;
        }
        
        /* ===== BOTÓN BACK EN ESCRITORIO ===== */
        .back-button-desktop {
            display: none;
            background: none;
            border: none;
            color: #0a84ff;
            font-size: 14px;
            cursor: pointer;
            padding: 6px 12px;
            border-radius: 20px;
            transition: background 0.2s;
            align-items: center;
            gap: 4px;
        }
        .back-button-desktop:hover {
            background: rgba(10,132,255,0.1);
        }
        .back-button-desktop.visible {
            display: inline-flex;
        }
        
        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .main-container {
                flex-direction: column;
                height: 100vh;
                height: 100dvh;
                /* En móvil el chat es un panel fijo: el contenedor NO debe scrollear
                   (evita que al abrir el teclado salte toda la página) */
                overflow: hidden;
            }
            .users-panel {
                width: 100%;
                display: flex;
            }
            .users-panel.hidden-panel {
                display: none;
            }
            .chat-panel {
                display: none;
                width: 100%;
                height: 100%;
                height: 100dvh;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 10;
                background: rgba(26, 26, 30, 0.98);
            }
            .chat-panel.active-mobile { display: flex; }
            .back-button {
                display: flex !important;
                background: none;
                padding: 8px;
                font-size: 24px;
                width: 40px;
                height: 40px;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
            }
            .back-button-desktop {
                display: none !important;
            }
            .dropdown-menu {
                left: 8px;
                right: 8px;
                min-width: auto;
            }
        }
        
        @media (max-width: 400px) {
            .send-btn {
                padding: 6px 12px;
                font-size: 12px;
            }
            
            .chat-input-area {
                gap: 4px;
            }
        }
        
        .back-button { display: none; }
        
        /* ===== HEADER DEL CHAT MEJORADO ===== */
        .chat-header {
            padding: 16px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            background: rgba(30, 30, 35, 0.95);
            display: flex;
            align-items: center;
            gap: 14px;
            backdrop-filter: blur(10px);
            position: relative;
            z-index: 5;
        }
        
        .chat-header-avatar-wrapper {
            position: relative;
            width: 48px;
            height: 48px;
            flex-shrink: 0;
        }
        
        .chat-header-img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255,255,255,0.15);
        }
        
        .chat-header-status-dot {
            position: absolute;
            bottom: 1px;
            right: 1px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            border: 2px solid rgba(30, 30, 35, 0.95);
        }
        .chat-header-status-dot.online {
            background: #30d158;
            box-shadow: 0 0 6px rgba(48,209,88,0.6);
        }
        .chat-header-status-dot.offline {
            background: #5a5a5a;
        }
        
        .chat-header-info {
            flex: 1;
            min-width: 0;
        }
        
        .chat-header-info strong {
            color: #ffffff;
            font-size: 17px;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .chat-header-status {
            color: #a0a0a0;
            font-size: 12px;
            display: block;
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-height: 16px;
            line-height: 16px;
        }
        
        .typing-indicator {
            color: #0a84ff;
            font-size: 12px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            animation: pulse 1s infinite;
        }
        .typing-indicator::after {
            content: '';
            display: inline-flex;
            gap: 2px;
        }
        .typing-indicator .dot {
            width: 4px;
            height: 4px;
            background: #0a84ff;
            border-radius: 50%;
            display: inline-block;
            animation: typingDot 1.4s infinite;
        }
        .typing-indicator .dot:nth-child(2) { animation-delay: 0.2s; }
        .typing-indicator .dot:nth-child(3) { animation-delay: 0.4s; }
        
        @keyframes typingDot {
            0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
            30% { opacity: 1; transform: translateY(-3px); }
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        /* ===== INPUT AREA MEJORADO (estilo WhatsApp) ===== */
        .chat-input-area {
            padding: 12px 16px;
            border-top: 1px solid rgba(255,255,255,0.08);
            background: rgba(30, 30, 35, 0.95);
            display: flex;
            gap: 8px;
            align-items: flex-end;
            flex-wrap: nowrap;
            backdrop-filter: blur(10px);
        }
        
        .chat-input-area textarea {
            flex: 1;
            padding: 12px 16px;
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 24px;
            background: rgba(42, 42, 50, 0.9);
            color: #ffffff;
            min-width: 80px;
            /* 16px: evita el zoom automatico del teclado en Android/WebView y
               hace el campo mas comodo de leer (estilo WhatsApp) */
            font-size: 16px;
            font-family: inherit;
            line-height: 1.4;
            resize: none;
            overflow-y: auto;
            max-height: 132px;
            min-height: 48px;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            transition: border-color 0.2s, box-shadow 0.2s;
            -webkit-user-select: text;
            user-select: text;
        }
        
        .chat-input-area textarea:focus {
            outline: none;
            border-color: #0a84ff;
            box-shadow: 0 0 0 2px rgba(10,132,255,0.15);
        }
        
        .chat-input-area textarea::placeholder {
            color: #777;
        }
        
        .chat-input-area textarea::-webkit-scrollbar {
            width: 5px;
        }
        .chat-input-area textarea::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.2);
            border-radius: 10px;
        }
        
        .send-btn {
            background: linear-gradient(135deg, #0a84ff 0%, #0071e3 100%);
            padding: 10px 18px;
            font-size: 14px;
            border-radius: 24px;
            display: flex;
            align-items: center;
            gap: 4px;
            flex-shrink: 0;
            transition: opacity 0.2s, transform 0.1s;
        }
        .send-btn:hover {
            opacity: 0.9;
        }
        .send-btn:active {
            transform: scale(0.96);
        }
        .send-btn::before {
            content: '✈️';
            font-size: 14px;
        }
        
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
            background: rgba(18, 18, 22, 0.6);
            display: flex;
            flex-direction: column;
        }
        
        button {
            padding: 10px 20px;
            background: linear-gradient(135deg, #0a84ff 0%, #0066cc 100%);
            color: white;
            border: none;
            border-radius: 40px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }
        
        .toggle-btn {
            background: transparent;
            color: #0a84ff;
            border: 1px solid rgba(10,132,255,0.5);
            margin-top: 12px;
        }
        
        .google-btn {
            background: rgba(42, 42, 50, 0.9);
            color: #ffffff;
            border: 1px solid rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }
        
        .error {
            background: rgba(255, 50, 50, 0.15);
            color: #ff6b6b;
            padding: 12px 16px;
            border-radius: 16px;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .success {
            background: rgba(50, 255, 50, 0.1);
            color: #6bff6b;
            padding: 12px 16px;
            border-radius: 16px;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .hidden { display: none; }
        hr { margin: 24px 0; border: none; border-top: 1px solid rgba(255,255,255,0.08); }
        
        .user-chat-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: 20px;
            margin-bottom: 8px;
            cursor: pointer;
            background: rgba(30, 30, 35, 0.8);
            border: 1px solid rgba(255,255,255,0.05);
        }
        .no-verificado-tag {
            font-size: 10px;
            color: #ff4444;
            background: rgba(255,68,68,0.12);
            padding: 2px 8px;
            border-radius: 8px;
            white-space: nowrap;
            margin-left: auto;
        }

        
        .user-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .online-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #30d158;
            box-shadow: 0 0 8px #30d158;
        }
        
        .offline-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #5a5a5a;
        }
        
        /* ===== BURBUJAS ESTILO WHATSAPP ===== */
        .message {
            max-width: 75%;
            /* ⚠️ FIX 22/09/2026 — el texto se partía en una palabra por línea:
               con `margin-left/right: auto` la fila quedaba en ancho "fit-content"
               (INDEFINIDO), y como dentro hay `max-width: calc(100% - 38px)` en
               .message-content y `max-width: 100%` en .message-bubble, esos % eran
               CÍCLICOS (el hijo dependía del padre y el padre del hijo). Chrome los
               resolvía de forma inconsistente → a veces la burbuja colapsaba a
               min-content (1 palabra) aunque sobrara espacio.
               `width: 100%` (topado por `max-width: 75%`) hace el ancho DEFINIDO,
               así los % internos resuelven bien y la burbuja ya no colapsa.
               NO quitar sin volver a medir. */
            width: 100%;
            margin-bottom: 6px;
            display: flex;
            gap: 6px;
            position: relative;
            animation: fadeInUp 0.2s ease-out;
        }
        
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .message.sent {
            justify-content: flex-end;
            padding-left: 50px;
        }
        
        .message.received {
            justify-content: flex-start;
            padding-right: 50px;
        }
        
        /* Mensajes encadenados (mismo remitente) */
        .message.sent + .message.sent {
            margin-top: -2px;
        }
        .message.received + .message.received {
            margin-top: -2px;
        }
        .message.sent + .message.sent .message-avatar {
            visibility: hidden;
            width: 0;
            height: 0;
            margin: 0;
        }
        .message.received + .message.received .message-avatar {
            visibility: hidden;
            width: 0;
            height: 0;
            margin: 0;
        }
        .message.sent + .message.sent .message-bubble {
            border-top-right-radius: 18px;
        }
        .message.received + .message.received .message-bubble {
            border-top-left-radius: 18px;
        }
        
        .message-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            object-fit: cover;
            align-self: flex-end;
            flex-shrink: 0;
            border: 2px solid rgba(255,255,255,0.1);
        }
        
        .message-content {
            max-width: calc(100% - 38px);
            display: flex;
            flex-direction: column;
        }
        
        .message.sent .message-content {
            align-items: flex-end;
        }
        .message.received .message-content {
            align-items: flex-start;
        }

        /* ===== 🎯 ANCHO DE BURBUJAS ESTILO WHATSAPP — MÓVIL (22/09/2026) =====
           En el celular las burbujas no pasaban de ~170px (43% de una pantalla de 390px)
           porque se sumaban TRES topes: el padding del chat (24px por lado),
           `.message { max-width: 75% }` y el `padding-left/right: 50px` de
           .message.sent/.received (que además era REDUNDANTE: el avatar de 28px + el
           gap de 6px ya reservan esa columna).
           Medido con Chrome headless (CSS real, geometría de celular de 390px):
             antes  → 168.5px = 43.2% de la pantalla  (solo llegaba a la mitad)
             ahora  → 302.6px = 77.6% con avatar · 330.6px = 84.8% en mensajes seguidos
           Escritorio NO se toca (ahí 75% está bien, como WhatsApp Web). */
        @media (max-width: 768px) {
            .chat-messages { padding: 10px 8px; }
            .message { max-width: 90%; }
            .message.sent { padding-left: 0; }
            .message.received { padding-right: 0; }
            .message-content { max-width: calc(100% - 34px); } /* 28px avatar + 6px gap */
        }
        /* Mensajes encadenados: app.js les pone `same-sender` cuando van SIN avatar,
           así aprovechan toda la fila (igual que WhatsApp). */
        .message.same-sender .message-content { max-width: 100%; }
        
        .message-bubble {
            padding: 8px 14px;
            border-radius: 18px;
            font-size: 14px;
            line-height: 1.4;
            word-wrap: break-word;
            position: relative;
            box-shadow: 0 1px 2px rgba(0,0,0,0.15);
            transition: background 0.2s;
        }
        
        .message-bubble:active {
            transform: scale(0.98);
        }
        
        .message.sent .message-bubble {
            background: linear-gradient(135deg, #0a84ff 0%, #0071e3 100%);
            color: white;
            border-bottom-right-radius: 4px;
        }
        
        .message.received .message-bubble {
            background: rgba(42, 42, 50, 0.95);
            color: #e4e4e4;
            border: 1px solid rgba(255,255,255,0.06);
            border-bottom-left-radius: 4px;
        }
        
        .message-time {
            font-size: 10px;
            /* NOTA (22/09/2026): antes era opacity:0.6 y eso apagaba TAMBIÉN los ✓/✓✓,
               porque los checks viven DENTRO de esta fila. Por eso "no se veían claros".
               Ahora el brillo se controla con el color de la hora (abajo), no con opacity. */
            opacity: 1;
            margin-top: 3px;
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 3px;
            min-height: 16px;
        }
        
        .message.sent .message-time {
            color: rgba(255,255,255,0.8);
        }
        .message.received .message-time {
            color: rgba(255,255,255,0.6);
        }
        
        /* Check de enviado/leído (mismo criterio de color que .check-* de abajo) */
        .message-check {
            font-size: 13px;
            line-height: 1;
        }
        .message-check.sent {
            color: rgba(255,255,255,0.8);
        }
        .message-check.delivered {
            color: rgba(255,255,255,0.9);
        }
        .message-check.read {
            color: #e8f7ff;
        }
        
       
        .no-chat {
            text-align: center;
            padding: 60px;
            color: #888;
        }
        
        button.small {
            width: auto;
            padding: 8px 20px;
            background: rgba(42, 42, 50, 0.9);
            color: #fff;
        }
        
        .form-group label {
            color: #ccc;
            margin-bottom: 8px;
            display: block;
        }
        
        .form-group input {
            background: rgba(42, 42, 50, 0.8);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 16px;
            color: #fff;
            padding: 14px 16px;
            width: 100%;
        }
        
        .logo-title {
            text-align: center;
            font-size: 48px;
            font-weight: 800;
            margin-bottom: 12px;
            background: linear-gradient(135deg, #fff 0%, #0a84ff 40%, #5e5ce0 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: glow 2s ease-in-out infinite alternate;
        }
        
        @keyframes glow {
            from { text-shadow: 0 0 20px rgba(10,132,255,0.2); }
            to { text-shadow: 0 0 40px rgba(10,132,255,0.5); }
        }
        
        .subtitle {
            text-align: center;
            color: #aaa !important;
            margin-bottom: 32px;
        }
        
        /* Modal de Proyectos (pantalla completa) */
        .proyectos-full-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0a0a0a;
            z-index: 2000;
            flex-direction: column;
        }
        
        .proyectos-full-modal.active {
            display: flex;
        }
        
        .proyectos-full-modal .modal-header-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            background: #1e1e1e;
            border-bottom: 1px solid #333;
        }
        
        .proyectos-full-modal .modal-header-bar h3 {
            color: #fff;
            margin: 0;
            font-size: 1.2rem;
        }
        
        .proyectos-full-modal .close-modal-btn {
            background: #ff3b30;
            border: none;
            color: white;
            font-size: 20px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .proyectos-full-modal .modal-iframe-container {
            flex: 1;
            width: 100%;
            background: #000;
        }
        
        .proyectos-full-modal iframe {
            width: 100%;
            height: 100%;
            border: none;
            background: #000;
        }
        
        /* Menú contextual para eliminar mensaje */
        .context-menu {
            position: fixed;
            background: #1e1e1e;
            border-radius: 12px;
            padding: 8px;
            z-index: 200;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            border: 1px solid #333;
            display: none;
        }
        
        .context-menu.active {
            display: block;
        }
        
        .context-menu button {
            background: none;
            border: none;
            padding: 10px 20px;
            width: 100%;
            text-align: left;
            color: #ff3b30;
            font-size: 14px;
            border-radius: 8px;
            cursor: pointer;
        }
        
        /* Acciones no destructivas en color normal */
        #copyMessageBtn, #forwardMessageBtn, #replyMessageBtn {
            color: #ffffff;
        }
        
        .forward-contact:hover {
            background: rgba(255,255,255,0.1) !important;
        }
        .forwarded-label {
            display: block;
            font-size: 11px;
            color: #0a84ff;
            opacity: 0.85;
            margin-bottom: 3px;
            font-weight: 600;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.85);
            backdrop-filter: blur(8px);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal.active { display: flex; }
        
        .modal-content {
            background: rgba(30, 30, 35, 0.98);
            border-radius: 32px;
            width: 90%;
            max-width: 900px;
            max-height: 85vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        
        .modal-header {
            padding: 20px 24px;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-header h3 {
            color: #fff;
            font-size: 22px;
            background: linear-gradient(135deg, #fff, #0a84ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .close-modal {
            background: none;
            font-size: 28px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            color: #fff;
        }
        
        .gallery-grid {
            padding: 24px;
            overflow-y: auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 20px;
            max-height: 55vh;
        }
        
        .gallery-item {
            position: relative;
            cursor: pointer;
            border-radius: 16px;
            overflow: hidden;
            border: 2px solid transparent;
        }
        
        .gallery-item.selected {
            border-color: #0a84ff;
            box-shadow: 0 0 20px rgba(10,132,255,0.4);
        }
        
        .gallery-item img {
            width: 100%;
            height: 160px;
            object-fit: cover;
        }
        
        .gallery-item-actions {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
            padding: 8px;
            display: flex;
            gap: 8px;
            justify-content: center;
            opacity: 0;
        }
        
        .gallery-item:hover .gallery-item-actions { opacity: 1; }
        
        .action-btn {
            padding: 6px 12px;
            font-size: 12px;
            background: rgba(30,30,35,0.9);
            border-radius: 20px;
        }
        
        .action-btn.delete { background: rgba(255,50,50,0.9); }
        .action-btn.replace { background: rgba(10,132,255,0.9); }
        
        .modal-footer {
            padding: 20px 24px;
            border-top: 1px solid rgba(255,255,255,0.1);
            display: flex;
            gap: 12px;
        }
        
        .modal-footer button { flex: 1; }
        .empty-gallery { text-align: center; padding: 60px; color: #888; grid-column: 1 / -1; }

        /* --- GALERÍA: TABS PRIVADO / PÚBLICO --- */
        .gallery-tabs {
            display: flex;
            gap: 8px;
            padding: 16px 24px 0;
        }
        .gallery-tab {
            flex: 1;
            padding: 12px 14px;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 40px;
            background: rgba(255,255,255,0.04);
            color: #aaa;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .gallery-tab.active {
            background: linear-gradient(135deg, #0a84ff, #0a5dd8);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 4px 18px rgba(10,132,255,0.35);
        }

        /* Badge de visibilidad encima de cada foto */
        .gallery-visibility-badge {
            position: absolute;
            top: 8px;
            left: 8px;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            color: #fff;
            pointer-events: none;
        }
        .gallery-visibility-badge.publico { background: rgba(23,161,75,0.92); }
        .gallery-visibility-badge.privado { background: rgba(50,50,60,0.92); }

        /* Mostrar acciones siempre en pantallas táctiles */
        @media (hover: none) {
            .gallery-item-actions { opacity: 1; }
        }

        /* Foto de perfil y avatar de chat clicables */
        #profileImg { cursor: pointer; }
        .chat-header-img { cursor: pointer; }

        /* --- PERFIL PÚBLICO (galería de otro usuario) --- */
        .perfil-publico-content { max-width: 520px; }
        .perfil-publico-header {
            text-align: center;
            padding: 16px 24px 4px;
        }
        .perfil-publico-avatar {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #0a84ff;
            box-shadow: 0 6px 24px rgba(10,132,255,0.35);
            cursor: pointer;
        }
        .perfil-publico-nombre {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
            margin-top: 10px;
        }
        .perfil-publico-sub {
            color: #888;
            font-size: 13px;
            margin-top: 2px;
            margin-bottom: 12px;
        }
        .perfil-publico-grid { max-height: 55vh; min-height: 120px; }

        /* 🍽️🏪 Recuadro del NEGOCIO dentro del perfil público (02/10/2026) */
        .perfil-publico-negocio {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 12px 16px 4px;
            padding: 10px 12px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 14px;
        }
        .perfil-publico-negocio img {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            object-fit: cover;
            flex-shrink: 0;
            background: #222;
        }
        .perfil-publico-negocio .emoji {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            background: linear-gradient(135deg, rgba(10,132,255,0.2), rgba(48,209,88,0.2));
        }
        .perfil-publico-negocio .nom {
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .perfil-publico-negocio .tipo { color: #888; font-size: 11px; }
        .perfil-publico-negocio .btn-ir {
            background: #0a84ff;
            color: #fff;
            border: none;
            border-radius: 20px;
            padding: 8px 12px;
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
        }

        /* 🍽️🏪🛵 Recuadro del logo de la SECCIÓN en la lista de contactos (02/10/2026) */
        .contacto-seccion {
            width: 38px;
            height: 38px;
            border-radius: 11px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            cursor: pointer;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(10,132,255,0.25), rgba(48,209,88,0.25));
            border: 1px solid rgba(255,255,255,0.14);
            transition: transform 0.15s ease;
        }
        .contacto-seccion img { width: 100%; height: 100%; object-fit: cover; }
        .contacto-seccion:active { transform: scale(0.94); }
        .perfil-publica-foto {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 14px;
            cursor: pointer;
            transition: transform 0.2s ease;
        }
        .perfil-publica-foto:hover { transform: scale(1.03); }
        
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }
        ::-webkit-scrollbar-thumb { background: rgba(10,132,255,0.5); border-radius: 10px; }
        
        /* Toggle Switch personalizado (óvalo con círculo deslizante) */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 26px;
            flex-shrink: 0;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #555;
            transition: 0.3s;
            border-radius: 26px;
        }
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }
        .toggle-switch input:checked + .toggle-slider {
            background-color: #0a84ff;
        }
        .toggle-switch input:checked + .toggle-slider:before {
            transform: translateX(24px);
        }

        /* ===== BARRA DE RESPUESTA (REPLY) ===== */
        .reply-bar {
            display: none;
            padding: 8px 16px;
            background: rgba(42, 42, 50, 0.95);
            border-top: 1px solid rgba(10,132,255,0.3);
            border-bottom: 1px solid rgba(255,255,255,0.08);
            align-items: center;
            gap: 12px;
            animation: slideDown 0.2s ease-out;
        }
        .reply-bar.active {
            display: flex;
        }
        @keyframes slideDown {
            from { transform: translateY(-100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .reply-bar-content {
            flex: 1;
            min-width: 0;
            background: rgba(0,0,0,0.3);
            border-radius: 12px;
            padding: 8px 12px;
            border-left: 3px solid #0a84ff;
        }
        .reply-bar-name {
            color: #0a84ff;
            font-size: 12px;
            font-weight: 600;
            display: block;
            margin-bottom: 2px;
        }
        .reply-bar-text {
            color: #aaa;
            font-size: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: normal;
            overflow-wrap: break-word;
            word-break: break-word;
            text-overflow: ellipsis;
            max-width: 100%;
        }
        .reply-bar-close {
            background: rgba(255,255,255,0.1);
            border: none;
            color: #fff;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .reply-bar-close:hover {
            background: rgba(255,255,255,0.2);
        }

        /* ===== PANEL DE REACCIONES ===== */
        .reactions-panel {
            position: fixed;
            background: #1e1e1e;
            border-radius: 24px;
            padding: 8px 12px;
            z-index: 200;
            box-shadow: 0 4px 20px rgba(0,0,0,0.6);
            border: 1px solid #333;
            display: none;
            gap: 4px;
            animation: fadeIn 0.15s ease-out;
        }
        .reactions-panel.active {
            display: flex;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: scale(0.9); }
            to { opacity: 1; transform: scale(1); }
        }
        .reaction-btn {
            background: none;
            border: none;
            font-size: 24px;
            padding: 4px 6px;
            cursor: pointer;
            border-radius: 12px;
            transition: transform 0.15s, background 0.15s;
            line-height: 1;
        }
        .reaction-btn:hover {
            transform: scale(1.3);
            background: rgba(255,255,255,0.1);
        }

        /* ===== REACCIONES EN MENSAJES ===== */
        .message-reactions {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            margin-top: 4px;
            padding: 0 2px;
        }
        .message-reaction {
            background: rgba(255,255,255,0.08);
            border-radius: 12px;
            padding: 2px 6px;
            font-size: 13px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            cursor: pointer;
            transition: background 0.2s;
            user-select: none;
        }
        .message-reaction:hover {
            background: rgba(255,255,255,0.15);
        }
        .message-reaction .count {
            font-size: 11px;
            color: #aaa;
            font-weight: 600;
        }
        .message-reaction.active {
            background: rgba(10,132,255,0.2);
            border: 1px solid rgba(10,132,255,0.3);
        }

        /* ===== MENSAJE CITADO (REPLY) ===== */
        .replied-message {
            background: rgba(0,0,0,0.2);
            border-radius: 8px;
            padding: 4px 8px;
            margin-bottom: 4px;
            border-left: 3px solid #0a84ff;
            font-size: 12px;
        }
        .replied-message .replied-name {
            color: #0a84ff;
            font-weight: 600;
            font-size: 11px;
        }
        .replied-message .replied-text {
            color: #aaa;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            white-space: normal;
            overflow-wrap: break-word;
            word-break: break-word;
            text-overflow: ellipsis;
            max-width: 100%;
            min-width: 0;
        }
        .message.sent .replied-message {
            background: rgba(0,0,0,0.15);
        }
        .message.received .replied-message {
            background: rgba(0,0,0,0.25);
        }

        /* ===== MENSAJES ELIMINADOS ===== */
        .message-deleted {
            font-style: italic;
            opacity: 0.5;
            font-size: 12px;
        }

        /* ============================================================
           FASE 4 - EFECTOS VISUALES, ANIMACIONES Y PULIDO GENERAL
           ============================================================ */

        /* --- ANIMACIONES DE ENTRADA PARA MENSAJES --- */
        @keyframes messageSlideIn {
            from { opacity: 0; transform: translateY(12px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes messageSlideInLeft {
            from { opacity: 0; transform: translateX(-20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes messageSlideInRight {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes bubblePop {
            0% { transform: scale(0.8); opacity: 0; }
            60% { transform: scale(1.05); }
            100% { transform: scale(1); opacity: 1; }
        }
        @keyframes checkAppear {
            from { opacity: 0; transform: scale(0.5); }
            to { opacity: 1; transform: scale(1); }
        }
        @keyframes reactionPop {
            0% { transform: scale(0); }
            60% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        @keyframes avatarGlow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(48,209,88,0.4); }
            50% { box-shadow: 0 0 0 6px rgba(48,209,88,0); }
        }
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        @keyframes floatUp {
            0% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-30px); }
        }

        /* --- MEJORA EN ANIMACIONES DE BURBUJAS --- */
        .message {
            animation: messageSlideIn 0.25s ease-out;
        }
        .message.received {
            animation: messageSlideInLeft 0.25s ease-out;
        }
        .message.sent {
            animation: messageSlideInRight 0.25s ease-out;
        }
        .message-bubble {
            transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
        }
        .message-bubble:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 12px rgba(0,0,0,0.2);
        }
        .message-bubble:active {
            transform: scale(0.97) !important;
        }

        /* --- ANIMACIÓN DE DOBLE CHECK --- */
        /* Colores (22/09/2026):
           · ✓  enviado → blanco (aun no leido).
           · ✓✓ leido   → VERDE (estilo Telegram) + halo oscuro para que resalte sobre la
                         burbuja azul. Un verde puro sin halo se perderia: #4ade80 sobre
                         #0a84ff mide ~2.1:1 de contraste, y el halo oscuro le da el borde
                         que le falta. Sobre una burbuja mas oscura se veria aun mejor.
           · Mas grande (11px → 13px) y sin el letter-spacing:-1px que juntaba los ✓✓. */
        .check {
            display: inline-flex;
            align-items: center;
            font-size: 13px;
            font-weight: 700;
            line-height: 1;
            letter-spacing: -0.5px;
            margin-left: 1px;
            animation: checkAppear 0.3s ease-out;
        }
        .check-pending { color: rgba(255,255,255,0.5); }
        .check-sent { color: rgba(255,255,255,0.85); }   /* ✓ enviado */
        .check-read {                                    /* ✓✓ LEIDO: VERDE */
            color: #4ade80;
            text-shadow: 0 1px 2px rgba(0,0,0,0.65), 0 0 3px rgba(0,0,0,0.45);
        }

        /* --- ANIMACIÓN DE REACCIONES --- */
        .message-reaction {
            transition: all 0.2s ease;
        }
        .message-reaction:hover {
            transform: scale(1.15);
            background: rgba(255,255,255,0.15);
        }
        .message-reaction.active {
            background: rgba(10,132,255,0.2);
            border: 1px solid rgba(10,132,255,0.3);
            animation: reactionPop 0.3s ease-out;
        }

        /* --- ANIMACIÓN DE REACTION BUTTONS EN PANEL --- */
        .reaction-btn {
            transition: all 0.15s ease;
        }
        .reaction-btn:hover {
            transform: scale(1.4) rotate(-5deg);
            background: rgba(255,255,255,0.15);
        }
        .reaction-btn:active {
            transform: scale(1.6) rotate(0deg);
        }

        /* --- ANIMACIÓN DE LA BARRA DE RESPUESTA --- */
        .reply-bar {
            animation: slideDown 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }
        @keyframes slideDown {
            from { transform: translateY(-100%); opacity: 0; max-height: 0; }
            to { transform: translateY(0); opacity: 1; max-height: 60px; }
        }

        /* --- ANIMACIÓN DE MENSAJES CITADOS --- */
        .replied-message {
            animation: fadeIn 0.2s ease-out;
        }

        /* --- ANIMACIÓN DE MENSAJES ELIMINADOS --- */
        .message-deleted {
            animation: fadeIn 0.3s ease-out;
        }

        /* --- EFECTO SHIMMER PARA BURBUJAS CARGANDO --- */
        .message-bubble.loading {
            background: linear-gradient(90deg, rgba(42,42,50,0.9) 25%, rgba(60,60,70,0.9) 50%, rgba(42,42,50,0.9) 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
            min-width: 120px;
            min-height: 36px;
            border-radius: 18px;
        }

        /* --- MEJORA EN TRANSICIÓN DE USUARIOS EN LISTA --- */
        .user-chat-card {
            transition: all 0.2s ease;
        }
        .user-chat-card:hover {
            background: rgba(40, 40, 48, 0.9);
            transform: translateX(4px);
            border-color: rgba(10,132,255,0.2);
        }
        .user-chat-card:active {
            transform: scale(0.98);
        }

        /* --- MEJORA EN AVATAR DE USUARIO EN LISTA --- */
        .user-avatar {
            transition: transform 0.2s ease, border-color 0.2s ease;
        }
        .user-chat-card:hover .user-avatar {
            transform: scale(1.05);
            border-color: #0a84ff;
        }

        /* --- MEJORA EN ONLINE DOT --- */
        .online-dot {
            animation: avatarGlow 2s infinite;
        }

        /* --- MEJORA EN TRANSICIÓN DE PANELES (MOBILE) --- */
        .chat-panel {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .chat-panel.active-mobile {
            animation: slideInRight 0.3s ease-out;
        }
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        /* --- MEJORA EN TRANSICIÓN DE MODALES --- */
        .modal {
            transition: opacity 0.2s ease;
        }
        .modal.active {
            animation: modalFadeIn 0.2s ease-out;
        }
        @keyframes modalFadeIn {
            from { opacity: 0; backdrop-filter: blur(0px); }
            to { opacity: 1; backdrop-filter: blur(8px); }
        }
        .modal-content {
            animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }
        @keyframes modalScaleIn {
            from { transform: scale(0.9) translateY(20px); opacity: 0; }
            to { transform: scale(1) translateY(0); opacity: 1; }
        }

        /* --- MEJORA EN TRANSICIÓN DE CONTEXT MENU --- */
        .context-menu {
            transition: opacity 0.15s ease, transform 0.15s ease;
        }
        .context-menu.active {
            animation: contextMenuIn 0.15s ease-out;
        }
        @keyframes contextMenuIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }
        .context-menu button {
            transition: background 0.15s ease;
        }
        .context-menu button:hover {
            background: rgba(255,255,255,0.08);
        }
        .context-menu-separator {
            height: 1px;
            background: rgba(255,255,255,0.1);
            margin: 4px 8px;
        }

        /* --- MEJORA EN TRANSICIÓN DE REACTIONS PANEL --- */
        .reactions-panel {
            transition: opacity 0.15s ease, transform 0.15s ease;
        }
        .reactions-panel.active {
            animation: reactionsPanelIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        @keyframes reactionsPanelIn {
            from { opacity: 0; transform: scale(0.8) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        /* --- MEJORA EN TRANSICIÓN DE BOTONES --- */
        button {
            transition: all 0.2s ease;
        }
        button:active {
            transform: scale(0.97);
        }
        .send-btn {
            transition: all 0.2s ease;
        }
        .send-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(10,132,255,0.3);
        }
        .send-btn:active {
            transform: scale(0.95);
        }

        /* --- MEJORA EN INPUT --- */
        .chat-input-area textarea {
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .chat-input-area textarea:focus {
            transform: none;
            box-shadow: 0 4px 15px rgba(10,132,255,0.15);
        }

        /* --- BOTÓN VACIAR CHAT --- */
        .vaciar-chat-btn {
            background: rgba(255, 59, 48, 0.15);
            border: none;
            color: #ff6b6b;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.2s ease;
        }
        .vaciar-chat-btn:hover {
            background: rgba(255, 59, 48, 0.3);
            transform: scale(1.1);
        }
        .vaciar-chat-btn:active {
            transform: scale(0.92);
        }

        /* --- MEJORA EN HEADER DEL CHAT --- */
        .chat-header {
            transition: background 0.3s ease;
        }
        .chat-header-img {
            transition: transform 0.2s ease, border-color 0.2s ease;
        }
        .chat-header-img:hover {
            transform: scale(1.05);
            border-color: #0a84ff;
        }

        /* --- MEJORA EN SCROLLBAR --- */
        ::-webkit-scrollbar-thumb {
            transition: background 0.2s ease;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(10,132,255,0.7);
        }

        /* --- MEJORA EN GALLERY ITEMS --- */
        .gallery-item {
            transition: all 0.2s ease;
        }
        .gallery-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0,0,0,0.3);
        }
        .gallery-item.selected {
            animation: gallerySelect 0.3s ease-out;
        }
        @keyframes gallerySelect {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        /* --- MEJORA EN TOGGLE SWITCH --- */
        .toggle-slider {
            transition: all 0.3s ease;
        }
        .toggle-slider:before {
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* --- MEJORA EN AUDIO WAVEFORM --- */
        .audio-waveform span {
            animation: waveAnim 0.8s ease-in-out infinite;
        }

        /* --- MEJORA EN TYPING INDICATOR --- */
        .typing-indicator {
            animation: pulse 1.2s ease-in-out infinite;
        }

        /* --- MEJORA EN LOGO --- */
        .logo-title {
            animation: glow 2s ease-in-out infinite alternate;
        }

        /* --- MEJORA EN BOTONES DE ADMIN --- */
        .admin-verify-btn, .admin-toggle-btn, .admin-delete-btn, .admin-empresa-btn {
            transition: all 0.2s ease;
        }
        .admin-verify-btn:hover, .admin-toggle-btn:hover, .admin-delete-btn:hover, .admin-empresa-btn:hover {
            transform: translateY(-1px);
            filter: brightness(1.1);
        }

        /* --- MEJORA EN NOTIFICACIONES --- */
        .notif-aceptar-btn, .notif-rechazar-btn, .notif-eliminar-btn {
            transition: all 0.15s ease;
        }
        .notif-aceptar-btn:hover, .notif-rechazar-btn:hover, .notif-eliminar-btn:hover {
            transform: scale(1.05);
            filter: brightness(1.1);
        }

        /* --- MEJORA EN BADGE DE NOTIFICACIONES --- */
        #badgeNotificaciones {
            animation: badgePulse 2s infinite;
        }
        @keyframes badgePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }

        /* --- MEJORA EN TRANSICIÓN DE PANTALLA DE ESPERA --- */
        #pendingApprovalOverlay {
            animation: fadeIn 0.3s ease-out;
        }

        /* --- MEJORA EN TRANSICIÓN DE LOGIN/REGISTER --- */
        #loginForm, #registerForm, #forgotForm {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        #loginForm.hidden, #registerForm.hidden, #forgotForm.hidden {
            opacity: 0;
            transform: translateY(10px);
            pointer-events: none;
        }

        /* --- MEJORA EN ERROR/SUCCESS BOX --- */
        .error, .success {
            transition: all 0.3s ease;
            animation: slideDown 0.3s ease-out;
        }

        /* --- MEJORA EN BOTÓN DE BACK (MOBILE) --- */
        .back-button {
            transition: all 0.2s ease;
        }
        .back-button:hover {
            background: rgba(255,255,255,0.1);
        }
        .back-button:active {
            transform: scale(0.9);
        }

        /* --- MEJORA EN SEARCH BAR --- */
        .search-bar {
            transition: all 0.2s ease;
        }
        .search-bar:focus {
            transform: translateY(-1px);
        }

        /* --- MEJORA EN PROFILE PIC --- */
        .profile-pic-large {
            transition: all 0.3s ease;
        }
        .profile-pic-large:hover {
            transform: scale(1.05);
            box-shadow: 0 0 25px rgba(10,132,255,0.4);
        }

        /* --- MEJORA EN MENSAJE DE "NO CHAT" --- */
        .no-chat {
            animation: fadeIn 0.5s ease-out;
        }

        /* --- MEJORA EN EMPTY GALLERY --- */
        .empty-gallery {
            animation: fadeIn 0.5s ease-out;
        }

        /* --- MEJORA EN CARDS DE ADMIN --- */
        #adminUserList > div {
            transition: all 0.2s ease;
        }
        #adminUserList > div:hover {
            transform: translateX(4px);
        }

        /* --- SUAVIZAR TRANSICIONES GLOBALES --- */
        * {
            -webkit-tap-highlight-color: transparent;
        }
        
        /* Evita el pull-to-refresh del navegador y el "rebote" al scrollear listas internas.
           En la app Android esto complementa el fix nativo del swipe refresh. */
        html, body {
            overscroll-behavior-y: none;
        }

        /* --- MEJORA EN SCROLL SUAVE --- */
        /* NOTA: el scroll programático del chat debe ser INSTANTÁNEO (como WhatsApp)
           para que la paginación de mensajes antiguos y el scroll al enviar no salten.
           El scroll suave en touch lo da el propio navegador/dispositivo. */
        .chat-messages {
            scroll-behavior: auto;
        }
        .users-list {
            scroll-behavior: smooth;
        }

        /* --- MEJORA EN SELECTION --- */
        ::selection {
            background: rgba(10,132,255,0.3);
            color: #fff;
        }

        /* ===== FASE 1 - BOTONES MULTIMEDIA ===== */
        .attach-btn {
            background: rgba(255,255,255,0.08);
            border: none;
            color: #fff;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.2s ease;
        }
        .attach-btn:hover {
            background: rgba(255,255,255,0.15);
            transform: scale(1.1);
        }
        .attach-menu {
            position: absolute;
            bottom: 70px;
            left: 10px;
            background: #2c2c3e;
            border-radius: 16px;
            padding: 8px;
            z-index: 100;
            box-shadow: 0 4px 20px rgba(0,0,0,0.5);
            border: 1px solid rgba(255,255,255,0.1);
            display: flex;
            flex-direction: column;
            gap: 4px;
            animation: fadeIn 0.15s ease-out;
            min-width: 180px;
        }
        .attach-menu-item {
            background: none;
            border: none;
            color: #fff;
            padding: 10px 16px;
            border-radius: 12px;
            font-size: 14px;
            cursor: pointer;
            text-align: left;
            transition: background 0.15s;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .attach-menu-item:hover {
            background: rgba(255,255,255,0.1);
        }
        .attach-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
        }
        .message-image {
            max-width: 250px;
            border-radius: 12px;
            cursor: pointer;
            transition: transform 0.15s;
            display: block;
            /* Reservar espacio mientras carga: evita que la altura del chat
               cambie cuando se cargan las imágenes (lazy) y el scroll se desplace */
            min-height: 60px;
            background: rgba(255,255,255,0.06);
        }
        .message-image:hover {
            transform: scale(1.02);
        }
        .message-image-wrapper {
            position: relative;
        }
        .message-caption {
            font-size: 13px;
            margin-top: 4px;
            opacity: 0.8;
        }

        /* ===== MENSAJE DE AUDIO (VOZ) ===== */
        .message-audio {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 200px;
        }
        .message-audio-btn {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: none;
            background: rgba(255,255,255,0.18);
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: transform 0.15s, background 0.15s;
        }
        .message.received .message-audio-btn {
            background: rgba(10,132,255,0.85);
        }
        .message-audio-btn:hover {
            transform: scale(1.08);
            background: rgba(255,255,255,0.28);
        }
        .message-audio-meta {
            display: flex;
            flex-direction: column;
            gap: 6px;
            flex: 1;
        }
        .voice-wave {
            display: flex;
            align-items: center;
            gap: 3px;
            height: 24px;
        }
        .voice-wave .bar {
            width: 3px;
            border-radius: 2px;
            background: rgba(255,255,255,0.65);
            height: 6px;
        }
        .message.received .voice-wave .bar {
            background: rgba(255,255,255,0.65);
        }
        .audio-duration {
            font-size: 12px;
            opacity: 0.85;
            letter-spacing: 0.5px;
        }

        /* ===== MENSAJE DE UBICACIÓN ===== */
        .message-location {
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            max-width: 260px;
            position: relative;
        }
        .message-location .map-thumb {
            width: 100%;
            height: 160px;
            object-fit: cover;
            display: block;
            filter: saturate(0.9) contrast(1.02);
        }
        .message-location-bar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            font-size: 12px;
            background: rgba(0,0,0,0.18);
        }
        .message-location-bar .loc-icon {
            font-size: 16px;
        }

        /* ===== BARRA DE GRABACIÓN DE VOZ ===== */
        .recording-bar {
            display: none;
            align-items: center;
            gap: 10px;
            padding: 10px 16px;
            border-top: 1px solid rgba(255,255,255,0.08);
            background: rgba(255, 59, 48, 0.12);
            animation: fadeIn 0.2s ease-out;
        }
        .recording-bar.active {
            display: flex;
        }
        .recording-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ff3b30;
            animation: pulse 1s infinite;
            flex-shrink: 0;
        }
        .recording-time {
            font-size: 14px;
            font-weight: 600;
            color: #ff6b6b;
            font-variant-numeric: tabular-nums;
            min-width: 42px;
        }
        .recording-label {
            flex: 1;
            font-size: 13px;
            color: #ddd;
        }
        .recording-cancel-btn {
            background: rgba(255,255,255,0.12);
            border: none;
            color: #ff6b6b;
            padding: 10px 16px;
            border-radius: 24px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            flex-shrink: 0;
        }
        .recording-cancel-btn:hover {
            background: rgba(255,255,255,0.2);
        }
        .recording-send-btn {
            background: #0a84ff;
            border: none;
            color: #fff;
            padding: 10px 18px;
            border-radius: 24px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .recording-send-btn:hover {
            background: #0071e3;
        }
        .recording-send-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* ===== TABS CHATS / CONTACTOS (COMO WHATSAPP) ===== */
        .chat-tabs {
            display: flex;
            padding: 8px 12px 0;
            gap: 0;
            flex-shrink: 0;
        }
        .chat-tab {
            flex: 1;
            background: rgba(42, 42, 50, 0.5);
            border: none;
            color: #888;
            padding: 10px 0;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            text-align: center;
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
            border-radius: 0;
        }
        .chat-tab:first-child {
            border-radius: 12px 0 0 0;
        }
        .chat-tab:last-child {
            border-radius: 0 12px 0 0;
        }
        .chat-tab.active {
            color: #0a84ff;
            border-bottom-color: #0a84ff;
            background: rgba(10, 132, 255, 0.08);
        }
        .chat-tab:hover:not(.active) {
            color: #aaa;
            background: rgba(255, 255, 255, 0.03);
        }

        /* ===== FILTRO ANTI-NUEVOS ===== */
        .filtro-confiables-bar {
            padding: 6px 12px;
            flex-shrink: 0;
            border-top: 1px solid rgba(255,255,255,0.05);
            background: rgba(20, 20, 25, 0.6);
        }
        .filtro-confiables-label {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            font-size: 12px;
            color: #aaa;
            user-select: none;
        }
        .filtro-confiables-label input[type="checkbox"] {
            accent-color: #0a84ff;
            width: 16px;
            height: 16px;
            cursor: pointer;
        }
        .filtro-confiables-text {
            font-weight: 500;
        }
        .filtro-confiables-label input:checked + .filtro-confiables-text {
            color: #30d158;
        }

        /* ===== MODAL DENUNCIA ===== */
        .modal-denuncia-content {
            background: rgba(30, 30, 35, 0.98);
            border-radius: 24px;
            width: 90%;
            max-width: 440px;
            overflow: hidden;
            padding: 24px;
        }
        .modal-denuncia-motivos {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin: 16px 0;
        }
        .modal-denuncia-motivo {
            background: rgba(42, 42, 50, 0.8);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px;
            color: #fff;
            padding: 12px 16px;
            font-size: 14px;
            cursor: pointer;
            text-align: left;
            transition: all 0.15s;
        }
        .modal-denuncia-motivo:hover {
            background: rgba(255, 59, 48, 0.1);
            border-color: rgba(255, 59, 48, 0.3);
        }
        .modal-denuncia-motivo.seleccionado {
            background: rgba(255, 59, 48, 0.2);
            border-color: rgba(255, 59, 48, 0.5);
            font-weight: 600;
        }

        /* ===== ESTADOS (HISTORIAS DE 24H, ESTILO WHATSAPP) ===== */
        .estados-bar {
            padding: 10px 12px 4px;
            flex-shrink: 0;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }
        .estados-scroll {
            display: flex;
            gap: 14px;
            overflow-x: auto;
            padding: 4px 2px 8px;
            scrollbar-width: none;
        }
        .estados-scroll::-webkit-scrollbar {
            display: none;
        }
        .estado-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            min-width: 68px;
            flex-shrink: 0;
        }
        .estado-item .estado-avatar-wrap {
            position: relative;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            padding: 3px;
            /* VERDE: hay estado (nuevo / aún no visto) — visible en tema oscuro */
            background: #30d158;
            box-shadow: 0 0 12px rgba(48,209,88,0.45);
        }
        /* AZUL: ya vi todos los estados del contacto */
        .estado-item .estado-avatar-wrap.todos-vistos {
            background: #0a84ff;
            box-shadow: 0 0 10px rgba(10,132,255,0.35);
        }
        /* GRIS: sin estado (tu burbuja con "+") */
        .estado-item .estado-avatar-wrap.agregar {
            background: #8e8e93;
            box-shadow: none;
        }
        .estado-item .estado-avatar-wrap .estado-avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #141419;
        }
        .estado-item .estado-avatar-wrap .estado-add {
            position: absolute;
            right: -2px;
            bottom: -2px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #0a84ff;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #141419;
        }
        .estado-item .estado-nombre {
            font-size: 10px;
            color: #ccc;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 68px;
        }

        /* ===== REPRODUCTOR DE ESTADOS (ESTILO WHATSAPP) ===== */
        .ver-estado-container {
            position: relative;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            background: #000;
        }
        #verEstadoContenido img,
        #verEstadoContenido video {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            border-radius: 8px;
        }
        .barra-progreso-fondo {
            flex: 1;
            height: 3px;
            background: rgba(255,255,255,0.2);
            border-radius: 3px;
            overflow: hidden;
        }
        .barra-progreso-llena {
            height: 100%;
            background: #fff;
            border-radius: 3px;
            transition: width 0.1s linear;
        }

        /* ===== DESCRIPCIÓN EN FOTOS DE GALERÍA ===== */
        .gallery-item-descripcion {
            position: absolute;
            bottom: 34px;
            left: 4px;
            right: 4px;
            background: rgba(0,0,0,0.65);
            color: #fff;
            font-size: 11px;
            padding: 4px 8px;
            border-radius: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            pointer-events: none;
        }
        .perfil-publica-descripcion {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 14px;
            cursor: pointer;
            transition: transform 0.2s ease;
            display: block;
        }
        .perfil-publica-wrap {
            position: relative;
        }
        .perfil-publica-wrap .desc {
            color: #ddd;
            font-size: 12px;
            margin-top: 6px;
            text-align: center;
            padding: 0 4px;
            word-break: break-word;
        }

        .chat-messages {
            overflow-x: hidden;
        }
        .message-content {
            min-width: 0;
            will-change: transform;
        }
        .message-bubble {
            min-width: 0;
            max-width: 100%;
        }
        .message.sent {
            margin-left: auto;
        }
        .message.received {
            margin-right: auto;
        }
        .message.just-replied .message-bubble {
            box-shadow: 0 0 0 2px rgba(48, 209, 88, 0.9);
        }

        /* ===== SELECCIÓN MÚLTIPLE DE MENSAJES ===== */
        #selectMultipleBtn {
            color: #ffffff !important;
        }
        .context-menu {
            max-height: calc(100vh - 20px);
            overflow-y: auto;
        }
        .chat-messages.seleccion-multiple .message {
            cursor: pointer;
        }
        .chat-messages .message {
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }
        .message.selected .message-bubble {
            box-shadow: 0 0 0 2px rgba(10,132,255,0.95);
            transform: scale(0.99);
        }
        .message.selected::before {
            content: '✓';
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #0a84ff;
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            line-height: 22px;
            text-align: center;
            z-index: 2;
            box-shadow: 0 0 0 2px rgba(10,132,255,0.3);
        }
        .message.sent.selected::before {
            left: 4px;
        }
        .message.received.selected::before {
            right: 4px;
        }
        .multi-select-bar {
            display: none;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            background: rgba(24, 24, 30, 0.97);
            border-bottom: 1px solid rgba(255,255,255,0.08);
            flex-shrink: 0;
            flex-wrap: wrap;
            z-index: 6;
        }
        .multi-select-bar .multi-select-count {
            flex: 1;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .multi-select-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            background: rgba(255,255,255,0.08);
            color: #fff;
            border: none;
            cursor: pointer;
            flex-shrink: 0;
            transition: background 0.15s ease;
        }
        .multi-select-btn.multi-select-text {
            width: auto;
            height: 34px;
            padding: 0 10px;
            border-radius: 18px;
            font-size: 12px;
            font-weight: 600;
            gap: 4px;
        }
        .multi-select-btn:hover {
            background: rgba(255,255,255,0.18);
        }
        .multi-select-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
            transform: none;
        }
        .multi-select-delete {
            color: #ff453a;
            background: rgba(255,69,58,0.15);
        }
        .multi-select-delete:hover {
            background: rgba(255,69,58,0.3);
        }

        /* ===== SEPARADORES DE FECHA EN EL CHAT (estilo WhatsApp: Hoy / Ayer / fecha) ===== */
        .chat-date-separator {
            display: flex;
            justify-content: center;
            margin: 12px 0 6px;
            pointer-events: none;
        }
        .chat-date-separator > span {
            background: rgba(255,255,255,0.10);
            color: #cfcfcf;
            font-size: 11px;
            font-weight: 600;
            padding: 3px 12px;
            border-radius: 10px;
            text-transform: capitalize;
            box-shadow: 0 1px 2px rgba(0,0,0,0.25);
        }
    
        /* ===== BARRA DE NAVEGACIÓN INFERIOR (TIPO INSTAGRAM) =====
           Principal · Chats · Reels. Fija abajo; se oculta sola en la pantalla de login
           porque vive dentro de #mainContainer. Reservamos height/padding inferior con el
           área segura para que respete la barra de gestos del celular. */
        .bottom-nav {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: stretch;
            justify-content: space-around;
            height: calc(58px + env(safe-area-inset-bottom, 0px));
            padding-bottom: env(safe-area-inset-bottom, 0px);
            background: rgba(20, 20, 25, 0.98);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            border-top: 1px solid rgba(255, 255, 255, 0.10);
            z-index: 900;
        }
        .bottom-nav-btn {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            background: none;
            border: none;
            color: #8e8e93;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: color 0.15s ease, transform 0.15s ease;
        }
        .bottom-nav-btn .bn-ico { font-size: 22px; line-height: 1; transition: transform 0.15s ease; }
        .bottom-nav-btn.active { color: #0a84ff; }
        .bottom-nav-btn.active .bn-ico { transform: scale(1.12); }
        .bottom-nav-btn:active { transform: scale(0.94); }
        /* Deja libre el alto de la barra para que no tape el input del chat ni las listas. */
        .main-container {
            padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
        }

        /* ===== FEED DE REELS (PANTALLA COMPLETA, TIPO TIKTOK) ===== */
        #feedModal { background: #000; }
        .feed-container {
            position: relative;
            width: 100%;
            max-width: 640px;
            height: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            background: #000;
        }
        .feed-topbar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;
            padding: 14px 16px;
            padding-top: calc(14px + env(safe-area-inset-top, 0px));
            color: #fff;
            font-size: 17px;
            z-index: 3;
            background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
            pointer-events: none;
        }
        .feed-topbar .feed-close-btn { pointer-events: auto; }

        /* Conmutador "Para ti" / "🎬 Siguiendo" / "🔖 Guardados" (Mis guardados) del feed. */
        .feed-tabs {
            display: flex;
            gap: 6px;
            margin-right: auto;
            pointer-events: auto;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            max-width: 100%;
        }
        .feed-tabs::-webkit-scrollbar { display: none; }
        .feed-tab {
            background: rgba(255, 255, 255, 0.14);
            border: none;
            color: #fff;
            font-size: 13px;
            font-weight: 600;
            padding: 7px 12px;
            border-radius: 999px;
            cursor: pointer;
            line-height: 1;
            white-space: nowrap;
        }
        .feed-tab.is-active {
            background: #fff;
            color: #000;
        }
        .feed-close-btn {
            background: rgba(255, 255, 255, 0.15);
            border: none;
            color: #fff;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
        }
        .feed-scroll {
            flex: 1;
            overflow-y: auto;
            scroll-snap-type: y mandatory;
            -webkit-overflow-scrolling: touch;
        }
        .feed-empty {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: #8e8e93;
            text-align: center;
            padding: 24px;
            scroll-snap-align: start;
        }
        .feed-empty-emoji { font-size: 56px; line-height: 1; }
        .feed-empty p { font-size: 15px; }
        .feed-empty-sub { font-size: 13px; color: #6d6d72; }

        /* --- Slides del feed (Paso 2: miniatura + autor + descripción; el <video> llega en el Paso 3) --- */
        .feed-slide {
            position: relative;
            height: 100%;
            scroll-snap-align: start;
            scroll-snap-stop: always;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: #000;
        }
        .feed-slide-thumb {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .feed-slide-thumb--vacio {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 72px;
            color: #3a3a3c;
        }
        .feed-slide-overlay {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 16px 16px calc(20px + env(safe-area-inset-bottom, 0px));
            background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0));
            color: #fff;
            pointer-events: none;
        }
        .feed-slide-autor {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 4px;
        }
        /* Nombre del autor: botón "fantasma" que abre su perfil público (reusa abrirPerfilPublico). */
        .feed-autor-nombre {
            background: none;
            border: none;
            color: #fff;
            font: inherit;
            font-size: 16px;
            font-weight: 700;
            padding: 0;
            margin: 0;
            cursor: pointer;
            pointer-events: auto;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
            -webkit-tap-highlight-color: transparent;
        }
        /* Botón ➕ Seguir / ✓ Siguiendo (estilo TikTok) junto al nombre del autor. */
        .feed-seguir-btn {
            flex: 0 0 auto;
            background: rgba(255, 255, 255, 0.16);
            border: 1px solid rgba(255, 255, 255, 0.6);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            line-height: 1;
            padding: 5px 12px;
            border-radius: 999px;
            cursor: pointer;
            pointer-events: auto;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s ease, transform 0.1s ease;
        }
        .feed-seguir-btn:active { transform: scale(0.93); }
        .feed-seguir-btn--activo {
            background: rgba(255, 255, 255, 0.94);
            border-color: rgba(255, 255, 255, 0.94);
            color: #111;
        }
        .feed-slide-desc { font-size: 14px; line-height: 1.35; opacity: 0.95; margin-bottom: 8px; }
        .feed-slide-stats { font-size: 13px; color: #d1d1d6; }

        /* --- Reproductor (Paso 3: pool de <video> + autoplay del slide visible) ---
             El pool monta UN <video> dentro de .feed-slide-media del slide que ocupa la
             pantalla; el resto de slides deja su póster estático (evita "jank" por muchos
             videos vivos). .feed-pool-hidden es el contenedor oculto donde "descansan". */
        .feed-slide-media { position: absolute; inset: 0; z-index: 1; }
        .feed-slide-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            background: #000;
        }
        .feed-slide-overlay { z-index: 2; }
        .feed-pool-hidden {
            position: absolute;
            width: 0;
            height: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
        }
        .feed-topbar .feed-sound-btn { pointer-events: auto; }
        .feed-sound-btn {
            background: rgba(255, 255, 255, 0.15);
            border: none;
            color: #fff;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
        }

        /* --- Avisos de carga/error/fin y centinela de paginación --- */
        .feed-aviso {
            height: 100%;
            min-height: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 24px;
            color: #8e8e93;
            font-size: 15px;
            scroll-snap-align: start;
        }
        .feed-aviso--fin { height: auto; min-height: 120px; color: #636366; }
        .feed-aviso--error { color: #ff453a; cursor: pointer; }
        .feed-sentinel { height: 1px; scroll-snap-align: start; }

        /* --- Subida de reels (Paso 4: botón flotante ➕ + overlay de publicación) ---
             Reusa la validación ≤50 MB + miniatura + progreso del chat. El overlay cubre el
             feed mientras se elige el video; publica y recarga la lista para verlo arriba. */
        .feed-subir-btn {
            position: absolute;
            right: 16px;
            bottom: calc(24px + env(safe-area-inset-bottom, 0px));
            z-index: 4;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            border: none;
            background: #ff2d55;
            color: #fff;
            font-size: 26px;
            line-height: 1;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
            pointer-events: auto;
        }
        .feed-subir-btn:active { transform: scale(0.94); }
        .feed-upload {
            position: absolute;
            inset: 0;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            background: rgba(0, 0, 0, 0.78);
        }
        .feed-upload[hidden] { display: none; }
        .feed-upload-card {
            width: 100%;
            max-width: 420px;
            max-height: 90%;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 16px;
            background: #1c1c1e;
            border-radius: 18px;
            color: #fff;
        }
        .feed-upload-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 16px;
        }
        .feed-upload-head button {
            width: 34px;
            height: 34px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }
        .feed-upload-preview {
            width: 100%;
            max-height: 46vh;
            border-radius: 12px;
            background: #000;
            object-fit: contain;
        }
        .feed-upload-desc {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.06);
            color: #fff;
            font-size: 15px;
            outline: none;
        }
        .feed-upload-btn {
            width: 100%;
            padding: 13px;
            border: none;
            border-radius: 12px;
            background: #ff2d55;
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
        }
        .feed-upload-btn:disabled { opacity: 0.6; cursor: default; }
        .feed-upload-bar {
            height: 6px;
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.15);
            overflow: hidden;
        }
        .feed-upload-bar > span {
            display: block;
            width: 0;
            height: 100%;
            background: #ff2d55;
            transition: width 0.2s;
        }
        .feed-upload-prog { min-height: 16px; font-size: 13px; color: #ff453a; text-align: center; }

        /* --- Interacciones del reel (Paso 5: ❤️ 💬 🔖 📤 🚩 — rail estilo TikTok) --- */
        .feed-acciones {
            position: absolute;
            right: 10px;
            bottom: calc(86px + env(safe-area-inset-bottom, 0px));
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            z-index: 3;
        }
        .feed-accion {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
            padding: 0;
            -webkit-tap-highlight-color: transparent;
        }
        .feed-accion-ico {
            font-size: 30px;
            line-height: 1;
            filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
            transition: transform 0.12s ease;
        }
        .feed-accion:active .feed-accion-ico { transform: scale(0.85); }
        .feed-accion-num {
            font-size: 12px;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
        }
        .feed-accion--activo .feed-accion-ico { transform: scale(1.06); }
        .feed-accion--like.feed-accion--activo .feed-accion-ico { filter: drop-shadow(0 0 7px rgba(255, 45, 85, 0.95)); }
        .feed-accion--guardar.feed-accion--activo .feed-accion-ico { filter: drop-shadow(0 0 7px rgba(255, 214, 10, 0.95)); }

        /* --- Aviso flotante y efímero del feed (Paso 5) --- */
        .feed-toast {
            position: absolute;
            left: 50%;
            bottom: calc(120px + env(safe-area-inset-bottom, 0px));
            transform: translateX(-50%) translateY(10px);
            max-width: 84%;
            padding: 10px 16px;
            border-radius: 22px;
            background: rgba(30, 30, 35, 0.95);
            color: #fff;
            font-size: 13px;
            text-align: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
            z-index: 12;
        }
        .feed-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }

        /* --- Franja de "sin conexión" del feed (Paso 6) --- */
        .feed-offline {
            position: absolute;
            top: calc(58px + env(safe-area-inset-top, 0px));
            left: 0;
            right: 0;
            z-index: 11;
            padding: 8px 14px;
            background: rgba(120, 30, 30, 0.95);
            color: #fff;
            font-size: 12.5px;
            text-align: center;
            transform: translateY(-140%);
            transition: transform 0.22s ease;
            pointer-events: none;
        }
        .feed-offline--visible { transform: translateY(0); }

        /* --- Comentarios del reel (Paso 5: overlay con lista + caja de envío) --- */
        .feed-comentarios {
            position: absolute;
            inset: 0;
            z-index: 11;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            background: rgba(0, 0, 0, 0.55);
        }
        .feed-comentarios[hidden] { display: none; }
        .feed-comentarios-card {
            width: 100%;
            max-width: 640px;
            max-height: 72%;
            display: flex;
            flex-direction: column;
            background: #1c1c1e;
            border-radius: 18px 18px 0 0;
            color: #fff;
            overflow: hidden;
        }
        .feed-comentarios-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 16px;
        }
        .feed-comentarios-head button {
            width: 34px;
            height: 34px;
            border: none;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            font-size: 16px;
            cursor: pointer;
        }
        .feed-comentarios-lista {
            flex: 1;
            overflow-y: auto;
            padding: 10px 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-height: 120px;
        }
        .feed-comentario { display: flex; gap: 10px; align-items: flex-start; }
        .feed-comentario-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }
        .feed-comentario-cuerpo { flex: 1; min-width: 0; }
        .feed-comentario-nombre { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
        .feed-comentario-texto { font-size: 14px; line-height: 1.35; color: #e5e5ea; word-break: break-word; }
        .feed-comentarios-vacio { padding: 26px 10px; text-align: center; color: #8e8e93; font-size: 14px; }
        .feed-comentarios-envio {
            display: flex;
            gap: 8px;
            padding: 10px 12px;
            padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            background: #1c1c1e;
        }
        .feed-comentario-input {
            flex: 1;
            padding: 11px 14px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.06);
            color: #fff;
            font-size: 15px;
            outline: none;
        }
        .feed-comentario-enviar {
            width: 44px;
            height: 44px;
            border: none;
            border-radius: 50%;
            background: #ff2d55;
            color: #fff;
            font-size: 18px;
            cursor: pointer;
            flex-shrink: 0;
        }
        .feed-comentario-enviar:disabled { opacity: 0.6; cursor: default; }