/* --- VARIABLES DE DISEÑO (IDENTIDAD JAC) --- */
        :root {
            --bg-main: #f4f6f9;
            --jac-red: #d32f2f;
            --jac-dark: #111827;
            --sidebar-bg: #111827;
            --sidebar-hover: #1f2937;
            --sidebar-active: #d32f2f;
            --text-light: #f8fafc;
            --text-dark: #334155;
            --text-muted: #64748b;
            --card-bg: #ffffff;
            --border-color: #e2e8f0;
            
            --instagram: #e1306c;
            --facebook: #1877f2;
            --tiktok: #000000;

            --bg-pendiente: #fef3c7;
            --text-pendiente: #92400e;
            --bg-proceso: #dbeafe;
            --text-proceso: #1e40af;
            --bg-listo: #d1fae5;
            --text-listo: #065f46;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }
        body { background-color: var(--bg-main); color: var(--text-dark); height: 100vh; overflow: hidden; }

        /* --- PANTALLA DE LOGIN --- */
        .login-wrapper {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-color: #0b0f19;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.4s ease;
        }
        .login-container {
            display: flex;
            width: 900px;
            height: 550px;
            background-color: var(--card-bg);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
        }
        .login-sidebar {
            flex: 1;
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 40px;
            position: relative;
        }
        .login-logo-space h2 { font-size: 28px; font-weight: 800; letter-spacing: 2px; }
        .login-logo-space span { color: var(--jac-red); }
        .login-sidebar-footer { font-size: 12px; color: #64748b; }
        
        .login-form-area { width: 450px; padding: 50px; display: flex; flex-direction: column; justify-content: center; }
        .login-form-area h3 { font-size: 24px; color: var(--jac-dark); margin-bottom: 8px; font-weight: 700; }
        .login-form-area p { font-size: 14px; color: var(--text-muted); margin-bottom: 20px; }
        
        .login-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
        .login-form-group label { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-dark); }
        .login-form-group input { padding: 12px 16px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 14px; outline: none; }
        .login-form-group input:focus { border-color: var(--jac-red); }
        
        .btn-login { background-color: var(--jac-dark); color: white; border: none; padding: 14px; border-radius: 8px; font-weight: 600; cursor: pointer; width: 100%; }
        .btn-login:hover { background-color: #1f2937; }
        .login-error-msg { color: #ef4444; background-color: #fee2e2; border: 1px solid #fca5a5; padding: 10px; border-radius: 6px; font-size: 13px; margin-bottom: 15px; display: none; text-align: center; }
        
/* --- LAYOUT PRINCIPAL --- */
    .app-layout { 
        display: flex; 
        height: 100vh; 
        width: 100vw; 
        transition: opacity 0.4s ease; 
    }

    /* --- SIDEBAR BASE --- */
    .sidebar { 
        width: 260px; 
        background-color: var(--sidebar-bg); 
        color: var(--text-light); 
        display: flex; 
        flex-direction: column; 
        z-index: 100; 
        transition: width 0.3s ease; 
        /* Eliminamos overflow: hidden aquí para que el logo no se corte */
    }

    /* --- LOGO Y BRAND (FIJOS) --- */
    .sidebar-brand { 
        width: 260px; /* Ancho fijo para que no se deforme al colapsar */
        padding: 14px; 
        font-size: 18px; 
        font-weight: bold; 
        text-transform: uppercase; 
        border-bottom: 1px solid var(--sidebar-hover); 
        display: flex !important; 
        justify-content: space-between; 
        align-items: center;
        flex-shrink: 0; /* IMPEDIMOS QUE SE ENCOJA */
        box-sizing: border-box;
        height: 58px !important;
    }

    .sidebar-brand h2 { 
        margin: 0; 
        font-size: 1.4rem; 
        white-space: nowrap; /* Mantiene el logo en una sola línea */
    }

    .sidebar-brand span { color: var(--sidebar-active); }

    /* --- CONTENEDOR DEL MENU (EL QUE SE OCULTA) --- */
    #sidebar-content {
        flex: 1;
        overflow-y: auto;    /* Aquí sí necesitamos el scroll */
        overflow-x: hidden;  /* Evita desbordamiento horizontal */
        transition: opacity 0.3s ease;
        width: 260px;        /* Mantenemos el ancho para que no salte */
    }

    #sidebar-content.hidden {
        display: none !important;
    }

    /* --- MENUS --- */
    .sidebar-menu { list-style: none; padding: 15px 0; }
    .menu-item { padding: 0 15px; margin-bottom: 4px; }
    .menu-link { display: flex; align-items: center; padding: 12px 15px; color: #94a3b8; text-decoration: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; }
    .menu-link:hover, .menu-item.active .menu-link { background-color: var(--sidebar-hover); color: var(--text-light); }
    .link-content { display: flex; align-items: center; gap: 12px; }

    /* --- BOTON TOGGLE --- */
    .toggle-btn {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: white;
        padding: 5px 8px;
        cursor: pointer;
        border-radius: 4px;
    }

        /* Módulos Especiales de Auditoría Gerencial */
        .menu-item.coordinador-only { border-left: 3px solid #f59e0b; background-color: rgba(245, 158, 11, 0.03); display: none; }

        .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
        .navbar { background-color: var(--sidebar-bg); height: 60px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 30px; }
        .user-profile { display: flex; align-items: center; gap: 15px; font-size: 14px; }
        .user-info-text { display: flex; flex-direction: column; text-align: right; }
        .user-avatar { width: 35px; height: 35px; background-color: var(--jac-red); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
        .btn-logout { background: none; border: 1px solid var(--border-color); padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; color: var(--text-muted); }
        .btn-logout:hover { background-color: #fee2e2; color: #ef4444; }

        .content-body { padding: 20px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; }
        .page-view { display: none; height: 100%; flex-direction: column; }
        .page-view.active-view { display: flex; animation: fadeIn 0.3s ease; }
        .content-header { margin-bottom: 15px; }
        .content-header h1 { font-size: 22px; }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* --- CONTENEDORES DE INTERFAZ --- */
        .omnicanal-container { display: flex; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; flex: 1; height: calc(100vh - 170px); overflow: hidden; }
        .chat-list { width: 320px; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; background: #fff; }
        .chat-list-header { padding: 15px 20px; font-weight: 600; border-bottom: 1px solid var(--border-color); background-color: #f8fafc; }
        .chat-threads { overflow-y: auto; flex: 1; }
        
        /* Asegura que el contenedor de la lista esté siempre encima y reciba clics */
        #lista-mis-casos {
            display: flex !important;
            flex-direction: column !important;
            scroll-behavior: smooth;
            width: 100%;
            flex: 1;           /* Ocupa el espacio sobrante debajo del header */
            overflow-y: auto;  /* Scroll solo cuando hay más elementos de los que caben */
            min-height: 0;     /* Truco de flex para contenedores scroll */
        }

        .nuevo-mensaje-arriba { 
            animation: slideDown 0.5s ease-out; 
        }

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

        .thread-item { 
            display: flex; 
            align-items: center; 
            gap: 12px; 
            padding: 15px 20px; 
            border-bottom: 1px solid var(--border-color); 
            cursor: pointer;
            position: relative;
            transition: transform 0.5s ease-in-out, order 0.5s ease;
            pointer-events: auto !important;
        }
        
        .thread-item:hover, .thread-item.active-thread { background-color: #f1f5f9; }
        .thread-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: #e2e8f0; display: flex; align-items: center; justify-content: center; font-weight: bold; position: relative; }

        .social-badge { padding: 2px 4px;  width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; font-weight: bold; position: absolute; bottom: -2px; right: -2px; border: 2px solid #fff; }
        .social-badge.ig { background: var(--instagram); }
        .social-badge.fb { background: var(--facebook); }
        .social-badge.tk { background: var(--tiktok); }
        .social-badge.ws { background: #25D366; }

        .thread-info { flex: 1; overflow: hidden; }
        .thread-meta { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
        .thread-name { font-weight: 600; }
        .thread-time { font-size: 11px; color: var(--text-muted); }

        .chat-window { flex: 1; display: flex; flex-direction: column; background-color: #f8fafc; }
        .chat-window-header { height: 60px; background-color: #fff; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
        .chat-window-user { display: flex; align-items: center; gap: 10px; font-weight: 600; }
        .chat-messages-area { background: #f0f2f5; flex-grow: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
        
        .msg-row { display: flex; flex-direction: column; max-width: 100%; }
        .msg-row.incoming { align-self: flex-start; }
        .msg-bubble { padding: 12px 16px; border-radius: 12px; font-size: 14px; background-color: #ffffff; box-shadow: 0 1px 2px rgba(0,0,0,0.05); line-height: 1.4; }
        .incoming .msg-bubble { border-bottom-left-radius: 2px; color: var(--text-dark); }

        .btn-action { background-color: var(--jac-red); color: white; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 6px; }
        .btn-action:hover { background-color: #b71c1c; }
        .btn-danger { background-color: #ef4444; }
        .btn-danger:hover { background-color: #dc2626; }
        .btn-success { background-color: #10b981; }
        .btn-success:hover { background-color: #059669; }

        .client-register-pane { width: 300px; border-left: 1px solid var(--border-color); background-color: #fff; padding: 20px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
        .pane-title { font-size: 13px; text-transform: uppercase; color: var(--text-muted); font-weight: 700; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
        
        .form-group { display: flex; flex-direction: column; gap: 6px; }
        .form-group label { font-size: 12px; font-weight: 600; color: var(--text-dark); }
        .form-group input, .form-group select { padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 13px; outline: none; }

        /* --- TABLAS --- */
        .table-container { background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.01); }
        .data-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
        .data-table th { background-color: #f8fafc; color: var(--text-muted); padding: 14px 16px; font-weight: 600; border-bottom: 2px solid var(--border-color); }
        .data-table td { padding: 14px 16px; border-bottom: 1px solid var(--border-color); color: var(--text-dark); vertical-align: middle; }
        .data-table tr:hover { background-color: #f8fafc; }
        
        .select-status { padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; border: 1px solid transparent; outline: none; cursor: pointer; text-transform: uppercase; }
        .status-pendiente { background-color: var(--bg-pendiente); color: var(--text-pendiente); border-color: #fcd34d; }
        .status-proceso { background-color: var(--bg-proceso); color: var(--text-proceso); border-color: #93c5fd; }
        .badge-completado { background-color: var(--bg-listo); color: var(--text-listo); padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: bold; text-transform: uppercase; display: inline-block; }

        /* Componentes del Reloj Gerencial */
        .badge-timer { background-color: #fee2e2; color: #b91c1c; padding: 4px 8px; border-radius: 4px; font-weight: 700; font-family: monospace; font-size: 13px; border: 1px solid #fca5a5; }
        .badge-analista { background-color: #f1f5f9; color: #334155; padding: 4px 8px; border-radius: 4px; font-weight: 600; font-size: 13px; }
    
        
/* Para que el panel de cliente tenga más espacio */
.omnicanal-container {
    display: flex;
    gap: 15px;
    height: 80vh;
}

.chat-window { flex: 2; } /* El chat toma espacio central */
.client-register-pane { 
    flex: 1.5; /* Le damos más peso al formulario */
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #ddd;
    overflow-y: auto;
}

.form-group label { display: block; font-weight: bold; margin-bottom: 5px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.form-actions button { flex: 1; }

.thread-item:hover {
    background-color: #f9f9f9;
}

/* Avatar y Badge */
.thread-avatar {
    width: 40px;
    height: 40px;
    background: #e0e0e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    position: relative;
}

/* Información del hilo */
.thread-info {
    flex: 1;
    min-width: 0; /* Importante para que el texto no se desborde */
}

.thread-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.thread-name {
    font-weight: bold;
    font-size: 14px;
}

.thread-time {
    font-size: 11px;
    color: #888;
}

/* Clase que le pondremos al hacer clic */
.active-thread {
    background-color: #eef2ff !important;
    border-left: 4px solid #111827;
}



.status-badge {
    margin-left: auto; /* Esto empuja el estado a la derecha */
    font-size: 10px;
    background: #e0e0e0;
    padding: 2px 6px;
    border-radius: 10px;
}


.thread-avatar, .thread-info, .thread-meta, .thread-name {
    pointer-events: auto; /* Opcional: si los hijos bloquean, usa pointer-events: none en ellos y auto en el padre */
}

#nuevo-comentario-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
}

#lista-comentarios {
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.comentario-item {
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.comentario-item textarea {
    border: 1px solid #111827;
    padding: 5px;
    border-radius: 4px;
    font-family: inherit;
}

/* Botones pequeños para el historial */
.comentario-item button {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 2px 8px;
}

.comentario-item button:hover {
    background: #e0e0e0;
}



/* Burbujas de mensaje */
.msg-bubble {
    padding: 10px 15px;
    border-radius: 12px;
    max-width: 75%;
    font-size: 14px;
    line-height: 1.4;
    position: relative;
}

.incoming .msg-bubble {
    background: #ffffff;
    align-self: flex-start;
    border-bottom-left-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.outgoing .msg-bubble {
    background: #d9fdd3;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Área de Input */
.chat-input-area {
    background: #f0f2f5;
    padding: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
    border-top: 1px solid #ddd;
}

#texto-respuesta {
    flex: 1;
    border: none;
    border-radius: 20px;
    padding: 10px 15px;
    outline: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Menú principal */
.menu-link {
    display: flex;
    align-items: center;
    padding: 10px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Contenedor del submenú con efecto deslizante */
.submenu {
    list-style: none;
    padding: 0;
    max-height: 0; /* Empieza colapsado */
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease;
    opacity: 0;
}

/* Clase que aplicaremos con JS para expandir */
.submenu.is-open {
    max-height: 200px; /* Suficiente para tus 3 items */
    opacity: 1;
}

/* Animación de la flecha */
.arrow {
    transition: transform 0.3s ease;
    margin-left: auto;
}
.submenu.is-open + .arrow {
    transform: rotate(180deg);
}

/* Diseño de selección profesional */
.menu-item.selected > .menu-link {
    background: rgba(52, 152, 219, 0.1);
    border-left: 4px solid #3498db;
    color: #3498db;
}


    #modal-confirmacion {
    display: none; /* Inicia oculto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Fondo oscuro semitransparente */
    z-index: 9999;
    align-items: center; /* Centrado vertical */
    justify-content: center; /* Centrado horizontal */
}

#modalRechazo {
    display: none; /* Inicia oculto */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Fondo oscuro */
    z-index: 99999; /* Asegura que esté al frente de todo */
    justify-content: center;
    align-items: center;
}


/* Asegura que el toast siempre esté por encima de TODO */
#notificacion-toast {
    z-index: 9999999 !important; 
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2e8f0;
    overflow: hidden;
    transition: transform 0.2s;
}

.user-avatar:hover {
    transform: scale(1.1);
}

#tablaUsuarios { width: 100%; border-collapse: collapse; margin-top: 20px; }
#tablaUsuarios th, #tablaUsuarios td { padding: 12px; border: 1px solid #ddd; text-align: left; }
#tablaUsuarios th { background-color: #f4f4f4; }


/* Esto soluciona la falta de scroll en la lista de DMs */
.chat-threads {
    max-height: 600px;    /* Ajusta según el alto de tu ventana */
    overflow-y: auto;     /* Activa el scroll vertical */
    scrollbar-width: thin; /* Para Firefox */
}

/* Scrollbar estilizado para Chrome, Edge, Safari */
.chat-threads::-webkit-scrollbar {
    width: 6px;
}
.chat-threads::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 10px;
}


/* --- CSS PARA EL RESPONSIVE --- */

/* 1. Cambia las alturas fijas por automáticas en móviles */
@media (max-width: 1024px) {
    .omnicanal-container {
        flex-direction: column !important;
        height: auto !important;
    }
    
    .chat-list, .chat-window, .client-register-pane {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .chat-messages-area {
        height: 300px !important; /* Altura más cómoda para móviles */
    }
}

/* 2. Ajuste para formularios */
@media (max-width: 600px) {
    .form-group-grid {
        grid-template-columns: 1fr !important;
    }
}
    /* Estilos globales para la responsividad */
    .omnicanal-container {
        display: flex;
        flex-wrap: wrap; /* Permite que el contenido se apile en móvil */
        gap: 20px;
        align-items: flex-start;
    }

    .chat-list { flex: 1; min-width: 280px; }
    .chat-window { flex: 1; min-width: 300px; }
    .client-register-pane { flex: 1; min-width: 300px; }

    /* Ajuste para móviles */
    @media (max-width: 768px) {
        .navbar { flex-direction: column; gap: 10px; text-align: center; }
        .omnicanal-container { flex-direction: column; }
        .table-container { overflow-x: auto; }
        #buscador-usuarios { width: 100% !important; }
    }

    /* Asegura que el panel de gestión sea scrollable independientemente */
.client-register-pane {
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Permite scroll vertical dentro del panel */
    max-height: 80vh; /* Limita la altura al 80% de la pantalla */
    padding: 15px;
}

/* Forzar que el formulario ocupe el espacio necesario */
#form-gestion-caso {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: min-content; /* Asegura que el contenido mínimo sea visible */
}

/* Ajuste específico para móvil */
@media (max-width: 1024px) {
    .client-register-pane {
        max-height: none; /* En móvil, permitimos que el panel crezca */
        height: auto;
    }
}


/* 1. Ajuste global para el contenedor de contenido */
.content-body {
    display: flex;
    flex-direction: column;
    height: 100vh; /* Ocupa la altura total de la ventana */
    overflow: hidden; /* Evita scroll en el body, lo delegamos a los hijos */
    padding: 10px;
}

/* 2. Ajuste específico para móvil (menor a 500px) */
@media (max-width: 500px) {
    .content-body {
        height: 100vh; /* Asegura que no se expanda más allá de la pantalla */
        overflow-y: auto; /* Permite scroll global en móvil si es necesario */
    }
    
    /* Forzamos que las listas de casos ocupen un espacio manejable */
    .chat-list {
        height: 350px !important; /* Altura fija en móvil para que el scroll funcione */
        flex: 0 0 auto !important;
        border-bottom: 2px solid #eee;
    }

    #tabla-completados-body, 
    #lista-mis-casos {
        height: 100%;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch; /* Suavidad nativa en iOS/Android */
    }
}

#contenedor-resultados-global .thread-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    background: #fff;
    transition: background 0.2s;
}

#contenedor-resultados-global .thread-item:hover {
    background: #f9fafb;
}

#contenedor-resultados-global .thread-item {
    padding: 12px !important;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s;
}
#contenedor-resultados-global .thread-item:hover {
    background-color: #f3f4f6;
    border-radius: 8px;
}


#btn-reset-fechas:hover {
    background-color: #e2e8f0;
    border-color: #94a3b8;
}

/* Estilo para las imágenes de los analistas en la lista */
.thread-item img {
    width: 40px; 
    height: 40px; 
    border-radius: 50%; 
    object-fit: cover; /* Esto es clave: recorta la foto para que no se estire */
    margin-right: 15px; 
    flex-shrink: 0; 
    border: 2px solid #e5e7eb; 
    background: #f3f4f6;
}

/* Efecto hover suave para la lista */
.thread-item:hover {
    background-color: #f8fafc !important;
}

/* Fondo del Modal */
.modal-overlay {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
}

/* Contenedor del formulario */
.modal-content {
    background: #ffffff;
    width: 100%;
    max-width: 600px; /* Aumentado para acomodar las 2 columnas */
    margin: 5% auto;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    font-family: 'Segoe UI', sans-serif;
}

.modal-header { margin-bottom: 20px; text-align: center; }
.modal-header h3 { color: #1e293b; margin: 0; }

/* Grid para organizar los campos lado a lado */
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 15px;
}

.full-width {
    grid-column: span 2; /* Para que un input ocupe todo el ancho */
}

/* Inputs profesionales */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: #64748b; margin-bottom: 5px; }
.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.form-group input:focus { border-color: #3b82f6; outline: none; }

/* Botones */
.btn-save {
    width: 100%;
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
    margin-top: 10px;
}
.btn-save:hover { background: #2563eb; }

.btn-cancel {
    width: 100%;
    margin-top: 10px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 13px;
    padding: 10px;
}
.btn-cancel:hover { color: #64748b; }

/* Contenedor principal que controla la altura */
.tabla-scroll-vertical {
    max-height: 400px; /* Ajusta a la altura que desees */
    overflow-y: auto;  /* Habilita el scroll vertical */
    display: block;    /* Necesario para aplicar altura al bloque */
}

/* Forzar que el encabezado se quede fijo arriba (Sticky) */
.tabla-scroll-vertical thead {
    position: sticky;
    top: 0;
    background-color: white; /* Importante para que no se vea transparente */
    z-index: 1;
    display: table;
    width: 100%;
}

/* Asegurar que el cuerpo se comporte como tabla */
.tabla-scroll-vertical tbody {
    display: table;
    width: 100%;
}

/* Estilo para las celdas */
.tabla-scroll-vertical table {
    width: 100%;
    border-collapse: collapse;
}

    /* Estilos responsivos para que no se encimen los elementos */
    @media (max-width: 768px) {
        .header-search {
            position: static !important;
            transform: none !important;
            margin-top: 15px;
            width: 100% !important;
        }
        .content-header > div {
            flex-direction: column;
            align-items: center;
        }
    }
    

.data-table {
    width: 100%;
    table-layout: fixed; /* OBLIGA a que las columnas se alineen al encabezado */
    border-collapse: collapse;
}

.data-table th, .data-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #dee2e6;
    text-align: left;
    vertical-align: middle;
    overflow: hidden;        /* Esconde el texto largo */
    text-overflow: ellipsis; /* Pone "..." si el nombre es larguísimo */
    white-space: nowrap;     /* Mantiene todo en una línea */
}

.data-table th {
    background-color: #f8f9fa;
    color: #495057;
    font-weight: 600;
}


/*Icono de cargando*/
.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db; /* Color principal */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* Contenedor padre */
.embed-responsive-container {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    overflow: hidden;
}

/* Reglas generales para los contenedores */
.instagram-media, .tiktok-embed, .fb-post {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

/* --- CONFIGURACIÓN UNIFORME --- */

/* TikTok: Ya te funcionaba bien así */
blockquote.tiktok-embed {
    min-width: unset !important;
    max-height: 650px !important;
    height: auto !important;
}

/* El contenedor envuelve al post y le damos altura física */
.ig-scroll-wrapper {
    width: 100% !important;
    max-width: 500px !important;
    height: 650px !important; 
    min-height: 650px !important;
    overflow-y: auto !important;
    display: block !important;
    margin: 0 auto !important;
    background: #fff;
}

/* El elemento de Instagram debe adaptarse al contenedor forzado */
.instagram-media {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    min-height: 650px !important;
    /* Quitamos cualquier min-height que hayamos puesto antes */
}

/* Forzamos que el iframe interno llene el ancho */
.instagram-media iframe {
    width: 100% !important;
    /* Permitimos que el iframe tenga la altura que quiera, 
       pero el scroll lo manejará el wrapper */
    height: auto !important;
}

/* Facebook: Limitamos su altura máxima. 
   Esto evita que posts con mucho texto se alarguen hacia abajo */
.fb-post {
    max-height: 650px !important;
    overflow-y: auto !important; /* Si el post es muy largo, permite scroll interno */
}

/* Asegurar que los iframes no rompan el layout */
iframe {
    width: 100% !important;
    max-height: 100% !important;
}

/* Estilo base para botones de acción */
.btn-action {
    padding: 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: white;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.1s;
}

/* Color específico para Guardar Avance */
.btn-secondary {
    background: #374151;
}

/* Efecto Hover (Igual que el de Finalizar/Success) */
.btn-secondary:hover {
    filter: brightness(1.2); /* Esto hace que el color se aclare automáticamente al pasar el cursor */
    transform: translateY(-1px);
    background: #111827;
}

/* Asegurar que se comporte como flex si lo necesitas */
.flex-item {
    flex: 1;
}


    /* CSS PARA GRAFICAS */
    .panel-container { display: flex; flex-wrap: wrap; gap: 25px; align-items: flex-start; }
    .sidebar-wrapper { flex: 1 1 300px; min-width: 280px; }
    .dashboard-content { flex: 2 1 600px; display: flex; flex-direction: column; gap: 15px; }
    
    /* Grid Compacto para indicadores */
    .kpi-compact-grid { 
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
        gap: 12px; 
    }
    .kpi-card { 
        background: #fff; 
        padding: 12px; 
        border-radius: 8px; 
        border: 1px solid #e2e8f0;
        display: flex; 
        align-items: center; 
        gap: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    .kpi-value { font-size: 18px; font-weight: 700; color: #1e293b; margin: 0; }
    .kpi-label { font-size: 14px; color: #1E292B; font-weight: 600; margin: 0; line-height: 1.1; }

    /* Gráficas pequeñas y apiladas */
    .chart-box { background: #fff; padding: 15px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
    .chart-hidden { display: none !important; }
    canvas { width: 100% !important; max-height: 180px !important; }


    /* 1. Por defecto: Oculto en escritorio y en todo lo que no sea móvil */
    #footer-buscador-movil {
        display: none !important;
        visibility: hidden !important;
    }

    /*  Regla para móviles (pantallas menores a 768px) */
    @media (max-width: 768px) {

        .panel-container{ 
        flex-direction: column; 
        } 

        /* Ocultar el buscador original del header */
        .global-search, #buscador-global {
            display: none !important;
        }

        /* Asegurar scroll correcto */
        html, body {
            height: auto !important;
            overflow-y: auto !important;
            padding-bottom: 30px !important;
        }
        .sidebar-brand{
            width:160px;
        }
        /* En móvil, mostramos el botón pequeño en el sidebar */
        .btn-logout-mobile { 
            display: block !important; 
            background: #ef4444; 
            color: white; 
            border: none; 
            padding: 5px 10px; 
            border-radius: 4px; 
            cursor: pointer;
        }
        
        /* Ocultamos el botón largo del header */
        .btn-logout-desktop { 
            display: none !important; 
        }

        /* En escritorio, ocultamos el del sidebar */
        .btn-logout-mobile { display: none !important; 
            }
            .sidebar.active .btn-logout-mobile {
            display: block !important;
            background-color: #ef4444 !important;
            color: white !important;
            border: none;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            /* Se mantendrá a la izquierda del toggle gracias al Flexbox del padre */
        }
        .btn-logout-mobile {
            margin-left: 35px !important; /* Ajusta este valor para separar del botón☰ */
        }
        .sidebar-controls{
            margin-left:25px;
        }
        .sidebar-controls {
            justify-content: flex-end !important;
        }
                /* 1. Cambiamos la dirección de flex de horizontal a vertical */
        .login-container {
            flex-direction: column !important;
            width: 95% !important; /* Un poco menos del 100% para que no toque los bordes */
            margin: 0 auto;
        }
        /* 2. Ajustamos el sidebar para que sea una franja superior */
        .login-sidebar {
            width: 100% !important;
            padding: 30px 15px !important;
            text-align: center;
        }
        /* 3. Ajustamos el formulario para que ocupe el resto */
        .login-form-area {
            width: 100% !important;
            padding: 25px 20px !important;
        }
        /* 4. Aseguramos que los campos de texto no desborden */
        .login-form-group input {
            width: 100% !important;
            box-sizing: border-box !important;
        }
        /* 5. Ajustamos el botón para mayor facilidad táctil */
        .btn-login {
            width: 100% !important;
            padding: 14px !important;
            font-size: 16px; /* Mejor legibilidad en móvil */
        }
        /* 6. Opcional: Ocultar elementos decorativos que quitan espacio */
        .login-sidebar-footer {
            display: none !important;
        }
        #dropdown-notificaciones {
            /* Forzamos que se posicione respecto a la pantalla completa */
            position: fixed !important;
            top: 60px !important; /* Justo debajo de tu header */
            left: 50% !important;
            transform: translateX(-50%) !important;
            
            /* Ajustamos el ancho para que no toque los bordes */
            width: 90% !important; 
            max-width: 400px !important;
            
            /* Ajustamos la altura para que no sea infinita */
            max-height: 70vh !important;
            overflow-y: auto !important;
            
            /* Aseguramos que esté por encima de todo */
            z-index: 9999 !important;
        }

    }

    #imgPreview:hover {
    filter: brightness(0.8); /* Oscurece un poco la imagen al pasar el mouse */
    transform: scale(1.05);  /* Un leve zoom para indicar que es un botón */
}

#mensajes-general {
    height: 400px !important;       /* Altura fija obligatoria */
    overflow-y: auto !important;    /* Forzar scroll vertical */
    display: flex !important;       /* Asegurar layout flex */
    flex-direction: column !important; /* Asegurar que se apilen */
    padding: 15px;
    gap: 10px;
    background: #f9fafb;
    /* Esto ayuda a que el scroll sea más natural */
    scroll-behavior: auto; 
}

/* Fila que contiene la burbuja */
.msg-row {
    display: flex;
    justify-content: flex-start; /* Alinea a la izquierda */
}

/* Contenedor relativo para posicionar el spinner */
#lista-general {
    position: relative;
    min-height: 100px;
}

/* El spinner */
.loader-spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

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



.thread-item-unread, .bg-pendiente {
    background-color: #f0f7ff !important;
    border-left: 4px solid #0084ff;
    font-weight: bold;
}

/* Contenedor del Avatar y Badge */
.thread-avatar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: #e5e7eb;
    border-radius: 50%;
    font-weight: bold;
    color: #4b5563;
}

/* Información del Hilo */
.thread-info {
    flex: 1;
    margin-left: 12px;
    overflow: hidden;
}

.thread-meta {
    display: flex;
    justify-content: space-between;
}

.thread-name {
    font-size: 14px;
    color: #000;
}

.thread-time {
    font-size: 11px;
    color: #9ca3af;
}

/* Vista previa del mensaje */
.thread-last-msg, .thread-preview {
    font-size: 12px;
    color: #65676b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}


.omnicanal-container-3cols {
    display: grid;
    /* La bandeja de la izquierda mide 320px fijos, y el centro y la derecha se expanden de forma equitativa y fluida */
    grid-template-columns: 320px minmax(0, 1fr) minmax(0, 1fr);
    height: calc(100vh - 160px);
    width: 100%;
    background: var(--bg-card, #ffffff);
    border-radius: 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Forzar ancho completo de la lista para que no colapse */
.chat-list {
    width: 100%;
    min-width: 0;
    border-right: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    flex-direction: column;
    background: var(--bg-card, #ffffff);
}

/* Columna central: Historial de comentarios por caso (Equitativa con la ventana de chat) */
.comment-history-panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #f9fafb);
    border-right: 1px solid var(--border-color, #e5e7eb);
    min-width: 0;
    overflow: hidden;
}

/* Ventana de chat derecha */
.chat-window {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-card, #ffffff);
    overflow: hidden;
}

.history-header {
    padding: 15px 20px;
    background: var(--bg-card, #ffffff);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-main, #1f2937);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.history-content-area {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Burbuja individual de comentario dentro del historial */
.comment-card-item {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
}

.comment-card-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.comment-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 12px;
}

.comment-card-author {
    font-weight: 600;
    color: var(--primary-color, #2563eb);
}

.comment-card-date {
    color: var(--text-muted, #9ca3af);
}

.comment-card-text {
    font-size: 13px;
    color: var(--text-main, #374151);
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Responsive para adaptar en pantallas medianas o portátiles */
@media (max-width: 1200px) {
    .omnicanal-container-3cols {
        grid-template-columns: 280px 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .omnicanal-container-3cols {
        grid-template-columns: 260px 1fr;
    }
    .comment-history-panel {
        display: none; 
    }
}

.notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: #ff3b30; /* Rojo llamativo de notificaciones */
    color: #ffffff;            /* Texto blanco */
    font-size: 0.65rem;        /* Tamaño pequeño y legible */
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50px;       /* Forma de píldora / círculo */
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


/*Notificacion flotante de nuevos datos*/ 

/* Contenedor global de notificaciones (arriba a la derecha) */
#contenedor-notificaciones-flash {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999; /* Asegurarse que esté por encima de todo */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* Para que no estorbe si hay clicks detrás */
}

/* Estilo base de la notificación */
.notificacion-flash {
    background: #ffffff;
    color: #333;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    width: 350px;
    max-width: 90vw;
    pointer-events: auto; /* Permitir interacción si el usuario quiere cerrar */
    border-left: 4px solid #0084ff; /* Acento estilo FB */
    
    /* Animación por defecto (oculta arriba) */
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Clase que se agrega con JS para mostrarla (baja y aparece) */
.notificacion-flash.mostrar {
    opacity: 1;
    transform: translateY(0);
}

/* Contenido del texto */
.notificacion-flash-contenido {
    display: flex;
    flex-direction: column;
}

.notificacion-flash-titulo {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 2px;
    color: #050505;
}

.notificacion-flash-mensaje {
    font-size: 13px;
    color: #65676b;
}

/* Icono de cerrar (opcional) */
.notificacion-flash-cerrar {
    margin-left: auto;
    background: none;
    border: none;
    color: #bcc0c4;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}
.notificacion-flash-cerrar:hover {
    color: #333;
}