@import url("piezas.css");
/* Base de los sistemas WianStark (núcleo): estilos comunes a todos los rubros. Botones, campos, teclas, ventanas, avisos,
   check de éxito, barra de estado, cobro (billetes y vuelto), comprobante, ticket de 80 mm con su impresión y ayuda de atajos.
   Cada sistema define sus tokens en :root (claro y oscuro) con estos nombres:
   --fondo --capa --capa-2 --linea --linea-2 --tinta --tinta-2 --tinta-3 --acento --acento-hondo --acento-suave --sobre-acento
   (opcionales: --alerta para errores y alertas si el acento no es rojo; --acento-texto para el texto de lo elegido)
   --bien --bien-suave --ambar --ambar-suave --marco --marco-2 --marco-linea --marco-tinta --marco-tinta-2 --papel --sombra --velo
   --r --r2 --t --letra --cifra. Opcional: --aviso-izq (dónde sale el aviso). Se carga ANTES de los estilos del rubro. */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; min-width: 1280px; background: var(--fondo); color: var(--tinta); font: 400 15px/1.45 var(--letra); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--r); }
h1, h2, h3, p { margin: 0; }
.estado { display: flex; align-items: center; gap: 22px; padding: 0 16px; background: var(--capa); border-top: 1px solid var(--linea); color: var(--tinta-3); font-size: 12.5px; white-space: nowrap; }
.estado .ok::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--bien); }
.estado .der { margin-left: auto; }
/* Pantallas de trabajo: página, cabecera, tarjetas y dos columnas */
/* Sin hueco reservado para la barra: rompe la simetría (barra fina de universal.css) */
.pagina { padding: 22px 24px; display: grid; gap: 18px; align-content: start; }
.cab { display: flex; align-items: baseline; gap: 18px; }
.cab h1 { font-size: 28px; font-weight: 600; line-height: 1.2; }
.cab p { color: var(--tinta-2); }
.tarjeta { display: grid; gap: 14px; align-content: start; padding: 20px; border: 1px solid var(--linea); border-radius: var(--r2); background: var(--capa); }
.tarjeta h2 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; }
.tarjeta.destacada { border-top: 3px solid var(--tinta); }
.dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }