* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
    background: #f4f7fc;
    padding: 20px;
    color: #1e293b;
}
.app {
    max-width: 1600px;
    margin: 0 auto;
    background: white;
    border-radius: 28px;
    box-shadow: 0 20px 40px -12px rgba(0,0,0,0.2);
    padding: 24px 20px 32px;
}

/* ============================================ */
/* MEMBRETE PROFESIONAL CON DEGRADADO           */
/* ============================================ */
.header-membrete {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 20px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0b2a4f 0%, #1a6d8a 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-height: 120px;
    margin-bottom: 25px;  /* Espacio entre membrete y semanas */
}

.logo-container {
    flex-shrink: 0;
}

.logo-hospital {
    height: 100px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    border-radius: 8px;
    /* Fondo blanco suave para que el logo resalte sobre el azul */
    background: rgba(255, 255, 255, 0.9);
    padding: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header-text h1 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
    /* Letras blancas para contrastar con el fondo oscuro */
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    line-height: 1.2;
    text-align: center;
}

.header-text .sub {
    font-size: 1.1rem;
    font-weight: 400;
    /* Blanco con transparencia */
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Responsive Membrete */
@media (max-width: 600px) {
    .header-membrete {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    
    .logo-hospital {
        height: 60px;
        max-width: 120px;
    }
    
    .header-text h1 {
        font-size: 1.5rem;
    }
    
    .header-text .sub {
        font-size: 0.95rem;
    }
}

/* ============================================ */
/* PESTAÑAS DE SEMANAS Y BOTÓN DE LOGOUT        */
/* ============================================ */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
}
.tab-btn {
    background: transparent;
    border: none;
    padding: 10px 18px;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 40px;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
}
.tab-btn:hover {
    background: #eef2f6;
}
.tab-btn.active {
    background: #1e293b;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* ============================================ */
/* DÍAS DE LA SEMANA                             */
/* ============================================ */
.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    margin: 16px 0 20px 0;
}
.day-btn {
    background: #f1f5f9;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 12px 8px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.day-btn:hover {
    background: #e2e8f0;
}
.day-btn.active {
    background: #1e293b;
    color: white;
    border-color: #1e293b;
}
.day-btn .sub-text {
    display: block;
    font-weight: 400;
    font-size: 0.7rem;
    color: #6b7a8f;
    margin-top: 2px;
}
.day-btn.active .sub-text {
    color: #94a3b8;
}

/* ============================================ */
/* TABLAS PRINCIPALES                            */
/* ============================================ */
.day-table-container {
    background: #fafcff;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    padding: 16px;
    margin-top: 8px;
}
.day-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.pab-block {
    margin-bottom: 20px;
}
.pab-block:last-child {
    margin-bottom: 0;
}
.pab-header {
    font-weight: 600;
    background: #eef2f6;
    display: inline-block;
    padding: 4px 20px 4px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    margin-bottom: 8px;
}
.table-wrap {
    overflow-x: auto;
    border-radius: 14px;
    background: white;
    border: 1px solid #e9edf4;
}
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.7rem;
    min-width: 950px;
    table-layout: auto;
}

th, td {
    padding: 4px 3px;
    border-bottom: 1px solid #e9edf4;
    text-align: center;
    vertical-align: middle;
    background: white;
}

th {
    background: #f8fafc;
    color: #1e293b;
    font-weight: 600;
    border-bottom: 2px solid #d1d9e6;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    padding: 6px 3px;
    white-space: nowrap;
}

/* 📘 LIBRO DE QUIRÓFANO — mismo estilo de encabezado que Lista de
   Pacientes en Lista de Espera (#patientsTable th en
   style-lista-espera.css: azul, texto blanco, clic para ordenar). Con su
   propio selector (no toca la regla "th" genérica de arriba, que sigue
   usando la Tabla Quirúrgica) para no afectar ninguna otra tabla de la
   app. */
#libroTablaContainer table th {
    background: #1e40af;
    color: white;
    font-weight: 500;
    font-size: 0.78rem;
    text-transform: none;
    letter-spacing: normal;
    text-align: left;
    white-space: normal;
    padding: 10px 8px;
    border-bottom: none;
    position: sticky;
    top: 0;
}
#libroTablaContainer table th:hover {
    background: #1e3a8a;
}
#libroTablaContainer table tbody tr:hover td {
    background: #f0f9ff;
}

/* ============================================ */
/* INPUTS Y SELECTS GENERALES                    */
/* ============================================ */
.input-auto {
    display: inline-block !important;
    width: auto !important;
    min-width: 25px !important;
    border: 1px solid #d1d9e6;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.6rem;
    background: #fcfdff;
    transition: 0.1s;
    height: 22px;
}

.input-auto:focus {
    border-color: #1e293b;
    background: white;
    outline: none;
    box-shadow: 0 0 0 2px rgba(30, 41, 59, 0.1);
}

