/* css/responsive.css — teléfono y tablet */

html {
    -webkit-text-size-adjust: 100%;
}

body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

#app {
    min-height: 100dvh;
    max-width: 100%;
}

#main-content {
    min-width: 0;
    max-width: 100%;
}

#sidebar {
    flex-shrink: 0;
}

.tabs-header {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.tab-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.card:has(table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.modal {
    max-height: min(90dvh, 100%);
    overflow-y: auto;
}

.modal-backdrop {
    padding: 1rem;
}

.consent-overlay {
    top: 0;
    right: 0;
    left: 0;
    bottom: auto;
    height: 100dvh;
    max-height: 100dvh;
}

.consent-sign-shell {
    height: 100%;
    max-height: 100%;
    min-height: 0;
}

.consent-pdf-preview iframe {
    min-height: 0;
    height: 100%;
}

@media (pointer: coarse) {
    .btn-icon,
    .btn-icon.btn-sm {
        width: 2.75rem;
        height: 2.75rem;
    }

    .nav-links li a {
        min-height: 44px;
    }
}

/* Tablet: sidebar más estrecho, el contenido respira menos */
@media (min-width: 721px) and (max-width: 1100px) {
    #sidebar {
        width: 210px;
    }

    .nav-links li a {
        padding: 0.75rem 1rem;
        font-size: 0.92rem;
    }

    #main-content {
        padding: 1.25rem;
    }

    .filters-bar {
        flex-wrap: wrap;
    }

    .filters-bar input,
    .filters-bar select {
        flex: 1 1 10rem;
        max-width: none;
        min-width: 0;
    }

    .facturado-filters .form-group {
        flex: 1 1 10rem;
        min-width: 0;
    }

    .consent-sign-pad,
    #consent-sign-canvas,
    .consent-sign-actions {
        max-width: 640px;
    }

    #consent-sign-canvas {
        height: 160px;
    }
}

/* Formularios de dos y tres columnas: una sola cuando el hueco es justo */
@media (max-width: 900px) {
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Tablas: scroll dentro del card, sin ensanchar la página */
@media (max-width: 1100px) {
    .table-container table,
    .card > table {
        min-width: 40rem;
    }

    #inv-lines-table {
        min-width: 32.5rem;
    }
}

/* Teléfono: barra fija y bloques a ancho completo */
@media (max-width: 720px) {
    #app {
        flex-direction: column;
    }

    #app.sidebar-collapsed #sidebar {
        display: none;
    }

    .sidebar-collapse-btn {
        position: static;
        margin-left: auto;
    }

    .sidebar-expand-btn {
        position: sticky;
        top: env(safe-area-inset-top);
        width: 100%;
        height: 2.35rem;
        margin: 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
    }

    #sidebar {
        position: sticky;
        top: 0;
        z-index: 40;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding-top: env(safe-area-inset-top);
    }

    .logo {
        flex: 1 1 auto;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        min-width: 0;
        padding: var(--space-sm) var(--space-md);
        border-bottom: none;
        gap: var(--space-sm);
    }

    .logo img {
        width: auto;
        max-height: 36px;
    }

    .logo .brand-meritum {
        max-width: 104px;
    }

    .logo .brand-clinic {
        max-width: 64px;
    }

    .nav-links {
        display: flex;
        flex: none;
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding: 0;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    .nav-links li {
        flex: none;
    }

    .nav-links li a {
        padding: var(--space-sm) var(--space-md);
        border-right: none;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
    }

    .nav-links li a:hover,
    .nav-links li a.active {
        border-right: none;
        border-bottom: 2px solid var(--color-primary);
    }

    .sidebar-user {
        margin-top: 0;
        margin-left: auto;
        border-top: none;
        padding: var(--space-sm) var(--space-md);
    }

    #main-content {
        padding: 1rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
    }

    .card {
        padding: 1rem;
    }

    .view-header {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--space-sm);
        margin-bottom: var(--space-lg);
    }

    .view-header h2 {
        font-size: 1.35rem;
    }

    .view-header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .client-file-title {
        flex-wrap: wrap;
    }

    .client-file-title h2 {
        white-space: normal;
    }

    .filters-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filters-bar > input,
    .filters-bar > select,
    .filters-bar > .btn {
        max-width: none;
        width: 100%;
    }

    .facturado-filters .form-group {
        width: 100%;
    }

    .totals-section {
        flex-direction: column;
        align-items: stretch;
    }

    .tax-inline {
        max-width: none;
    }

    .totals-box {
        min-width: 0;
        width: 100%;
    }

    .catalog-add-row {
        flex-wrap: wrap;
    }

    .catalog-add-row input[type="number"],
    .catalog-add-row .catalog-code {
        width: 100%;
        flex: 1 1 100%;
    }

    .client-select-wrapper {
        flex-wrap: wrap;
    }

    .client-select-wrapper select {
        flex: 1 1 12rem;
        min-width: 0;
    }

    .consent-version-notice {
        flex-wrap: wrap;
    }

    .form-actions-footer {
        flex-wrap: wrap;
        justify-content: stretch !important;
    }

    .form-actions-footer .btn {
        flex: 1 1 100%;
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px;
    }

    .modal-backdrop {
        align-items: flex-end;
        padding: 0;
    }

    .modal,
    .modal-wide {
        max-width: none;
        width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 92dvh;
        padding: 1.25rem calc(1rem + env(safe-area-inset-right)) calc(1.25rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
    }

    .modal-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-actions .btn {
        width: 100%;
    }

    .toast-container {
        top: auto;
        bottom: calc(1rem + env(safe-area-inset-bottom));
        left: calc(1rem + env(safe-area-inset-left));
        right: calc(1rem + env(safe-area-inset-right));
    }

    .toast {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .consent-sign-pad,
    #consent-sign-canvas,
    .consent-sign-actions {
        max-width: 100%;
    }

    #consent-sign-canvas {
        height: 140px;
    }

    .consent-sign-actions {
        flex-wrap: wrap;
    }

    .consent-sign-actions .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 1100px) {
    .agenda-layout {
        grid-template-columns: 1fr;
    }

    .agenda-side {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .agenda-legend {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .agenda-date-block {
        flex: 1 1 100%;
        align-items: flex-start;
    }

    .agenda-title {
        text-align: left;
    }

    .agenda-grid.card {
        max-height: calc(100vh - 16rem);
    }

    .agenda-report-cards,
    .agenda-report-split {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .agenda-panel {
        justify-content: stretch;
    }

    .agenda-panel-inner {
        width: 100%;
    }

    .agenda-report-cards,
    .agenda-report-split {
        grid-template-columns: 1fr;
    }

    .agenda-panel-actions .btn,
    .agenda-detail-actions .btn,
    .agenda-report-filters {
        width: 100%;
    }

    .agenda-detail-actions {
        flex-direction: column;
    }

    .agenda-report-filters {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (pointer: coarse) {
    .agenda-event-resize {
        height: 14px;
    }
}