/* ════════════════════════════════════════════════════════════════════════
   CIFRA Hostelería · la escena de la cabecera (19-oct-2026)
   «La factura que mueve la carta»: llega la foto de la factura del pescadero por WhatsApp,
   se lee sola, la gamba sube un 15 %, el escandallo de las gambas al ajillo se recalcula
   (coste 3,19 → 3,69 €, food cost 25,1 → 29,0 %, margen 9,54 → 9,04 €, PVP 14,00 € con IVA
   del 10 %) y llega el aviso al WhatsApp del dueño. Las cifras son las de la presentación
   de Lanzadera (Pescados Ejemplo, 16,50 → 19,00 €/kg); el cálculo es el del portal.
   ════════════════════════════════════════════════════════════════════════ */
.t-hosteleria .escena-viva { --esc-papel: #FCFAF5; --esc-tinta: #14110C; --esc-tinta-2: #635C50; --esc-linea: #E6DFD0; }

.h-whats { left: 0; top: 0; width: 58%; }
.h-whats .ventana__cab { background: #1B3A2C; color: #F6F1E6; border: 0; }
.h-whats .ventana__cab small { color: #9DC4AA; }
.h-whats .ventana__cuerpo { padding: .9em .9em 1em; }
.ticket { position: relative; margin: 0 .2em .2em auto; width: 92%; padding: .9em .95em 1em; border-radius: .35em; background: #FFFFFF; color: #2A2620; font: 500 .74em/1.45 var(--f-dato); transform: rotate(-1.6deg); box-shadow: 0 .4em 1em -.4em rgb(0 0 0 / .35); overflow: hidden; }
.ticket__cab { display: block; font-weight: 600; font-size: 1.05em; letter-spacing: .02em; }
.ticket__sub { display: block; margin-bottom: .5em; color: #7A7266; }
.ticket__fila { display: grid; grid-template-columns: 1fr auto auto; gap: .8em; padding: .18em .25em; margin-inline: -.25em; border-radius: .25em; transition: background-color .4s; }
.ticket__fila span:last-child { min-width: 4.4em; text-align: right; }
.ticket__total { display: flex; justify-content: space-between; margin-top: .45em; padding-top: .45em; border-top: 1px dashed #CFC5B1; }
.ticket__total + .ticket__total { margin-top: 0; padding-top: .1em; border: 0; }
.ticket::after { content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; background: linear-gradient(to bottom, transparent, rgb(62 207 142 / .35) 70%, rgb(62 207 142 / .9) 98%, transparent); opacity: 0; pointer-events: none; }
.ticket.escanea::after { animation: escanear 1.5s var(--suave) forwards; }
@keyframes escanear { 0% { top: -30%; opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.ticket.leido .ticket__fila { background: rgb(62 207 142 / .14); }
.ticket.leido .ticket__fila:nth-of-type(2) { transition-delay: .12s; }
.ticket.leido .ticket__fila:nth-of-type(3) { transition-delay: .24s; }
.ticket.sube .ticket__fila--gamba { background: rgb(214 154 45 / .28); }
.h-whats .h { display: block; margin-top: .3em; text-align: right; font-size: .72em; color: #667781; }

.h-leida { left: 3%; top: 60%; z-index: 3; }
.h-sube { right: 1%; top: 30%; z-index: 4; }
.h-sube b { font-family: var(--f-dato); font-weight: 500; }

.h-esc { right: 0; top: 38%; width: 61%; z-index: 2; transition: box-shadow .6s var(--suave), transform .6s var(--suave); }
.h-esc.activo { box-shadow: 0 0 0 .18em #3ECF8E, 0 2.2em 4em -2em rgb(0 0 0 / .6); transform: translateY(-.2em); }
.h-esc .ventana__cuerpo { display: grid; gap: .1em; padding-top: .7em; }
.h-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: .42em 0; border-bottom: 1px solid var(--esc-linea); font-size: .86em; color: var(--esc-tinta-2); }
.h-fila b { font: 500 1.12em/1 var(--f-dato); color: var(--esc-tinta); letter-spacing: -0.02em; }
.h-fila--grande b { font-size: 1.45em; }
.h-medidor { position: relative; height: .5em; margin: .55em 0 .3em; border-radius: 1em; background: linear-gradient(to right, #1E9D63 0 66.6%, #D69A2D 66.6% 77.7%, #C0573F 77.7%); opacity: .9; }
.h-medidor i { position: absolute; top: 50%; left: 55.8%; width: 1.05em; height: 1.05em; margin: -.525em 0 0 -.525em; border-radius: 50%; background: #FCFAF5; border: .22em solid #14110C; transition: left .9s var(--suave); }
.h-medidor.sube i { left: 64.4%; }
.h-zonas { position: relative; height: 1em; font: 500 .66em/1 var(--f-dato); color: var(--esc-tinta-2); letter-spacing: .02em; }
.h-zonas span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.h-zonas span:first-child { transform: none; }
.h-zonas span:last-child { transform: translateX(-100%); }
.h-menos { justify-self: end; margin-top: .45em; padding: .3em .6em; border-radius: 999px; background: #F6EAD2; color: #87580A; font: 500 .76em/1 var(--f-dato); }

.h-aviso { left: 1%; bottom: 0; width: 66%; z-index: 5; max-width: none; padding: .75em .95em .8em; font-size: .9em; box-shadow: 0 1.6em 3em -1.4em rgb(0 0 0 / .7); position: absolute; }
.h-aviso__de { display: flex; align-items: center; gap: .5em; margin-bottom: .35em; font-size: .82em; font-weight: 700; color: #15392A; }
.h-aviso__de svg { width: 1.3em; height: 1.3em; color: #1E9D63; }

/* en el móvil la caja es más alta para que quepa todo sin encoger la letra */
@container (max-width: 440px) {
  .escena-viva__caja { aspect-ratio: 1 / 1.4; font-size: 3.25cqw; }
  .h-whats { width: 78%; }
  .h-esc { width: 80%; top: 42%; }
  .h-sube { top: 33%; }
  .h-leida { top: 24%; left: auto; right: 1%; }
  .h-aviso { width: 90%; }
}