/* ======================================================================
   style-lista-espera.css — ported from "LISTA DE ESPERA APP/style.css"
   Every selector below is scoped under ".le-scope" (the wrapper class the
   Lista de Espera module renders itself into, inside #listaEsperaContent).
   This is what resolves ALL class-name collisions with the copied app's
   own styles.css (not just the 4 originally spotted: .active, .login-box,
   .logo-container, .open) since NOTHING here can match outside .le-scope.
   Original bare/global rules (*, body) are scoped to ".le-scope" and
   ".le-scope *" instead of the real global selectors, so they only affect
   elements actually rendered inside the Lista de Espera module.
   Rules that only styled the original app's own login screen / sidebar /
   hamburguesa menu (.login-container, .sidebar, .sidebar-overlay,
   .mobile-menu-btn, #menuBtn, .header, .user-info, .btn-logout) are NOT
   ported — that whole screen was intentionally not carried over (Tabla
   Quirúrgica's login/menu is the only one now). Everything else was kept.
   ====================================================================== */

.le-scope, .le-scope * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.le-scope {
    font-family: 'Roboto', 'Segoe UI', sans-serif;
    color: #333;
    line-height: 1.6;
}

/* MAIN APP - EL CONTENIDO NO SE MODIFICA */
.le-scope .content {
    flex: 1;
    padding: 0;
    overflow-y: auto;
}

/* Formulario */
.le-scope .patient-form {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    max-width: 1100px;
    margin: 0 auto;
}

.le-scope .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 8px;
}

.le-scope .form-group {
    margin-bottom: 8px;
}

.le-scope .form-group label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1e3a8a;
    margin-bottom: 6px;
    display: block;
}

.le-scope .form-group input,
.le-scope .form-group select,
.le-scope .form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
}

.le-scope .form-group input:focus,
.le-scope .form-group select:focus,
.le-scope .form-group textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}

.le-scope .form-section-title {
    font-size: 1rem;
    margin: 16px 0 12px 0;
    color: #1e40af;
    border-left: 4px solid #3b82f6;
    padding-left: 12px;
}

/* Filtros */
.le-scope .filters {
    background: white;
    padding: 24px 28px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
    border: 1px solid #e2e8f0;
}

.le-scope .sticky-filters {
    position: sticky;
    top: 0;
    z-index: 90;
}

.le-scope .filter-group {
    flex: 1;
    min-width: 140px;
}

.le-scope .filter-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 6px;
    display: block;
}

.le-scope .filter-group input,
.le-scope .filter-group select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
}

.le-scope .filters button {
    padding: 11px 20px;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.95rem;
}

.le-scope .filters button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Tabla */
.le-scope .table-container {
    background: white;
    border-radius: 12px;
    overflow-x: auto;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    margin-top: 20px;
}

.le-scope .scrollable-table {
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: auto;
}

.le-scope #patientsTable {
    width: 100%;
    border-collapse: collapse;
    min-width: 800px;
}

.le-scope #patientsTable th {
    background: #1e40af;
    color: white;
    padding: 16px 12px;
    font-size: 0.96rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    position: sticky;
    top: 0;
}

.le-scope #patientsTable th:hover {
    background: #1e3a8a;
}

.le-scope #patientsTable td {
    padding: 14px 12px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.95rem;
}

.le-scope #patientsTable tr:hover {
    background: #f0f9ff;
}

/* Dashboard */
.le-scope .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.le-scope .stat-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.le-scope .total-card {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    color: white;
    text-align: center;
}

.le-scope .total-card h3 {
    font-size: 1.1rem;
}

.le-scope .big-number {
    font-size: 3.2rem;
    font-weight: 700;
    margin: 10px 0 0 0;
}

.le-scope .charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 35px;
}

.le-scope .chart-card {
    background: white;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    height: auto;
    min-height: 310px;
}

.le-scope .chart-card h3 {
    margin-bottom: 10px;
    text-align: center;
    font-size: 1.1rem;
    color: #1e40af;
}

.le-scope .chart-card canvas {
    width: 100% !important;
    max-height: 240px;
}

/* Tabla cruzada */
.le-scope .cross-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}

.le-scope .cross-table th,
.le-scope .cross-table td {
    padding: 12px 10px;
    text-align: center;
    border: 1px solid #e2e8f0;
    /* La hoja de estilos PRINCIPAL de la app (styles.css, no esta) trae una
       regla genérica "th, td { background: white; }" sin ámbito — como
       alcanza cualquier <td> de toda la página (incluida esta tabla), tapa
       el color que se le pone a la fila (<tr>) desde JS, aunque sea con
       !important: no es una pelea de especificidad, es que la celda hija
       pinta su propio fondo encima del de la fila. Transparente acá deja
       que se vea el color real de la fila (o el de abajo si no tiene). */
    background: transparent;
}

