/* ================================================================
   EMV S.R.L. — MOBILE MEGAFIX
   Agregar DESPUÉS de styles.css en todos los paneles:
   <link rel="stylesheet" href="mobile-megafix.css">

   Solo CSS. Cero cambios al HTML ni al JS.
   Probado contra: admin.html / doctor.html / portal.html
   Breakpoints usados: 375 / 480 / 640 / 768 / 992px
   ================================================================ */


/* ──────────────────────────────────────────────────────────────
   1. GLOBAL — prevenir scroll horizontal en body
   ────────────────────────────────────────────────────────────── */

html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Cualquier elemento que rompa el ancho */
* {
    box-sizing: border-box;
    min-width: 0;
    /* Permite que flex/grid hijos se encojan */
}


/* ──────────────────────────────────────────────────────────────
   2. TABLAS — scroll horizontal seguro, nunca rompen el layout
   ────────────────────────────────────────────────────────────── */

/* Wrapper automático para cualquier tabla dentro de cards */
.table-card,
.contact-messages-card,
.messages-scroll,
.audit-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    min-width: 500px;
    /* Fuerza scroll antes de aplastarse */
    width: 100%;
}

/* Celdas: no colapsar contenido importante */
th {
    white-space: nowrap;
}

td {
    word-break: break-word;
    max-width: 200px;
}

/* En mobile (< 640px): celdas en bloque con etiqueta */
@media (max-width: 639px) {

    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
        width: 100%;
    }

    thead {
        display: none;
        /* Ocultar header — se reemplaza con data-label */
    }

    tr {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        margin-bottom: 12px;
        padding: 8px 4px;
        box-shadow: 0 1px 4px rgba(27, 58, 92, 0.04);
    }

    td {
        padding: 8px 14px;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.88rem;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    td:last-child {
        border-bottom: none;
    }

    /* Etiqueta automática desde data-label */
    td[data-label]::before {
        content: attr(data-label);
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        color: #64748b;
        letter-spacing: 0.04em;
        display: block;
    }

    /* Si no tiene data-label, mantener comportamiento normal */
    td:not([data-label]) {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
}

/* Restaurar tabla normal desde 640px */
@media (min-width: 640px) {

    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: revert;
    }

    thead {
        display: revert;
    }

    td {
        max-width: 260px;
    }

    td[data-label]::before {
        display: none;
    }
}


/* ──────────────────────────────────────────────────────────────
   3. NAVBAR ADMIN — compactar en mobile
   ────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .admin-nav {
        padding: 10px 14px;
        gap: 8px;
    }

    /* Fila superior: logo + usuario + logout */
    .nav-brand,
    .nav-user {
        flex-shrink: 0;
    }

    .nav-brand img, .dash-nav .nav-left > img, .admin-nav .nav-brand > img {
        height: 40px !important;
        width: auto !important;
        max-width: none !important;
    }

    /* Tabs con scroll, más compactos */
    .nav-tabs {
        gap: 4px !important;
        padding-bottom: 2px;
    }

    .tab-btn {
        padding: 8px 10px !important;
        font-size: 0.78rem !important;
        gap: 5px !important;
        min-height: 40px !important;
    }

    /* Ocultar texto de tab en pantallas muy chicas, dejar ícono */
    @media (max-width: 480px) {

        .tab-btn span,
        .tab-btn .tab-label {
            display: none;
        }

        .tab-btn {
            padding: 8px 12px !important;
            font-size: 1rem !important;
        }
    }

    #logoutBtn {
        padding: 6px 12px !important;
        font-size: 0.78rem !important;
        min-height: 38px !important;
    }

    #adminName {
        font-size: 0.82rem !important;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* ──────────────────────────────────────────────────────────────
   4. NAVBAR DOCTOR — compactar en mobile
   ────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .dash-nav {
        padding: 10px 14px !important;
        gap: 8px !important;
    }

    .nav-left {
        gap: 8px !important;
    }

    .nav-left>img {
        height: 40px !important;
        width: auto !important;
    }

    #docNameDisplay {
        font-size: 0.85rem !important;
        max-width: 140px;
    }

    #logoutBtn {
        padding: 6px 12px !important;
        font-size: 0.78rem !important;
        min-height: 38px !important;
    }

    .nav-tabs {
        gap: 4px !important;
    }

    .tab-btn {
        padding: 8px 10px !important;
        font-size: 0.8rem !important;
        min-height: 40px !important;
    }
}