/* ============================================ */
/* CELDAS DE INTERVENCIÓN                        */
/* ============================================ */
td.col-intervencion {
    min-width: 120px !important;
    max-width: 220px !important;
    padding: 2px 4px !important;
    vertical-align: middle !important;
}

td.col-intervencion textarea.intervencion-textarea {
    width: 100% !important;
    min-height: 26px !important;
    max-height: 80px !important;
    padding: 2px 6px !important;
    font-size: 11px !important;
    border: 1px solid #d1d9e6 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    background: #fcfdff !important;
    display: block !important;
    resize: none !important;
    overflow: auto !important;
    line-height: 1.3 !important;
    font-family: inherit !important;
}

td.col-intervencion textarea.intervencion-textarea:focus {
    border-color: #1e293b !important;
    background: white !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(30, 41, 59, 0.1) !important;
}

/* ============================================ */
/* DROPDOWN DE INTERVENCIONES                    */
/* ============================================ */
.intervencion-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    min-width: 100% !important;
    max-width: 550px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: white !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
    z-index: 99999 !important;
    padding: 4px 0 !important;
    font-size: 12px !important;
    margin-top: 2px !important;
    display: none;
}

.intervencion-dropdown .dropdown-item {
    padding: 6px 12px !important;
    cursor: pointer !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    font-size: 12px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background 0.15s !important;
    line-height: 1.3 !important;
    color: #222 !important;
    max-width: 100% !important;
    overflow: visible !important;
    background: white !important;
}

.intervencion-dropdown .dropdown-item:hover {
    background: #e8f0fe !important;
}

.intervencion-dropdown .dropdown-item:last-child {
    border-bottom: none !important;
}

.intervencion-dropdown::-webkit-scrollbar {
    width: 6px;
}
.intervencion-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.intervencion-dropdown::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}
.intervencion-dropdown::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ============================================ */
/* OTRAS CELDAS                                  */
/* ============================================ */
/* Escapado a .table-wrap (Tabla Quirúrgica / Libro de Quirófano / Diferidos /
   Admin Usuarios) para que NO afecte las tablas de Estadísticas
   (.stats-table-wrap) ni las láminas de Presentación/PPT (construidas fuera
   de .table-wrap) — ahí el texto largo debe poder envolver para que el alto
   de la fila se adapte al contenido en vez de recortarse/desbordarse. */
.table-wrap td:not(.col-intervencion) {
    width: 0.1% !important;
    white-space: nowrap !important;
}
td.col-nombre input,
td.col-nombre select {
    min-width: 130px !important;
    max-width: 180px !important;
}

/* ============================================ */
/* COLORES DE FONDO POR COLUMNA                 */
/* ============================================ */

/* 🟦 AZUL - Celdas (hasta Condicion_LE) */
td.col-fecha, td.col-rut, td.col-edad, td.col-ficha, td.col-nombre, td.col-destino, td.col-hora,
td:has(input[data-col="T_Qx"]), td:has(select[data-col="Jornada"]),
td:has(input[data-col="Diagnostico"]),
td:has(input[data-col="Intervencion_propuesta"]), td:has(input[data-col="Condicion_LE"]) {
    background-color: #e8f4fd !important; /* Azul muy claro */
}
/* ❌ ELIMINADO: td.col-estado */

/* 🟩 VERDE - Celdas (desde ESTADO_DE_IQx en adelante, más Cirujano/Especialidad/Anestesista) */
td.col-intervencion, td:has(input[data-col="Tipo_Actividad"]), td:has(input[data-col="Tipo_Actividad_2"]),
td:has(input[data-col="Tipo_Actividad_3"]), td:has(textarea[data-col="1ra_Intervencion_Qx_Realizada"]),
td:has(textarea[data-col="2da_Intervencion_Qx_Realizada"]), td:has(textarea[data-col="3ra_Intervencion_Realizada"]),
td:has(select[data-col="Causal_de_suspension"]), td:has(select[data-col="Motivo"]),
td:has(textarea[data-col="Observaciones"]),
td:has(input[data-col="T_Retraso"]), td:has(input[data-col="Hora_de_entrada"]), td:has(input[data-col="Hora_de_salida"]),
td:has(input[data-col="T_QX"]), td.col-estado, td.col-destino,
td:has(select[data-col="Cirujano"]), td:has(select[data-col="Especialidad"]), td:has(select[data-col="Anestesista"]) {
    background-color: #e8f5e9 !important; /* Verde muy claro */
}

