/*
 * 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: 15px;
    line-height: 22px;
    font-weight: 400;
}

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

h1 { font-size: 24px; line-height: 32px; font-weight: 700; }
h2 { font-size: 19px; line-height: 28px; }
h3 { font-size: 16px; line-height: 24px; }

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: 32px;
    line-height: 40px;
    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: 14px;
    line-height: 20px;
}

.label {
    font-size: 13px;
    line-height: 18px;
    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: 12px;
    line-height: 16px;
    color: var(--n-500);
}

.overline {
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
}

/*
 * 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: 20px;
    font-weight: 700;
    color: var(--n-900);
    font-variant-numeric: tabular-nums;
}

/*
 * 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%;
}

/* Foco visible obligatorio (Lineamiento §10). Está prohibido `outline: none`
 * sin un reemplazo equivalente. */
:focus-visible {
    outline: 3px 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: 14px;
    line-height: 20px;
    font-weight: 400;
}