/* =========================================================================
   saas_layout.css — Clinent
   Correcciones responsivas globales para TODAS las pantallas.
   Este archivo se inyecta sin modificar el CSS interno de cada página.
   ========================================================================= */

/* ── TOPBAR RESPONSIVO ─────────────────────────────────────────────────── */
@media (max-width: 1550px) {
    /* El nav-menu pasa a flex-wrap para que los elementos fluyan en lugar de solaparse */
    .nav-menu {
        flex-wrap: wrap !important;
        white-space: normal !important;
        overflow: visible !important;
        height: auto !important;
        gap: 6px !important;
        padding-bottom: 10px !important;
        padding-right: 10px !important;
    }
    /* Los botones absolutos (Nuevo, Notificaciones, Modo Oscuro, Ayuda) 
       pasan a fluir con el resto del menú */
    .nav-menu > div[style*="position: absolute"],
    .nav-menu > div[style*="position:absolute"],
    .qa-dropdown-v2 {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
    }
    /* El botón "Nuevo" se empuja al final de la fila */
    .qa-dropdown-v2 {
        margin-left: auto !important;
    }
}

/* ── ESTANDARIZAR USER-ACTIONS PARA EVITAR LAYOUT SHIFT ENTRE PÁGINAS ── */
@media (min-width: 901px) {
    .user-actions {
        min-width: 500px !important;
        justify-content: flex-end !important;
    }
}

/* ── TABLET / PANTALLAS MEDIANAS ──────────────────────────────────────── */
@media (max-width: 1200px) {
    .dashboard-layout  { grid-template-columns: 1fr !important; }
    .kpi-grid          { grid-template-columns: repeat(2, 1fr) !important; }
    .form-grid-5, .form-grid-4, .form-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
    .layout-paciente   { flex-direction: column !important; }
    .sidebar-paciente  { width: 100% !important; margin-bottom: 20px !important; }
    .table-card        { overflow-x: auto !important; }
    table              { min-width: 700px; }
    .nav-menu > a, .dropbtn { font-size: 13px !important; padding: 8px 12px !important; }
}

/* ── MÓVIL GRANDE / 900px ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .kpi-grid { grid-template-columns: 1fr !important; }
    .form-grid-5, .form-grid-4, .form-grid-3, .form-grid { grid-template-columns: 1fr !important; }
    .header-dash, .page-header-card { flex-direction: column !important; align-items: flex-start !important; gap: 15px !important; }
    .btn-nuevo { width: 100% !important; text-align: center !important; justify-content: center !important; }
    .search-table-bar  { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
    .input-search-table { width: 100% !important; box-sizing: border-box !important; }

    /* Topbar apilado */
    .topbar {
        flex-wrap: wrap !important;
        height: auto !important;
        padding: 10px 15px !important;
        gap: 8px !important;
    }
    .search-container {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px 0 !important;
    }
    input.search-bar-top[type="text"] { max-width: 100% !important; }
    .logo-flotante-wrapper {
        width: 140px !important;
        height: 45px !important;
        position: relative !important;
    }
    .logo-flotante-img { left: 0 !important; max-height: 38px !important; }
    .user-actions { gap: 8px !important; }
    .user-actions > span { display: none !important; }
    .btn-profile, .btn-logout { padding: 7px 10px !important; font-size: 12px !important; }
    .modal-caja { width: 95% !important; padding: 20px !important; }
    .checklist-options { grid-template-columns: 1fr !important; }
}

/* ── MÓVIL PEQUEÑO / 600px ────────────────────────────────────────────── */
@media (max-width: 600px) {
    .ficha-selector { flex-direction: column !important; }
    .ficha-option   { width: 100% !important; min-width: 100% !important; }
    .action-group   { flex-direction: column !important; }
    .action-group > * { width: 100% !important; text-align: center !important; }
    .kpi-grid { grid-template-columns: 1fr !important; }
}

/* ── CORRECCIÓN Z-INDEX SWEETALERT ────────────────────────────────────── */
.swal2-container {
    z-index: 99999 !important;
}

