/* © 2026 KoreStock Ledger — un proyecto de Kitsótaro · Código disponible, todos los derechos reservados (ver LICENSE).
 * BASE.CSS — fuentes, reinicio, tipografía por rol y utilidades. Los componentes viven en
 * css/componentes/ (uno por archivo) y las pantallas en css/pantallas/ (R1).
 */
/* Inter (textos) y JetBrains Mono (cifras de detalle), fase UI 2026-10-23. */
@font-face {
  font-family: 'Inter';
  src: url('../lib/fuentes/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../lib/fuentes/JetBrainsMono.ttf') format('truetype');
  font-weight: 100 800;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-md);
  line-height: var(--interlineado);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--primario); text-underline-offset: 2px; }
h1, h2, h3, h4, p { margin: 0; }
h1 { font-size: var(--t-2xl); font-weight: var(--peso-titulo); letter-spacing: -0.01em; line-height: 1.25; }
h2 { font-size: var(--t-xl); font-weight: var(--peso-fuerte); line-height: 1.3; }
h3 { font-size: var(--t-lg); font-weight: var(--peso-fuerte); line-height: 1.35; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2.5px solid var(--foco); outline-offset: 2px; border-radius: var(--r-xs); }
::selection { background: var(--primario-suave); color: var(--sobre-primario-suave); }

/* Roles de texto */
.t-pequeno { font-size: var(--t-sm); }
.t-mini { font-size: var(--t-xs); }
.t-grande { font-size: var(--t-lg); }
.t-tenue { color: var(--texto-3); }
.t-secundario { color: var(--texto-2); }
.t-fuerte { font-weight: var(--peso-fuerte); }
.t-mono, .cifra { font-family: var(--fuente-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.t-exito { color: var(--exito); } .t-aviso { color: var(--aviso); } .t-peligro { color: var(--peligro); }
.t-derecha { text-align: right; }

/* Utilidades */
.oculto, [hidden] { display: none !important; }
.solo-lector {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.fila { display: flex; align-items: center; gap: var(--e-3); }
.fila-separada { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.columna { display: flex; flex-direction: column; gap: var(--e-3); }
.crece { flex: 1 1 auto; min-width: 0; }
.envolver { flex-wrap: wrap; }
.recortar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.separador { height: 1px; background: var(--borde); border: 0; margin: var(--e-4) 0; }

/* Modos (D10): un elemento marcado solo-modo aparece únicamente en esos modos. */
body[data-modo="bodega"] [data-solo-modo]:not([data-solo-modo~="bodega"]) { display: none !important; }
body[data-modo="tienda"] [data-solo-modo]:not([data-solo-modo~="tienda"]) { display: none !important; }
body[data-modo="pro"] [data-solo-modo]:not([data-solo-modo~="pro"]) { display: none !important; }