/*
 * Tokens de tamaño del portal: tipografía, alto de controles y áreas de toque.
 *
 * En escritorio valen EXACTAMENTE lo que valían los px fijos: `var(--sabio-fs-12, 12px)` = 12px.
 * Con pantalla táctil (pointer: coarse) cambian:
 *   - La letra de 8 a 14px crece con el ancho: +0 en 320px (iPhone SE 1ª, Android viejo,
 *     donde no sobra lugar) hasta +1.5px desde ~410px (teléfonos grandes, tablets).
 *     Nada baja de 10px.
 *   - Inputs, selects y date pickers suben a 36/40/44px; en el teléfono el valor va a 16px
 *     (con menos, iOS hace zoom al enfocar).
 *   - Botones solo ícono (acciones de fila) y botones con texto: mínimo que se toca con el dedo.
 *
 * Los componentes usan siempre el var con el px de escritorio como fallback.
 * Ajustar ACÁ, no en cada componente. Cortes de ancho: Tools/SabioBreakpoints.cs.
 * La variante para JS/C#: SabioFormMetrics (AltoCss, LetraCss, EtiquetaCss).
 */
:root {
    /* Crecimiento de la letra chica: 0 en escritorio. */
    --sabio-fs-grow: 0px;
    /* Piso de legibilidad: 0 en escritorio (no cambia nada). */
    --sabio-fs-min: 0px;

    --sabio-fs-8: max(var(--sabio-fs-min), calc(8px + var(--sabio-fs-grow)));
    --sabio-fs-9: max(var(--sabio-fs-min), calc(9px + var(--sabio-fs-grow)));
    --sabio-fs-9-5: max(var(--sabio-fs-min), calc(9.5px + var(--sabio-fs-grow)));
    --sabio-fs-10: calc(10px + var(--sabio-fs-grow));
    --sabio-fs-10-5: calc(10.5px + var(--sabio-fs-grow));
    --sabio-fs-11: calc(11px + var(--sabio-fs-grow));
    --sabio-fs-11-5: calc(11.5px + var(--sabio-fs-grow));
    --sabio-fs-12: calc(12px + var(--sabio-fs-grow));
    --sabio-fs-12-5: calc(12.5px + var(--sabio-fs-grow));
    --sabio-fs-13: calc(13px + var(--sabio-fs-grow));
    --sabio-fs-13-5: calc(13.5px + var(--sabio-fs-grow));
    --sabio-fs-14: calc(14px + var(--sabio-fs-grow));
    /* De 15 en adelante ya se lee: no crece. Existe para ajustar desde acá si hace falta. */
    --sabio-fs-15: 15px;
    --sabio-fs-16: 16px;

    /* Controles de formulario (SabioFormMetrics Small / Medium / Large).
       Letra del valor en escritorio: 12/13/14. Con 11px (el diseño original) un CUIT o un
       importe largo se leía mal; hasta sep-2026 nadie lo vio porque output.css estaba viejo y
       forzaba 16px en todos lados. */
    --sabio-ctl-h-sm: 28px;
    --sabio-ctl-h-md: 32px;
    --sabio-ctl-h-lg: 38px;
    --sabio-ctl-fs-sm: 12px;
    --sabio-ctl-fs-md: 13px;
    --sabio-ctl-fs-lg: 14px;
    --sabio-ctl-label-sm: calc(12px + var(--sabio-fs-grow));
    --sabio-ctl-label-md: calc(12px + var(--sabio-fs-grow));
    --sabio-ctl-label-lg: calc(13px + var(--sabio-fs-grow));

    /* Botón solo ícono (SabioButton IconOnly, paginación de SabioGrilla). */
    --sabio-tap-sm: 28px;
    --sabio-tap: 32px;
    --sabio-tap-lg: 36px;

    /* Alto mínimo de un botón con texto: 0 = el que le da el padding. */
    --sabio-btn-min-h-sm: 0px;
    --sabio-btn-min-h: 0px;
    --sabio-btn-min-h-lg: 0px;

    /* Alto de pantalla: usar var(--sabio-vh, 100vh) en vez de 100vh. En el celular 100vh
       incluye la barra del navegador y lo que va abajo queda tapado; dvh es lo visible. */
    --sabio-vh: 100vh;

    /* Zonas seguras (notch, isla, barra de gestos). Sólo valen algo con viewport-fit=cover
       (index.html) en un teléfono; en escritorio son 0. Para headers/footers fijos y sheets. */
    --sabio-safe-top: env(safe-area-inset-top, 0px);
    --sabio-safe-bottom: env(safe-area-inset-bottom, 0px);
    --sabio-safe-left: env(safe-area-inset-left, 0px);
    --sabio-safe-right: env(safe-area-inset-right, 0px);
}

@supports (height: 100dvh) {
    :root {
        --sabio-vh: 100dvh;
    }
}

/* Pantalla táctil: teléfono, tablet, MAUI. Un mouse en una notebook táctil sigue siendo "fine". */
@media (pointer: coarse) {
    :root {
        --sabio-fs-grow: clamp(0px, (100vw - 320px) / 60, 1.5px);
        --sabio-fs-min: 10px;

        --sabio-ctl-h-sm: 36px;
        --sabio-ctl-h-md: 40px;
        --sabio-ctl-h-lg: 44px;
        --sabio-ctl-fs-sm: 13px;
        --sabio-ctl-fs-md: 14px;
        --sabio-ctl-fs-lg: 15px;

        --sabio-tap-sm: 36px;
        --sabio-tap: 40px;
        --sabio-tap-lg: 44px;

        --sabio-btn-min-h-sm: 36px;
        --sabio-btn-min-h: 40px;
        --sabio-btn-min-h-lg: 44px;
    }
}

/* El viewport ya no bloquea el zoom (index.html). Pinch sí; doble toque no, así un toque
   rápido en un botón no agranda la pantalla ni espera los 300ms del doble toque. */
html {
    touch-action: manipulation;
}

/* Teléfono táctil: el valor del campo a 16px para que iOS no haga zoom al enfocar. */
@media (pointer: coarse) and (max-width: 767.98px) {
    :root {
        --sabio-ctl-fs-md: 16px;
        --sabio-ctl-fs-lg: 16px;
    }
}

/* Modo liviano: lo pone index.html en equipos de 2 GB o menos o con ahorro de datos. El desenfoque de fondo es lo más caro para una GPU chica; sin él los
   paneles quedan con su color semitransparente, que se sigue leyendo. */
html.sabio-liviano *,
html.sabio-liviano *::before,
html.sabio-liviano *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* "Reducir movimiento" del sistema: sin transiciones ni scroll animado. Las animaciones
   (spinners, skeletons) quedan: indican que algo está cargando. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}