/*
 * Tokens del design system — docs/07-UI-DESIGN-SYSTEM.md §2, ampliados por
 * docs/09-SHELL-Y-COMPONENTES.md y el Prototipo-dhZorzal-v3.
 *
 * Son el contrato visual del sistema. Ningún color, espaciado ni radio se
 * escribe a mano en otra hoja: si hace falta un valor que no está acá, primero
 * se agrega acá y se documenta.
 */

:root {
  /* superficies */
  --ink:      #12171B;   /* texto principal */
  --slate:    #1A222A;   /* sidebar, barras oscuras */
  --slate-2:  #242F38;   /* hover sobre oscuro */
  --slate-3:  #2E3B45;   /* flotantes sobre oscuro */
  --line:     #E1E5E4;   /* bordes */
  --line-2:   #EDEFEE;   /* bordes internos, más suaves */
  --paper:    #F6F7F6;   /* fondo de aplicación */
  --surface:  #FFFFFF;   /* tarjetas, tablas */
  --muted:    #6E7A82;   /* texto secundario */
  --muted-2:  #96A2A9;   /* texto terciario, íconos apagados */

  /* semántica — el color significa, no decora */
  --signal:      #0E6E52;  /* verde: confirmar, disponible */
  --signal-soft: #E6F1EC;
  --signal-line: #BCDCCC;
  --signal-dark: #0B5B44;
  --amber:       #B07A16;  /* ámbar: pendiente */
  --amber-soft:  #FCF2DE;
  --amber-line:  #E9D6AA;
  --amber-dark:  #8A5E10;
  --alert:       #B23B2A;  /* rojo: faltante, anulado */
  --alert-soft:  #FBEAE7;
  --alert-line:  #F0D0CA;
  --alert-dark:  #8E2E20;
  --info:        #1D5B8F;
  --info-soft:   #E8F0F7;

  /* tipografía */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* escala tipográfica: 11 · 12 · 13 · 15 · 17 · 21 · 26 · 34 */
  --t-11: 11px; --t-12: 12px; --t-13: 13px; --t-15: 15px;
  --t-17: 17px; --t-21: 21px; --t-26: 26px; --t-34: 34px;

  /* forma */
  --r-sm: 4px;  --r: 6px;  --r-lg: 10px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

  /* shell */
  --sb: 248px;          /* ancho del sidebar expandido */
  --sb-mini: 64px;      /* colapsado */
  --topbar: 48px;

  /* sombras: tres niveles, nada más */
  --sh-1: 0 1px 2px rgba(18, 23, 27, .06);
  --sh-2: 0 4px 14px rgba(18, 23, 27, .10);
  --sh-3: 0 16px 40px rgba(18, 23, 27, .18);
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 13.5px;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/*
 * Todos los íconos del sistema heredan estas reglas. Trazo 1.6 y sin relleno:
 * un solo estilo, según docs/09 §1.1.
 */
svg { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/*
 * Regla de las cifras: todo número —precio, cantidad, stock, saldo, código—
 * en mono tabular. Una columna de precios se lee de un vistazo y el sistema
 * parece un instrumento, no una planilla.
 */
.num, .cifra {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/*
 * Foco siempre visible. Prohibido outline:none sin reemplazo —
 * docs/07 §6: todo lo operable con mouse es operable con teclado.
 */
*:focus-visible { outline: 2px solid var(--signal); outline-offset: 1px; }

/* Texto solo para lectores de pantalla. */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==================================================================
 * RESPONSIVO — docs/07 §8. Piso obligatorio, no una capa opcional.
 *
 * El sistema se opera en tres lugares y hay que tenerlos a los tres en la
 * cabeza: el escritorio del depósito, la tablet del mostrador y el teléfono de
 * quien mira una existencia parado en la góndola.
 * ================================================================== */

/*
 * **Tres puntos de corte, y ningún otro.**
 *
 * Hasta el 2026-08-26 había cinco —640, 700, 900, 1024 y 1100— porque cada
 * pantalla eligió el suyo mirando dónde se le rompía. Cinco valores parecidos
 * no son un sistema: son cinco decisiones sueltas que se contradicen en el
 * borde, y el resultado es una pantalla que se apila a los 900 al lado de otra
 * que aguanta hasta los 700.
 *
 *     --bp-telefono:  640px    de acá para abajo, una sola columna
 *     --bp-tablet:    900px    de acá para abajo, se apilan las dos columnas
 *     --bp-angosto:  1280px    escritorio chico: se achica, no se reordena
 *
 * **Los tokens no se pueden usar dentro de `@media`.** Una media query se
 * evalúa antes de que exista la cascada, así que `@media (max-width: var(--bp))`
 * no funciona en ningún navegador. Se declaran igual, para poder leerlos desde
 * JavaScript y para que el número tenga un nombre en algún lado; en el CSS se
 * escribe el literal. Resolverlo de verdad pediría PostCSS, y `CLAUDE.md` §2
 * prohíbe el build step obligatorio.
 *
 * **Y antes de agregar una media query, preguntarse si hace falta.** Casi
 * nunca: `repeat(auto-fit, minmax(…, 1fr))`, `clamp()` y las fracciones se
 * adaptan solas y no tienen borde donde saltar. Un punto de corte se justifica
 * cuando el layout tiene que **cambiar de forma**, no cuando tiene que achicarse.
 */
:root {
  --bp-telefono: 640px;
  --bp-tablet:   900px;
  --bp-angosto: 1280px;
}

/*
 * **Nada empuja la página a lo ancho.**
 *
 * El scroll horizontal del documento entero es el error que hace inusable una
 * pantalla en un teléfono: se pierde la columna izquierda y no hay forma
 * evidente de volver. Lo ancho —una tabla, un diagrama— scrollea **dentro de su
 * propia caja**, que es lo que hace `.tabla-comp` bajo 900 px.
 */
html, body { max-width: 100%; overflow-x: clip; }

/* Nada de lo que se mete en el contenido se sale de él. */
img, svg, video, canvas, table { max-width: 100%; }
img, svg, video, canvas { height: auto; }

/*
 * **Blancos táctiles: 44 px cuando el puntero es un dedo.**
 *
 * `pointer: coarse` es la pregunta correcta y no el ancho de la pantalla: una
 * tablet de 1024 px se opera con el dedo igual que un teléfono, y un monitor
 * angosto se sigue operando con mouse. Preguntar por el ancho acierta por
 * casualidad.
 *
 * 44 px es el mínimo de la guía de accesibilidad, y en el mostrador es la
 * diferencia entre tocar «editar» y tocar «eliminar»: los íconos de acción de
 * las tablas medían 28.
 */
@media (pointer: coarse) {
  .iact, .btn, .lugar, .paginate_button {
    min-height: 44px;
    min-width: 44px;
  }

  .iact { width: 44px; height: 44px; }
  .acts { gap: var(--sp-1); }

  /*
   * **16 px en todo lo que se escribe.** Safari en iPad hace zoom solo al
   * enfocar un campo de menos de 16 px, y el zoom no se deshace: quien carga
   * un producto en la tablet del local termina arrastrando la pantalla a mano
   * después de cada campo. No es una preferencia estética, es un
   * comportamiento del navegador que sólo se evita con el tamaño.
   */
  /*
   * Con `!important` a propósito, y es uno de los dos usos legítimos que hay
   * en el sistema —el otro es `.esta-oculto`—. `tokens.css` carga **primero**,
   * así que sin esto cualquier `font-size` posterior de `formulario.css` o
   * `tabla.css` le gana por orden y el campo vuelve a 13 px. No es una
   * preferencia que una pantalla pueda querer sobrescribir: es el piso que
   * evita que el navegador haga zoom solo.
   */
  input, select, textarea, .campo__control { font-size: 16px !important; }
}

/*
 * `hidden` tiene que ocultar, siempre.
 *
 * El navegador aplica el atributo `hidden` con `display: none` desde su propia
 * hoja, así que cualquier regla nuestra que declare `display` le gana sin
 * avisar. Pasó en el mostrador el 2026-09-09: `.pos__vacio` tenía
 * `display: grid` y `height: 100%`, y el cartel de «todavía no hay nada
 * cargado» seguía visible con el carrito lleno, empujando los renglones fuera
 * de la vista. El total sumaba y la lista parecía vacía.
 *
 * Va acá y no en `shell.css` porque el mostrador no carga `shell.css`: esta
 * hoja es la única que cargan las cuatro plantillas. El `!important` es lo
 * único que le gana a una regla de clase.
 */
[hidden] { display: none !important; }