/* LA RÚSTICA · lo que suma la conexión con el local: la marcha del pedido con su paso real, el estado de cada
   cosa en el ticket, lo pedido en la mesa y el estado de la reserva. Solo clases nuevas: no cambia nada de style.css. */
.marcha.vivo{grid-template-columns:repeat(var(--n),1fr)}
.marcha.vivo::before{left:calc(50% / var(--n));right:calc(50% / var(--n));background:linear-gradient(90deg,var(--ambar) var(--m),#2b2522 var(--m))}
.marcha.vivo li{padding:0 2px}

.ticket li em.tk-e{display:flex;align-items:center;gap:5px;margin-top:4px;font:700 9.5px/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;opacity:1;color:rgba(42,28,17,.6)}
.ticket li em.tk-e::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.ticket li em.tk-e.preparando{color:#9a3206}
.ticket li em.tk-e.preparando::before{animation:latir 1.3s ease-in-out infinite}
.ticket li em.tk-e.listo{color:#c2360f}
.ticket li em.tk-e.entregado{color:rgba(42,28,17,.48)}
.ticket li.tk-estado b{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.ticket li.tk-estado b::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ticket li.tk-estado.pendiente b{color:#9a3206}
.ticket li.tk-estado.pendiente b::before{animation:latir 1.3s ease-in-out infinite}
.ticket li.tk-estado.confirmada b,.ticket li.tk-estado.sentada b{color:#3e5f22}
.ticket li.tk-estado.cancelada b,.ticket li.tk-estado.no-vino b{color:#c2360f}

.hola .anuncio{margin-top:14px}
.hola .anuncio b{color:var(--ambar)}

.mi-mesa{display:grid;gap:9px;padding-top:13px;border-top:1px dashed rgba(243,235,224,.16)}
.mi-mesa ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mi-mesa li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:500 13px/1.3 var(--f)}
.mi-mesa li span{min-width:0}
.mi-mesa li em{flex:none;display:inline-flex;align-items:center;gap:5px;font:700 9.5px/1.2 var(--f);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--humo2)}
.mi-mesa li em::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mi-mesa li em.e-pendiente{color:var(--humo)}
.mi-mesa li em.e-preparando{color:var(--brasa)}
.mi-mesa li em.e-preparando::before{box-shadow:0 0 8px var(--brasa);animation:latir 1.3s ease-in-out infinite}
.mi-mesa li em.e-listo{color:var(--ambar)}
.mi-total{display:flex;justify-content:space-between;align-items:baseline;font:700 11px var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--humo)}
.mi-total b{font:400 22px var(--f-tit);letter-spacing:.03em;color:var(--hueso)}

/* el aviso de arriba toma el ancho del texto (antes, por left:50%, quedaba en una columna de ~180 px y partía hasta
   los textos cortos); los anuncios largos del local van a la izquierda y hasta 3 renglones (el texto entero queda en el inicio) */
#aviso{width:max-content;max-width:min(86%,460px);text-wrap:balance}
#aviso.largo{text-align:left;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* el mozo avisado, en el teléfono: una píldora al ancho del texto, a la derecha como el resto (antes ocupaba todo el
   ancho y, como ahora queda hasta que el mozo resuelve, tapaba los botones de las tarjetas). En pantalla ancha ya era así. */
@media not all and (min-width:700px) and (min-height:500px){#flotantes .flo-mozo.activo{flex:0 1 auto}}

/* «Cancelar el aviso» pide un segundo toque */
.enlace.seguro{color:var(--brasa);text-decoration-color:currentColor}

/* la ficha de algo que se terminó */
.it-pie .btn:disabled{opacity:.5;filter:saturate(.25);box-shadow:none}

/* lo pedido en la mesa: «ver todo» y la hoja con todo */
.mi-mesa .mi-mas{justify-self:start;margin:-3px 0 0;padding:4px 0;font-size:12px}
.mesa-todo .btn.llama{margin-top:18px}
.mesa-todo .btn+.btn{margin-top:10px}
@media (min-width:700px) and (min-height:500px){.mi-mesa ul,.mi-total{max-width:520px}}

/* ---------- la mesa del QR (y la demo sin mesa) ---------- */
/* cabecera del inicio: a la derecha del logo, la mesa (o el botón de la demo) y los soplidos */
.tope-der{display:grid;justify-items:end;gap:7px}
.tope-demo{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:0;border-radius:99px;background:var(--llama);color:#fff;font:800 10.5px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;box-shadow:0 3px 0 #8a2407;text-shadow:0 1px 0 rgba(120,30,0,.45);transition:transform .14s,box-shadow .14s}
.tope-demo:active{transform:translateY(3px);box-shadow:0 0 0 #8a2407}
.tope-mesa{display:inline-flex;align-items:center;gap:7px;padding:9px 14px 8px;border-radius:99px;background:rgba(242,101,34,.16);border:1px solid rgba(242,101,34,.55);font:400 17px/1 var(--f-tit);letter-spacing:.08em;text-transform:uppercase;color:var(--hueso);white-space:nowrap}
.tope-mesa .ico{width:16px;height:16px;color:var(--brasa);stroke-width:2.2}
/* el bloque de la mesa: lo primero del inicio */
.mesa-ya{margin-top:16px}
.salon.mesa-top{gap:14px;padding:18px 18px 10px}
.mesa-top > header{display:block}
.mesa-n{display:flex;align-items:baseline;gap:12px;margin:8px 0 6px;font:400 34px/1 var(--f-tit);letter-spacing:.07em;text-transform:uppercase;color:var(--hueso)}
.mesa-n b{font:400 clamp(72px,23cqw,96px)/.8 var(--f-tit);letter-spacing:.02em;color:var(--brasa);text-shadow:0 0 28px rgba(242,101,34,.35)}
.salon .mesa-mozo{font:500 14px/1.3 var(--f);color:var(--humo)}
.mesa-mozo b{font:italic 700 21px/1 var(--f-cond);letter-spacing:.07em;text-transform:uppercase;color:var(--ambar);margin-left:2px}
.mesa-top .tres button{padding:16px 4px 14px;font-size:12px}
#vivo-llamado:empty,#vivo-mesa:empty{display:none}
.mesa-llamado{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:10px;width:100%;padding:12px 14px;border-radius:14px;background:rgba(242,101,34,.13);border:1px solid rgba(242,101,34,.5);color:var(--hueso);text-align:left}
.mesa-llamado > i{width:9px;height:9px;border-radius:50%;background:var(--ambar);box-shadow:0 0 10px var(--brasa);animation:latir 1.3s ease-in-out infinite}
.mesa-llamado.voy > i{background:#7bd88f;box-shadow:0 0 10px rgba(123,216,143,.7)}
.mesa-llamado .ico{width:20px;height:20px;color:var(--ambar)}
.mesa-llamado span{display:grid;gap:3px;min-width:0}
.mesa-llamado b{font:700 14px/1.25 var(--f)}
.mesa-llamado em{font:700 9.5px/1.2 var(--f);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--humo);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mesa-top .salir{justify-self:center;padding:8px 6px;min-height:36px}
/* sin mesa: reservar y pedir, de a dos */
.rapido.de-a-dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.dos > .btn:only-child{grid-column:1/-1}
.fila.otro-dia{grid-template-columns:auto 1fr}
@media (min-width:700px) and (min-height:500px){
  .tope-der{grid-auto-flow:column;align-items:center;gap:10px}
  .tope-demo{min-height:42px;padding:0 18px;font-size:12px}
  .tope-mesa{padding:11px 16px 10px;font-size:19px}
  .mesa-ya{margin-top:20px}
  .salon.mesa-top{grid-template-columns:minmax(240px,.8fr) minmax(0,1.7fr);column-gap:32px;row-gap:12px;padding:24px 28px 16px;align-items:start}
  .mesa-top > header{grid-column:1;grid-row:1/span 3}
  .mesa-top > :not(header){grid-column:2}
  .mesa-top .salir{justify-self:start;padding-left:0}
  .mesa-top .tres button{padding:18px 8px 16px;font-size:13px}
}
/* las cabeceras de Carta, Reservar, Club y la mesa: el logo y, a la derecha, la mesa o el botón de la demo */
.cab-fila{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.cab-fila .logo{flex:none}
/* el aviso escondido no asoma arriba (vacío medía 22 px y el -140% no alcanzaba a sacarlo de la pantalla) */
#aviso{visibility:hidden;transition:transform .35s cubic-bezier(.2,.9,.2,1),visibility 0s linear .35s}
#aviso.ver{visibility:visible;transition:transform .35s cubic-bezier(.2,.9,.2,1)}

/* ---------- auditoría del 15/10 ---------- */
/* teléfono, con el mozo avisado y algo en el pedido: la píldora del mozo va en su propio renglón, arriba de «Ver pedido»
   (al lado quedaba aplastada en una columna de cinco renglones y «Ver pedido» se partía); el contenido baja lo que suben */
@media not all and (min-width:700px) and (min-height:500px){
  #flotantes:has(.flo-pedido){flex-wrap:wrap}
  #flotantes:has(.flo-pedido) .flo-mozo.activo{flex:1 1 100%;white-space:nowrap}
  #flotantes .flo-mozo.activo span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  #marco:has(#flotantes > .flo-mozo.activo + .flo-pedido) #app{padding-bottom:calc(var(--barra) + 160px + env(safe-area-inset-bottom))}
}
/* áreas de toque de 44 px sin cambiar el dibujo: «Cancelar el aviso» y los enlaces de la hoja, «Deslizá» y los puntos */
#hoja .enlace{min-height:44px;padding:12px 8px}
.desliza{min-height:44px}
.vende .puntos{gap:0;margin-left:-14px}
.vende .puntos button,.vende .puntos button.on{width:36px;height:44px;display:grid;place-items:center;background:none;box-shadow:none;border-radius:0}
.vende .puntos button::after{content:none}
.vende .puntos button::before{content:"";width:7px;height:7px;border-radius:9px;background:rgba(243,235,224,.3);transition:width .3s,background .3s}
.vende .puntos button.on::before{width:22px;background:var(--brasa);box-shadow:0 0 10px var(--brasa)}
/* la mesa cobrada: sin «Pedir la cuenta» quedan dos botones del mismo tamaño, y el cartel de gracias */
.tres:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
.mesa-llamado.cobrada{margin:0}
.mesa-llamado.cobrada > i{background:#7bd88f;box-shadow:0 0 10px rgba(123,216,143,.7);animation:none}
/* Reservar con las reservas pausadas: el aviso y WhatsApp arriba de todo */
.form .pausa{display:grid;gap:12px;margin:10px 0 4px}
.form .pausa .it-nota{margin:0}

/* nota para la cocina en la ficha de cada plato */
.it-nota-campo{margin-top:20px}
.it-nota-campo small{font-weight:500;text-transform:none;letter-spacing:0;opacity:.8}

/* lo más pedido de verdad puede traer un plato sin foto: va sin foto (como en la carta), con el nombre grande y la misma altura */
.pcard.sin-foto{align-content:end;min-height:236px;background:radial-gradient(120% 80% at 0 0,rgba(242,101,34,.24),transparent 62%),var(--carbon)}
.pcard.sin-foto strong{font:400 24px/1.02 var(--f-tit);letter-spacing:.03em;text-transform:uppercase;min-height:0}