/* base.css — reinicializacion, variables de diseño y utilidades de disposicion.
   Menu08 · carta, caja y produccion para food trucks.

   Se carga DESPUES de md3.css y no repite ni un color: md3.css ya trae el
   contrato de 31 tokens de la paleta Brasa, en claro (:root) y oscuro (html.o).
   Aqui va lo que ese contrato no cubre — tipografia, espaciado, radios,
   elevacion, foco y area de toque — mas la reinicializacion y la reticula.

   Sin marcos CSS y sin recursos remotos: la pila tipografica es la del sistema,
   asi que la carta abre en la fila de la ventanilla sin esperar una descarga.

   Issue #14 · Fase 4 - Frontend */

/* ---------------------------------------------------------------- variables */

:root {
  /* Tipografia. Escala de MD3 reducida a los nueve papeles que usa el
     prototipo; los quince completos sobran para tres modulos. */
  --fuente: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --tipo-pantalla:   400 57px/64px var(--fuente);  /* numero de turno del SVP */
  --tipo-titulo-g:   700 32px/40px var(--fuente);  /* h1 */
  --tipo-titulo-m:   600 24px/32px var(--fuente);  /* h2, titulo de dialogo */
  --tipo-titulo-p:   600 20px/28px var(--fuente);  /* h3, titulo de tarjeta */
  --tipo-cuerpo-g:   400 16px/24px var(--fuente);  /* base del documento */
  --tipo-cuerpo-m:   400 14px/20px var(--fuente);  /* celdas, avisos */
  --tipo-cuerpo-p:   400 12px/16px var(--fuente);  /* apoyo y error */
  --tipo-etiqueta-g: 600 14px/20px var(--fuente);  /* rotulo de boton */
  --tipo-etiqueta-m: 600 12px/16px var(--fuente);  /* encabezado, estado */

  /* Espaciado. Reticula de 4 px de MD3. */
  --esp-1: 4px;  --esp-2: 8px;  --esp-3: 12px; --esp-4: 16px;
  --esp-5: 24px; --esp-6: 32px; --esp-7: 48px; --esp-8: 64px;

  /* Radios. Escala de forma de MD3. */
  --radio-xp: 4px;  --radio-p: 8px;   --radio-m: 12px;
  --radio-g:  16px; --radio-xg: 28px; --radio-completo: 999px;

  /* Elevacion. Tres niveles, como en MD3, pero en sombras anchas y suaves: la
     de MD3 lleva un 30 % de negro en el primer trazo y sobre el crema de esta
     paleta se leia como un borde sucio. El color de la sombra sale de
     --on-surface, que es un marron casi negro: asi la sombra es calida como el
     fondo sobre el que cae, y no un gris frio.

     --elev-realce es la cuarta: la que recibe una pieza pulsable cuando el
     puntero esta encima. Va tenida de --primary, que es lo que hace que la
     pieza parezca encenderse y no solo levantarse. */
  --sombra: color-mix(in srgb, var(--on-surface) 14%, transparent);
  --sombra-tenue: color-mix(in srgb, var(--on-surface) 7%, transparent);
  --elev-1: 0 1px 2px var(--sombra-tenue), 0 2px 6px -1px var(--sombra-tenue);
  --elev-2: 0 2px 4px var(--sombra-tenue), 0 6px 16px -4px var(--sombra);
  --elev-3: 0 4px 8px var(--sombra-tenue), 0 16px 32px -8px var(--sombra);
  --elev-realce: 0 4px 8px var(--sombra-tenue),
                 0 14px 28px -10px color-mix(in srgb, var(--primary) 45%, transparent);

  /* Tinte de "el puntero esta encima": un velo de la marca, no un gris. Lo
     comparten la navegacion, las filas de tabla y las tarjetas pulsables, para
     que pasar por encima se lea igual en toda la aplicacion. */
  /* Los degradados de la marca: del rojo tomate al naranja mandarina para lo
     que se pulsa y se elige, y del naranja claro al dorado claro para lo que
     dice «listo», «abierto» o «hecho». Son la firma visual de Menu08: un solo
     color plano en cada boton se leia como una plantilla. */
  --degradado: linear-gradient(135deg, var(--primary), var(--tertiary));
  --degradado-suave: linear-gradient(135deg, var(--tertiary-container), var(--secondary-container));

  --tinte: color-mix(in srgb, var(--primary) 6%, transparent);
  --tinte-fuerte: color-mix(in srgb, var(--primary) 12%, transparent);
  --anillo: color-mix(in srgb, var(--primary) 35%, transparent);

  /* Velo del dialogo. MD3 lo llama scrim y lo trata como token aparte del
     color: no esta en el contrato de 31, asi que se declara aqui. */
  --velo: rgba(0, 0, 0, .4);

  /* Foco. Anillo dorado: --secondary es la marca, no un estado, asi que no se
     confunde con el rojo de error ni con el naranja de aviso. */
  --foco: 3px solid var(--secondary);
  --foco-separacion: 2px;

  /* Area de toque. Minimo de MD3, por encima de los 44 px de WCAG. Se teclea
     de pie, en la ventanilla y con prisa. */
  --toque: 48px;

  /* Anchos.

     --ancho-marco es el del panel: lo comparten la cabecera, la navegacion, el
     contenido y el pie, y por eso los cuatro empiezan en la misma linea
     vertical. Si el contenido usara otro, se veria un escalon entre el marco y
     lo que hay dentro. */
  --ancho-marco: 1200px;
  --ancho-lectura: 52rem;
  --ancho-carta: 34rem;
  --ancho-comprobante: 22rem;

  /* Movimiento. Tres tiempos, y cada uno tiene su sitio:

       --transicion   150 ms  cambios de color y de borde: responden al instante
       --mov-medio    300 ms  lo que se desplaza o se eleva: tarjetas, dialogos
       --mov-lento    500 ms  el acercamiento de una foto, que si va rapido marea

     La curva de salida (0, 0, .2, 1) frena al llegar: la pieza arranca ya en
     marcha y se posa, que es como se mueve algo con peso. */
  --curva: cubic-bezier(.4, 0, .2, 1);
  --curva-salida: cubic-bezier(0, 0, .2, 1);
  --transicion: .15s var(--curva);
  --mov-medio: .3s var(--curva-salida);
  --mov-lento: .5s var(--curva-salida);

  /* md3.css define el color en :root y en html.o. Declarar el esquema evita
     que el navegador pinte los controles nativos en oscuro sobre una pagina
     que sigue en claro. */
  color-scheme: light;
}