/* ⬜ Fondo BLANCO para todos los inputs, selects y textareas */
td.col-fecha input, td.col-rut input, td.col-edad input, td.col-ficha input, td.col-nombre input,
td.col-estado select, td.col-destino select,
td:has(input[data-col="T_Qx"]) input, td:has(select[data-col="Jornada"]) select,
td:has(select[data-col="Cirujano"]) select, td:has(select[data-col="Especialidad"]) select,
td:has(select[data-col="Anestesista"]) select, td:has(input[data-col="Diagnostico"]) input,
td:has(input[data-col="Intervencion_propuesta"]) input, td:has(input[data-col="Condicion_LE"]) input,
td.col-intervencion textarea,
td:has(input[data-col="Tipo_Actividad"]) input, td:has(input[data-col="Tipo_Actividad_2"]) input,
td:has(input[data-col="Tipo_Actividad_3"]) input, td:has(input[data-col="Causal_de_suspension"]) input,
td:has(input[data-col="Motivo"]) input, td:has(input[data-col="Observaciones"]) input,
td:has(input[data-col="T_Retraso"]) input, td:has(input[data-col="Hora_de_entrada"]) input,
td:has(input[data-col="Hora_de_salida"]) input, td:has(input[data-col="T_QX"]) input {
    background-color: #ffffff !important;
}

/* ============================================ */
/* BOTONES Y CONTROLES                          */
/* ============================================ */
.btn-group {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    margin-top: 10px;
    flex-wrap: wrap;
    /* El grupo de botones de cada pabellón (Agregar Fila/Guardar Pabellón/
       Limpiar Pabellón) vive DENTRO de .table-wrap, que es lo que scrollea
       horizontalmente. position:sticky no daba resultado consistente ahí
       (el contenedor no le dejaba margen real para desplazarse), así que el
       seguimiento en tiempo real se hace por JS — ver
       inicializarScrollBotonesPabellon() en js/07-render-tabla-dia.js, que
       aplica un transform:translateX(scrollLeft) mientras se scrollea
       .table-wrap. Acá solo se deja la caja angosta y pegada a la derecha
       en su posición de reposo (sin scroll). */
    width: fit-content;
    margin-left: auto;
}
.btn-sm {
    background: #eef2f6;
    border: none;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: 0.1s;
}
.btn-sm:hover {
    background: #d1d9e6;
}
.btn-save {
    background: #1e293b;
    color: white;
}
.btn-save:hover {
    background: #0f172a;
}
.btn-clear {
    background: #fee2e2;
    color: #991b1b;
}
.btn-clear:hover {
    background: #fecaca;
}
.btn-add {
    background: #dbeafe;
    color: #1e4a7a;
}
.btn-add:hover {
    background: #bfdbfe;
}
.btn-delete-row {
    background: transparent;
    border: 1px solid #fca5a5;
    color: #7f1d1d;
    padding: 2px 6px;
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.1s;
}
.btn-delete-row:hover {
    background: #fca5a5;
    color: white;
}
.btn-registrar {
    background: #dbeafe;
    color: #1e4a7a;
    border: 2px solid #1e4a7a;
}
.btn-registrar:hover {
    background: #bfdbfe;
}

.footer-note {
    margin-top: 18px;
    border-top: 1px solid #e2e8f0;
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.8rem;
    color: #475569;
}

.footer-left {
    text-align: left;
    line-height: 1.5;
}

.footer-right {
    text-align: right;
    color: #6b7a8f;
}
/* Responsive para pantallas pequeñas */
@media (max-width: 600px) {
    .footer-note {
        flex-direction: column;
        text-align: center;
    }
    .footer-left, .footer-right {
        text-align: center;
        width: 100%;
    }
    }

/* ============================================ */
/* MODAL MODERNO                                 */
/* ============================================ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    /* 🔝 Por encima de TODO lo demás (incluido #loginContainer, que usa
       99999) menos .rotate-overlay (999999) — un modal mostrado durante el
       login (ej. el aviso de sesión activa en otro equipo) antes quedaba
       dibujado detrás de la pantalla de login, invisible, esperando un
       clic que nadie podía dar ("se queda verificando y no avanza"). */
    z-index: 999998;
    padding: 20px;
    animation: modalOverlayIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.modal-overlay.closing {
    animation: modalOverlayOut 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.modal-box {
    background: white;
    border-radius: 24px;
    max-width: 480px;
    width: 100%;
    padding: 40px 32px 28px;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    text-align: center;
    position: relative;
    animation: modalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center;
    /* Algunos modales (Análisis IA, Reunión de Tabla, etc.) tienen bastante
       contenido — sin esto, en una pantalla baja (celular en horizontal
       incluido) el contenido de más se recorta fuera de la vista, sin forma
       de desplazarse hasta él. .modal-overlay ya centra con flex y tiene
       padding:20px arriba/abajo, de ahí el cálculo. */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-box.closing {
    animation: modalOut 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.9) translateY(30px);
    }
}

.modal-icon {
    font-size: 4rem;
    margin-bottom: 8px;
    display: block;
    animation: iconBounce 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes iconBounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
    animation: fadeUp 0.4s ease 0.15s both;
}

.modal-message {
    font-size: 1rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 28px;
    animation: fadeUp 0.4s ease 0.2s both;
}

.modal-message strong {
    color: #dc2626;
}

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

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeUp 0.4s ease 0.25s both;
}

.modal-btn {
    padding: 12px 36px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 130px;
}

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

