/* ============================================================
   La Esquina Venezolana — Panel de pedidos
   El mismo sistema visual del sitio —fondo tinta, amarillo de marca, las
   cuatro familias y la bandera— pero pensado para una pantalla de cocina:
   contraste alto, textos grandes y botones que se aciertan con el dedo
   grasoso. Es la misma casa vista por la puerta de atrás, y por eso los
   tokens salen de marca.json igual que los del sitio: el día que la marca
   cambie de amarillo, el panel cambia con ella.

   El armazón es una barra lateral fija a la izquierda y una columna
   de trabajo a la derecha. En teléfono la barra se vuelve un cajón
   que entra por el costado.
   ============================================================ */

:root {
  --ink:      #0B0A09;
  --ink-2:    #121110;
  --ink-3:    #1A1817;
  --ink-4:    #242120;
  --line:     rgba(245, 239, 230, .12);
  --line-2:   rgba(245, 239, 230, .06);
  --yellow:   #FFC627;
  --yellow-2: #FFD95C;
  --red:      #CE1126;
  --green:    #25D366;
  --naranja:  #FF8A3D;
  /* Dos azules, igual que en el sitio: --blue es el de la tela de la bandera y
     solo sirve para pintarla; --blue-2 es el que sí se lee sobre el negro, y
     es el que usan los estados, los sellos y los iconos. */
  --blue:     #0033A0;
  --blue-2:   #4B86F0;
  --cream:    #F6F1E7;
  --muted:    #A39A8F;
  --muted-2:  #6E665D;

  /* La bandera, con los dos usos que le da el sitio. --tricolor es la REGLA
     acostada: marca dónde empieza algo (el rótulo de la barra, el canto de la
     tirilla). --bandera son las bandas apiladas, para los cantos verticales.
     Es lo único que hace falta para que el panel se lea de esta casa y no de
     un tablero de cocina cualquiera. */
  --flag-1:   #FFC627;
  --flag-2:   #0033A0;
  --flag-3:   #CE1126;
  --tricolor: linear-gradient(90deg,
                var(--flag-1) 0 33.33%, var(--flag-2) 33.33% 66.66%,
                var(--flag-3) 66.66% 100%);
  --bandera:  linear-gradient(180deg,
                var(--flag-1) 0 33.33%, var(--flag-2) 33.33% 66.66%,
                var(--flag-3) 66.66% 100%);

  --r:        3px;
  --side-w:   248px;

  /* Las cuatro familias del sitio, cada una en el papel que tiene allá.
     --display (la condensada de cartel) es lo que se lee a dos metros de la
     plancha: el nombre del cliente, el total, las cifras del día. --headline
     es la voz de la marca en botones y rótulos, siempre en versalitas. --body
     es el texto corrido. --cond se queda para las COLUMNAS DE NÚMEROS que
     tienen que cuadrar: es condensada como --display pero con cifras de ancho
     fijo, y --display no las trae. */
  --headline: 'Archivo', 'Barlow', -apple-system, sans-serif;
  --display:  'Bebas Neue', 'Barlow Condensed', Impact, sans-serif;
  --cond:     'Barlow Condensed', 'Barlow', sans-serif;
  --body:     'Barlow', -apple-system, sans-serif;
  --e:        cubic-bezier(.22, 1, .36, 1);
}

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

html { -webkit-tap-highlight-color: transparent; }

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }

/* ---------- Iconos ----------
   Trazo suelto que hereda color y tamaño del texto: nada de emoji. Un emoji
   se pinta a color y con la forma que decida cada sistema —la moto de Android
   no es la de iOS— y al lado de la condensada de la marca se leía como ruido.
   Con currentColor, el icono de "en camino" es verde porque lo es su renglón,
   sin una sola regla de color extra. */