/* ── CORRECCIÓN GLOBAL ICONOS MODO OSCURO ─────────────────────────────── */
body.dark-mode #icon-moon {
    display: none !important;
}
body.dark-mode #icon-sun {
    display: block !important;
}

/* ── MODO OSCURO INTEGRADO PARA TODAS LAS PANTALLAS SAAS ────────────────── */
body.dark-mode {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
}

/* Interceptar contenedores con inline background blanco o similar */
body.dark-mode div[style*="background: white"],
body.dark-mode div[style*="background: #ffffff"],
body.dark-mode div[style*="background:#ffffff"],
body.dark-mode div[style*="background:white"],
body.dark-mode div[style*="background: #fff"],
body.dark-mode div[style*="background:#fff"],
body.dark-mode div[style*="background:  #ffffff"] {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

body.dark-mode div[style*="border: 1px solid #cbd5e1"],
body.dark-mode div[style*="border:1px solid #cbd5e1"],
body.dark-mode div[style*="border: 1px solid #e2e8f0"],
body.dark-mode div[style*="border:1px solid #e2e8f0"],
body.dark-mode div[style*="border: 2px dashed #cbd5e1"],
body.dark-mode div[style*="border:2px dashed #cbd5e1"],
body.dark-mode div[style*="border: 2px dashed #e2e8f0"],
body.dark-mode div[style*="border:2px dashed #e2e8f0"],
body.dark-mode div[style*="border-top: 1px solid #e2e8f0"],
body.dark-mode div[style*="border-top:1px solid #e2e8f0"],
body.dark-mode div[style*="border-bottom:1px solid #f1f5f9"],
body.dark-mode div[style*="border-bottom: 1px solid #f1f5f9"],
body.dark-mode hr {
    border-color: #334155 !important;
}

/* Textos oscuros inline a claros */
body.dark-mode div[style*="color: #0f172a"],
body.dark-mode div[style*="color:#0f172a"],
body.dark-mode div[style*="color: #1e293b"],
body.dark-mode div[style*="color:#1e293b"],
body.dark-mode div[style*="color: #334155"],
body.dark-mode div[style*="color:#334155"],
body.dark-mode div[style*="color: #475569"],
body.dark-mode div[style*="color:#475569"] {
    color: #cbd5e1 !important;
}

body.dark-mode span[style*="color: #1f2937"],
body.dark-mode span[style*="color:#1f2937"],
body.dark-mode span[style*="color: #334155"],
body.dark-mode span[style*="color:#334155"],
body.dark-mode span[style*="color: #475569"],
body.dark-mode span[style*="color:#475569"] {
    color: #cbd5e1 !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode strong {
    color: #f8fafc !important;
}

body.dark-mode h2[style*="color:#1e293b"],
body.dark-mode h2[style*="color: #1e293b"],
body.dark-mode h2[style*="color:#0f172a"],
body.dark-mode h2[style*="color: #0f172a"] {
    color: #f8fafc !important;
}

/* Agenda: malla diaria, sillones y slots */
body.dark-mode .malla-diaria,
body.dark-mode .slot-hora,
body.dark-mode .col-sillon,
body.dark-mode .cabecera-sillones,
body.dark-mode .sillon-cabecera,
body.dark-mode .slot-semana,
body.dark-mode .dia-col,
body.dark-mode .dia-header,
body.dark-mode .calendario-mensual,
body.dark-mode .dia-mes-card {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
body.dark-mode .slot-hora span,
body.dark-mode .dia-header span {
    color: #94a3b8 !important;
}
body.dark-mode .hora-col {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
body.dark-mode .grid-dias div:empty {
    background-color: transparent !important;
}

/* Calendario lateral agenda */
body.dark-mode .calendario-lateral,
body.dark-mode .calendario-lateral .dia-num {
    background-color: #1e293b !important;
    color: #cbd5e1 !important;
}
body.dark-mode .calendario-lateral .dia-num:hover {
    background-color: #334155 !important;
}
body.dark-mode .calendario-lateral .dia-num.hoy {
    background-color: #0ea5e9 !important;
    color: white !important;
}

/* Recetas: Previsualización en pantalla de hoja de receta */
@media screen {
    body.dark-mode .hoja-receta {
        background-color: #1e293b !important;
        border-color: #334155 !important;
        color: #cbd5e1 !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
    }
    
    body.dark-mode .hoja-receta .info-clinica,
    body.dark-mode .hoja-receta .datos-paciente-box,
    body.dark-mode .hoja-receta .dato-p strong,
    body.dark-mode .hoja-receta .receta-footer,
    body.dark-mode .hoja-receta .firma-nombre {
        color: #f8fafc !important;
    }
    
    body.dark-mode .hoja-receta .dato-p span,
    body.dark-mode .hoja-receta .receta-footer em {
        color: #94a3b8 !important;
    }
    
    body.dark-mode .hoja-receta .datos-paciente-box {
        background: #0f172a !important;
        border-color: #334155 !important;
    }
    
    body.dark-mode .hoja-receta .linea-firma {
        border-top-color: #475569 !important;
    }
}

/* Facturación: Alerta de todo al día */
body.dark-mode div[style*="background:#dcfce7"],
body.dark-mode div[style*="background: #dcfce7"] {
    background-color: #064e3b !important;
    border-color: #047857 !important;
}
body.dark-mode h3[style*="color: #166534"],
body.dark-mode h3[style*="color:#166534"] {
    color: #34d399 !important;
}
body.dark-mode p[style*="color: #475569"],
body.dark-mode p[style*="color:#475569"] {
    color: #94a3b8 !important;
}
body.dark-mode div[style*="border: 1px dashed #cbd5e1"],
body.dark-mode div[style*="border:1px dashed #cbd5e1"] {
    border-color: #334155 !important;
}

/* Facturas, Citas y Tarjetas KPI */
body.dark-mode .panel-blanco,
body.dark-mode .kpi-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}
body.dark-mode .panel-header-titulo h2,
body.dark-mode .panel-header-titulo h3 {
    color: #f8fafc !important;
}
body.dark-mode .chart-container,
body.dark-mode .chart-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* General selectores de formularios y botones */
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="email"],
body.dark-mode input[type="tel"] {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

body.dark-mode button[style*="background:white"],
body.dark-mode button[style*="background: white"],
body.dark-mode button[style*="background:#ffffff"],
body.dark-mode button[style*="background: #ffffff"],
body.dark-mode a[style*="background:white"],
body.dark-mode a[style*="background: white"],
body.dark-mode a[style*="background:#ffffff"],
body.dark-mode a[style*="background: #ffffff"] {
    background-color: #1e293b !important;
    color: #38bdf8 !important;
    border-color: #334155 !important;
}

body.dark-mode button[style*="background:white"]:hover,
body.dark-mode button[style*="background: white"]:hover,
body.dark-mode a[style*="background:white"]:hover,
body.dark-mode a[style*="background: white"]:hover {
    background-color: #334155 !important;
    color: #7dd3fc !important;
    border-color: #38bdf8 !important;
}

/* Tablas globales */
body.dark-mode table {
    background-color: transparent !important;
}
body.dark-mode th {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
    border-bottom-color: #334155 !important;
}
body.dark-mode td {
    background-color: transparent !important;
    color: #cbd5e1 !important;
    border-bottom-color: #334155 !important;
}
body.dark-mode tr:hover td {
    background-color: #1e293b !important;
}

/* --- ADICIONALES PARA AGENDA MODO OSCURO --- */
body.dark-mode .agenda-clinent-wrapper {
    background: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-mode .agenda-col-horas {
    background: #0f172a !important;
    border-right-color: #334155 !important;
}
body.dark-mode .agenda-sillon-header {
    background: #1e293b !important;
    border-bottom-color: #334155 !important;
}
body.dark-mode .agenda-sillon-nombre {
    color: #f8fafc !important;
}
body.dark-mode .agenda-sillon-badge {
    background: #334155 !important;
    color: #cbd5e1 !important;
}
body.dark-mode .agenda-col-sillon {
    border-right-color: #334155 !important;
}
body.dark-mode .agenda-celda-hora,
body.dark-mode .agenda-hora-slot {
    border-bottom-color: #334155 !important;
    background: transparent !important;
}
body.dark-mode .agenda-hora-slot {
    color: #94a3b8 !important;
}
body.dark-mode .agenda-celda-hora:hover {
    background: rgba(14, 165, 233, 0.1) !important;
}
body.dark-mode .agenda-sillon-header.ocupado {
    background: linear-gradient(135deg, #3730a3, #1e1b4b) !important;
    border-bottom-color: #4f46e5 !important;
}
body.dark-mode .agenda-sillon-badge.ocupado-badge {
    background: #4f46e5 !important;
    color: #e0e7ff !important;
}

/* --- ADICIONALES PARA ADMINISTRACIÓN MODO OSCURO --- */
body.dark-mode .card-premium {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}
body.dark-mode .card-premium:hover {
    background: #334155 !important;
    border-color: #38bdf8 !important;
}
body.dark-mode .card-premium .card-title {
    color: #94a3b8 !important;
}
body.dark-mode .card-premium .card-value {
    color: #f8fafc !important;
}
body.dark-mode .card-premium .card-subtitle {
    color: #64748b !important;
}
body.dark-mode .card-group {
    background: #0f172a !important;
    border-color: #334155 !important;
}
body.dark-mode .card-group-title {
    color: #94a3b8 !important;
}
body.dark-mode .card-group-value {
    color: #f8fafc !important;
}
body.dark-mode .card-group-item .border-green,
body.dark-mode .card-group-item .border-red,
body.dark-mode .card-group-item .border-blue {
    border-color: #334155 !important;
}

/* Badge de iconos en KPI de Administración */
body.dark-mode .icon-green {
    background: #064e3b !important;
    color: #34d399 !important;
}
body.dark-mode .icon-red {
    background: #7f1d1d !important;
    color: #fecaca !important;
}
body.dark-mode .icon-blue {
    background: #1e3a8a !important;
    color: #93c5fd !important;
}
body.dark-mode .icon-purple {
    background: #581c87 !important;
    color: #e9d5ff !important;
}

/* Títulos con color inline oscuros en la página de administración */
body.dark-mode div[style*="color:#0f172a"],
body.dark-mode div[style*="color:#0f172a"] {
    color: #cbd5e1 !important;
}

/* --- REFUERZOS ESPECÍFICOS DE MODO OSCURO PARA DETALLES --- */

/* 1. Modal Agendar Nueva Cita (Fila de Estado de Cita) */
body.dark-mode div[style*="background: #f8fafc"],
body.dark-mode div[style*="background:#f8fafc"] {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-mode select[style*="background: white"],
body.dark-mode select[style*="background:white"],
body.dark-mode select[style*="background: #f1f5f9"],
body.dark-mode select[style*="background:#f1f5f9"] {
    background-color: #0f172a !important;
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* 2. Caja: Footer de Sesiones en Caja */
body.dark-mode div[style*="background:#f8fafc"] span[style*="color:#64748b"],
body.dark-mode div[style*="background: #f8fafc"] span[style*="color: #64748b"] {
    color: #cbd5e1 !important;
}

/* 3. Staff y tablas de administración con inline styles */
body.dark-mode div[style*="background: white"],
body.dark-mode div[style*="background:white"],
body.dark-mode div[style*="background: #ffffff"],
body.dark-mode div[style*="background:#ffffff"] {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border-color: #334155 !important;
}
body.dark-mode thead[style*="background: #f8fafc"],
body.dark-mode thead[style*="background:#f8fafc"],
body.dark-mode thead th {
    background-color: #0f172a !important;
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-bottom-color: #334155 !important;
}
body.dark-mode tbody tr {
    background-color: transparent !important;
    background: transparent !important;
}
body.dark-mode tbody tr:hover td {
    background-color: #334155 !important;
    background: #334155 !important;
}
body.dark-mode td {
    border-bottom-color: #334155 !important;
}

/* Forzar hovers inline de botones en modo oscuro */
body.dark-mode button[style*="background: white"]:hover,
body.dark-mode button[style*="background:white"]:hover,
body.dark-mode a[style*="background: white"]:hover,
body.dark-mode a[style*="background:white"]:hover {
    background-color: #334155 !important;
    background: #334155 !important;
    border-color: #38bdf8 !important;
    color: #7dd3fc !important;
}