.modal-btn-confirm {
    background: #dc2626;
    color: white;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}
.modal-btn-confirm:hover {
    background: #b91c1c;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(220, 38, 38, 0.45);
}

.modal-btn-confirm.danger-shake {
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.modal-btn-success {
    background: #16a34a;
    color: white;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
}
.modal-btn-success:hover {
    background: #15803d;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(22, 163, 74, 0.45);
}

.modal-btn-cancel {
    background: #f1f5f9;
    color: #1e293b;
    border: 1px solid #e2e8f0;
}
.modal-btn-cancel:hover {
    background: #e2e8f0;
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .modal-box {
        padding: 28px 20px 20px;
        border-radius: 20px;
    }
    .modal-icon {
        font-size: 3rem;
    }
    .modal-title {
        font-size: 1.2rem;
    }
    .modal-message {
        font-size: 0.9rem;
    }
    .modal-btn {
        padding: 10px 24px;
        font-size: 0.9rem;
        min-width: 100px;
    }
    .modal-actions {
        gap: 8px;
    }
}

/* ============================================ */
/* SELECTOR DE COLOR (UNIFICADO Y DEPURADO)     */
/* ============================================ */
td.col-color {
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    text-align: center !important;
    padding: 4px !important;
    vertical-align: middle !important;
}

.color-picker-wrapper {
    display: inline-block;
    position: relative;
    cursor: pointer;
}

.color-picker-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-indicator {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid #d1d9e6;
    background: #f0f0f0;
    transition: all 0.2s;
}

.color-indicator.empty {
    font-size: 16px;
    line-height: 26px;
    text-align: center;
    color: #888;
}

/* Dropdown de colores */
.color-picker-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 8px;
    z-index: 99999;
    width: 180px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.color-picker-dropdown.active {
    display: flex;
}

.color-option {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform 0.15s;
}

.color-option:hover {
    transform: scale(1.2);
}

.color-option.selected {
    border-color: #333;
}

.color-option-empty {
    width: 100%;
    text-align: center;
    padding: 4px 0;
    cursor: pointer;
    color: #666;
    font-size: 12px;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
}
.color-option-empty:hover {
    background: #f0f0f0;
}

/* ============================================ */
/* PANTALLA DE LOGIN                             */
/* ============================================ */
#loginContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, #e8f4fd 0%, #f4f7fc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}

.login-box {
    background: white;
    border-radius: 24px;
    padding: 48px 40px 40px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 24px 48px -12px rgba(0,0,0,0.2);
    text-align: center;
}

.login-logo-img {
    height: 80px;
    width: auto;
    margin-bottom: 16px;
}

.login-box h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.login-sub {
    color: #6b7a8f;
    font-size: 0.9rem;
    margin-bottom: 24px;
    line-height: 1.4;
}

.login-box input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    margin-bottom: 14px;
    transition: 0.2s;
    box-sizing: border-box;
    background: #f8fafc;
}

.login-box input:focus {
    border-color: #1e293b;
    outline: none;
    background: white;
    box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1);
}

.login-box #loginBtn {
    width: 100%;
    padding: 14px;
    background: #1e293b;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    margin-top: 4px;
}

.login-box #loginBtn:hover {
    background: #0f172a;
    transform: translateY(-1px);
}

.login-box #loginBtn:active {
    transform: scale(0.98);
}

.login-status {
    font-size: 0.9rem;
    margin-bottom: 12px;
    min-height: 24px;
    color: #dc2626;
}

.login-status.success {
    color: #16a34a;
}

.login-status.error {
    color: #dc2626;
}

.login-footer {
    margin-top: 20px;
    font-size: 0.8rem;
    color: #94a3b8;
    border-top: 1px solid #e9edf4;
    padding-top: 16px;
}

.login-footer a {
    display: block;
    color: #1e6fd9;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 10px;
    cursor: pointer;
}

.login-footer a:hover {
    text-decoration: underline;
}

#app {
    display: none;
}
#app.visible {
    display: block;
}

@media (max-width: 480px) {
    .login-box {
        padding: 32px 24px 28px;
    }
    .login-box h2 {
        font-size: 1.4rem;
    }
    .login-logo-img {
        height: 60px;
    }
}

/* ============================================ */
/* VALIDADOR DE RUT EN TIEMPO REAL              */
/* ============================================ */
td.col-rut {
    position: relative;
}

.rut-validation-icon {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: bold;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.rut-validation-icon.valid {
    color: #16a34a; /* Verde */
}

.rut-validation-icon.invalid {
    color: #dc2626; /* Rojo */
}

/* Ajuste del input para dejar espacio al icono */
td.col-rut input.input-auto {
    padding-right: 24px !important;
}

/* ============================================ */
/* ✨ MARCA DEL SISTEMA (arriba a la derecha)    */
/* Versión chica del splash de entrada, animada. */
/* ============================================ */
.app-brand-badge {
    position: absolute;
    top: 10px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 5;
}
.app-brand-badge-logo {
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.app-brand-badge-pulse {
    stroke-dasharray: 12 7;
    animation: appSplashDashFlow 0.8s linear infinite;
}
.app-brand-badge-text {
    font-size: 1.24rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.2px;
    color: rgba(255,255,255,0.88);
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    text-align: left;
    white-space: nowrap;
}

@media (max-width: 950px) {
    .app-brand-badge-text {
        display: none;
    }
}
@media (max-width: 700px) {
    .app-brand-badge {
        display: none;
    }
}

/* ============================================ */
/* 🍔 MENÚ HAMBURGUESA (extrema izquierda)      */
/* ============================================ */
.menu-hamburguesa {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    /* Tenía que ser >= el z-index del panel de filtros de Lista de Espera
       (.sticky-filters, z-index:90): como .menu-hamburguesa tiene
       position+z-index propio, crea su PROPIO contexto de apilamiento — el
       z-index:2000 de .menu-dropdown (su hijo) solo compite DENTRO de ese
       contexto, nunca "se escapa" hacia afuera. Con .menu-hamburguesa en
       10, todo lo de adentro (aunque tenga z-index más alto) quedaba
       atrapado por debajo de cualquier otro elemento del resto de la
       página con z-index > 10, como esos filtros. */
    z-index: 2000;
}

.menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #ffffff;
    width: 44px;
    height: 44px;
}

.menu-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
}

.menu-toggle .menu-icon {
    font-size: 1.6rem;
    line-height: 1;
    transition: transform 0.3s ease;
}

.menu-toggle.active .menu-icon {
    transform: rotate(90deg);
}

/* Dropdown del menú */
.menu-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    padding: 6px;
    /* Por encima de cualquier barra de filtros "sticky" o tabla con
       encabezado sticky del módulo Lista de Espera (style-lista-espera.css
       usa hasta z-index:1100 para sus propios modales) — si no, el menú
       hamburguesa queda tapado detrás de esos elementos al desplegarse. */
    z-index: 2000;
    animation: menuDropdownIn 0.25s ease;
}

.menu-dropdown.open {
    display: block;
}

@keyframes menuDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.menu-item:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.menu-item.active {
    background: #1e293b;
    color: #ffffff;
}

.menu-item.active:hover {
    background: #0f172a;
}

/* ============================================ */
/* CENTRO: Logo y Títulos                       */
/* ============================================ */
.header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex: 1;
}

.logo-container {
    flex-shrink: 0;
}

.logo-hospital {
    height: 100px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    padding: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header-text h1 {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    line-height: 1.2;
    text-align: center;
}

.header-text .sub {
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 2px;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 600px) {
    .header-membrete {
        min-height: 100px;
        padding: 12px;
    }
    
    .menu-hamburguesa {
        left: 10px;
    }
    
    .menu-toggle {
        width: 36px;
        height: 36px;
        padding: 4px 6px;
    }
    
    .menu-toggle .menu-icon {
        font-size: 1.3rem;
    }
    
    .header-center {
        flex-direction: column;
        gap: 8px;
        padding: 0 40px;
    }
    
    .logo-hospital {
        height: 50px;
        max-width: 100px;
    }
    
    .header-text h1 {
        font-size: 1.2rem;
    }
    
    .header-text .sub {
        font-size: 0.8rem;
    }

    .menu-dropdown {
        left: 50%;
        transform: translateX(-50%);
        min-width: 90%;
    }
}

/* ============================================ */
/* 📤 BOTÓN DIFERIR                             */
/* ============================================ */
td.col-diferir {
    width: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    text-align: center !important;
    padding: 2px !important;
    vertical-align: middle !important;
    background-color: #fef3c7 !important; /* Amarillo claro */
}

.btn-diferir {
    background: transparent;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #d97706;
    line-height: 1;
}

.btn-diferir:hover {
    background: #f59e0b;
    color: white;
    transform: scale(1.1);
}

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

/* ============================================ */
/* 🔄 BOTÓN REUBICAR                            */
/* ============================================ */
td.col-reubicar {
    width: 35px !important;
    min-width: 35px !important;
    max-width: 35px !important;
    text-align: center !important;
    padding: 2px !important;
    vertical-align: middle !important;
    background-color: #e0f2fe !important; /* Azul muy claro */
}

.btn-reubicar {
    background: transparent;
    border: 1px solid #3b82f6;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #2563eb;
    line-height: 1;
}

.btn-reubicar:hover {
    background: #3b82f6;
    color: white;
    transform: scale(1.1);
}

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


/* ============================================ */
/* 📖 MANUAL DE USUARIO - EBOOK                 */
/* ============================================ */

.manual-indice-item:hover {
    background: #f1f5f9 !important;
}

.manual-indice-item.active {
    background: #e8f4fd !important;
    border-left-color: #0b2a4f !important;
    font-weight: 600 !important;
}

/* Estilos para el contenido del manual */
#manualContenidoInner h1 {
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 12px;
}

#manualContenidoInner h2 {
    margin-top: 28px;
    margin-bottom: 12px;
}

#manualContenidoInner h3 {
    margin-top: 20px;
    margin-bottom: 8px;
}

#manualContenidoInner table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0 16px 0;
    font-size: 0.85rem;
}

#manualContenidoInner table th {
    background: #f1f5f9;
    padding: 8px 12px;
    text-align: left;
    border: 1px solid #e2e8f0;
}

#manualContenidoInner table td {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
}

#manualContenidoInner pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 12px 16px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.85rem;
    margin: 12px 0 16px 0;
}

#manualContenidoInner code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85rem;
}

#manualContenidoInner ul, 
#manualContenidoInner ol {
    padding-left: 24px;
    margin-bottom: 16px;
    line-height: 1.8;
}

/* Responsive */
@media (max-width: 768px) {
    #manualContainer {
        flex-direction: column !important;
        height: auto !important;
        min-height: 400px !important;
    }
    
    #manualIndice {
        width: 100% !important;
        min-width: 100% !important;
        max-height: 200px !important;
        border-right: none !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    
    #manualContenido {
        min-height: 400px !important;
    }
}

/* ============================================ */
/* CONTENEDOR PRINCIPAL - SCROLL HORIZONTAL UNICO */
/* ============================================ */
#weekContent {
    width: 100%;
    max-width: 100%;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    min-height: 500px;
}

/* UN SOLO SCROLL HORIZONTAL para TODA la tabla */
.table-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
    background: white;
    border: 1px solid #e9edf4;
}

/* Estilos para la barra de scroll */
.table-wrap::-webkit-scrollbar {
    height: 10px;
}
.table-wrap::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 6px;
}
.table-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}
.table-wrap::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ============================================ */
/* 📊 SECCIÓN ESTADÍSTICAS                       */
/* ============================================ */
.stats-table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 380px;
    width: 100%;
    max-width: 100%;
    border-radius: 14px;
    background: white;
    border: 1px solid #e9edf4;
}
.stats-table-wrap::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.stats-table-wrap::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 6px;
}
.stats-table-wrap::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 6px;
}
.stats-table-wrap::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
.stats-table-wrap thead th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    z-index: 1;
}
.btn-col-filter:hover {
    color: #2563eb !important;
}

/* ============================================ */
/* 🎥 MODO CAPTURA (Presentación PPT de Estadísticas) */
/* Layout más ancho/compacto aplicado solo mientras html2canvas   */
/* fotografía la página — no afecta la vista interactiva normal.  */
/* ============================================ */
/* Como máximo 4 tarjetas por lámina (2 columnas x 2 filas) — las demás
   quedan ocultas por JS (ver estadisticasAplicarChunkGrid en js/18) y se
   capturan en láminas adicionales, en vez de apretar todas las
   especialidades en una sola imagen. */
body.pptx-modo-captura #estadisticasProdEspGrid,
body.pptx-modo-captura #estadisticasAmbGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.pptx-modo-captura #estadisticasMetasGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
body.pptx-modo-captura #estadisticasOcupDisponibilidadWrap {
    display: none !important;
}
/* Fuerza un ancho amplio y fijo (independiente del tamaño real de la
   ventana del navegador) para que estas capturas salgan bien anchas y
   aprovechen el espacio de la diapositiva en vez de salir angostas/altas. */
body.pptx-modo-captura #estadisticasPagina_2,
body.pptx-modo-captura #estadisticasAmbDesgloseWrap {
    width: 1900px !important;
    max-width: none !important;
}
/* Oculta la columna de Observaciones (la última) de la tabla de Causales
   de Suspensión solo durante la captura de esa lámina. */
body.pptx-modo-captura #estadisticasTablaCausalesContainer th:last-child,
body.pptx-modo-captura #estadisticasTablaCausalesContainer td:last-child {
    display: none !important;
}
/* La tabla de Causales tiene scroll interno (max-height:380px) para la vista
   normal, pero html2canvas solo fotografía lo visible: sin esto, las filas
   fuera del área visible quedaban recortadas en la lámina/PPT. Durante la
   captura se muestra completa, sin scroll ni límite de alto. */
body.pptx-modo-captura .stats-table-wrap {
    max-height: none !important;
    overflow: visible !important;
}
/* Producción por Especialidad / Desglose Ambulatorio: en la captura se
   muestran solo los gráficos (sin la tabla mensual de cada especialidad),
   bien grandes, para aprovechar mejor el espacio de la diapositiva. */
body.pptx-modo-captura #estadisticasProdEspGrid .stats-tabla-especialidad,
body.pptx-modo-captura #estadisticasAmbGrid .stats-tabla-especialidad {
    display: none !important;
}
/* Con como máximo 2 tarjetas por lámina (una sola fila, una al lado de la
   otra), cada gráfico puede ser bien grande y ocupar casi toda la altura
   de la diapositiva. */
