/* ============================================================================
   ajuste-pantallas.css — capa final de ajuste para TODAS las pantallas
   ----------------------------------------------------------------------------
   Se carga ÚLTIMO en todas las páginas. Su trabajo es que nada se salga de la
   pantalla ni quede fuera del alcance del dedo, desde un teléfono de 190px de
   ancho (la mitad de un iPhone SE) hasta un monitor de 4K.

   Reglas de la casa:
   - El objetivo mínimo es 190px de ancho útil. Un iPhone SE (375px) tiene que
     quedar cómodo, no apretado.
     · 820px  → móvil/tablet (mismo corte que movil-optimizado.css)
     · 560px  → teléfono
     · 430px  → teléfono chico
     · 360px  → iPhone SE y menores
     · 300px  → ultra chico (mitad del SE)
   - Nunca scroll horizontal en la página. Si algo no entra, se envuelve, se
     recorta con ellipsis o se mete en su propio contenedor con scroll.
   - Nunca obligar a girar el teléfono.
   - Menos scroll vertical: en pantallas chicas las grillas de tarjetas van de a
     dos, no de a una, y los espacios se comprimen. Una pantalla que se recorre
     en tres gestos se entiende; una de veinte, no.

   Las variables --ap-* las consumen las reglas de abajo y pueden usarse desde
   cualquier hoja de página.
   ========================================================================== */

:root {
    /* Espaciados que se achican solos con el viewport */
    --ap-gap: clamp(6px, 2.2vw, 16px);
    --ap-gap-sm: clamp(4px, 1.4vw, 10px);
    --ap-pad: clamp(10px, 3.4vw, 24px);
    --ap-pad-card: clamp(10px, 3vw, 18px);
    --ap-radio: clamp(8px, 2.4vw, 14px);

    /* Tipografía fluida: nunca menos de 11px, nunca ilegible en desktop */
    --ap-fs-micro: clamp(0.62rem, 2.5vw, 0.72rem);
    --ap-fs-mini: clamp(0.68rem, 2.8vw, 0.8rem);
    --ap-fs-base: clamp(0.82rem, 3.2vw, 0.95rem);
    --ap-fs-titulo: clamp(1.05rem, 5vw, 2rem);
    --ap-fs-valor: clamp(0.95rem, 4.6vw, 1.6rem);

    /* Alto mínimo de cualquier cosa tocable */
    --ap-tap: 40px;
}
/* ============================================================================
   0. ESCALA TIPOGRÁFICA — la letra también se achica
   ----------------------------------------------------------------------------
   Casi todo el sistema mide en `rem` (0.72rem, 1.4rem, 2rem…), así que bajar
   el tamaño base del documento achica de una sola vez títulos, rótulos,
   números y el padding que se declaró en em. Es la forma más barata de que
   entre lo mismo en menos ancho sin tocar regla por regla.

   Qué NO se achica a propósito:
   - Los campos de formulario, que quedan clavados en 16px más abajo: por
     debajo de eso Safari hace zoom al enfocarlos y deja la página corrida.
   - Nada por debajo de 12px de base: a partir de ahí deja de leerse.
   ========================================================================== */

@media (max-width: 430px) {
    html { font-size: 15px; }
}

@media (max-width: 360px) {
    html { font-size: 14px; }
}

@media (max-width: 300px) {
    html { font-size: 13px; }
}

@media (max-width: 240px) {
    html { font-size: 12px; }
}

/* ============================================================================
   1 y 2. ANTI-DESBORDE Y PALABRAS LARGAS — SÓLO EN PANTALLAS CHICAS
   ----------------------------------------------------------------------------
   Todo este bloque va dentro de @media a propósito. La primera versión lo
   tenía suelto, "por las dudas", y en un monitor cambió cosas que estaban
   bien:

   - `overflow-wrap` global partía en dos renglones el número del día en el
     calendario de Asistencias (el "10" quedaba "1" arriba y "0" abajo),
     porque la celda mide 25px de contenido y el número 29.
   - `max-width: 100%` y `overflow-x` sueltos le agregaban barras de scroll a
     contenedores que ya se manejaban solos.

   Regla de la casa a partir de acá: los bloques anti-desborde no tocan nada
   arriba de 820px. La excepción es la sección 4, dedicada a pantallas
   grandes, que sólo ajusta aire y ancho de columna sin pisar layouts.
   ========================================================================== */

