/* LA COMANDA: el tique impreso de la página que no existe (`404.html`) y de
   la demo de la portada (`index.html`). Es la MISMA pieza en los dos sitios:
   el papel, sus dientes, el grano, la esquina doblada y la impresión. Cada
   página solo pone lo que va impreso y dónde. Lo común de la landing (barra,
   pie, titulares) es de `landing.css`; aquí vive únicamente el papel.
   Sin `!important`: todo en `foodev-base`. */
@layer foodev-base, foodev-prioridad;

@layer foodev-base {

/* El tamaño de la esquina doblada es una propiedad registrada: así se anima
   con una transición en la máscara del papel y en la solapa a la vez. */
@property --comanda-pliegue {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

/* LA ESCENA: la comanda sola. Su borde de arriba hace de impresora: en la
   página que no existe es el de la pantalla, y en la demo el de la sección.
   El papel sale por ahí, como en el tique de un anuncio. */
.comanda-escena {
  /* Papel de 80 mm, el de las impresoras de cocina, a escala de pantalla. */
  --comanda-ancho: 440px;
  --comanda-margen: 36px;
  /* Lo que el papel esconde por encima de la pantalla: los dientes del borde
     de arriba nunca se ven mientras cuelga, y asoman si se tira de él. */
  --comanda-oculto: 14px;
  --comanda-diente: 12px;
  --comanda-letra: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* La tinta térmica no es negro puro: es un negro gastado, neutro. */
  --comanda-tinta: rgb(0 0 0 / 84%);
  --comanda-papel: var(--foodev-fondo);
  position: relative;
  width: var(--comanda-ancho);
  max-width: 100%;
  padding-bottom: 72px;
  /* Lo que aún no ha salido de la impresora no se ve: por encima de su borde
     de arriba se recorta. Por los lados y por debajo, no (la sombra y la
     caída del papel arrancado se salen de la escena). */
  clip-path: inset(0 -100vw -200vh -100vw);
}

.no-encontrada {
  display: grid;
  justify-items: center;
  min-height: 100svh;
  padding-inline: 20px;
}

/* La sombra de la boca de la impresora sobre el papel, justo a la salida. Es
   de la escena y no del papel: cuando se tira de él, la sombra se queda. */
.comanda-escena::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 10px;
  background: linear-gradient(to bottom, rgb(0 0 0 / 9%), rgb(0 0 0 / 0%));
  pointer-events: none;
}

/* LA HOJA: lo que se mueve. Lleva la sombra y el movimiento JUNTOS, y el papel
   que lleva dentro, la máscara de los dientes.
   - La sombra no puede ir en el papel: una máscara se come el `box-shadow` y
     también un `filter` del mismo elemento, que se pinta antes de recortar.
     `drop-shadow` en el padre sigue la silueta recortada, dientes incluidos.
   - Y el movimiento (impresión, tirón y caída) no puede ir en el papel: Chromium calcula el tamaño de la
     sombra del padre con el hijo quieto y no lo rehace mientras una animación
     lo mueve; el papel salía recortado a una franja bajo la barra. Movida la
     hoja entera, la sombra viaja con ella ya pintada. */
.comanda-hoja {
  margin-top: calc(-1 * var(--comanda-oculto));
  filter:
    drop-shadow(0 1px 1px rgb(0 0 0 / 6%))
    drop-shadow(0 14px 22px rgb(0 0 0 / 9%));
  position: relative;
  transform: translateY(var(--comanda-tiron, 0px));
  transition: --comanda-pliegue .7s cubic-bezier(.3, 1.4, .5, 1);
}

/* AL ACABAR DE IMPRIMIR SE DOBLA UNA ESQUINA, como una hoja de verdad. */
.comanda-escena.is-doblada .comanda-hoja { --comanda-pliegue: 46px; }

.comanda {
  position: relative;
  padding: calc(var(--comanda-oculto) + 22px) var(--comanda-margen) 10px;
  background: var(--comanda-papel);
  color: var(--comanda-tinta);
  font-family: var(--comanda-letra);
  font-size: 16px;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: .01em;
  text-align: left;
  /* LOS DIENTES, arriba y abajo: dos degradados cónicos que dejan ver todo
     salvo un triángulo por cada diente. Cada uno cubre su mitad del papel. Y
     encima, la ESQUINA DOBLADA: un corte en diagonal abajo a la derecha que se
     cruza (`intersect`) con los dientes; lo que falta lo pinta la solapa. */
  -webkit-mask:
    linear-gradient(315deg, #0000 calc(var(--comanda-pliegue) * .7071), #000 calc(var(--comanda-pliegue) * .7071 + .5px)),
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / var(--comanda-diente) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / var(--comanda-diente) 51% repeat-x;
  -webkit-mask-composite: source-in, source-over, source-over;
  mask:
    linear-gradient(315deg, #0000 calc(var(--comanda-pliegue) * .7071), #000 calc(var(--comanda-pliegue) * .7071 + .5px)),
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% 0 / var(--comanda-diente) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / var(--comanda-diente) 51% repeat-x;
  mask-composite: intersect, add, add;
}

/* El grano del papel térmico: ruido fractal en un SVG, casi invisible, que
   quita al blanco el aspecto de pantalla. */
.comanda::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* La curva del papel térmico, que nunca queda del todo plano. */
.comanda::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 72%, rgb(0 0 0 / 2.5%));
  pointer-events: none;
}

.comanda > * { position: relative; z-index: 1; }

.comanda p,
.comanda h2,
.comanda ol { margin: 0; }

/* LO GENERAL, ARRIBA Y APAGADO: la marca va centrada y en gris, como la
   cabecera de un tique. */
.comanda-cabecera {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
  opacity: .42;
}

/* El logo es una silueta con `mask`, como el de la portada: lo que se ve es el
   fondo, y el fondo es la tinta. */
.comanda-logo {
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
  background: currentColor;
  -webkit-mask: url("/assets/foodev-logo.svg") center / contain no-repeat;
  mask: url("/assets/foodev-logo.svg") center / contain no-repeat;
}

.comanda-marca {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  /* El interletrado se suma también tras la última letra: se devuelve para
     que la palabra quede centrada de verdad. */
  margin-right: -.32em;
}

/* La raya de puntos de una impresora de tiques, no un borde de CSS. */
.comanda-raya {
  height: 2px;
  margin: 14px 0;
  border: 0;
  background: repeating-linear-gradient(90deg, currentColor 0 5px, rgb(0 0 0 / 0%) 5px 9px);
  opacity: .5;
}

/* LA FRASE, GRANDE, como el concepto de un tique de anuncio. */
/* Apagada y centrada, como la cabecera: arriba va lo general, en gris; lo
   único en tinta plena son las sugerencias. Con el papel delante: en la demo
   la frase es un `h2`, y el reinicio de márgenes de `.comanda h2` le ganaba. */
.comanda .comanda-frase {
  margin: 32px 0 36px;
  opacity: .42;
  text-align: center;
  font-family: var(--comanda-letra);
  font-size: 34px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.comanda-linea {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.comanda-unidades { flex: 0 0 auto; }

.comanda-titulo {
  margin-bottom: 6px;
  font-family: var(--comanda-letra);
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.comanda-sugerencias {
  padding: 0;
  list-style: none;
}

/* Cada sugerencia es una línea de la comanda con su relleno de puntos hasta
   la dirección. Al pasar el puntero se imprime EN NEGATIVO, el modo inverso
   de las impresoras térmicas: blanco sobre negro. */
.comanda-sugerencia {
  margin-inline: -6px;
  padding-inline: 6px;
  border-radius: 2px;
  color: inherit;
  outline: none;
}

.comanda-sugerencia:is(:hover, :focus-visible) {
  background: var(--comanda-tinta);
  color: var(--comanda-papel);
}

.comanda-plato { flex: 0 1 auto; min-width: 0; }

.comanda-puntos {
  flex: 1 1 auto;
  min-width: 12px;
  height: 1em;
  background: radial-gradient(circle, currentColor .8px, rgb(0 0 0 / 0%) 1.1px) 0 100% / 6px 3px repeat-x;
  opacity: .45;
}

.comanda-destino {
  flex: 0 0 auto;
  opacity: .6;
}

/* UN QR IMPRESO: centrado, en su propio renglón, cuadrado y SIN fondo propio:
   se ve el papel. Va en negro sobre el papel blanco, que es el sentido que
   necesita una cámara. */
.comanda-qr {
  width: 200px;
  height: 200px;
  margin: 0 auto 28px;
}

.comanda-qr > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* En la pantalla más estrecha el QR se aprieta un poco. Por debajo de este
   tamaño a una cámara ya empieza a costarle el enfoque, así que no baja más. */
@media (max-width: 359px) {
  .comanda-qr { width: 172px; height: 172px; }
}

/* UN BOTÓN IMPRESO: una línea a todo el ancho entre dos rayas de corte, en
   mayúsculas como los títulos del tique. Al pasar el puntero se imprime EN
   NEGATIVO, como las sugerencias. */
.comanda-boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  /* El aire de debajo deja sitio a la esquina doblada, que si no tapaba el
     canto del botón. */
  margin-bottom: 32px;
  padding-inline: 12px;
  border: 1.5px dashed currentColor;
  border-radius: 2px;
  color: inherit;
  font-family: var(--comanda-letra);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  outline: none;
}

.comanda-boton:is(:hover, :focus-visible) {
  border-style: solid;
  border-color: var(--comanda-tinta);
  background: var(--comanda-tinta);
  color: var(--comanda-papel);
}

/* POR DÓNDE SE ARRANCA: la línea de corte, a lo ancho del papel. Es el único
   sitio del que se puede tirar, así que en un móvil pasar el dedo por el resto
   de la comanda sigue desplazando la página. */
.comanda-arrancar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px calc(-1 * var(--comanda-margen)) 0;
  padding: 14px var(--comanda-margen) 18px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.comanda-arrancar::before,
.comanda-arrancar::after {
  content: "";
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, currentColor 0 3px, rgb(0 0 0 / 0%) 3px 6px);
  opacity: .5;
}

.comanda-escena.is-tirando .comanda-arrancar { cursor: grabbing; }

/* LA SOLAPA: la esquina doblada vista por detrás, encima del papel. Es un
   triángulo con el reverso del papel, un punto más gris y con su luz en
   diagonal, y su sombra sobre la hoja. Vive fuera del papel porque el papel
   tiene la máscara que recorta esa misma esquina. */
.comanda-pliegue {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--comanda-pliegue);
  height: var(--comanda-pliegue);
  background: linear-gradient(315deg, rgb(0 0 0 / 0%) 50%, #E6E6E6 50%, #F7F7F7 72%, #EDEDED);
  filter: drop-shadow(-2px -2px 3px rgb(0 0 0 / 14%));
  pointer-events: none;
}

/* Sin JavaScript se ve ya doblada. */
@media (scripting: none) {
  .comanda-hoja { --comanda-pliegue: 46px; }
}

/* Sin JavaScript no hay de qué tirar, y con movimiento reducido tampoco: un
   papel que cae es justo lo que esa persona ha pedido no ver. */
@media (scripting: none), (prefers-reduced-motion: reduce) {
  .comanda-arrancar { display: none; }
}

/* ANTES DE IMPRIMIR. Solo si hay JavaScript, que es quien imprime: sin él, la
   comanda se ve ya impresa. El papel espera dentro de la impresora; si `404.js` no llegara a arrancar, el rescate saca el papel igual
   pasado un momento. Con movimiento reducido no se espera nada: todo está ya
   en su sitio. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .comanda-escena:not(.is-lista) .comanda-hoja {
    transform: translateY(-100%);
  }

  .comanda-escena:not(.is-lista):not(.is-esperando) .comanda-hoja {
    animation: comanda-rescate .9s 2.5s cubic-bezier(.2, .7, .2, 1) forwards;
  }
}

@keyframes comanda-rescate {
  to { transform: translateY(0); }
}

/* En un móvil el papel deja libre la esquina de la X de cerrar: con todo el
   ancho, la X quedaba encima del papel. */
@media (max-width: 480px) {
  .comanda-escena {
    --comanda-ancho: calc(100vw - 48px);
    --comanda-margen: 22px;
  }

  .comanda {
    font-size: 14px;
    line-height: 23px;
  }

  .comanda .comanda-frase {
    font-size: 26px;
    line-height: 32px;
  }

  .comanda-escena.is-doblada .comanda-hoja { --comanda-pliegue: 36px; }
}

}