/* ═══ PORTAL TYPE — tipografía y escala tomadas 1:1 de CrediCR ═══
   Fuente: credicr-src (index.html + App.jsx + components/UI.jsx et al.)
   Solo tipografía: los colores y layout de YOKA no viven acá. */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root{
  --font-sans:'IBM Plex Sans',system-ui,sans-serif;   /* theme.js t.sans */
  --font-mono:'IBM Plex Mono',monospace;              /* theme.js t.mono */
  --font-display:'Anton',Impact,sans-serif;           /* titulares display (heros, cifras grandes, marca) */

  /* Escala real de CrediCR (px por rol) */
  --fs-menu-label:9px;    /* label de sección del sidebar ("MENÚ"), ls .08em */
  --fs-topbar:10px;       /* metadatos de topbar, mono */
  --fs-label:10px;        /* labels chicos uppercase (KPI label, th, ls .04-.08em) */
  --fs-label-lg:11px;     /* labels de formulario uppercase, subs de KPI */
  --fs-badge:11px;        /* badges, mono w500 */
  --fs-table:12px;        /* celdas de tabla (mono para cifras) */
  --fs-body-sm:12px;      /* texto secundario de cards, tabs, botones chicos */
  --fs-body:13px;         /* texto general, sidebar items, toasts */
  --fs-input:14px;        /* inputs y selects */
  --fs-btn:14px;          /* botón primario/secundario, w600 */
  --fs-card-title:16px;   /* título de card/modal, w600 */
  --fs-card-title-lg:17px;/* nombre destacado en listados, w700 */
  --fs-page-title:18px;   /* título de página / h1 / saludo, w600 */
  --fs-kpi:20px;          /* número mono chico (.t-num) */
  --fs-kpi-lg:24px;       /* KPI grande, mono */
  --fs-brand:22px;        /* marca en login, w700 */

  /* Roles compartidos portal ↔ panel: valores del portal renderizado (8-sep-2026). Las dos páginas los consumen;
     ninguna repite estos números a mano. */
  --fs-display-hero:36px;  --ls-display-hero:.14em;                  /* título display del hero de vista, Anton 400 */
  --fs-display-card:24px;  --ls-display-card:.04em;                  /* titular display en card de arte */
  --fs-display-thumb:clamp(17px,1.4vw,22px); --ls-display-thumb:.02em; /* título sobre miniatura de video (.bb-ttl) */
  --fs-kicker:10px;    --fw-kicker:800;    --ls-kicker:.22em;        /* eyebrow/kicker uppercase sobre el título (.in-label) */
  --fs-kpi-label:9px;  --fw-kpi-label:700; --ls-kpi-label:.14em;     /* label de KPI (.in-kpi-lbl) */
  --fw-kpi:600;        --ls-kpi:-.01em;                              /* número KPI mono (.in-kpi-num), tamaño --fs-kpi-lg */
  --fs-btn-primary:13px; --fw-btn-primary:700;                       /* botón primario (.in-btn-red) */
  --fs-th:9px;         --fw-th:800;        --ls-th:.14em;            /* cabecera de tabla o listado (.rv-th, .pg-th, th) */
  --ls-menu-label:2px;                                               /* label de grupo del sidebar (.sb-group) */
}

/* Reglas base compartidas (solo tipografía) */
html,body{font-family:var(--font-sans)}
body{font-size:var(--fs-body)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-sans)}
input,select,textarea{font-family:var(--font-sans);font-size:var(--fs-input)}
button{font-family:var(--font-sans);font-size:var(--fs-btn);font-weight:600}
table{font-family:var(--font-mono);font-size:var(--fs-table)}
th{font-family:var(--font-sans);font-size:var(--fs-th);font-weight:var(--fw-th);text-transform:uppercase;letter-spacing:var(--ls-th)}