body.pptx-modo-captura #estadisticasProdEspGrid .stats-grafico-especialidad,
body.pptx-modo-captura #estadisticasAmbGrid .stats-grafico-especialidad {
    height: 950px !important;
}

/* ============================================ */
/* ✨ SPLASH DE ENTRADA (antes del login)         */
/* ============================================ */
#appSplash {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0b2a4f 0%, #123a5e 45%, #1a6d8a 100%);
    overflow: hidden;
    cursor: pointer;
    animation: appSplashFadeIn 0.5s ease-out;
}
#appSplash.app-splash-hide {
    animation: appSplashFadeOut 0.5s ease-in forwards;
}
.app-splash-grid {
    position: absolute;
    inset: -50%;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 42px 42px;
    animation: appSplashGridDrift 12s linear infinite;
}
.app-splash-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 420px;
    height: 420px;
    margin: -210px 0 0 -210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(79,232,201,0.32) 0%, rgba(79,232,201,0) 68%);
    animation: appSplashGlowPulse 2.4s ease-in-out infinite;
}
.app-splash-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
}
.app-splash-logo {
    filter: drop-shadow(0 10px 28px rgba(0,0,0,0.4));
    animation: appSplashLogoIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.app-splash-badge-pulse {
    stroke-dasharray: 12 7;
    animation: appSplashDashFlow 0.8s linear infinite;
}
.app-splash-title {
    margin-top: 26px;
    font-size: 2.15rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    line-height: 1.3;
    color: #ffffff;
    text-shadow: 0 2px 16px rgba(0,0,0,0.3);
    animation: appSplashTextIn 0.7s ease-out 0.25s both;
}
.app-splash-ekg {
    width: min(340px, 78vw);
    height: 44px;
    margin-top: 18px;
    overflow: visible;
    filter: drop-shadow(0 0 7px rgba(79,232,201,0.85));
    animation: appSplashTextIn 0.7s ease-out 0.4s both;
}
.app-splash-ekg-line {
    stroke: #4fe8c9;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 14 8;
    animation: appSplashDashFlow 0.7s linear infinite;
}
.app-splash-dots {
    margin-top: 20px;
    display: flex;
    gap: 9px;
    animation: appSplashTextIn 0.7s ease-out 0.55s both;
}
.app-splash-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffb84f;
    animation: appSplashDotPulse 1.1s ease-in-out infinite;
}
.app-splash-dots span:nth-child(2) { animation-delay: 0.15s; }
.app-splash-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes appSplashFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes appSplashFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes appSplashLogoIn {
    from { opacity: 0; transform: scale(0.75); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes appSplashTextIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes appSplashDotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
}
@keyframes appSplashGridDrift {
    from { transform: translate(0, 0); }
    to { transform: translate(42px, 42px); }
}
@keyframes appSplashGlowPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1.06); }
}
@keyframes appSplashDashFlow {
    to { stroke-dashoffset: -38; }
}
@media (prefers-reduced-motion: reduce) {
    #appSplash, #appSplash * {
        animation: none !important;
    }
}

/* ============================================================= */
/* 👥 AVISO: OTRA PERSONA ESTÁ EDITANDO ESTA FILA AHORA MISMO      */
/* No es un bloqueo, solo un aviso — ver marcarEdicionEnCurso()/   */
/* aplicarAvisosEdicionEnCurso() en js/02 y js/03. Se usa outline  */
/* (no border/box-shadow) a propósito: las celdas de la tabla ya   */
/* tienen su propio fondo de color POR COLUMNA con !important, que */
/* taparía cualquier color puesto en el <tr> — el outline se pinta */
/* por FUERA del borde de la fila, así que no lo tapa ninguna celda.*/
/* ============================================================= */
tr.fila-en-edicion-por-otro {
    outline: 3px solid #f59e0b;
    outline-offset: -1px;
}

@media (max-width: 1024px) {
    .vista-dividida-columnas {
        flex-direction: column !important;
    }
}

/* Dos columnas necesitan más que los 1600px normales de ".app" —      */
/* mientras vista dividida está activa, usa casi todo el ancho de la   */
/* pantalla en vez de quedar centrada con ese tope.                    */
body.vista-dividida-modo {
    padding-left: 8px;
    padding-right: 8px;
}
body.vista-dividida-modo .app {
    max-width: 100%;
}

/* ============================================================= */
/* 📱 OPTIMIZACIÓN GENERAL PARA CELULAR Y TABLET                  */
/* Bloque aparte (no mezclado con los @media puntuales de arriba, */
/* ya afinados) para no arriesgar esos ajustes ya probados. Cubre */
/* lo que faltaba: aire del contenedor, blancos de las tablas al   */
/* deslizar, tamaño de toque de botones/inputs, y un par de grillas */
/* de 2 columnas fijas (Estadísticas) que en un celular angosto     */
/* quedaban apretadas.                                              */
/* ============================================================= */