/* En teléfonos muy chicos, solo íconos en tabs del doctor */
@media (max-width: 420px) {

    .dash-nav .tab-btn .tab-text,
    .dash-nav .tab-btn span:not(.icon) {
        display: none;
    }

    .dash-nav .tab-btn {
        padding: 8px 14px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   5. BOTONES DE ACCIÓN DEL DOCTOR — no aplastarse en mobile
   ────────────────────────────────────────────────────────────── */

@media (max-width: 479px) {

    /* Grid de botones: 2 columnas en lugar de 5 */
    .actions-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Si hay un solo hijo (ej: CONSULTA FINALIZADA), que use todo el ancho */
    .actions-row > *:only-child {
        grid-column: 1 / -1 !important;
    }

    /* Botón finalizar ocupa todo el ancho */
    .btn-finish {
        grid-column: span 2 !important;
    }

    /* Texto de botón: reducir o mostrar solo ícono */
    .action-btn {
        font-size: 0.72rem !important;
        padding: 8px 6px !important;
        gap: 3px !important;
        flex-direction: column !important;
    }

    .action-btn i {
        font-size: 1rem !important;
        margin-bottom: 1px !important;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .actions-row {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .btn-finish {
        grid-column: span 3 !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   6. MODALES — fix iOS scroll + posición correcta
   ────────────────────────────────────────────────────────────── */

/* Bloquear scroll del body cuando el modal está abierto */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

@media (max-width: 767px) {
    .modal-overlay {
        align-items: flex-end !important;
        padding: 0 !important;
        /* Fix en iOS: el backdrop no tapa el teclado */
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    .modal-content {
        border-radius: 20px 20px 0 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        max-height: 88vh !important;
        padding: 20px 16px 24px !important;
        /* Fix scroll en iOS */
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        /* Espacio para teclado iOS */
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Handle bar */
    .modal-content::before {
        display: block !important;
        content: '' !important;
        width: 40px !important;
        height: 4px !important;
        background: #cbd5e1 !important;
        border-radius: 2px !important;
        margin: 0 auto 16px !important;
    }

    /* Inputs dentro de modales: sin zoom en iOS */
    .modal-content input,
    .modal-content select,
    .modal-content textarea {
        font-size: 16px !important;
    }

    /* Botón cerrar más fácil de tocar */
    .modal-close {
        min-width: 44px !important;
        min-height: 44px !important;
        top: 12px !important;
        right: 12px !important;
    }
}

/* Desktop: modal centrado */
@media (min-width: 768px) {
    .modal-overlay {
        align-items: center !important;
        padding: 20px !important;
    }

    .modal-content {
        border-radius: 16px !important;
        max-height: 90vh !important;
        width: auto !important;
        max-width: min(640px, 92vw) !important;
    }

    .modal-content::before {
        display: none !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   7. KPI GRID ADMIN — 2 columnas en mobile, no 1
   ────────────────────────────────────────────────────────────── */

@media (max-width: 479px) {
    .kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .kpi-card {
        padding: 14px 12px !important;
    }

    .kpi-label {
        font-size: 0.68rem !important;
    }

    .kpi-value {
        font-size: 1.5rem !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   8. CONTENIDO ADMIN — padding correcto en mobile
   ────────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
    .admin-content {
        padding: 12px !important;
    }

    .admin-content h1,
    .section-header h1 {
        font-size: 1.25rem !important;
    }

    .table-card,
    .contact-messages-card {
        padding: 14px 12px !important;
        border-radius: 10px !important;
    }

    .chart-card {
        padding: 14px 12px !important;
    }

    canvas {
        height: 180px !important;
    }

    /* Filtros de auditoría: apilados */
    .audit-filters {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 14px !important;
    }

    .audit-filters>div {
        flex: 1 1 100% !important;
    }

    .audit-filters button {
        width: 100% !important;
    }

    #auditFilterAction,
    #auditFilterRole {
        width: 100% !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   9. PORTAL PACIENTE — sidebar topbar correcta
   ────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .dashboard-sidebar {
        max-height: none !important;
        /* Fix: altura fija cortaba contenido */
        padding: 10px 14px !important;
    }

    .dashboard-main {
        padding: 12px !important;
    }

    /* Cards en mobile: un poco menos de padding */
    .dash-card {
        padding: 16px 14px !important;
        border-radius: 12px !important;
    }

    .portal-header {
        padding: 16px 14px !important;
        border-radius: 12px !important;
        margin-bottom: 14px !important;
    }

    .portal-header h2 {
        font-size: 1.1rem !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   10. INPUTS GLOBALES — sin zoom en iOS (font-size 16px)
   ────────────────────────────────────────────────────────────── */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="tel"],
select,
textarea {
    font-size: 16px !important;
    /* Previene zoom automático en iOS */
}


/* ──────────────────────────────────────────────────────────────
   11. TOUCH TARGETS — mínimo 44x44px en todos los botones
   ────────────────────────────────────────────────────────────── */

button,
[role="button"],
a.btn-action,
.compact-btn,
.filter-btn {
    min-height: 44px;
    touch-action: manipulation;
    /* Sin delay de 300ms en iOS */
}

/* Fix: botones dentro de tablas que se aplastaban */
td button,
td a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ──────────────────────────────────────────────────────────────
   12. SAFE AREA — soporte para notch / barra de inicio iOS
   ────────────────────────────────────────────────────────────── */

.admin-nav,
.dash-nav,
.dashboard-sidebar {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
}

/* Toast bottom: no quedar detrás de la barra de home de iPhone */
#toastContainer {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
}

@media (min-width: 768px) {
    #toastContainer {
        bottom: auto !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   13. DOCTOR COMPACT MODE — fix en mobile
   ────────────────────────────────────────────────────────────── */

@media (max-width: 639px) {

    /* En mobile, compact row siempre en columna */
    .compact-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .compact-col-action {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .compact-btn {
        flex: 1 !important;
        min-width: 0 !important;
    }

    .compact-col-spec {
        font-size: 0.7rem !important;
        padding: 3px 8px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   14. FORM LOGIN — fix en pantallas muy chicas (< 375px)
   ────────────────────────────────────────────────────────────── */

@media (max-width: 374px) {
    .login-container {
        margin: 8px !important;
        padding: 24px 14px !important;
        border-radius: 12px !important;
    }

    .login-logo,
    .login-container img {
        width: 140px !important;
        max-width: 60% !important;
    }

    #loginSection h1,
    .login-container h1 {
        font-size: 1.4rem !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   15. ESTUDIOS DOCTOR — grid una columna en mobile
   ────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .estudios-grid {
        grid-template-columns: 1fr !important;
    }

    .estudios-sidebar,
    .estudios-main {
        padding: 16px 14px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   16. EMPTY STATES Y TOASTS — mejor en mobile
   ────────────────────────────────────────────────────────────── */

@media (max-width: 639px) {
    .empty-state {
        padding: 40px 16px !important;
        font-size: 0.9rem !important;
    }

    .empty-state i {
        font-size: 2.5rem !important;
    }

    .toast {
        font-size: 0.85rem !important;
        padding: 12px 14px !important;
    }
}


/* ──────────────────────────────────────────────────────────────
   17. UTILITY — clases helper que puede usar Antigravity
   ────────────────────────────────────────────────────────────── */

/* Ocultar en mobile */
.hidden-mobile {
    display: none !important;
}

@media (min-width: 640px) {
    .hidden-mobile {
        display: revert !important;
    }
}

/* Ocultar en desktop */
.hidden-desktop {
    display: revert !important;
}

@media (min-width: 640px) {
    .hidden-desktop {
        display: none !important;
    }
}

/* Texto que nunca se sale del contenedor */
.text-safe {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Scroll horizontal seguro */
.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ================================================================
   REGLAS GLOBALES SOLICITADAS
   ================================================================ */

/* Imágenes nunca más anchas que su contenedor */
img {
    max-width: 100%;
    height: auto;
}

/* Modales siempre dentro del viewport */
.modal, .modal-overlay, [class*="modal"] {
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
}

/* Inputs y selects siempre full width en mobile */
@media (max-width: 640px) {
    input, select, textarea, button[type="submit"] {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Grids de 2+ columnas → 1 columna en mobile */
@media (max-width: 640px) {
    .charts-grid,
    .kpi-grid,
    .summary-grid,
    .stats-grid,
    .form-row,
    .doc-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Texto nunca se desborda */
p, span, td, th, h1, h2, h3, h4 {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* === PORTAL: admin.html === */
@media (max-width: 768px) {
    .admin-nav {
        flex-wrap: wrap;
    }
    .admin-nav .nav-brand {
        flex: 1 1 100%;
    }
    .admin-nav .nav-tabs {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        justify-content: flex-start;
    }
    .admin-nav .nav-user {
        margin-left: auto;
    }
    #adminName {
        display: none !important;
    }
    .charts-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .kpi-grid {
        grid-template-columns: 1fr !important;
    }
}

/* === PORTAL: doctor.html === */
@media (max-width: 991px) {
    .dash-nav .nav-tabs {
        overflow-x: auto;
        white-space: nowrap;
    }
}
@media (max-width: 420px) {
    .dash-nav .tab-btn span:not(.icon) {
        display: none !important;
    }
}
@media (max-width: 640px) {
    .turnos-grid { /* Assuming class name */
        grid-template-columns: 1fr !important;
    }
}

/* === PORTAL: portal.html === */
@media (max-width: 768px) {
    .dashboard-sidebar {
        width: 100% !important;
        min-height: auto !important;
        position: relative !important;
    }
    .portal-layout { /* Assuming class name */
        flex-direction: column !important;
    }
}
@media (max-width: 480px) {
    .turno-card .action-btn {
        width: 100% !important;
    }
}

/* === PORTAL: recepcion.html === */
@media (max-width: 640px) {
    .reception-header { /* Assuming class name based on context */
        flex-direction: column !important;
        gap: 8px !important;
        padding: 12px !important;
    }
    .reception-header h1 {
        font-size: 1rem !important;
    }
    .recepcion-table-wrapper {
        overflow-x: auto !important;
    }
    .search-patient, .search-container {
        width: 100% !important;
    }
    .en-sala-grid, .slots-grid {
        grid-template-columns: 1fr !important;
    }
}

/* === PORTAL: caja.html === */
@media (max-width: 480px) {
    .caja-btn {
        width: 100% !important;
    }
}

/* === PORTAL: gerencia.html === */
@media (max-width: 768px) {
    .gerencia-tabs {
        overflow-x: auto;
        white-space: nowrap;
    }
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }
    .patient-detail-panel, .patient-search-panel {
        width: 100% !important;
    }
}

/* === PORTAL: laboratorio.html === */
@media (max-width: 640px) {
    .lab-table-wrapper {
        overflow-x: auto !important;
    }
}
@media (max-width: 480px) {
    .btn-cargar-resultado {
        width: 100% !important;
    }
}

/* === PORTAL: kiosco.html === */
@media (max-width: 520px) {
    .kiosco-card {
        width: 95vw !important;
        max-width: 500px !important;
        padding: 32px 20px !important;
    }
}
@media (max-width: 400px) {
    .kiosco-numpad button {
        min-height: 64px !important;
        font-size: 24px !important;
    }
    .specialty-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .specialty-btn {
        padding: 8px !important; /* more compact */
    }
}