/* ==========================================================================
   gc-tablet.css — NORMA DE TABLETA (Blueprint v1)
   --------------------------------------------------------------------------
   Fredy, 21 sep 2026: el anestesiólogo trabaja desde un iPad y los
   formularios «se agrupan mucho». La causa es siempre la misma: las rejillas
   se declaran con `auto-fit` y un mínimo pensado para un portátil (160–220 px).
   En un iPad vertical el contenido mide ~740 px, así que caben tres o cuatro
   columnas de 180 px y la pantalla se vuelve una pared de campos diminutos.

   LA NORMA, en una línea: entre 640 y 1279 px, DOS columnas como máximo, y
   todo lo que se toca mide 44 px.

   Por qué un archivo aparte y no una regla en cada vista: las vistas llevan
   su CSS incrustado en el <body>, o sea DESPUÉS de este archivo. El prefijo
   `body` sube la especificidad lo justo para ganarles sin un solo
   `!important`. Y así la norma se arregla en un sitio, no en cuarenta.

   CÓMO SE AGREGA UNA PANTALLA NUEVA: no se agrega. Las rejillas nuevas usan
   `gc-form-grid` ([[02-formularios]]) y ya quedan cubiertas. La lista de
   abajo es de namespaces LEGACY y está cerrada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Rejillas de formulario: máximo dos columnas en tableta
   -------------------------------------------------------------------------- */
@media (min-width: 640px) and (max-width: 1279px) {

    body .gc-form-grid,
    /* — legacy, lista cerrada — */
    body .an-grid,              /* nota de anestesia            */
    body .pa-grid,              /* valoración preanestésica     */
    body .hcv-iq-grid,          /* informe quirúrgico (drawer)  */
    body .hcv-vitals,
    body .hcv-lab-manual-fila,
    body .hcv-upload-grid,
    body .hcv-rips-grid,
    body .hcv-rips-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    /* Rejillas hechas con flex: la misma cuenta, dos por fila. */
    body .pv-rejilla > * {          /* visita posanestésica */
        flex: 1 1 calc(50% - 12px);
    }

    /* Lo que ya pedía fila completa la conserva. */
    body .gc-form-field--full,
    body .hcv-iq-campo--todo {
        grid-column: 1 / -1;
    }

    /* Un textarea de 80 px en una pantalla de 10" invita a no escribir. */
    body .dashboard-content textarea {
        min-height: 110px;
    }
}

/* El iPad Pro de 12,9" horizontal mide 1366 px: ya no es «tableta» por ancho,
   pero se sigue tocando con el dedo. Ahí tres columnas holgadas, no cuatro
   estrechas. `pointer: coarse` es lo que distingue el dedo del ratón; un
   monitor de 1366 px con ratón conserva su rejilla de siempre. */
@media (pointer: coarse) and (min-width: 1280px) and (max-width: 1440px) {
    body .gc-form-grid,
    body .an-grid,
    body .pa-grid,
    body .hcv-iq-grid,
    body .hcv-vitals,
    body .hcv-lab-manual-fila,
    body .hcv-upload-grid,
    body .hcv-rips-grid,
    body .hcv-rips-kpi-row {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 14px;
    }
    body .pv-rejilla > * {
        flex: 1 1 300px;
    }
}

/* Por debajo de 640 px (teléfono) siempre una sola columna: dos columnas de
   150 px no son dos campos, son dos campos ilegibles. */
@media (max-width: 639px) {
    body .gc-form-grid,
    body .an-grid,
    body .pa-grid,
    body .hcv-iq-grid,
    body .hcv-vitals,
    body .hcv-lab-manual-fila,
    body .hcv-upload-grid,
    body .hcv-rips-grid,
    body .hcv-rips-kpi-row {
        grid-template-columns: minmax(0, 1fr);
    }
    body .pv-rejilla > * {
        flex: 1 1 100%;
    }
}

/* --------------------------------------------------------------------------
   2. Lo que se toca mide 44 px
   --------------------------------------------------------------------------
   `pointer: coarse` es el dedo —iPad, teléfono, pantalla táctil—, no el ancho:
   un iPad Pro horizontal mide 1366 px y se sigue tocando con el dedo.

   Y el tamaño de letra de los campos sube a 16 px porque Safari de iOS hace
   zoom automático sobre cualquier campo con letra menor al enfocarlo: el
   formulario salta, se descoloca y hay que volver a encuadrar a mano.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
    body .dashboard-wrapper input:not([type="checkbox"]):not([type="radio"]),
    body .dashboard-wrapper select,
    body .dashboard-wrapper textarea,
    body .gc-form-control {
        min-height: 44px;
        font-size: 16px;
    }

    body .dashboard-wrapper button,
    body .dashboard-wrapper .gc-btn,
    body .dashboard-wrapper .esc-btn,
    body .dashboard-wrapper .esc-fila__accion {
        min-height: 44px;
    }

    /* Una casilla de 13 px no se acierta con el dedo; el área de toque crece
       sin agrandar el dibujo. */
    body .dashboard-wrapper input[type="checkbox"],
    body .dashboard-wrapper input[type="radio"] {
        width: 20px;
        height: 20px;
    }

    /* Los enlaces de una fila de tabla quedan pegados y se toca el que no es. */
    body .dashboard-content td a + a {
        margin-left: 10px;
    }
}

/* --------------------------------------------------------------------------
   3. Tablas: en tableta NO se esconden columnas
   --------------------------------------------------------------------------
   Varias vistas ocultan columnas por debajo de 720 px. En un iPad vertical
   (768 px) no aplica y está bien: la tabla cabe. Lo que sí hace falta es que
   la que no quepa se pueda rodar en horizontal en vez de desbordar la página.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
    body .dashboard-content .pa-scroll,
    body .dashboard-content .pv-scroll,
    body .dashboard-content .gc-tabla-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}