@media (max-width: 820px) {

    /* --- Nada se sale de la ventana ---------------------------------------
       `overflow-x: clip` en vez de `hidden`: no crea contexto de scroll, así
       que position:sticky sigue funcionando dentro (hidden lo rompe). */

    html {
        overflow-x: clip;
    }

    body {
        overflow-x: clip;
        max-width: 100%;
    }

    /* Medios y objetos incrustados: jamás más anchos que su caja */
    :where(img, svg, video, canvas, iframe, embed, object) {
        max-width: 100%;
    }

    :where(img, video, canvas) {
        height: auto;
    }

    /*
     * `min-width: auto` es el valor por defecto de un ítem flex/grid y
     * significa "no me achiques por debajo de mi contenido". Es la causa
     * número uno de que una fila se salga de la pantalla: un nombre largo o un
     * número de siete cifras empuja a todos sus hermanos hacia afuera. Con
     * :where() la especificidad es cero, así que cualquier regla explícita de
     * las hojas de página sigue ganando.
     *
     * Sólo el ancho: `min-height: 0` no aporta nada a que las cosas entren a
     * lo ancho y sí puede aplastar bloques que se apoyan en su alto.
     */
    :where(body *) {
        min-width: 0;
    }

    /* El contenedor de página nunca puede ser más ancho que la ventana */
    :where(.main-content, .tienda-main, main, .page-header, .card, .modal-content) {
        max-width: 100%;
    }

    /* --- Palabras y números largos ---------------------------------------
       Los importes en guaraníes ("1.250.000 Gs."), los códigos de barras y los
       correos son cadenas largas sin espacios: si no se les permite cortar,
       estiran la caja que los contiene.

       `break-word` y NO `anywhere`: la diferencia no está en cómo se ve el
       texto sino en cuánto mide el ancho mínimo del elemento. Con `anywhere`
       ese mínimo pasa a ser una sola letra, y eso rompe el reparto de anchos
       de cualquier tabla con `table-layout: auto` — una columna con una nota
       larga se lleva todo y a las demás las deja del ancho de un carácter.
       Donde sí hace falta cortar más fino se usa `anywhere` puntualmente, más
       abajo, sobre elementos concretos. */

    :where(body) {
        overflow-wrap: break-word;
        word-break: normal;
    }

    :where(p, span, strong, em, small, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6,
           label, figcaption, blockquote, .card, .kpi-card, .summary-card) {
        overflow-wrap: break-word;
    }

    /* Un <pre> (reporte diario, JSON de auditoría) scrollea adentro, no afuera */
    :where(pre, code, .code-block) {
        max-width: 100%;
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
        -webkit-overflow-scrolling: touch;
    }

    /* URLs y correos sueltos */
    :where(a[href^="mailto:"], a[href^="http"], .email, .correo) {
        overflow-wrap: break-word;
    }
}

/* ============================================================================
   3. CONTENEDORES CON SCROLL PROPIO
   ----------------------------------------------------------------------------
   Todo lo que scrollea de costado tiene que declararlo, para que el gesto sea
   del elemento y no de la página entera.
   ========================================================================== */

/*
 * `.tabla-scroll` es la caja que arma js/core/tablas-responsivas.js para las
 * tablas que no se pueden convertir en tarjetas. Es la única que se declara
 * en todos los anchos, porque no existe en ningún otro lado.
 */
.tabla-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/*
 * El resto sólo en pantallas chicas. En un monitor cada uno ya trae su propio
 * manejo del desborde, y agregarle `overflow-x: auto` por las dudas le mete
 * una barra de scroll horizontal que no tenía: al carrusel de la tienda le
 * sumaba 15px de alto en cada fila de productos.
 */