.sprite { display: none; }
.ico {
  width: 1em; height: 1em;
  flex: none;
  display: inline-block;
  vertical-align: -.14em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico--der { transform: rotate(180deg); }

/* ============================================================
   1. ARMAZÓN
   ============================================================ */
.app { display: flex; min-height: 100dvh; }

.app__col {
  flex: 1 1 auto;
  min-width: 0;              /* sin esto, una tarjeta ancha estira la columna */
  display: flex;
  flex-direction: column;
}
.app__main { flex: 1 1 auto; }

/* ---------- Barra lateral ---------- */
.side {
  flex: 0 0 var(--side-w);
  width: var(--side-w);
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border-right: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 30;
}

/* La bandera cierra el bloque de marca en lugar de la línea gris que había:
   es el mismo gesto con el que el sitio abre cada sección. */
.side__marca {
  position: relative;
  display: block;
  padding: 1.15rem 1.1rem .95rem;
}
.side__marca::after {
  content: '';
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0;
  height: 3px;
  background: var(--tricolor);
}
.side__marca img { width: 66px; }   /* el sello es cuadrado, no apaisado */
.side__sub {
  display: block;
  margin-top: .5rem;
  font-family: var(--headline);
  font-weight: 500;
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .28em;
  color: var(--muted-2);
}

.side__vivo { padding: .7rem 1.1rem .3rem; }

.vivo {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  font-family: var(--headline);
  font-weight: 500;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
}
.vivo i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: latido 2.4s infinite;
}
.vivo.is-off i { background: var(--red); animation: none; }
.vivo.is-off { color: #FF6B63; }
@keyframes latido {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70%  { box-shadow: 0 0 0 8px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* el centro es lo único que se desplaza: marca arriba y pie abajo se quedan */
.side__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .5rem .7rem 1rem;
}

.side__pie {
  border-top: 1px solid var(--line-2);
  padding: .8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom));
}
.side__quien { font-size: .78rem; margin-bottom: .6rem; }
.side__quien span { display: block; font-family: var(--headline); font-weight: 500; color: var(--muted-2); font-size: .64rem; text-transform: uppercase; letter-spacing: .2em; }
.side__quien b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; letter-spacing: .04em; }
/* De qué local es este tablero. En amarillo y pegado al nombre porque es el
   dato que contesta "¿estoy viendo lo mío?" —y a quien ve las dos cocinas no
   se le pinta, que para eso están las fichas de arriba. */
.side__quien em {
  display: block; margin-top: .1rem;
  font-style: normal;
  font-family: var(--headline); font-weight: 600;
  font-size: .64rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--yellow);
}
.side__acciones { display: flex; gap: .45rem; }
.side__acciones form { flex: 1 1 0; }
.side__acciones .btn { width: 100%; justify-content: center; }

/* ---------- Navegación por estado ---------- */
.nav { display: flex; flex-direction: column; gap: 1px; }
/* El rótulo lleva delante el mismo trazo tricolor con el que el sitio titula
   sus secciones: es lo que ata la barra al lenguaje de la casa. */
.nav__titulo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--headline);
  font-weight: 500;
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--muted-2);
  padding: .8rem .55rem .45rem;
}
.nav__titulo::before {
  content: '';
  width: 20px; height: 3px; flex: none;
  background: var(--tricolor);
}
.nav__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .58rem .55rem;
  border-radius: var(--r);
  border-left: 3px solid transparent;
  color: var(--muted);
  transition: background .18s, color .18s, border-color .18s;
}
.nav__item:hover { background: rgba(255, 255, 255, .04); color: var(--cream); }
/* El icono toma el color del renglón (apagado en reposo, crema al pasar por
   encima), salvo los estados que tienen el suyo propio unas líneas más abajo. */
