/* ESTAMOS ACÁ · marca común de la app de la mesa, el panel y la app del mozo.
   Colores tomados del local y de su Instagram: el negro cálido de sus fotos, la mostaza de las placas de
   combos (con letra café en itálica), el amarillo de sus acentos, el celeste del cartel de neón del patio
   y el naranja del rayo de la pared. */
:root {
  /* noche: el negro cálido de sus fotos (barra de madera, ladrillo con luz de atrás) */
  --noche: #0e0b09;
  --noche-2: #19140f;
  --noche-3: #251e18;
  --noche-4: #3a2f26;
  --madera: #7a4a24;
  --mostaza: #e3a53b;
  --mostaza-2: #f2c063;
  --mostaza-3: #b7801f;
  --amarillo: #f6c62e;        /* el subrayado de «Acá» y la etiqueta #Nueva carta */
  --cafe: #4a1f0b;
  --cafe-2: #6d3415;
  --crema: #f6ede0;
  --crema-2: #e9dcc8;
  --celeste: #94f4ee;         /* el cartel de neón del patio */
  --celeste-2: #4fd6d0;
  --rayo: #ff7a2f;            /* el rayo de neón de la pared */
  --rayo-2: #ff9a5c;
  --hoja: #8fd16f;
  --hiedra: #12291f;          /* la pared de hiedra del patio */

  --f: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, Menlo, monospace;
  --r: 22px;
  --r-s: 14px;
  --canto: 0 4px 0;
  --sombra: 0 14px 34px -14px rgb(0 0 0 / .55);
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .29 0 0 0 0 .12 0 0 0 0 .04 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
img { display: block; max-width: 100%; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }

/* Logo: el calco del logotipo, pintado con el color del texto (en celeste se ve como el neón del patio). */
.logo {
  display: inline-block; aspect-ratio: 1060.8 / 251.8; height: 26px;
  background: currentColor;
  -webkit-mask: url(../assets/logo.svg) center / contain no-repeat; mask: url(../assets/logo.svg) center / contain no-repeat;
}
.logo.neon { color: var(--celeste); filter: drop-shadow(0 0 6px rgb(148 244 238 / .55)); }

/* Títulos como sus placas: anchos y pesados, o itálicos en café sobre mostaza. */
.titulo { font-weight: 900; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; line-height: .92; }
.placa-tit { font-weight: 800; font-style: italic; text-transform: uppercase; line-height: .9; letter-spacing: -.01em; }

/* Placa mostaza con grano de papel, como las de «Combos» en Instagram. */
.placa { position: relative; background: var(--mostaza); color: var(--cafe); border-radius: var(--r); isolation: isolate; }
.placa::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--grano); opacity: .22; mix-blend-mode: multiply; pointer-events: none; z-index: -1; }

/* Botones con canto. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 48px; padding: 0 20px; border-radius: 999px;
  font-weight: 800; font-size: 15px; letter-spacing: .01em; white-space: nowrap;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s;
  user-select: none; -webkit-user-select: none;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--canto-c, transparent) !important; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn-mostaza { background: var(--mostaza); color: var(--cafe); --canto-c: var(--mostaza-3); box-shadow: var(--canto) var(--mostaza-3); }
.btn-cafe { background: var(--cafe); color: var(--crema); --canto-c: #250d03; box-shadow: var(--canto) #250d03; }
.btn-celeste { background: var(--celeste); color: #06332f; --canto-c: var(--celeste-2); box-shadow: var(--canto) var(--celeste-2); }
.btn-rayo { background: var(--rayo); color: #3a1200; --canto-c: #c4521a; box-shadow: var(--canto) #c4521a; }
.btn-crema { background: var(--crema); color: var(--cafe); --canto-c: var(--crema-2); box-shadow: var(--canto) #cdbb9f; }
.btn-linea { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn-chico { min-height: 38px; padding: 0 14px; font-size: 13.5px; }

/* Estados de cada cosa del pedido: los mismos colores en la mesa, el panel y el mozo. */
.estado {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 99px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.e-pendiente { background: rgb(246 237 224 / .12); color: var(--crema); }
.e-preparando { background: rgb(227 165 59 / .2); color: var(--mostaza-2); }
.e-preparando::before { animation: latido 1.1s ease-in-out infinite; }
.e-listo { background: rgb(148 244 238 / .18); color: var(--celeste); }
.e-listo::before { box-shadow: 0 0 8px var(--celeste); }
.e-entregado { background: rgb(143 209 111 / .16); color: var(--hoja); }
.e-cancelado { background: rgb(255 255 255 / .06); color: rgb(246 237 224 / .45); text-decoration: line-through; }
.claro .e-pendiente { background: #eadfcd; color: #6b5a45; }
.claro .e-preparando { background: #f8e2b8; color: #8a5a07; }
.claro .e-listo { background: #cff5f2; color: #0b6560; }
.claro .e-listo::before { box-shadow: none; }
.claro .e-entregado { background: #dcefd2; color: #2f6b1b; }
.claro .e-cancelado { background: #eee; color: #999; }

@keyframes latido { 50% { opacity: .25; transform: scale(.7); } }
@keyframes aparece { from { opacity: 0; transform: translateY(10px); } }
@keyframes brillo { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

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