@media (max-width: 820px) {

    :where(.table-wrapper, .chart-wrapper, .scroller, [data-scroll-x]) {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================================
   4. PANTALLAS GRANDES — de 1024px para arriba
   ----------------------------------------------------------------------------
   Capa nueva. Antes esta sección estaba vacía a propósito porque un intento
   anterior de topear el ancho con `max-width` + `margin: auto` rompía las
   páginas: los márgenes automáticos del eje transversal le ganan a
   `align-items: stretch`, y los .main-content que son flex en columna se
   encogían a su contenido (en Asistencias el panel de métricas pasó de
   1621px a 787px).

   Lo que hace esta capa, sin repetir ese error:
   - El aire exterior de .main-content deja de ser fijo (30px) y crece con
     el viewport hasta un tope: en un monitor el contenido no queda pegado
     a los bordes ni a la barra lateral.
   - En monitores muy anchos el contenido deja de estirarse de borde a
     borde: pasa a una columna de lectura topeada, centrada DENTRO de su
     área con padding (nunca margin: auto), así el fondo de la superficie
     sigue llenando todo y ningún layout interno cambia de comportamiento.
   - No toca nada por debajo de 1024px: ese es territorio de las secciones
     5 a 9, y las reglas móviles con !important siguen ganando donde ya
     aplicaban.
   ========================================================================== */

/*
 * 4.1 Aire exterior fluido. Reemplaza el padding fijo de 30px de
 * estilos.css (misma especificidad, esta hoja carga último). De 1024 a
 * ~1300px sigue en 30px; a partir de ahí crece hasta 46px.
 * El aire inferior NO se toca: los FABs de tema, búsqueda y ayuda siguen
 * flotando abajo a la derecha en escritorio, y el despeje que les dejaba
 * ajustes-responsive.css (106px al pie de .main-content) tiene que seguir
 * valiendo para que, al llegar al final del scroll, no le pisen la última
 * fila a una tabla.
 */
@media (min-width: 1024px) {
    .main-content {
        padding: clamp(30px, 2.4vw, 46px);
        padding-bottom: calc(106px + env(safe-area-inset-bottom, 0px));
    }
}

/*
 * 4.2 Columna de lectura en monitores muy anchos. El 100% en padding es el
 * ancho del área de contenido (el viewport menos el menú lateral, que es
 * fixed), así que el centrado se recalcula solo: con el menú visible topea
 * a (área − 1560px) y con el menú oculto re-centra en el ancho completo.
 * El `max(46px, …)` conserva el aire mínimo hasta que el viewport supera
 * el tope, y dentro del tope no cambia nada.
 */
@media (min-width: 1440px) {
    .main-content {
        padding-left: max(46px, calc((100% - 1560px) / 2));
        padding-right: max(46px, calc((100% - 1560px) / 2));
    }
}

/* ============================================================================
   5. MÓVIL Y TABLET — hasta 820px
   ========================================================================== */

@media (max-width: 820px) {

    /* --- 5.1 Encabezado de página --------------------------------------- */

    .page-header {
        gap: var(--ap-gap);
        margin-bottom: var(--ap-gap);
    }

    .page-header__meta h1,
    .main-header h1 {
        font-size: var(--ap-fs-titulo);
        line-height: 1.15;
    }

    .page-header__meta p,
    .main-header p {
        font-size: var(--ap-fs-mini);
        margin-top: 2px;
    }

    /*
     * Los botones de acción del header se van a una fila propia que scrollea
     * de costado: así entran cinco acciones sin apilar cinco filas ni cortar
     * la quinta contra el borde.
     */
    .page-header__actions,
    .card__actions {
        flex-wrap: wrap;
        gap: var(--ap-gap-sm);
    }

    /* --- 5.2 Tarjetas ---------------------------------------------------- */

    .card,
    .card--flat,
    .summary-card {
        padding: var(--ap-pad-card);
        margin-top: var(--ap-gap);
        border-radius: var(--ap-radio);
    }

    .card__header {
        gap: var(--ap-gap-sm);
    }

    /* --- 5.3 Grillas: de a dos, no de a una ------------------------------ */

    /*
     * Apilar todo en una columna duplica el largo de la pantalla y hace perder
     * la referencia de dónde está uno. Los KPI y las tarjetas de resumen son
     * cajas chicas: entran dos por fila incluso en un SE.
     */
    .kpi-grid,
    .summary-cards-grid,
    .metrics-mini-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--ap-gap-sm);
    }

    .kpi-card,
    .summary-card {
        padding: var(--ap-pad-card);
        gap: var(--ap-gap-sm);
    }

    .kpi-card__label {
        font-size: var(--ap-fs-micro);
        line-height: 1.2;
    }

    .kpi-card__value {
        font-size: var(--ap-fs-valor);
        line-height: 1.15;
        /* Los importes largos ("12.450.000 Gs.") cortan antes de empujar */
        overflow-wrap: anywhere;
    }

    /* La ayuda debajo del número es lo primero que sobra cuando falta lugar */
    .kpi-card__hint,
    .summary-card__hint {
        font-size: var(--ap-fs-micro);
        line-height: 1.25;
    }

    /* --- 5.4 Formularios ------------------------------------------------- */

    /*
     * 16px exactos: por debajo de eso Safari hace zoom al enfocar el campo y
     * deja la página corrida a la derecha, sin forma de volver.
     */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px;
        max-width: 100%;
    }

    .form-group,
    .form-row,
    .filtros {
        max-width: 100%;
    }

    /* --- 5.5 Modales ----------------------------------------------------- */

    .modal-content {
        width: min(96vw, 560px);
        max-width: min(96vw, 560px);
        max-height: min(92dvh, 92vh);
        padding: var(--ap-pad-card);
        margin: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* --- 5.6 Botones ----------------------------------------------------- */

    .btn,
    button:not(.plain):not([class*="close"]) {
        max-width: 100%;
    }
}

