/* ============================================================================
   ZIBA · base.css
   Reset, tipografía base y utilidades de layout.
   Cargar DESPUÉS de tokens.css y ANTES de componentes.css.

   UTILIDADES DISPONIBLES (usalas en vez de escribir CSS nuevo):
     Layout:   .fila .fila--centro .fila--entre .fila--fin .fila--envuelve
               .pila .pila--2 .pila--4 .pila--6
               .grilla .grilla--2 .grilla--3 .grilla--4 .grilla--auto
               .crece .no-crece .ancho-total
     Texto:    .t-micro .t-mini .t-sm .t-md .t-lg .t-xl .t-2xl .t-3xl
               .t-serif .t-medio .t-fuerte
               .t-1 .t-2 .t-3 .t-acento .t-ok .t-aviso .t-peligro .t-info
               .rotulo  (versalita dorada)   .num  (cifras alineadas)
               .truncar  .truncar-2  .centrado  .derecha
     Espacio:  .mt-1..6 .mb-1..6 .mt-auto  .sin-margen
     Otros:    .sr-solo  .oculto  .separador  .clickeable
               .solo-tactil .solo-escritorio .solo-movil .no-movil
   ========================================================================== */

/* ───────────────────────────── RESET ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  font-size: var(--fs-base);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  min-height: 100%;
  font-family: var(--ff-sans);
  font-size: var(--ts-base);
  line-height: var(--lh-cuerpo);
  letter-spacing: var(--ls-cuerpo);
  color: var(--txt-1);
  background-color: var(--fondo);
  background-image: var(--fondo-velo);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

/* Bloquea el scroll del fondo cuando hay modal/hoja abierta. */
body.zb-sin-scroll { overflow: hidden; }

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

svg { fill: none; stroke: currentColor; }

button, input, select, textarea, optgroup {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button[disabled], input[disabled], select[disabled], textarea[disabled] {
  cursor: not-allowed;
}

a {
  color: var(--acento);
  text-decoration-color: var(--linea-fuerte);
  text-underline-offset: .18em;
}
a:hover { color: var(--acento-hover); }

ul, ol { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; width: 100%; }

hr { border: none; border-top: 1px solid var(--linea-suave); }

[hidden] { display: none !important; }

/* ─────────────────────────── TIPOGRAFÍA ─────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--ff-serif);
  font-weight: var(--peso-normal);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  color: var(--txt-1);
}
h1 { font-size: var(--ts-2xl); line-height: var(--lh-apretado); }
h2 { font-size: var(--ts-xl); }
h3 { font-size: var(--ts-lg); }
h4 { font-size: var(--ts-md); font-family: var(--ff-sans); font-weight: var(--peso-medio); }

p { max-width: var(--ancho-lectura); }

small { font-size: var(--ts-mini); color: var(--txt-3); }

strong, b { font-weight: var(--peso-medio); color: var(--txt-1); }

code, kbd { font-family: var(--ff-num); font-size: .92em; }

kbd {
  padding: 2px 6px;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background: var(--sup-2);
  color: var(--txt-2);
  font-size: var(--ts-mini);
}

::selection { background: var(--acento-tenue); color: var(--txt-1); }

::placeholder { color: var(--txt-3); opacity: 1; }

/* ─────────────────────────── FOCO VISIBLE ───────────────────────────
   Requisito duro: la caja se maneja con teclado. El foco SIEMPRE se ve. */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* En elementos que ya tienen fondo propio, el anillo va por sombra. */
.btn:focus-visible,
.campo__control:focus-visible,
.chip:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  box-shadow: var(--sombra-foco);
}

/* Enlace para saltar al contenido (teclado / lector de pantalla). */
.saltar-a-contenido {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: var(--z-bloqueo);
  padding: var(--sp-3) var(--sp-5);
  background: var(--acento-fuerte);
  color: var(--acento-txt);
  border-radius: var(--r-full);
  font-size: var(--ts-sm);
  font-weight: var(--peso-medio);
  transition: top var(--mv-normal) var(--mv-curva);
}
.saltar-a-contenido:focus { top: var(--sp-4); }

/* ─────────────────────────── SCROLLBARS ─────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--linea);
  border-radius: var(--r-full);
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--linea-fuerte); background-clip: content-box; }

/* Scroll con inercia en iPad. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ─────────────────────────── LAYOUT ─────────────────────────── */
.fila { display: flex; align-items: center; gap: var(--sp-3); }
.fila--arriba { align-items: flex-start; }
.fila--base { align-items: baseline; }
.fila--centro { justify-content: center; }
.fila--entre { justify-content: space-between; }
.fila--fin { justify-content: flex-end; }
.fila--envuelve { flex-wrap: wrap; }

.pila { display: flex; flex-direction: column; gap: var(--sp-3); }
.pila--1 { gap: var(--sp-1); }
.pila--2 { gap: var(--sp-2); }
.pila--4 { gap: var(--sp-4); }
.pila--5 { gap: var(--sp-5); }
.pila--6 { gap: var(--sp-6); }

