/*
 * Gestor Comercial — reinicio y tipografía base.
 * Lineamiento Gráfico §4 y §12.
 *
 * Las dos familias se autoalojan en `assets/fonts/`. No se cargan desde un CDN:
 * la política de seguridad de contenido no admite orígenes externos, y una
 * fuente servida por un tercero le filtra la IP de cada vendedor a ese tercero.
 *
 * Son fuentes **variables**: un solo archivo por familia y subconjunto cubre
 * todos los pesos. Por eso hay cuatro archivos y no catorce. El rango de
 * `font-weight` que se declara acá no es decorativo: limita los pesos
 * utilizables a los que fija el Lineamiento (Montserrat 300–700, Archivo
 * 400–600). Un peso fuera de rango se sintetiza y se ve mal, que es
 * exactamente la señal que queremos.
 *
 * `unicode-range` hace que el navegador baje el subconjunto extendido solo si
 * la página lo necesita. En castellano, casi nunca.
 */

@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/montserrat-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Montserrat;
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: Archivo;
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: Archivo;
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background-color: var(--n-100);
    color: var(--n-700);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: 400;
}

h1, h2, h3, h4 {
    margin: 0;
    color: var(--n-900);
    font-weight: 600;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }

p {
    margin: 0 0 var(--sp-3);
}

a {
    color: var(--info);
    text-decoration: underline;
}

/* ── Escala tipográfica (Lineamiento §4) ────────────────────────────────── */
/*
 * Los seis niveles que no son encabezado se declaran como clases. El mínimo
 * absoluto es 12 px; el único que baja de ahí es Overline, que lo compensa con
 * peso 700 y mayúsculas.
 */

.display {
    font-size: var(--fs-display);
    line-height: var(--lh-display);
    font-weight: 700;
    color: var(--n-900);
}

/* Cifras y dinero: Archivo con cifras tabulares, para que las columnas de
 * importes cuadren verticalmente (Lineamiento §4). */
.numeric {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    text-align: right;
    /* Un importe no se parte nunca: en una columna angosta, «$ 1.732.500,00»
     * se cortaba después del signo y el símbolo de moneda quedaba solo en un
     * renglón. Además de feo, rompe la alineación tabular, que es lo único que
     * hace comparables dos cifras una debajo de la otra. */
    white-space: nowrap;
}

/* Datos densos: tablas y listados largos. Misma idea que `.numeric`, sin
 * forzar la alineación a la derecha. */
.body-dense {
    font-family: var(--font-data);
    font-size: var(--fs-body-dense);
    line-height: var(--lh-body-dense);
}

.label {
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--n-700);
}

/*
 * Caption: 12/16 en Montserrat (Lineamiento §4).
 *
 * La familia se declara y no se hereda a propósito. Dentro de una tabla —que va
 * en Archivo— el mismo cuerpo de 12 px se veía visiblemente más chico, porque
 * Archivo tiene menos altura de x: las líneas de contexto de la auditoría
 * (`store: CC`, `remember: no`) parecían texto de 10 px y quedaban por debajo
 * del mínimo legible que fija el propio Lineamiento.
 */
.caption {
    font-family: var(--font-ui);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    color: var(--n-500);
}

/* Ayuda recortada a dos renglones, con el texto entero en el `title`. Es para
 * las celdas de tabla, donde una explicación larga estira la fila y separa
 * entre sí los datos que hay que comparar. */
.caption--clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/*
 * El rótulo de una tarjeta, de un grupo de la navegación o de una etiqueta de
 * estado.
 *
 * El Lineamiento §4 lo define en 11 px, peso 700, interletrado ancho y
 * mayúsculas. La adenda «Modernización de paleta y estética», aprobada el
 * 20/10/2026, pide en su punto 6 «menor uso de mayúsculas innecesarias»: una
 * palabra en versalita apretada se lee como una sigla y obliga a deletrearla.
 * Pasa a 12 px, peso 600 y caja normal, con lo que además deja de estar por
 * debajo del mínimo de 12 px que el propio Lineamiento §4 fija para cualquier
 * texto de pantalla.
 *
 * La única excepción es el encabezado de tabla (`.data-table th`), que conserva
 * las mayúsculas: en una grilla densa son lo que separa el rótulo del dato. El
 * resto de las recetas sueltas que copiaban esta forma —el código de la pantalla
 * de error, el chip de etiqueta— se alinearon con esta.
 */
.overline {
    font-size: var(--fs-overline);
    line-height: var(--lh-overline);
    font-weight: 600;
    letter-spacing: .02em;
}

/*
 * El importe manda sobre todo lo demás de su bloque (Lineamiento §4). Nunca se
 * abrevia: no existe «$ 1,2 M» en ninguna pantalla operativa, porque el
 * redondeo visual es una fuente de error en un sistema cuya segunda prioridad
 * es la exactitud de precios.
 */
.amount {
    font-family: var(--font-ui);
    font-size: var(--fs-amount);
    font-weight: 700;
    color: var(--n-900);
    font-variant-numeric: tabular-nums;
    /*
     * Un importe no se parte en dos renglones. El espacio que separa el símbolo
     * de la cifra es un espacio, y en una columna angosta el navegador cortaba
     * ahí: «$» arriba y «1.290.000,00» abajo. Además de feo, invita a leer mal.
     */
    white-space: nowrap;
}

/*
 * Ninguna imagen puede ser más ancha que lo que la contiene.
 *
 * Es una red de seguridad, no la forma de dimensionar una foto: cada imagen
 * tiene su clase con su recuadro y su recorte. Existe porque una foto de
 * catálogo mide 1200 px y el día que la regla de su clase no llegue —una clase
 * mal escrita, una hoja de estilos vieja guardada en el navegador— la imagen
 * se dibujaría a tamaño natural y se llevaría puesta la pantalla. Con esto, en
 * el peor caso queda grande; nunca rompe el ancho de la columna.
 */
img,
svg {
    max-width: 100%;
}

/*
 * `hidden` es un atributo, no una sugerencia.
 *
 * El navegador lo aplica con `display: none`, pero desde su propia hoja de
 * estilos, que pierde contra cualquier regla nuestra de igual especificidad.
 * `.button` declara `display: inline-flex`, así que un `<button hidden>` se
 * seguía viendo: es exactamente lo que le pasaba al botón de compartir, que
 * nace oculto para revelarse solo donde el navegador sabe adjuntar archivos y
 * en la práctica se mostraba siempre, incluso donde al tocarlo no podía hacer
 * nada. `!important` acá no es un parche: nada debería poder contradecir a
 * `hidden`.
 */
[hidden] {
    display: none !important;
}

/* Foco visible obligatorio (Lineamiento §10). Está prohibido `outline: none`
 * sin un reemplazo equivalente. */
:focus-visible {
    outline: var(--bw-3) solid var(--focus);
    outline-offset: 2px;
    border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Solo para lectores de pantalla. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/*
 * El mismo importe en una tabla de veinte filas no puede pesar 20 px: la
 * columna se lee de arriba abajo y lo que importa es que las cifras cuadren
 * verticalmente, no que griten. Archivo con `tabular-nums` (Lineamiento §4).
 */
.amount--dense {
    font-family: var(--font-data);
    font-size: var(--fs-body-dense);
    line-height: var(--lh-body-dense);
    font-weight: 400;
}