/* ============================================================================
   6. TELÉFONO — hasta 560px
   ========================================================================== */

@media (max-width: 560px) {

    .main-content {
        padding-left: var(--ap-gap) !important;
        padding-right: var(--ap-gap) !important;
        border-radius: 0;
    }

    /*
     * Filas de botones: en cuanto no entran dos por fila, cada uno ocupa el
     * ancho completo. Mejor un botón grande que dos cortados.
     */
    .page-header__actions,
    .card__actions,
    .form-actions,
    .modal-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ap-gap-sm);
    }

    .page-header__actions > .btn,
    .card__actions > .btn,
    .form-actions > .btn,
    .modal-actions > .btn {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }

    /* Grillas de dos columnas que ya no entran a dos */
    .dashboard-grid,
    .card--split {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   7. TELÉFONO CHICO — hasta 430px (iPhone SE incluido)
   ========================================================================== */

@media (max-width: 430px) {

    .main-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .card,
    .card--flat,
    .summary-card,
    .kpi-card {
        padding: 10px;
        margin-top: 10px;
    }

    /* El icono decorativo del KPI se va: el número es lo que importa */
    .kpi-card__icon {
        display: none;
    }

    .kpi-card {
        display: block;
    }

    /* Chips y badges compactos para que entren varios por fila */
    .chip,
    .badge,
    .branch-badge,
    .filter-chip,
    .btn-chip {
        font-size: var(--ap-fs-micro);
        padding: 4px 8px;
        min-height: 30px;
    }
}

/* ============================================================================
   8. MUY CHICO — hasta 360px
   ========================================================================== */

@media (max-width: 360px) {

    .main-content {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    .card,
    .card--flat,
    .summary-card,
    .kpi-card,
    .modal-content {
        padding: 8px;
        border-radius: 10px;
    }

    .kpi-grid,
    .summary-cards-grid,
    .metrics-mini-grid {
        gap: 6px;
    }

    /* La pista de ayuda de cada KPI se guarda: el label y el número alcanzan */
    .kpi-card__hint,
    .summary-card__hint {
        display: none;
    }
}

/* ============================================================================
   9. ULTRA CHICO — hasta 300px (la mitad de un iPhone SE)
   ----------------------------------------------------------------------------
   A esta altura el ancho útil son ~180px. Todo va a una columna, se van los
   adornos y queda sólo lo que se necesita para operar.
   ========================================================================== */

@media (max-width: 300px) {

    :root {
        --ap-tap: 36px;
    }

    .main-content {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .kpi-grid,
    .summary-cards-grid,
    .metrics-mini-grid,
    .quick-links {
        grid-template-columns: 1fr;
        gap: 5px;
    }

    .card,
    .card--flat,
    .summary-card,
    .kpi-card,
    .modal-content {
        padding: 7px;
        margin-top: 7px;
    }

    /* Sombras y desenfoques cuestan batería y no aportan nada a este tamaño */
    .card,
    .summary-card,
    .kpi-card {
        box-shadow: none;
        backdrop-filter: none;
    }

    .page-header__actions > .btn,
    .card__actions > .btn,
    .form-actions > .btn,
    .modal-actions > .btn {
        flex: 1 1 100%;
    }

    /* Texto de botón que no entra: se recorta con puntos, no desborda */
    .btn {
        padding: 8px 10px;
        font-size: var(--ap-fs-mini);
        min-height: var(--ap-tap);
    }

    .modal-content {
        width: 98vw;
        max-width: 98vw;
    }
}

/* ============================================================================
   10. TABLAS
   ----------------------------------------------------------------------------
   Una tabla de ocho columnas no entra en un teléfono y arrastrarla de costado
   deja fuera de vista la primera columna, que es la que dice de qué fila se
   trata. En pantallas chicas cada fila pasa a ser una tarjeta "etiqueta: valor".

   `js/core/tablas-responsivas.js` marca con data-tabla-cards="1" las tablas a
   las que les pudo deducir las etiquetas desde el <thead>. Las que no
   (encabezados con colspan, tablas armadas a mano) quedan dentro de
   `.tabla-scroll` y scrollean en su propia caja, nunca la página entera.
   ========================================================================== */

@media (max-width: 720px) {

    /*
     * `min-width` con !important: varias páginas le ponen un ancho mínimo a
     * la tabla (520px, 640px…) para forzar el scroll horizontal en móvil.
     * En modo tarjeta ese piso deja de tener sentido y es justo lo que hacía
     * que la tarjeta siguiera saliéndose de la pantalla.
     */
    table[data-tabla-cards="1"] {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        border-collapse: separate;
        border-spacing: 0;
        background: transparent;
        box-shadow: none;
    }

    /*
     * El thead se oculta a la vista pero sigue en el árbol de accesibilidad:
     * `display:none` lo sacaría también del lector de pantalla y las celdas
     * quedarían sin encabezado asociado.
     */
    table[data-tabla-cards="1"] > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    table[data-tabla-cards="1"] > tbody,
    table[data-tabla-cards="1"] > tfoot {
        display: block;
        width: 100%;
    }

    table[data-tabla-cards="1"] > tbody > tr,
    table[data-tabla-cards="1"] > tfoot > tr {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        border: 1px solid var(--border-color, rgba(23, 22, 34, 0.14));
        border-radius: var(--ap-radio);
        background: var(--card-bg, #fff);
        overflow: hidden;
    }

    table[data-tabla-cards="1"] > tbody > tr > td,
    table[data-tabla-cards="1"] > tfoot > tr > td,
    table[data-tabla-cards="1"] > tfoot > tr > th {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: auto;
        min-height: 0;
        padding: 7px 10px;
        border: 0;
        border-top: 1px solid var(--border-color, rgba(23, 22, 34, 0.1));
        text-align: right;
        font-size: var(--ap-fs-base);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    table[data-tabla-cards="1"] > tbody > tr > td:first-child,
    table[data-tabla-cards="1"] > tfoot > tr > :first-child {
        border-top: 0;
    }

    table[data-tabla-cards="1"] > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 1 auto;
        min-width: 0;
        text-align: left;
        font-size: var(--ap-fs-micro);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted, #5f6789);
    }

    /* Columnas sin título (casilla de selección, botones) no llevan etiqueta */
    table[data-tabla-cards="1"] > tbody > tr > td[data-label=""] {
        justify-content: flex-start;
        text-align: left;
    }

    table[data-tabla-cards="1"] > tbody > tr > td[data-label=""]::before {
        display: none;
    }

    /* Celda vacía: no ocupa una fila entera para no decir nada */
    table[data-tabla-cards="1"] > tbody > tr > td:empty {
        display: none;
    }

    /* "Cargando…" / "Sin resultados": una sola celda a lo ancho */
    table[data-tabla-cards="1"] > tbody > tr > td[data-celda-ancha] {
        justify-content: center;
        text-align: center;
        padding: 14px 10px;
        color: var(--text-muted, #5f6789);
    }

    table[data-tabla-cards="1"] > tbody > tr > td[data-celda-ancha]::before {
        display: none;
    }

    /* Los controles dentro de una celda ocupan el ancho que les queda */
    table[data-tabla-cards="1"] > tbody > tr > td select,
    table[data-tabla-cards="1"] > tbody > tr > td input:not([type="checkbox"]):not([type="radio"]) {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 100%;
    }

    /* Las tablas que no se pudieron convertir: scroll propio y aviso visual */
    .tabla-scroll,
    .table-wrapper,
    .mn-table-wrap {
        max-width: 100%;
        overflow-x: auto;
    }
}

/* ============================================================================
   11. CALENDARIOS
   ----------------------------------------------------------------------------
   Los calendarios se diseñaron con celdas de 80px de alto pensando en un
   monitor. Siete de esas no entran ni en un iPhone SE. En pantallas chicas la
   celda pasa a ser cuadrada y proporcional al ancho disponible: siempre entran
   las siete columnas, sin scroll horizontal y sin girar el teléfono.
   ========================================================================== */

@media (max-width: 820px) {

    .calendar-grid,
    #calendar-weekdays,
    .attendance-calendar__grid,
    .attendance-calendar__weekdays {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: clamp(2px, 0.9vw, 6px);
        max-width: 100%;
        overflow-x: visible;
        margin-top: 10px;
    }

    .calendar-cell,
    .attendance-calendar__day,
    .attendance-calendar__cell {
        aspect-ratio: 1 / 1;
        min-height: 0;
        padding: 2px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        font-size: clamp(0.6rem, 2.7vw, 0.95rem);
        line-height: 1.05;
        border-radius: clamp(4px, 1.6vw, 10px);
        overflow: hidden;
    }

    .calendar-day-header,
    .attendance-calendar__weekday {
        padding: 2px 0;
        font-size: clamp(0.55rem, 2.3vw, 0.8rem);
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
    }

    /* La barra de mes/año no puede tener ancho fijo */
    .calendar-month,
    .attendance-calendar__month {
        width: auto;
        min-width: 0;
        flex: 1 1 auto;
        font-size: var(--ap-fs-base);
        text-align: center;
        overflow-wrap: anywhere;
    }

    .calendar-header,
    .attendance-calendar__controls {
        gap: var(--ap-gap-sm);
        flex-wrap: wrap;
    }

    /* El indicador dentro de la celda se reduce a un punto */
    .attendance-calendar__badge {
        padding: 0 4px;
        font-size: clamp(0.5rem, 2.2vw, 0.72rem);
        line-height: 1.2;
    }

    /* Selector de rango de fechas: un mes por vez, ancho de pantalla */
    .drp-calendars {
        grid-template-columns: 1fr;
    }

    .drp-dropdown {
        width: min(96vw, 380px);
        max-width: 96vw;
        box-sizing: border-box;
    }
}

@media (max-width: 360px) {

    /* A este ancho la etiqueta del día se reduce a su inicial */
    .calendar-day-header,
    .attendance-calendar__weekday {
        font-size: 0.55rem;
        letter-spacing: -0.02em;
    }

    .calendar-cell,
    .attendance-calendar__day,
    .attendance-calendar__cell {
        padding: 1px;
        border-radius: 4px;
    }
}

/* ============================================================================
   12. OBJETIVOS TÁCTILES
   ----------------------------------------------------------------------------
   Con el dedo hace falta cerca de 40px. Varios controles del sistema eran
   texto suelto de 16 a 22px de alto: se podían ver pero no tocar sin errarle
   al de al lado. Se agranda el área sensible sin cambiar cómo se ven.
   ========================================================================== */

@media (hover: none) and (max-width: 820px), (pointer: coarse) and (max-width: 820px) {

    .alert-card__dismiss,
    .alert-card__action,
    .btn-link,
    .link-button {
        min-height: 34px;
        padding-top: 6px;
        padding-bottom: 6px;
        display: inline-flex;
        align-items: center;
    }

    /* Cerrar modal / quitar chip: cuadrado de 40px */
    .close-modal,
    [data-cerrar-modal] {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /*
     * Una casilla de 16px es imposible de tocar; su etiqueta sí.
     * Ojo: acá NO se toca `display`. Varias páginas arman su etiqueta como
     * grilla (la lista de tareas de Capacitación, por ejemplo); pisarla con
     * inline-flex le sacaba el ancho a la columna del texto y cada tarea
     * terminaba envolviendo una letra por renglón.
     */
    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]) {
        min-height: 38px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 18px;
        height: 18px;
        flex: none;
    }
}

/* ============================================================================
   13. IMPRESIÓN — que una hoja A4 no salga cortada
   ========================================================================== */

@media print {

    html,
    body {
        overflow: visible !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
}

/* ============================================================================
   14. CARRITO Y PANELES MODALES — GARANTÍA PARA PANTALLAS CHICAS
   ----------------------------------------------------------------------------
   Garantiza que ningún panel modal ni barra fija tape el contenido en
   dispositivos chicos (iPhone SE, 320px y menores hasta 190px).
   ========================================================================== */

@media (max-width: 720px), (max-height: 700px) {

    .t-cart-panel {
        padding: 0 !important;
    }

    .t-cart-panel__drawer {
        width: 100% !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .t-cart-panel__scroll {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* La barra fija inferior nunca puede superar 65px de alto en móvil */
    .t-cart-panel__actions {
        flex-shrink: 0 !important;
        max-height: 68px !important;
        box-sizing: border-box !important;
    }

    .t-checkout__fields input:not([type="radio"]):not([type="checkbox"]),
    .t-checkout__fields select,
    .t-checkout__fields textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .t-checkout__radios input[type="radio"],
    .t-checkout__radios input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        flex: 0 0 18px !important;
        margin: 0 !important;
    }

    .t-checkout__radios label span {
        white-space: nowrap !important;
        flex: none !important;
        width: auto !important;
    }
}

@media (max-width: 320px) {
    .t-logo__text {
        font-size: 0.98rem !important;
    }

    /* El burger caía solo a un segundo renglón. La fila logo + acciones +
       hamburguesa pedía 303.8px contra los 300 útiles del header (padding
       8px 10px), o sea se pasaba por menos de 4px. Se recortan las
       separaciones y NO los botones: el objetivo táctil de 36px se mantiene,
       que en el celular es lo que importa (ver la nota de tienda.css). */
    .t-header__bar {
        padding: 8px 10px 10px !important;
        gap: 4px !important;
    }

    .t-header__actions {
        gap: 2px !important;
    }

    .t-icon-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .t-cart-bar {
        gap: 6px !important;
    }
}