.grilla { display: grid; gap: var(--sp-4); }
.grilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grilla--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grilla--auto-ancha { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

@media (max-width: 900px) {
  .grilla--3, .grilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .grilla--2, .grilla--3, .grilla--4 { grid-template-columns: minmax(0, 1fr); }
  .grilla--auto, .grilla--auto-ancha { grid-template-columns: minmax(0, 1fr); }
}

.crece { flex: 1 1 auto; min-width: 0; }
.no-crece { flex: 0 0 auto; }
.ancho-total { width: 100%; }
.alto-total { height: 100%; }

/* ─────────────────────────── TEXTO ─────────────────────────── */
.t-micro { font-size: var(--ts-micro); }
.t-mini  { font-size: var(--ts-mini); }
.t-sm    { font-size: var(--ts-sm); }
.t-base  { font-size: var(--ts-base); }
.t-md    { font-size: var(--ts-md); }
.t-lg    { font-size: var(--ts-lg); }
.t-xl    { font-size: var(--ts-xl); }
.t-2xl   { font-size: var(--ts-2xl); }
.t-3xl   { font-size: var(--ts-3xl); }

.t-serif { font-family: var(--ff-serif); font-weight: var(--peso-normal); letter-spacing: var(--ls-titulo); }
.t-medio { font-weight: var(--peso-medio); }
.t-fuerte { font-weight: var(--peso-fuerte); }
.t-normal { font-weight: var(--peso-normal); }

.t-1 { color: var(--txt-1); }
.t-2 { color: var(--txt-2); }
.t-3 { color: var(--txt-3); }
.t-acento  { color: var(--acento); }
.t-ok      { color: var(--ok); }
.t-aviso   { color: var(--aviso); }
.t-peligro { color: var(--peligro); }
.t-info    { color: var(--info); }

/* Versalita dorada: encabeza secciones y bloques de dato. */
.rotulo {
  font-family: var(--ff-sans);
  font-size: var(--ts-micro);
  font-weight: var(--peso-medio);
  letter-spacing: var(--ls-rotulo);
  text-transform: uppercase;
  color: var(--acento);
  line-height: 1.4;
}
.rotulo--apagado { color: var(--txt-3); }

/* Toda cifra que se compare en columna lleva .num */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Plata: siempre serif + tabular. Se genera con ui.plata() */
.moneda {
  font-family: var(--ff-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
}
.moneda--negativa { color: var(--peligro); }
.moneda--positiva { color: var(--ok); }

.truncar {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.truncar-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.centrado { text-align: center; }
.derecha { text-align: right; }
.izquierda { text-align: left; }
.mayus { text-transform: uppercase; letter-spacing: .08em; }
.sin-ajuste { white-space: nowrap; }

/* ─────────────────────────── ESPACIADO ─────────────────────────── */
.mt-1 { margin-top: var(--sp-1); }  .mb-1 { margin-bottom: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }  .mb-2 { margin-bottom: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }  .mb-3 { margin-bottom: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }  .mb-4 { margin-bottom: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }  .mb-5 { margin-bottom: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }  .mb-6 { margin-bottom: var(--sp-6); }
.mt-auto { margin-top: auto; }
.sin-margen { margin: 0; }

.separador {
  height: 1px;
  background: var(--linea-suave);
  border: none;
  margin: var(--sp-4) 0;
}
.separador--fuerte { background: var(--linea); }
.separador--punteado { height: 0; border-top: 1px dashed var(--linea); background: none; }

/* ─────────────────────────── VARIOS ─────────────────────────── */
.sr-solo {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.oculto { display: none !important; }

.clickeable { cursor: pointer; }

.sin-seleccion { user-select: none; -webkit-user-select: none; }

/* Visibilidad por contexto de uso. */
.solo-tactil { display: none; }
:root[data-densidad="tactil"] .solo-tactil { display: revert; }
:root[data-densidad="tactil"] .no-tactil { display: none !important; }

@media (max-width: 1023px) { .no-movil { display: none !important; } }
@media (min-width: 1024px) { .solo-movil { display: none !important; } }

@media (hover: none) { .solo-escritorio { display: none !important; } }

/* Animaciones compartidas — las usan modal, toast, tarjetas. */
@keyframes zb-aparecer { from { opacity: 0 } to { opacity: 1 } }
@keyframes zb-subir { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes zb-subir-hoja { from { transform: translateY(100%) } to { transform: none } }
@keyframes zb-temblar {
  0%, 100% { transform: translateX(0) }
  25% { transform: translateX(-7px) }
  75% { transform: translateX(7px) }
}
@keyframes zb-girar { to { transform: rotate(360deg) } }
@keyframes zb-brillo { to { background-position-x: -200% } }
@keyframes zb-pulso { 50% { opacity: .45 } }

.anim-entrada { animation: zb-subir var(--mv-lento) var(--mv-entrada) both; }

/* ─────────────────────────── IMPRESIÓN ───────────────────────────
   Sin impresora en el local, pero el ticket y los reportes se exportan
   a PDF desde el navegador. */
@media print {
  :root { --fondo: #fff; --sup-1: #fff; --txt-1: #000; --txt-2: #333; --txt-3: #555; }
  body { background: #fff !important; color: #000 !important; }
  .zb-nav, .zb-navinf, .zb-cabecera, .zb-toasts, .no-imprimir { display: none !important; }
  .zb-vista { padding: 0 !important; }
  .tarjeta { border: 1px solid #ccc !important; box-shadow: none !important; break-inside: avoid; }
}