.le-scope .cross-table th {
    background: #1e40af;
    color: white;
    font-weight: 600;
}

.le-scope .cross-table tr:nth-child(even) {
    background: #f8fafc;
}

/* Modal (los modales de Lista de Espera se agregan a document.body, fuera de
   #listaEsperaContent — por eso llevan la clase "le-scope" agregada a mano
   en cada modal.className, además de "modal", para que este bloque los
   alcance igual). */
.le-scope.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    backdrop-filter: blur(4px);
    padding: 16px;
}

.le-scope .modal-content {
    background: white;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    position: relative;
    padding: 30px;
}

.le-scope .close {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 32px;
    font-weight: bold;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}

.le-scope .close:hover {
    color: #ef4444;
}

.le-scope .modal-body {
    margin: 20px 0 30px 0;
    line-height: 1.7;
    font-size: 1.02rem;
}

.le-scope .modal-body p {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.le-scope .modal-body p strong {
    color: #1e40af;
    display: inline-block;
    min-width: 140px;
}

.le-scope .modal-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 15px;
    border-top: 1px solid #e2e8f0;
}

.le-scope .modal-buttons button {
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: 8px;
    min-width: 160px;
}

/* Botones generales */
.le-scope .btn-primary {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.le-scope .btn-primary:hover {
    background: #2563eb;
    transform: translateY(-1px);
}

.le-scope .btn-secondary {
    background: #64748b;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.le-scope .btn-secondary:hover {
    background: #475569;
}

.le-scope .btn-danger {
    background: #dc2626;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.le-scope .btn-danger:hover {
    background: #b91c1c;
}

.le-scope .btn-large {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    margin-top: 16px;
}

.le-scope .btn-print-dashboard {
    background: linear-gradient(135deg, #1e40af, #3b82f6);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.le-scope .btn-print-dashboard:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(30, 64, 175, 0.4);
}

/* Utilidades */
.le-scope .form-group input[readonly] {
    background-color: #f3f4f6;
}

.le-scope #resultadosContador {
    background: #eff6ff;
    color: #1e40af;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    margin: 12px 0;
    text-align: center;
    font-size: 1rem;
    border: 1px solid #bfdbfe;
}

/* Sub-navegación interna del módulo (Dashboard / Nuevo Paciente / Lista de
   Pacientes / Histórico RDLL) — no existía en la app original (que usaba un
   sidebar propio), es nueva de esta integración. */
.le-scope .le-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    background: white;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.le-scope .le-subnav button {
    background: #eff6ff;
    color: #1e40af;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.92rem;
}

.le-scope .le-subnav button:hover {
    background: #dbeafe;
}

.le-scope .le-subnav button.active {
    background: #1e40af;
    color: white;
}

/* ====================== MEDIA QUERIES ====================== */
@media (max-width: 768px) {
    .le-scope .form-row {
        grid-template-columns: 1fr;
    }

    .le-scope .charts-row {
        grid-template-columns: 1fr;
    }

    .le-scope .modal-content {
        padding: 20px;
    }

    .le-scope .modal-body p strong {
        min-width: 100px;
    }

    .le-scope .filters {
        padding: 15px;
    }

    .le-scope .filters button {
        width: 100%;
    }

    .le-scope .filter-group {
        min-width: 100%;
    }

    .le-scope .stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .le-scope .form-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Scroll con inercia en iOS para las tablas con scroll propio */
.le-scope .table-container, .le-scope .scrollable-table {
    -webkit-overflow-scrolling: touch;
}

/* 📱 Celular: mismo criterio de tamaño de toque que el resto de la app */
@media (max-width: 600px) {
    .le-scope .le-subnav button {
        padding: 12px 16px;
        font-size: 0.88rem;
    }

    .le-scope #patientsTable th,
    .le-scope #patientsTable td {
        padding: 12px 8px;
        font-size: 0.88rem;
    }

    .le-scope .filter-group input,
    .le-scope .filter-group select,
    .le-scope .form-group input,
    .le-scope .form-group select,
    .le-scope .form-group textarea {
        padding: 12px 14px;
    }

    .le-scope .modal-content {
        padding: 16px;
    }

    .le-scope .modal-buttons button {
        min-width: 0;
        width: 100%;
    }
}