/* Scroll con inercia en iOS para las tablas con scroll horizontal/vertical */
.table-wrap, .stats-table-wrap, #manualIndice, .intervencion-dropdown {
    -webkit-overflow-scrolling: touch;
}

/* 🖥️➜📱 Tablet (apaisado/vertical grande): aire un poco más ajustado */
@media (max-width: 1024px) {
    body {
        padding: 14px;
    }
    .app {
        padding: 20px 16px 26px;
        border-radius: 22px;
    }
}

/* 📱 Celular: contenedor a ancho completo, casi sin desperdiciar pantalla */
@media (max-width: 600px) {
    body {
        padding: 8px;
    }
    .app {
        padding: 14px 10px 20px;
        border-radius: 16px;
    }

    /* 7 días en una fila queda muy angosto en un celular chico —
       4 columnas (2 filas de 4+3) da botones cómodos de tocar. */
    .days-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    .day-btn {
        padding: 10px 4px;
        font-size: 0.9rem;
    }

    /* Botones de acción (Guardar/Limpiar/Registrar/Imprimir/Agregar Fila):
       más altos y con más aire para no fallar el toque. */
    .btn-sm {
        padding: 9px 16px;
        font-size: 0.78rem;
    }
    .btn-group {
        gap: 8px;
    }

    /* Pestañas de semana y navegación del menú: mismo criterio. */
    .tab-btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    .menu-item {
        padding: 12px 14px;
        font-size: 0.95rem;
    }

    /* Celdas de la tabla principal: siguen siendo compactas (así caben
       las ~25 columnas), pero un poco más altas/legibles que en desktop
       para que el dedo acierte el campo correcto al deslizar y tocar. */
    .table-wrap .input-auto {
        height: 30px;
        font-size: 0.72rem;
        padding: 4px 6px;
    }
    .table-wrap th, .table-wrap td {
        padding: 6px 4px;
    }
    .table-wrap th {
        font-size: 0.6rem;
    }

    /* Un par de grillas de 2 columnas fijas en Estadísticas (comparativas
       lado a lado) que en un celular angosto quedan demasiado apretadas —
       selector por contenido del style inline, sin tocar el JS que las
       genera. En tablet/desktop se quedan como están (2 y 3 columnas). */
    div[style*="grid-template-columns:1fr 1fr"],
    div[style*="grid-template-columns: 1fr 1fr"],
    div[style*="grid-template-columns:2fr 1fr"],
    div[style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================= */
/* 🔄 AVISO "GIRA TU PANTALLA" — celular/tablet en vertical        */
/* La tabla principal (~25 columnas) necesita el ancho del modo    */
/* horizontal. Oculto por defecto; la media query de abajo lo      */
/* muestra solo cuando el dispositivo está en vertical Y es        */
/* angosto (cubre celulares y tablets, no una ventana de escritorio */
/* achicada en horizontal). Es 100% CSS: al girar el dispositivo,   */
/* el navegador reevalúa la orientación al instante, sin recargar.  */
/* ============================================================= */
.rotate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: linear-gradient(135deg, #0b2a4f 0%, #1a6d8a 100%);
    color: #ffffff;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
}

/* Solo se exige horizontal en las secciones con tablas anchas: Tabla
   Quirúrgica (registro) y Libro de Quirófano. El resto (Estadísticas,
   Diferidos, Admin, Manual, Lista de Espera) y la pantalla de login (sin
   data-seccion todavía) se pueden usar en vertical sin problema. El
   atributo lo pone cambiarSeccion() en js/15-navegacion-y-autenticacion.js. */
@media (max-width: 1024px) and (orientation: portrait) {
    body[data-seccion="registro"] .rotate-overlay,
    body[data-seccion="libro"] .rotate-overlay {
        display: flex;
    }

    /* "Reunión de Tabla" y "Análisis IA" son modales que se abren desde el
       menú SIN cambiar de sección (quedan flotando sobre lo que sea que
       esté activo detrás, incluida la Tabla Quirúrgica) — ver
       js/21-reunion-tabla.js y js/22-analisis-ia.js. Como esos modales ya
       se adaptan bien en vertical (con scroll propio), el aviso de girar no
       debe taparlos aunque la sección de atrás sea registro/libro. */
    body:has(#reunionTablaOverlay) .rotate-overlay,
    body:has(#analisisIaOverlay) .rotate-overlay,
    body:has(#analisisIaPreviaOverlay) .rotate-overlay {
        display: none !important;
    }
}

.rotate-overlay-icon {
    font-size: 3.4rem;
    animation: rotateOverlaySpin 1.8s ease-in-out infinite;
}

.rotate-overlay-arrow {
    font-size: 1.6rem;
    margin-top: 4px;
    opacity: 0.85;
}

@keyframes rotateOverlaySpin {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-90deg); }
}

.rotate-overlay-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-top: 18px;
}

.rotate-overlay-sub {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 10px;
    max-width: 320px;
    line-height: 1.6;
}