.nav__ico {
  width: 1.05rem; height: 1.05rem; flex: none; color: inherit;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.nav__txt { flex: 1 1 auto; font-size: .92rem; }
.nav__n {
  font-family: var(--cond);
  font-weight: 700;
  font-size: 1rem;
  min-width: 1.6rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.nav__n.is-cero { color: var(--muted-2); font-weight: 400; }

.nav__item.is-on {
  background: rgba(255, 198, 39, .12);
  border-left-color: var(--yellow);
  color: var(--cream);
}
.nav__item.is-on .nav__n { color: var(--yellow); }

/* Cada estado con el mismo color que su ficha en el tablero: así el número
   de la barra y el borde de la tarjeta se leen como lo mismo. */
.nav__item--nuevo .nav__ico      { color: var(--yellow); }
.nav__item--confirmado .nav__ico { color: var(--blue-2); }
.nav__item--preparando .nav__ico { color: var(--naranja); }
.nav__item--en_camino .nav__ico  { color: var(--green); }
.nav__item--cancelado .nav__ico  { color: #FF6B63; }

/* ---------- Cobros del día ---------- */
.cobros { margin-top: .5rem; border-top: 1px solid var(--line-2); }
.cobro {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .55rem;
}
.cobro__punto {
  width: 8px; height: 8px; border-radius: 2px; flex: none;
  background: var(--muted);
}
.cobro--efectivo .cobro__punto      { background: var(--green); }
.cobro--linea .cobro__punto         { background: var(--blue-2); }
.cobro--transferencia .cobro__punto { background: var(--yellow); }
.cobro--datafono .cobro__punto      { background: var(--naranja); }
.cobro__txt { flex: 1 1 auto; font-size: .84rem; line-height: 1.2; }
.cobro__txt small { display: block; color: var(--muted-2); font-size: .7rem; }
.cobro__plata { font-family: var(--cond); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.cobros__vacio { padding: .3rem .55rem 1rem; font-size: .8rem; color: var(--muted-2); }

/* ---------- Cajón en teléfono ---------- */
.hamb { display: none; }
.side__velo { display: none; }

/* ============================================================
   2. BARRA DE TRABAJO
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .7rem clamp(.8rem, 2.4vw, 1.5rem);
  background: rgba(11, 10, 9, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__titulo { display: flex; align-items: center; gap: .7rem; margin-inline: auto; }
.topbar__titulo b { font-family: var(--display); font-weight: 400; font-size: 1.45rem; letter-spacing: .04em; color: var(--yellow); }

.fecha { display: flex; align-items: center; gap: .45rem; }
.fecha b { font-family: var(--display); font-weight: 400; font-size: 1.32rem; letter-spacing: .03em; text-transform: capitalize; min-width: 5.5rem; }
.paso {
  display: inline-grid;
  place-items: center;
  min-width: 2.4rem; height: 2.4rem;
  padding: 0 .55rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--muted);
}
.paso:hover { color: var(--cream); border-color: var(--yellow); }
.paso--hoy { font-family: var(--headline); font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.paso--off { opacity: .25; }

.cifras { display: flex; gap: clamp(.9rem, 3vw, 2rem); margin-left: auto; }
.cifra { text-align: right; line-height: 1.1; }
.cifra b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.8rem; line-height: 1; font-variant-numeric: tabular-nums; }
.cifra span { font-family: var(--headline); font-weight: 500; font-size: .64rem; text-transform: uppercase; letter-spacing: .2em; color: var(--muted); }
.cifra--abiertos b { color: var(--yellow); }

/* ============================================================
   3. TABLERO
   ============================================================ */
.tablero {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1rem;
  padding: clamp(.8rem, 2.4vw, 1.5rem);
  align-items: start;
}

.vacio {
  grid-column: 1 / -1;
  padding: 4rem 1rem;
  text-align: center;
  color: var(--muted);
}

.pedido {
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--r);
  padding: .9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.pedido--nuevo      { border-left-color: var(--yellow); }
.pedido--confirmado { border-left-color: var(--blue-2); }
.pedido--preparando { border-left-color: var(--naranja); }
.pedido--en_camino  { border-left-color: var(--green); }
.pedido--entregado  { border-left-color: #4A443E; opacity: .62; }
.pedido--cancelado  { border-left-color: var(--red); opacity: .5; }

.pedido.es-nuevo { box-shadow: 0 0 0 1px rgba(255, 198, 39, .25); }
.pedido.recien { animation: entra .5s ease both; }
@keyframes entra {
  from { opacity: 0; transform: translateY(-8px); box-shadow: 0 0 0 3px rgba(255, 198, 39, .5); }
  to   { opacity: 1; transform: none; }
}

.pedido__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
/* La referencia es un código que se dicta por teléfono y se casa con el chat
   de WhatsApp: va en la grotesca y muy espaciada, que es como se leen letra
   por letra. En condensada, EV-A1B2C3 se lee de corrido y se equivoca. */
.pedido__id b { font-family: var(--headline); font-weight: 700; font-size: .92rem; letter-spacing: .1em; color: var(--yellow); display: block; white-space: nowrap; }
/* "02:00 · hace 27 min" es una sola cosa: partido en dos renglones —pasa en
   teléfono cuando la etiqueta de estado es larga— se lee como dos datos. */
.pedido__id time { font-size: .74rem; color: var(--muted); white-space: nowrap; }

.estado {
  font-family: var(--headline);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  padding: .25rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--ink-4);
  color: var(--muted);
}
.estado--nuevo      { background: var(--yellow); color: var(--ink); }
.estado--confirmado { background: rgba(75, 134, 240, .18); color: var(--blue-2); }
.estado--preparando { background: rgba(255, 138, 61, .18); color: var(--naranja); }
.estado--en_camino  { background: rgba(37, 211, 102, .18); color: var(--green); }
.estado--cancelado  { background: rgba(206, 17, 38, .18); color: #FF6B63; }

.pedido__cliente { font-family: var(--display); font-weight: 400; font-size: 1.8rem; letter-spacing: .02em; line-height: 1.1; }
.pedido__tipo { font-size: .84rem; color: var(--muted); }

.pedido__items { list-style: none; display: flex; flex-direction: column; gap: .2rem; font-size: .94rem; }
.pedido__items b { color: var(--yellow); font-weight: 700; }
.combo { color: var(--muted); font-size: .82rem; }

.pedido__notas {
  font-size: .86rem;
  background: var(--ink-4);
  border-radius: var(--r);
  padding: .45rem .6rem;
}
.pedido__alerta {
  font-size: .8rem;
  color: #FFD1CE;
  background: rgba(206, 17, 38, .16);
  border-radius: var(--r);
  padding: .45rem .6rem;
}

.pedido__pie {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: .6rem;
  border-top: 1px dashed var(--line);
}
.pedido__cobro { display: flex; flex-direction: column; gap: .25rem; }
.pedido__total { font-family: var(--display); font-weight: 400; font-size: 1.7rem; letter-spacing: .02em; line-height: 1; }
.pedido__botones { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ---------- Forma de pago ----------
   El color dice lo que importa de un vistazo: verde es plata que hay que
   recibir en la entrega, azul es plata que ya entró. */
.pago {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--headline);
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .2rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--ink-4);
  color: var(--muted);
}
.pago small { font-weight: 600; letter-spacing: .06em; opacity: .8; }
.pago--efectivo      { background: rgba(37, 211, 102, .16); color: var(--green); }
.pago--linea         { background: rgba(75, 134, 240, .16); color: var(--blue-2); }
.pago--transferencia { background: rgba(255, 198, 39, .16); color: var(--yellow); }
.pago--datafono      { background: rgba(255, 138, 61, .16); color: var(--naranja); }

/* ============================================================
   4. BOTONES
   ============================================================ */
/* Misma grotesca en versalitas que los botones del sitio: son parte de la voz
   de la marca y no un componente de sistema aparte. El cuerpo baja de .86 a
   .82 porque en versalitas ocupa más, y "A la plancha" tiene que seguir
   cabiendo en la rejilla de 9rem del teléfono. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.5rem;
  padding: .5rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: transparent;
  color: var(--cream);
  font-family: var(--headline);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { border-color: var(--yellow); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; }
.btn--principal { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.btn--principal:hover { background: var(--yellow-2); }
.btn--mudo { color: var(--muted); }
.btn--mudo:hover { color: var(--cream); }
.btn--wa { background: var(--green); border-color: var(--green); color: #05130A; justify-content: center; }
.btn--icono { padding: .45rem .7rem; letter-spacing: .08em; }
.btn--icono span { font-size: .7rem; }
.btn--icono .ico { font-size: .95rem; }
.btn--icono[aria-pressed="false"] { opacity: .45; }
.btn--estado { justify-content: center; width: 100%; }
.btn--estado.is-on { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }

/* ============================================================
   5. AVISO FLOTANTE
   ============================================================ */
.aviso {
  position: fixed;
  left: 50%;
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--headline);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .08em;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  z-index: 60;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}

/* ============================================================
   6. LOGIN
   ============================================================ */
.pantalla-login { display: grid; place-items: center; min-height: 100dvh; padding: 1.2rem; }
.login { width: min(360px, 100%); }
.login__marca { text-align: center; margin-bottom: 1.5rem; }
.login__marca img { width: 96px; margin: 0 auto; }
/* La bandera entre el sello y el rótulo. Es lo único de adorno que tiene esta
   pantalla, y es lo que la hace de esta casa: sin ella, un formulario de
   usuario y contraseña sobre negro es el de cualquiera. */
.login__flag {
  display: block;
  width: 74px; height: 3px;
  margin: 1rem auto 0;
  background: var(--tricolor);
}
.login__marca p {
  margin-top: .85rem;
  font-family: var(--headline); font-weight: 500;
  color: var(--muted); text-transform: uppercase;
  letter-spacing: .3em; font-size: .68rem;
}

.login__form { display: flex; flex-direction: column; gap: .45rem; }
.login__form label { font-family: var(--headline); font-weight: 500; font-size: .68rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); margin-top: .5rem; }
.login__form input {
  width: 100%;
  padding: .7rem .8rem;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--cream);
  font: inherit;
}
.login__form input:focus { outline: none; border-color: var(--yellow); }
.login__form .btn { margin-top: 1.1rem; justify-content: center; padding: .75rem; }
.login__error { background: rgba(206, 17, 38, .16); color: #FFD1CE; padding: .55rem .7rem; border-radius: var(--r); font-size: .86rem; }

/* ============================================================
   7. DETALLE
   ============================================================ */
.detalle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.2rem;
  padding: clamp(.8rem, 2.4vw, 1.5rem);
  align-items: start;
}

/* La tirilla es lo único del panel que sale del panel: se imprime y se pega en
   la comanda. Por eso lleva la bandera al canto de arriba, como las tarjetas
   del sitio. En papel se imprime en negro (ver el bloque de impresión). */
.tirilla {
  position: relative;
  overflow: hidden;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1rem, 3vw, 1.8rem);
}
.tirilla::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--tricolor);
}
.tirilla__cabeza { text-align: center; padding-bottom: 1rem; border-bottom: 1px dashed var(--line); }
.tirilla__logo { width: 62px; margin: 0 auto .7rem; }
.tirilla__cabeza h1 { font-family: var(--display); font-weight: 400; font-size: 2.4rem; letter-spacing: .02em; color: var(--yellow); }
.tirilla__cabeza p { color: var(--muted); font-size: .84rem; text-transform: capitalize; }

