/* ══════════════════════════════════════════════════════════════════════════════
   PDRS RESPONSIVE MOBILE CSS
   Archivo centralizado de responsividad para todo el sistema.
   Se carga como ÚLTIMO stylesheet para ganar por cascada sin !important.
   Usa prefijos de especificidad (body, html) donde sea necesario.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. TABLAS Card Stack Pattern
   Cada <tr> se convierte en una tarjeta apilada con labels automáticos.
   El script responsive-tables.js inyecta data-label en cada <td>.
   Se excluyen tablas dentro de .container (privacy/legal).
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* --- Romper layout de tabla → bloques normales ---
       Resetea TODAS las propiedades de tabla que módulos CSS
       (finance-fixed-control.css, etc.) pueden tener.
       Sin esto, overflow:hidden, border-collapse:separate,
       border-radius en celdas, etc. rompen el card-stack. */
    body :not(.container) table:not(.legal-table):not(.print-table) {
        display: block;
        width: 100%;
        overflow: visible;
        border-collapse: collapse;
        border-spacing: 0;
        border-radius: 0;
    }
    body :not(.container) table:not(.legal-table):not(.print-table) tbody {
        display: block;
        width: 100%;
        background: none;
    }

    /* --- Ocultar headers --- */
    body :not(.container) > table thead,
    body :not(.container) > div > table thead,
    body :not(.container) table:not(.legal-table):not(.print-table) thead {
        display: none;
    }

    /* --- Cada fila = tarjeta --- */
    body :not(.container) table:not(.legal-table):not(.print-table) tbody tr {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        border: 1px solid var(--color-border, #e5e5e5);
        border-radius: 10px;
        padding: 10px 14px;
        background: var(--color-surface, #ffffff);
        transition: none;
    }
    html.dark :not(.container) table:not(.legal-table):not(.print-table) tbody tr {
        border-color: var(--color-border, #333);
        background: var(--color-surface, #1c1c1c);
    }

    /* --- Cada celda = fila flex con label --- */
    body :not(.container) table:not(.legal-table):not(.print-table) tbody td {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: baseline;
        padding: 5px 0;
        border: none;
        border-bottom: 1px solid var(--color-border, #f0f0f0);
        border-radius: 0;
        text-align: right;
        vertical-align: initial;
        font-size: 0.8125rem;
        gap: 8px;
        min-width: 0;
        overflow-wrap: anywhere;
    }
    html.dark :not(.container) table:not(.legal-table):not(.print-table) tbody td {
        border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    body :not(.container) table:not(.legal-table):not(.print-table) tbody td:last-child {
        border-bottom: none;
    }

    /* Label generado por data-label */
    body :not(.container) table:not(.legal-table):not(.print-table) tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        color: var(--color-text-muted, #737373);
        text-align: left;
        flex-shrink: 1;
        max-width: 40%;
        min-width: 0;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        word-break: break-word;
    }

    /* Ocultar filas skeleton */
    body table tbody tr[aria-hidden="true"] {
        display: none;
    }

    /* Overflow wrapper ya no necesita scroll horizontal */
    body .overflow-x-auto,
    body .table-responsive {
        overflow-x: visible;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   2. MODALES Fullscreen en móvil
   Todos los patrones de modal del sistema pasan a ocupar toda la pantalla.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* --- Patrón Tailwind: fixed inset-0 ... > div.rounded-2xl --- */
    body .fixed.inset-0 {
        padding: 0;
        align-items: stretch;
    }
    body .fixed.inset-0 > div {
        max-width: 100%;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        margin: 0;
    }
    body .fixed.inset-0 > div > .sticky {
        border-radius: 0;
    }

    /* --- Patrón invoicing: inv-modal-overlay > inv-modal --- */
    body .inv-modal-overlay {
        padding: 0;
        align-items: stretch;
    }
    body .inv-modal-overlay .inv-modal {
        max-width: 100%;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
    body .inv-modal-overlay .inv-modal-header {
        border-radius: 0;
    }
    body .inv-modal-overlay .inv-modal-footer {
        border-radius: 0;
    }

    /* --- Patrón invoicing: modal-overlay genérico --- */
    body .modal-overlay {
        padding: 0;
        align-items: stretch;
    }
    body .modal-overlay > div {
        max-width: 100%;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    /* --- Patrón superadmin: sa-modal-overlay > sa-modal --- */
    body .sa-modal-overlay {
        padding: 0;
        align-items: stretch;
    }
    body .sa-modal-overlay .sa-modal {
        max-width: 100%;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        padding: 20px 16px;
    }
    body .sa-modal-overlay .sa-modal.wide {
        max-width: 100%;
    }

    /* --- Patrón settings: msg-modal --- */
    body .msg-modal {
        max-width: 100%;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    /* --- Patrón crew: crew-modal-overlay > crew-modal --- */
    body .crew-modal-overlay {
        padding: 0;
        align-items: stretch;
    }
    body .crew-modal-overlay .crew-modal {
        max-width: 100%;
        width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    /* --- Patrón support: tk-modal-overlay > tk-modal --- */
    body .tk-modal-overlay .tk-modal {
        max-width: 100%;
        width: 100%;
        border-radius: 0;
    }

    /* --- Patrón finance: confirm-overlay > confirm-modal --- */
    body .confirm-overlay .confirm-modal {
        max-width: 100%;
        width: 100%;
        border-radius: 0;
    }

    /* --- Reducir padding interno de modales --- */
    body .fixed.inset-0 form,
    body .fixed.inset-0 .px-7 {
        padding-left: 16px;
        padding-right: 16px;
    }
    body .inv-modal-body {
        padding: 1rem;
    }
    body .inv-modal-header,
    body .inv-modal-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   3. FORMULARIOS Colapso a una columna
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* Grids de Tailwind: grid-cols-2 / grid-cols-3 → 1 columna */
    body .grid.grid-cols-2 {
        grid-template-columns: 1fr;
    }
    body .grid.grid-cols-3 {
        grid-template-columns: 1fr;
    }

    /* SuperAdmin: .form-row (grid 2 cols) */
    body .sa-modal .form-row {
        grid-template-columns: 1fr;
    }

    /* Invoicing: accordion content */
    body .inv-accordion-content {
        grid-template-columns: 1fr;
        padding: 0.75rem 1rem;
    }
    body .inv-accordion-content.three-cols {
        grid-template-columns: 1fr;
    }

    /* Invoicing: inner grids */
    body .inv-inner-grid {
        grid-template-columns: 1fr;
    }

    /* Touch targets solo inputs de texto, selects y textareas.
       Se excluyen checkbox, radio, color, range para no distorsionarlos. */
    body input[type="text"],
    body input[type="email"],
    body input[type="password"],
    body input[type="tel"],
    body input[type="url"],
    body input[type="number"],
    body input[type="search"],
    body input[type="date"],
    body input[type="datetime-local"],
    body input[type="month"],
    body input[type="week"],
    body input[type="time"],
    body input:not([type]),
    body select,
    body textarea {
        min-height: 44px;
        font-size: 16px; /* Previene zoom en iOS */
    }

    /* Botones de acción en modales */
    body .confirm-actions,
    body .sa-modal .form-actions {
        flex-direction: column;
    }
    body .confirm-btn,
    body .sa-modal .form-actions button {
        width: 100%;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   4. PESTAÑAS Scroll horizontal con snap
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* --- SuperAdmin tabs --- */
    body .sa-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        padding: 0 12px;
        gap: 0;
    }
    body .sa-tabs::-webkit-scrollbar {
        display: none;
    }
    body .sa-tab {
        padding: 10px 14px;
        font-size: 13px;
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* --- Invoicing main tabs --- */
    body .inv-main-tab {
        padding-bottom: 10px;
        font-size: 0.8rem;
        flex-shrink: 0;
    }

    /* --- Members profile: page tabs --- */
    body nav[aria-label="Tabs"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 0;
        padding-bottom: 1px;
    }
    body nav[aria-label="Tabs"]::-webkit-scrollbar {
        display: none;
    }
    body nav[aria-label="Tabs"] button {
        flex-shrink: 0;
        scroll-snap-align: start;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* --- Members profile: detail tabs --- */
    body #profile-detail-tabs,
    body [id*="profile-tabs"],
    body .profile-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    body #profile-detail-tabs::-webkit-scrollbar,
    body [id*="profile-tabs"]::-webkit-scrollbar,
    body .profile-tabs::-webkit-scrollbar {
        display: none;
    }

    /* --- Crew manager / Inventory modal tabs --- */
    body #crew-modal-tabs,
    body #inv-modal-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body #crew-modal-tabs::-webkit-scrollbar,
    body #inv-modal-tabs::-webkit-scrollbar {
        display: none;
    }

    /* --- Modal tab buttons --- */
    body .modal-tab-btn {
        padding: 8px 10px;
        font-size: 0.75rem;
        gap: 4px;
    }

    /* --- Plan config tabs --- */
    body .plan-config-tab {
        padding: 8px 12px;
        font-size: 0.75rem;
    }

    /* --- Exoneration mode tabs --- */
    body .exo-mode-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    body .exo-mode-tabs::-webkit-scrollbar {
        display: none;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   5. FILTROS Stack vertical
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* Finance: filters-bar */
    body .filters-bar {
        grid-template-columns: 1fr;
        padding: 12px;
        gap: 10px;
    }

    body .filter-group {
        min-width: 0;
    }

    /* Invoicing: filters container */
    body .inv-filters {
        flex-direction: column;
        gap: 8px;
    }
    body .inv-filters > * {
        width: 100%;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   6. ACTION BARS Botones específicos
   Selectores concretos por ID/clase, NO Tailwind utilities genéricos.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* Members profile: header buttons → full width */
    body #btn-add-member,
    body #btn-export-members,
    body #btn-import-members {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
    }

    /* Fixed control header container (finance) */
    body #fixed-control-header-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Invoicing: modal footer buttons stack */
    body .inv-modal-footer {
        flex-direction: column;
    }
    body .inv-modal-footer button,
    body .inv-modal-footer a {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* SA modal footer */
    body .sa-modal .form-actions {
        flex-direction: column;
    }
    body .sa-modal .form-actions button {
        width: 100%;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   7. KPI CARDS / STATS GRIDS
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {

    /* Invoicing KPI grid */
    body .inv-kpi-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* SuperAdmin KPIs */
    body .sa-kpis {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 360px) {
    body .sa-kpis {
        grid-template-columns: 1fr;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   8. LAYOUT GENERAL Padding, typography, spacing
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* Secciones card */
    body section.rounded-xl {
        border-radius: 8px;
    }

    /* Settings layout */
    body .settings-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {

    /* Badges y chips más compactos */
    body .plan-card-pill {
        font-size: 0.625rem;
        padding: 1px 6px;
    }

    body .plan-count-badge {
        min-width: 16px;
        height: 16px;
        font-size: 0.625rem;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   9. ATTENDANCE Ajustes específicos
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    body .attendance-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    body .attendance-controls {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    body .attendance-stats {
        grid-template-columns: 1fr;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   10. CREW MANAGER Ajustes específicos
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    body .crew-grid {
        grid-template-columns: 1fr;
    }

    body .crew-form-grid {
        grid-template-columns: 1fr;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   11. LABORATORY Ajustes específicos
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    body .lab-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   12. INVENTORY Ajustes específicos
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    body .inv-form-grid {
        grid-template-columns: 1fr;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   13. FACTURAS PORTAL Ajustes específicos
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    body .portal-filters {
        flex-direction: column;
    }
    body .portal-filters > * {
        width: 100%;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   14. SCROLLBAR & TOUCH IMPROVEMENTS
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* Scrollbar más delgado en móvil */
    * {
        scrollbar-width: thin;
    }
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }

    /* Mejorar touch */
    body {
        touch-action: manipulation;
    }

    /* Prevenir text selection accidental en elementos interactivos */
    body button,
    body .sa-tab,
    body .inv-main-tab,
    body nav[aria-label="Tabs"] button {
        -webkit-user-select: none;
        user-select: none;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   15. SUPPORT Ajustes específicos
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    body .ticket-grid {
        grid-template-columns: 1fr;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   16. DROPDOWNS Selectores específicos por ID
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* User dropdown en navbar → bottom sheet */
    body #pdrs-user-menu {
        position: fixed;
        left: 8px;
        right: 8px;
        width: auto;
        top: auto;
        bottom: 8px;
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Attendance filter dropdowns */
    body #filter-shift-dropdown .absolute,
    body #filter-category-dropdown .absolute {
        min-width: 100%;
    }

    /* Lab filter dropdown */
    body #lab-filter-category-dropdown .absolute {
        min-width: 100%;
    }

    /* Finance family/becado dropdowns */
    body #family-form-owner-dropdown,
    body #family-form-member-dropdown,
    body #becado-member-dropdown {
        max-height: 50vh;
        overflow-y: auto;
    }

    /* Inventory responsible dropdown */
    body #inv-f-responsible-dropdown {
        max-height: 50vh;
        overflow-y: auto;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   18. CHARTS / CANVAS Contenedores responsivos
   Chart.js necesita height explícito, solo limitamos overflow.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    /* Chart containers limitar altura pero NO forzar height: auto en canvas */
    body .chart-container,
    body .chart-card {
        min-height: 200px;
        max-height: 300px;
        overflow: hidden;
    }

    /* Evitar overflow horizontal de canvas */
    body .chart-container canvas,
    body .chart-card canvas {
        max-width: 100%;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   19. IFRAMES Responsivos
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    body iframe {
        width: 100%;
        max-width: 100%;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   20. PRIVACY / LEGAL Tablas con scroll horizontal (no card-stack)
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* Privacy: tablas legales → scroll horizontal */
    body .container table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.8rem;
    }
    /* Respetar thead en tablas legales */
    body .container table thead {
        display: table-header-group;
    }
    body .container table tbody tr {
        display: table-row;
    }
    body .container table tbody td {
        display: table-cell;
    }
    body .container table tbody td::before {
        content: none;
    }

    /* Privacy: tabs */
    body .container .tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }
    body .container .tabs::-webkit-scrollbar {
        display: none;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   21. MEMBER DETAIL Grid de datos del perfil completo
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    body .md-hero__inner {
        flex-direction: column;
        text-align: center;
    }

    body .md-section__body .grid {
        grid-template-columns: 1fr;
    }

    body .md-back-btn,
    body .md-print-btn {
        font-size: 0.8125rem;
        padding: 8px 12px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   22. MAX-WIDTH CONTAINERS Padding lateral
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    body .max-w-7xl,
    body .max-w-6xl,
    body .max-w-5xl,
    body .max-w-4xl {
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   23. SLIDERS / RANGE INPUTS
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    body input[type="range"] {
        width: 100%;
        min-height: 44px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   24. COLLAPSIBLES Padding reducido
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    body .collapse-content {
        padding: 10px 12px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   25. SETTINGS / BACKUP Flex containers con selects inline
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* Backup range groups: flex → column */
    body [data-range-group] {
        flex-direction: column;
        align-items: stretch;
    }

    /* Wipe inputs (settings, backup modal) */
    body .wipe-input {
        width: 100%;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   26. SUPERADMIN Filtros de logs/historial
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* SA filter rows (email logs, payment history, pending) */
    body .sa-filter-row,
    body .sa-filters {
        flex-direction: column;
        gap: 8px;
    }
    body .sa-filter-row > *,
    body .sa-filters > * {
        width: 100%;
    }

    /* SA inputs with inline min-width */
    body .sa-input,
    body .sa-select {
        width: 100%;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   27. PAGINATION Flex-wrap para muchos botones
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {

    /* Inventory pagination */
    body #inv-pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    /* Support / superadmin pagination */
    body #tickets-pagination {
        flex-wrap: wrap;
        gap: 6px;
    }
    body .tk-page-btn {
        min-width: 32px;
        min-height: 32px;
    }
}


/* ─────────────────────────────────────────────────────────────────────────────
   28. ATTENDANCE IFRAME Altura inicial para mobile
   El JS adjustIframeHeight() la recalcula después de cargar,
   pero el 950px inline causa salto visual.
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

    body #notificationsFrame {
        height: auto;
        min-height: 400px;
    }
}