html.o { color-scheme: dark; }

/* --------------------------------------------------------- reinicializacion */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font: var(--tipo-cuerpo-g);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* El destello gris que pinta el navegador movil al tocar un enlace. Cada
     pieza pulsable trae ya su propia respuesta al toque. */
  -webkit-tap-highlight-color: transparent;
}

/* El pie se queda abajo aunque la pantalla tenga poco contenido: sin esto, en
   la pantalla de acceso o en la de error el pie flota a media ventana. Solo en
   pantalla: en el papel no hay ventana que llenar. */
@media screen {
  body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
  body > main { flex: 1 0 auto; }
}

::selection { background: var(--secondary-container); color: var(--on-secondary-container); }

h1, h2, h3, h4, p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* El titulo de pagina encoge en el telefono: 32 px en una ventana de 360 parte
   «Datos del negocio» en dos renglones. El interlineado va sin unidad para que
   acompane al tamano. */
h1 {
  font: var(--tipo-titulo-g);
  font-size: clamp(26px, 1.2rem + 2vw, 32px);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-block: var(--esp-5) var(--esp-3);
}

h2 { font: var(--tipo-titulo-m); letter-spacing: -.01em; margin-block: var(--esp-5) var(--esp-2); }
h3 { font: var(--tipo-titulo-p); margin-block: var(--esp-4) var(--esp-1); }

/* El margen de flujo NO se anula globalmente. Anularlo es lo correcto cuando
   el hueco lo reparte una utilidad, y solo entonces: las vistas que todavia
   maquetan con <p> y <br> —todas las de CARTA, CAJA y el panel hasta que el
   #16 las remaquete— se quedarian con los campos pegados unos a otros.

   Asi que lo anula quien lo sustituye: dentro de .pila, .fila y .rejilla manda
   el gap, y el margen sobra. */
.pila > *, .fila > *, .rejilla > * { margin-block: 0; }

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transicion), text-decoration-color var(--transicion);
}

a:hover { color: var(--on-primary-container); text-decoration-thickness: 2px; }

img, svg, video { max-width: 100%; vertical-align: middle; }
img { border-radius: var(--radio-xp); }

/* Los controles no heredan la fuente por su cuenta. */
input, button, select, textarea { font: inherit; color: inherit; }

/* Un solo indicador de foco en toda la aplicacion. */
:focus-visible { outline: var(--foco); outline-offset: var(--foco-separacion); }

/* Tabla sin clase: linea base para las vistas que aun no se han maquetado.
   La tabla del catalogo es .tabla, en componentes.css. */
table { width: 100%; border-collapse: collapse; }
th, td { padding: var(--esp-2); text-align: left; border-bottom: 1px solid var(--outline-variant); }