.tirilla__datos { display: grid; gap: .5rem; padding: 1rem 0; border-bottom: 1px dashed var(--line); }
.tirilla__datos > div { display: flex; gap: .8rem; align-items: baseline; }
.tirilla__datos dt { min-width: 6.5rem; font-family: var(--headline); font-weight: 500; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; padding-top: .18rem; }
.tirilla__datos dd { font-weight: 600; }

.tirilla__items { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.tirilla__items td { padding: .4rem 0; vertical-align: top; }
.tirilla__items .c { width: 2.6rem; color: var(--yellow); font-weight: 700; }
.tirilla__items .t { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tirilla__items .combo { display: block; }

.tirilla__suma { border-top: 1px dashed var(--line); padding-top: .8rem; display: grid; gap: .3rem; }
.tirilla__suma > div { display: flex; justify-content: space-between; color: var(--muted); }
.tirilla__suma .total { color: var(--cream); font-family: var(--display); font-weight: 400; font-size: 1.9rem; letter-spacing: .02em; margin-top: .3rem; }
.tirilla__cobrar {
  margin-top: .5rem;
  font-family: var(--headline); font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--green);
}
.tirilla__notas { margin-top: 1rem; background: var(--ink-4); padding: .6rem .8rem; border-radius: var(--r); }

.panel-lateral { display: flex; flex-direction: column; gap: .6rem; }
.panel-lateral h2 { font-family: var(--headline); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .2em; color: var(--muted); margin-top: .8rem; }
.estados-lista { display: grid; gap: .35rem; }
.meta { list-style: none; display: grid; gap: .35rem; font-size: .84rem; }
.meta span { color: var(--muted); display: inline-block; min-width: 6.5rem; }

/* ============================================================
   8. IMPRESIÓN — la tirilla y nada más
   ============================================================ */
@media print {
  body { background: #fff; color: #000; }
  .side, .side__velo, .topbar, .panel-lateral, .aviso { display: none !important; }
  .app, .detalle { display: block; padding: 0; }
  .tirilla { border: none; background: #fff; color: #000; }
  /* La bandera se queda en pantalla. En la comanda saldría como una barra gris
     —la mayoría de estas impresoras son térmicas y no tienen color— y sería
     una mancha, no una bandera. */
  .tirilla::before { display: none; }
  .tirilla__cabeza h1, .tirilla__items .c, .pedido__id b { color: #000; }
  .tirilla__datos dt, .tirilla__suma > div, .tirilla__cabeza p { color: #333; }
  .pago { border: 1px solid #000; color: #000 !important; background: none !important; }
}

/* ============================================================
   8b. RESERVAS DE MESA
   ============================================================ */
/* ---------- Cambio de sección: pedidos / reservas ----------
   Dos tableros, no dos filtros. Van arriba del todo y separados de la lista de
   estados justamente para que no se lean como una opción más de esa lista. */
.modos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin: 0 .9rem .9rem;
  background: var(--ink-3); border: 1px solid var(--line); border-radius: var(--r);
  padding: 3px;
}
.modo {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .5rem .3rem; border-radius: 3px;
  font-family: var(--headline); font-weight: 600; font-size: .76rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  transition: background .2s, color .2s;
}
.modo .ico { font-size: 1rem; }
.modo:hover { color: var(--cream); background: rgba(255, 255, 255, .04); }
.modo.is-on { background: var(--yellow); color: var(--ink); }

/* ---------- Estados de la reserva ----------
   Mismo lenguaje de color que los del pedido: amarillo lo que está sin tocar,
   azul lo confirmado, naranja lo que está en curso, verde lo terminado. */
.estado--nueva      { background: var(--yellow); color: var(--ink); }
.estado--confirmada { background: rgba(75, 134, 240, .18); color: var(--blue-2); }
.estado--montada    { background: rgba(255, 138, 61, .18); color: var(--naranja); }
.estado--cumplida   { background: rgba(37, 211, 102, .18); color: var(--green); }
.estado--cancelada  { background: rgba(206, 17, 38, .18); color: #FF6B63; }

.nav__item--nueva .nav__ico      { color: var(--yellow); }
.nav__item--confirmada .nav__ico { color: var(--blue-2); }
.nav__item--montada .nav__ico    { color: var(--naranja); }
.nav__item--cancelada .nav__ico  { color: #FF6B63; }

/* ---------- Tarjeta de reserva ----------
   Hereda .pedido entero; acá solo va lo que la reserva tiene y el pedido no. */
.reserva__tel {
  margin-left: auto; font-family: var(--cond); font-weight: 700;
  font-size: .82rem; letter-spacing: .04em; color: var(--muted);
}

/* Lo que hay que montar antes de que lleguen. Va en un bloque aparte y con la
   bandera al canto porque es LA información de esta tarjeta: el resto (nombre,
   hora, cuántos) lo tiene cualquier reserva. */
.reserva__montaje {
  position: relative;
  background: rgba(255, 255, 255, .03);
  border-radius: var(--r); padding: .6rem .75rem .6rem 1rem;
  margin-bottom: .7rem; overflow: hidden;
}
.reserva__montaje::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--bandera);
}
.reserva__deco {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  font-size: .92rem; line-height: 1.4;
}
.reserva__deco .ico { color: var(--yellow); font-size: 1.1rem; flex: none; }
.reserva__deco b {
  font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: .03em;
  text-transform: uppercase;
}
.reserva__deco span { color: var(--muted); font-size: .86rem; }
.reserva__montaje .pedido__items { margin-top: .35rem; }

/* La que no lleva nada se queda apagada: en un tablero de veinte mesas, lo que
   importa es distinguir de un vistazo cuáles hay que montar. */
.reserva:not(.reserva--deco) .pedido__cliente { color: var(--muted); }

.pago--decoracion { background: rgba(255, 198, 39, .16); color: var(--yellow); }
.pago--simple     { background: rgba(255, 255, 255, .06); color: var(--muted); }

.cobro--montaje .cobro__punto { background: var(--yellow); }

/* ---------- Filtro por sede ----------
   Va en la barra de trabajo, al lado del día: son los dos ejes que no son el
   estado. Con un solo local no se pinta. */
.sedes-filtro { display: flex; gap: 3px; flex: none; }
.ficha {
  font-family: var(--headline); font-weight: 600; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding: .34rem .6rem; border: 1px solid var(--line); border-radius: var(--r);
  white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.ficha:hover { color: var(--cream); border-color: var(--muted-2); }
.ficha.is-on { background: var(--cream); border-color: var(--cream); color: var(--ink); }

/* La sede de cada tarjeta. En un tablero con los dos locales mezclados, es lo
   primero que hay que poder distinguir de un vistazo. */
.pedido__marcas { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sede-chip {
  font-family: var(--headline); font-weight: 700; font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: var(--r);
  background: rgba(245, 239, 230, .09); color: var(--muted);
  border: 1px solid var(--line);
}
.cobro--sede .cobro__punto { background: var(--cream); }

/* ============================================================
   9. RESPONSIVE
   ============================================================ */

/* --- Portátiles angostos: la barra adelgaza antes de esconderse --- */
@media (max-width: 1180px) { :root { --side-w: 218px; } }

/* --- Teléfono y tablet: la barra pasa a cajón -------------------------
   Sale del flujo y se desliza desde el costado. Se abre con la
   hamburguesa de la barra de trabajo y se cierra tocando el velo, la
   tecla Esc o cualquier entrada del menú. --- */
@media (max-width: 900px) {
  .side {
    position: fixed;
    top: 0; left: 0;
    width: min(280px, 84vw);
    flex-basis: auto;
    transform: translateX(-100%);
    transition: transform .3s var(--e);
    box-shadow: 0 0 60px rgba(0, 0, 0, .6);
    z-index: 50;
  }
  .side.is-open { transform: none; }

  .side__velo {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(5, 4, 4, .66);
    z-index: 45;
    opacity: 0;
    transition: opacity .3s var(--e);
  }
  .side__velo.is-open { opacity: 1; }

  .hamb {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 0 10px;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--r);
    flex: none;
  }
  .hamb span { display: block; height: 2px; background: var(--cream); border-radius: 2px; }

  /* con el cajón abierto, el fondo no se desplaza detrás */
  body.sin-scroll { overflow: hidden; }
}

/* --- Pantallas chicas --- */
@media (max-width: 780px) {
  .detalle { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .topbar { gap: .6rem; padding-inline: .8rem; }
  .topbar__titulo { margin-inline: 0; }
  .cifras { width: 100%; margin-left: 0; justify-content: space-between; order: 3; }
  .cifra { text-align: left; }
  .fecha b { min-width: 0; font-size: 1.05rem; }
  .btn--icono span:not(.ico) { display: none; }
  .tablero { grid-template-columns: 1fr; padding-inline: .8rem; }
  /* el pie de la ficha se parte: total y forma de pago arriba, botones a
     todo el ancho debajo, que es donde va el dedo */
  .pedido__pie { flex-direction: column; align-items: stretch; }
  /* la etiqueta de pago se ciñe a su texto: estirada a todo el ancho parecía
     una barra de estado y no el sello que es */
  .pedido__cobro .pago { align-self: flex-start; }
  /* auto-fit y no dos columnas fijas: en las fichas cerradas queda un solo
     botón y con la rejilla fija se iba a media anchura, descolgado */
  .pedido__botones { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .pedido__botones .btn { justify-content: center; }
  .pedido__botones .btn--principal { grid-column: 1 / -1; }
}

/* --- Sin animaciones si el sistema lo pide --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}