/* ── Mercatoria — tipografía de marca ──────────────────────────────────────
   Manual de Identidad Visual (junio 2023):
   · Hubot Sans  → logotipo, titulares, textos cortos, botones, navegación.
   · Corbel      → textos explicativos. Fuente propietaria de Microsoft: no se
                   embebe; se usa si está instalada (Windows) y si no cae a
                   Hubot Sans. Ver tokens/typography.json (--fuente-base).
   Hubot Sans es OFL (GitHub) → servida desde static/fonts/ en WOFF2. */

@font-face { font-family: "Hubot Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/HubotSans-Light.woff2") format("woff2"); }
@font-face { font-family: "Hubot Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/HubotSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Hubot Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/HubotSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Hubot Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/HubotSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Hubot Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/HubotSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "Hubot Sans"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/HubotSans-Black.woff2") format("woff2"); }

/* Cifras alineadas y de ancho fijo en toda la web: Corbel trae cifras
   "antiguas" (3, 4, 7, 9 bajan de la línea) que distorsionan importes y fechas. */
html, body, input, select, textarea, button {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

/* Jerarquía tipográfica: titulares y controles en Hubot Sans, párrafos en Corbel */
h1, h2, h3, h4, h5, h6,
.eyebrow, .brand-name, .page-header h1, .panel-header h2, .modal-title,
button, .btn, .btn-crud-primary, .btn-crud-secondary, .btn-cancelar-modal,
.nav-item, .nav-group-header, .kpi-card strong, .data-table th, .badge,
.badge-cat, .estado-pill, .pill-filtro, .config-tab, label {
    font-family: var(--fuente-titulos);
}

/* Imagotipo: cuatro barras que cierran un cuadrado (arriba/derecha naranja,
   izquierda/abajo amarillo). Se usa como <svg class="logo-mercatoria">. */
.logo-mercatoria { display: block; flex-shrink: 0; }
.logo-mercatoria .barra-naranja { fill: var(--naranja); }
.logo-mercatoria .barra-amarilla { fill: var(--amarillo); }
.logo-mercatoria.sobre-oscuro .barra-naranja,
.logo-mercatoria.sobre-oscuro .barra-amarilla { fill: #fff; }

.marca {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--texto);
}
.marca-nombre {
    font-family: var(--fuente-titulos);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: inherit;
    line-height: 1;
}
.marca-generico {
    display: block;
    font-family: var(--fuente-base);
    font-size: 9px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--naranja);
    margin-top: 3px;
}