code {
  padding: .1em .3em;
  border-radius: var(--radio-xp);
  background: var(--surface-container);
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
  font-size: .9em;
}

hr { height: 1px; border: none; background: var(--outline-variant); margin: var(--esp-5) 0; }

/* Las anclas —la barra de categorias de la carta, el «Editar» que cae en el
   formulario— llegan deslizando en vez de saltar: asi se ve de donde se viene.
   Solo para quien no pidio menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Quien pide menos movimiento no lo recibe. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------- movimiento */

/* Las animaciones que comparte toda la aplicacion. Viven aqui y no en cada
   hoja porque las usan piezas de modulos distintos —el aviso del catalogo, la
   tarjeta del SVP, el renglon de la orden—, y repetir el mismo @keyframes con
   otro nombre es como se acaba con tres entradas distintas. */

/* Lo que aparece en su sitio: avisos, renglones, tarjetas nuevas. */
@keyframes entra {
  from { opacity: 0; transform: translateY(var(--esp-2)); }
  to   { opacity: 1; transform: none; }
}

/* Lo que aparece sin desplazarse: velos y fondos. */
@keyframes aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Lo que se abre encima de la pagina: dialogos. */
@keyframes emerge {
  from { opacity: 0; transform: translateY(var(--esp-3)) scale(.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes giro { to { transform: rotate(360deg); } }

/* El latido de lo que sigue vivo: el punto del sondeo en los tableros. La onda
   sale del color del propio punto, asi que sirve igual en verde que en rojo. */
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 var(--latido-tono, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ------------------------------------------------------------- disposicion */

/* Envoltura de pagina. El relleno lateral impide que el texto toque el borde
   del telefono. */
.contenedor {
  width: 100%;
  max-width: var(--ancho-lectura);
  margin-inline: auto;
  padding: var(--esp-5) var(--esp-4);
}

.contenedor-ancho { max-width: var(--ancho-marco); }

/* Prosa suelta: la linea larga cansa de leer. Para bloques de texto corrido
   dentro de una pagina ancha. */
.contenedor-lectura { max-width: var(--ancho-lectura); }
.contenedor-carta { max-width: var(--ancho-carta); }
.contenedor-comprobante { max-width: var(--ancho-comprobante); }

/* Pila vertical. El numero es el hueco en pasos de la reticula. */
.pila { display: flex; flex-direction: column; }
.pila-1 { gap: var(--esp-1); } .pila-2 { gap: var(--esp-2); }
.pila-3 { gap: var(--esp-3); } .pila-4 { gap: var(--esp-4); }
.pila-5 { gap: var(--esp-5); } .pila-6 { gap: var(--esp-6); }
.pila-7 { gap: var(--esp-7); }

/* Fila que salta de linea cuando no cabe. Nunca desplaza el documento. */
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3); }
.fila-2 { gap: var(--esp-2); }
.fila-5 { gap: var(--esp-5); }
.fila-entre { justify-content: space-between; }
.fila-fin { justify-content: flex-end; }
.fila-arriba { align-items: flex-start; }

/* Rejilla que reparte en columnas iguales y se derrumba a una sola por debajo
   de 768 px. minmax(0, 1fr) y no 1fr: sin el minimo en cero, una celda con
   contenido ancho —una tabla, una palabra larga— estira la columna y saca la
   barra horizontal del documento. */
.rejilla { display: grid; gap: var(--esp-5); grid-template-columns: repeat(1, minmax(0, 1fr)); }

@media (min-width: 768px) {
  .rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .rejilla-3-ancha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- utilidades */

/* Dinero y horas. Sin cifras de ancho fijo, una columna de totales baila de
   fila en fila y se lee torcida. */
.cifra { text-align: right; font-variant-numeric: tabular-nums; }
.numerica { font-variant-numeric: tabular-nums; }

.texto-apagado { color: var(--on-surface-variant); }

/* Tamano y interlineado, nunca la abreviatura font:. La abreviatura reinicia
   la familia, y sobre un <code> lo sacaria de la monoespaciada. */
.texto-p { font-size: 12px; line-height: 16px; }
.texto-m { font-size: 14px; line-height: 20px; }

/* Visible para el lector de pantalla, invisible en la pagina. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Fuera de la impresion: barras, navegacion y avisos no van al papel. */
@media print {
  .sin-impresion { display: none !important; }
  body { background: #fff; color: #000; }

  /* Al papel va el estado final, nunca uno intermedio. El comprobante abre el
     dialogo de impresion al cargar, justo cuando las animaciones de entrada
     estan a mitad de camino: sin esto, lo que entra con un fundido podria salir
     medio transparente por el rollo. */
  *, *::before, *::after { animation: none !important; transition: none !important; }
}