/* ============================================================
   KOKORO'S PIC — estils de la pagina de comanda.
   Els comparteixen /pedidos i /pedidos?modo=asistido, que han
   de ser identiques: l'unica diferencia entre les dues pagines
   es el rotul de dalt ("Pide por la web" / "Modo asistido").
   ============================================================ */

body{padding-bottom:env(safe-area-inset-bottom)}
.logo-img{display:block;width:auto;height:56px}
.nav-in{height:84px}

/* ---------- passos ---------- */
.pasos{
  display:flex;gap:.5rem;align-items:center;margin-bottom:1.6rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)
}
.paso{display:flex;align-items:center;gap:.5rem;white-space:nowrap}
.paso b{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-weight:500;flex:none
}
.paso[aria-current="true"]{color:var(--ember)}
.paso[aria-current="true"] b{border-color:var(--ember);background:var(--glow)}
.paso-sep{flex:1;height:1px;background:var(--line);min-width:12px}
@media (max-width:560px){ .paso span{display:none} .paso-sep{min-width:8px} }

h1{font-size:clamp(1.9rem,5vw,2.9rem);margin-bottom:.4rem}
.sub{color:var(--ink-2);font-size:1.05rem;margin-bottom:1.8rem}

/* ---------- carta ---------- */

/* "Elige lo que quieres" y la primera categoria ("Pollos") se
   tocaban: entre las dos lineas quedaban 6 px. La carta entera
   arranca ahora mas abajo, y de paso el hueco es el mismo que
   separa una categoria de la siguiente, asi que la pagina lleva
   un ritmo. */
#carta{margin-top:2.2rem}

/* ---------- accesos rapidos a cada categoria ----------
   Pegados debajo de la barra de arriba (84 px). En el movil la
   fila se desliza de lado en vez de partirse en dos. */
.accesos{
  position:sticky;top:84px;z-index:30;display:flex;gap:.45rem;overflow-x:auto;
  margin:1.4rem calc(-1 * var(--gutter, 0px)) 0;padding:.6rem 0;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);scrollbar-width:none
}
.accesos::-webkit-scrollbar{display:none}
.accesos:empty{display:none}
.accesos a{
  flex:none;text-decoration:none;white-space:nowrap;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:.55em 1.05em
}
.accesos a:hover{border-color:var(--ember);color:var(--ink)}
.accesos a[aria-current="true"]{background:var(--ember);border-color:var(--ember);color:var(--on-ember)}
.accesos + #carta{margin-top:1.4rem}
.categoria{scroll-margin-top:150px}

/* El telefono: opcional solo en el mostrador. */
.solo-asistido{display:none}
.modo-asistido .solo-asistido{display:inline}
.modo-asistido .solo-web{display:none}

.categoria{margin-bottom:2.6rem}

/* ---------- el titulo de cada categoria ----------
   El nombre y el filete que llega hasta el borde. La fila
   envuelve (flex-wrap) y el filete lleva min-width:0 para que
   pueda encoger en vez de forzar el ancho de la fila en un
   movil.                                                      */
.categoria h2{
  font-family:var(--f-mono);font-weight:500;font-size:.78rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ember);
  display:flex;align-items:center;flex-wrap:wrap;
  gap:.55rem .75rem;margin:0 0 1.15rem
}
.categoria h2::after{
  content:"";order:1;flex:1 1 40px;min-width:0;height:1px;
  background:linear-gradient(90deg,var(--line),transparent)
}


.rejilla{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* La ficha va en DOS filas, no en una.

   En una sola fila competian por el ancho el nombre, el precio y
   los dos botones del contador. Los botones y el precio no se
   encogen, asi que quien pagaba el ajuste era siempre el nombre:
   en una columna de 260px "Pollo a l'ast entero" se partia en
   tres lineas dentro de una franja estrecha, con el precio pegado
   al costado. Se leia mal y ademas quedaba feo.

   Ahora el nombre se lleva la fila entera y debajo van el precio
   (a la izquierda) y el contador (a la derecha). El nombre nunca
   compite con nada, el precio queda separado por el hueco de
   fila, y el reparto es el mismo en el movil y en el ordenador.  */
.art{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.85rem 1rem;text-align:left;width:100%;
  background:var(--bg-2);border:1px solid var(--line-soft);border-radius:3px;
  padding:1rem 1.1rem;color:inherit;font:inherit;cursor:default;
  transition:border-color .18s,background .18s;min-height:82px
}
.art:hover{border-color:var(--ember)}
.art.activo{border-color:var(--ember);background:var(--glow)}
.art-txt{flex:1 1 100%;min-width:0}
.art-txt b{display:block;font-size:1.01rem;font-weight:700;line-height:1.35}
.art-txt small{display:block;color:var(--ink-3);font-size:.83rem;line-height:1.45;margin-top:.28rem}
/* margin-right:auto empuja el contador al otro extremo de la
   segunda fila, sin necesidad de envolverlos en nada. */
.art-precio{font-family:var(--f-mono);font-size:1.05rem;color:var(--ember);flex:none;margin-right:auto}

/* ---------- agotado y "quedan pocos" ----------
   Lo agotado se queda en la carta, apagado: que desaparezca sin
   más hace pensar que la web ha fallado. */
.art-estado{
  display:block;margin-top:.35rem;font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold)
}
.art.agotado{opacity:.45;cursor:not-allowed}
.art.agotado:hover{border-color:var(--line)}
.art.agotado .art-estado{color:var(--shut)}
.art-limite{display:block;margin-top:.35rem;font-size:.8rem;line-height:1.4;color:var(--gold)}
.art-limite[hidden]{display:none}
/* Lo que llega ya añadido desde "Lo quiero" de la portada. */
@keyframes art-recien{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 5px var(--ember)}}
.art.recien{animation:art-recien 1s ease-in-out 3}

/* ---------- grupos alternos ----------
   Los grupos se distinguian solo por el titulo: seis bloques de
   fichas identicas seguidas, y al bajar se pierde de vista donde
   empieza uno y acaba el otro. Los grupos pares invierten el
   color -- ficha blanca, nombre en naranja, el resto en marron --
   asi que cada cambio de grupo se ve de un vistazo.

   Va por :nth-of-type y no por una clase puesta a mano, porque la
   carta la pinta el JS con las categorias que haya en ese momento
   (las de menu.js o las que lleguen del servidor): si el negocio
   añade o quita un grupo, la alternancia se recoloca sola.

   El fondo es crema y no blanco: el blanco puro era un agujero de
   luz en una pantalla de carbon y brasa, y ademas no es un color
   de esta casa. El crema tiene el mismo amarillo de fondo que el
   resto de la paleta, solo que subido de luz.

   Los colores de la letra tampoco son los tokens del tema: los
   del tema estan pensados para fondo oscuro. Estos van al reves y
   estan medidos sobre el crema -- 4,92:1 el naranja, 12,04:1 el
   marron y 6,98:1 el marron flojo -- todos por encima del minimo
   AA. Si algun dia se oscurece el fondo, hay que rehacer la
   cuenta: el naranja es el que va mas justo.                     */
.categoria:nth-of-type(even){
  --inv-fondo:#F2E9DA;          /* crema */
  --inv-naranja:#B03E12;        /* naranja tostado */
  --inv-marron:#3A241C;         /* marron de piel asada */
  --inv-marron-2:#5C4A3C;       /* el mismo, aclarado */
  --inv-linea:#D9CDB8;
}
.categoria:nth-of-type(even) .art{
  background:var(--inv-fondo);
  border-color:var(--inv-linea);
}
.categoria:nth-of-type(even) .art:hover{border-color:var(--inv-naranja)}
.categoria:nth-of-type(even) .art.activo{
  border-color:var(--inv-naranja);
  background:#F8E9D2;
}
.categoria:nth-of-type(even) .art-txt b{color:var(--inv-naranja)}
.categoria:nth-of-type(even) .art-txt small{color:var(--inv-marron-2)}
.categoria:nth-of-type(even) .art-precio,
.categoria:nth-of-type(even) .qty{color:var(--inv-marron)}
.categoria:nth-of-type(even) .paso-btn{
  border-color:var(--inv-linea);
  color:var(--inv-marron);
}
.categoria:nth-of-type(even) .paso-btn:hover{
  border-color:var(--inv-naranja);
  color:var(--inv-naranja);
}

.contador{display:flex;align-items:center;gap:.55rem;flex:none}
.paso-btn{
  width:48px;height:48px;border-radius:50%;flex:none;cursor:pointer;
  background:none;border:1px solid var(--line);color:var(--ink);
  font-size:1.5rem;line-height:1;display:grid;place-items:center;transition:.18s
}
.paso-btn:hover{border-color:var(--ember);color:var(--ember)}
.paso-btn:disabled{opacity:.3;cursor:not-allowed}
.qty{font-family:var(--f-mono);font-size:1.25rem;min-width:1.6ch;text-align:center}

/* ---------- barra de resum ---------- */
.resumen{
  position:sticky;bottom:0;z-index:40;margin-top:1.5rem;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);padding:.9rem 0 calc(.9rem + env(safe-area-inset-bottom))
}
.resumen-in{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.resumen .total{font-family:var(--f-mono);margin-right:auto;line-height:1.3}
.resumen .total small{
  display:block;font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)
}
.resumen .total b{font-size:1.5rem;font-weight:500}

/* ---------- cistella (resum del pas 2) ---------- */
.cesta{
  background:var(--bg-2);border:1px solid var(--line-soft);border-radius:3px;
  padding:1rem 1.1rem;margin-bottom:1.6rem
}
.cesta h3{
  font-family:var(--f-mono);font-weight:500;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.7rem
}
.cesta ul{list-style:none;margin:0;padding:0}
/* Rejilla de tres columnas: cantidad | nombre | precio. Con flex,
   un nombre largo empujaba el precio y el "€" bajaba a otra
   linea. Ahora el nombre es el que se parte y el precio queda
   entero, alineado a la derecha. */
.cesta li{
  display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;column-gap:.6rem;align-items:baseline;
  padding:.45rem 0;font-size:.92rem;line-height:1.35;overflow-wrap:anywhere;
  border-bottom:1px dashed var(--line-soft)
}
.cesta li:last-child{border-bottom:0}
.cesta li i{font-style:normal;font-family:var(--f-mono);color:var(--ember);flex:none}
.cesta li span{font-family:var(--f-mono);font-size:.88rem;color:var(--ink-2);white-space:nowrap;text-align:right}
.cesta .suma{
  display:flex;gap:.7rem;border-top:1px solid var(--line);margin-top:.6rem;padding-top:.6rem;
  font-family:var(--f-mono);font-size:1.1rem
}
.cesta .suma span{margin-left:auto;white-space:nowrap}

/* ---------- formulari ---------- */
.form{max-width:620px}
.campo{display:block;margin-bottom:1.1rem}
.campo > span{
  display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:.45rem
}
.campo > span i{font-style:normal;color:var(--ink-3);letter-spacing:.06em;text-transform:none}
.campo input{
  width:100%;font:inherit;font-size:1.15rem;padding:.85rem 1rem;
  background:var(--bg-2);border:1px solid var(--line);border-radius:3px;color:var(--ink)
}
.campo input:focus{border-color:var(--ember);outline:none}
.campo input[type="date"],.campo input[type="time"]{font-family:var(--f-mono)}
/* el desplegable de tramos: mismo aspecto que los campos de texto */
.campo select{
  width:100%;font:inherit;font-family:var(--f-mono);font-size:1.15rem;
  padding:.85rem 1rem;background:var(--bg-2);border:1px solid var(--line);
  border-radius:3px;color:var(--ink);cursor:pointer
}
.campo select:focus{border-color:var(--ember);outline:none}
/* la frase de recogida, repetida en el resguardo final */
.frase-tramo{
  font-family:var(--f-mono);font-size:.95rem;color:var(--sage);
  margin:.8rem 0 1.1rem;line-height:1.5
}

/* ---------- telefon: prefix + numero ----------
   El prefix va en un desplegable propi para que el numero se
   guarde siempre igual (+34681103814) venga como venga. El
   selector se queda estrecho: lo normal es no tocarlo.       */
.tel-fila{display:grid;grid-template-columns:minmax(0,8.4rem) minmax(0,1fr);gap:.5rem}
.tel-fila select{
  width:100%;font:inherit;font-family:var(--f-mono);font-size:1rem;
  padding:.85rem .6rem;background:var(--bg-2);border:1px solid var(--line);
  border-radius:3px;color:var(--ink);cursor:pointer
}
.tel-fila select:focus{border-color:var(--ember);outline:none}
.tel-fila input{font-family:var(--f-mono);letter-spacing:.04em}
.tel-aviso{
  margin-top:.4rem;font-family:var(--f-mono);font-size:.8rem;color:var(--ink-3);min-height:1.2em
}
.tel-aviso.ok{color:var(--sage)}
.tel-aviso.mal{color:var(--shut)}
.tel-consejo{margin-top:.2rem;font-size:.8rem;line-height:1.45;color:var(--ink-3)}
.tel-consejo[hidden],.modo-asistido .tel-consejo{display:none}
/* Solo en pantallas muy estrechas se ponen uno debajo del otro:
   en un movil normal caben en la misma linea, que es lo comodo. */
@media (max-width:340px){
  .tel-fila{grid-template-columns:1fr}
}

/* ---------- dia i hora de recollida ---------- */
.recogida{
  background:var(--bg-2);border:1px solid var(--line-soft);border-radius:3px;
  padding:1.1rem;margin-bottom:1.8rem
}
.recogida > h3{
  font-family:var(--f-display);font-size:1.25rem;margin-bottom:.25rem
}
.recogida > p{color:var(--ink-3);font-size:.9rem;margin-bottom:1rem}
.dos{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media (max-width:520px){ .dos{grid-template-columns:1fr} }
.cuando{
  margin-top:.4rem;font-family:var(--f-mono);font-size:.85rem;color:var(--sage)
}
.cuando.mal{color:var(--shut)}

/* ---------- avisos ---------- */
.aviso{
  border:1px dashed var(--gold);color:var(--gold);border-radius:3px;
  padding:.8rem 1rem;font-size:.95rem;margin-bottom:1.2rem
}
.error{border-color:var(--shut);color:var(--shut)}

/* ---------- tiquet final ---------- */
.ticket{max-width:620px;margin-inline:auto;text-align:center;padding-block:1rem}
.ticket .codigo-grande{
  font-family:var(--f-mono);font-size:clamp(3.4rem,15vw,6rem);line-height:1;
  letter-spacing:-.04em;color:var(--ember);margin:.6rem 0 1rem
}
.ticket .pagar{
  display:inline-block;border:2px solid var(--gold);color:var(--gold);border-radius:3px;
  font-family:var(--f-mono);letter-spacing:.16em;text-transform:uppercase;font-size:.85rem;
  padding:.7em 1.3em;margin-bottom:1rem
}
/* Cobrado. Verde oliva, el mismo que en cocina significa
   "hecho": es el color con el que ya se lee "esto está
   resuelto" en el resto del sistema. */
.ticket .pagar.pagado{border-color:var(--sage);color:var(--sage)}
.ticket .recoger{
  border:1px solid var(--line);border-radius:3px;padding:.9rem 1rem;margin-bottom:1.6rem;
  background:var(--bg-2)
}
.ticket .recoger b{display:block;font-family:var(--f-mono);font-size:1.35rem;color:var(--ink);margin-top:.2rem}
.ticket .recoger small{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}

.ticket .t-donde{margin:-.9rem 0 1.6rem;font-size:.92rem;color:var(--ink-2)}
.ticket .t-donde a,.ticket .t-equivocado a{color:var(--ember);text-decoration:underline;text-underline-offset:3px}
.ticket .t-equivocado{margin-top:1rem;font-size:.9rem;color:var(--ink-2)}

.lista-final{list-style:none;margin:0 0 1.4rem;padding:0;text-align:left}
.lista-final li{
  display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;column-gap:.6rem;align-items:baseline;
  padding:.6rem 0;font-size:.95rem;line-height:1.35;overflow-wrap:anywhere;border-bottom:1px dashed var(--line-soft)
}
.lista-final li b{font-family:var(--f-mono);color:var(--ember);font-weight:500}
.lista-final li span{font-family:var(--f-mono);white-space:nowrap;text-align:right}

/* "Lo quiero" de algo agotado: aviso flotante sobre la barra. */
.aviso-portada{
  position:fixed;left:50%;transform:translateX(-50%);z-index:60;
  bottom:calc(7rem + env(safe-area-inset-bottom,0px));width:min(92vw,30rem);
  background:var(--bg-2);border:1px solid var(--line);border-left:5px solid var(--shut);border-radius:4px;
  padding:.85rem 2.6rem .85rem 1rem;font-size:.92rem;line-height:1.45;color:var(--ink);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.75)
}
.aviso-portada b{display:block;color:var(--ink)}
.aviso-portada a{color:var(--ember);text-decoration:underline;text-underline-offset:3px}
.aviso-portada button{
  position:absolute;top:.3rem;right:.45rem;background:none;border:0;color:var(--ink-3);
  font-size:1.5rem;line-height:1;padding:.2rem .35rem;cursor:pointer
}

/* ---------- elegir cómo se paga (paso 2) ---------- */
.eleccion-pago{
  display:flex;flex-direction:column;gap:.7rem;
  margin-top:1.6rem;padding-top:1.5rem;border-top:1px dashed var(--line)
}
.eleccion-pago.oculto{display:none}

.fidelidad{
  background:var(--bg-2);border:1px solid var(--line-soft);border-radius:3px;
  padding:1.1rem;margin-top:1.6rem;text-align:left
}
.fidelidad h3{font-family:var(--f-display);font-size:1.15rem;margin-bottom:.5rem}
.sellos{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.sello{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;font-size:.85rem;color:var(--ink-3)
}
.sello.lleno{border-color:var(--ember);background:var(--ember);color:var(--on-ember)}
/* El estado del pedido en el tiquet. Era una linea gris y pasaba
   desapercibida: ahora es un recuadro del color del estado que
   late, y cuando el pedido esta listo tiembla y se pone verde. */
.estado-vivo{
  --c-estado:var(--gold);
  margin:0 0 1.5rem;padding:.95rem 1rem;border-radius:4px;
  font-family:var(--f-mono);font-size:.95rem;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;line-height:1.4;
  color:var(--c-estado);border:2px solid var(--c-estado);
  background:color-mix(in srgb,var(--c-estado) 14%,transparent);
  animation:estado-late 1.8s ease-in-out infinite
}
.estado-vivo::before{
  content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;
  background:currentColor;margin-right:.6em;vertical-align:.05em;
  animation:estado-punto 1.2s ease-in-out infinite
}
.estado-vivo[data-estado="preparacion"]{--c-estado:var(--ember)}
.estado-vivo[data-estado="listo"]{
  --c-estado:#8FBF5A;font-size:1.1rem;
  animation:estado-tiembla .5s ease-in-out 3,estado-late 1.2s ease-in-out 1.5s infinite
}
.estado-vivo[data-estado="entregado"],
.estado-vivo[data-estado="entregado"]::before{--c-estado:var(--ink-3);animation:none}
@keyframes estado-late{
  0%,100%{box-shadow:0 0 0 0 transparent}
  50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--c-estado) 35%,transparent)}
}
@keyframes estado-punto{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes estado-tiembla{
  0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){.estado-vivo,.estado-vivo::before{animation:none}}

.oculto{display:none}

/* /pedidos i /pedidos?modo=asistido comparteixen exactament
   aquests estils: han de ser identiques.                     */

@media (max-width:620px){
  .rejilla{grid-template-columns:1fr;gap:1rem}

  /* En el movil la etiqueta se lleva su linea entera: asi el
     nombre de la categoria y el filete se quedan arriba y nada
     empuja el bloque hacia la izquierda. */
  .categoria h2{gap:.5rem .65rem;margin-bottom:1.15rem}
  .categoria h2 em{flex:0 1 auto;max-width:100%;margin-top:.15rem}
  .categoria h2::after{flex:1 1 24px}

  /* En una pantalla estrecha el nombre del articulo se veia
     grande y todo junto. Baja un punto, las lineas se abren y
     la ficha respira por dentro. */
  #carta{margin-top:1.9rem}
  .categoria{margin-bottom:2.2rem}
  .art{padding:1.05rem 1rem;gap:.8rem .85rem;min-height:88px}
  .art-txt b{font-size:.97rem;line-height:1.4}
  .art-txt small{font-size:.8rem;line-height:1.5;margin-top:.32rem}
  .art-precio{font-size:1rem}
  .resumen .btn{width:100%}
  .resumen .total{margin-right:0;width:100%}
}

/* ============================================================
   ESPERANDO EL PAGO

   Pantalla completa mientras el dinero no esta. Dos motivos: en
   el movil del cliente evita que se vuelva atras a media
   operacion, y en el kiosco del mostrador evita que el siguiente
   de la cola toque el pedido del anterior.
   ============================================================ */
.velo-pago{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;
  padding:1.2rem;overflow-y:auto;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(8px)
}
.velo-pago[hidden]{display:none}

.caja-pago{
  width:100%;max-width:26rem;text-align:center;
  background:var(--bg-2);border:1px solid var(--line);
  border-top:4px solid var(--ember);border-radius:3px;
  padding:2rem 1.6rem 1.6rem
}
.caja-pago .eyebrow{justify-content:center;margin-bottom:.8rem}
.caja-pago h2{
  font-family:var(--f-display);font-weight:700;
  font-size:1.5rem;line-height:1.25;margin:0 0 1.2rem
}
.pago-importe{
  font-family:var(--f-mono);font-size:2.6rem;font-weight:500;
  letter-spacing:-.02em;color:var(--ember);margin:0 0 .8rem;line-height:1
}
.pago-dicho{color:var(--ink-2);font-size:.92rem;margin:0 0 1.4rem}

/* mientras la pasarela responde */
.pago-espera{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin:1.4rem 0
}
.pago-espera[hidden]{display:none}
.pago-latido{
  width:9px;height:9px;border-radius:50%;background:var(--ember);
  animation:latido-pago 1.4s ease-in-out infinite
}
@keyframes latido-pago{0%,100%{opacity:1}50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){
  .pago-latido{animation:none}
}

/* el banco de mentira */
.pago-simulado{
  margin-top:1.2rem;padding-top:1.2rem;border-top:1px dashed var(--line)
}
.pago-simulado[hidden]{display:none}
.pago-etiqueta{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .9rem
}
.pago-botones{display:flex;flex-direction:column;gap:.6rem}

/* ---------- pago en el mostrador ---------- */
.pago-mostrador{margin-top:1.3rem;padding-top:1.3rem;border-top:1px dashed var(--line)}
.pago-mostrador[hidden]{display:none}

.pago-resumen{list-style:none;margin:0 0 1.1rem;padding:0;text-align:left}
.pago-resumen li{
  display:flex;gap:.8rem;padding:.5rem 0;font-size:.92rem;
  border-bottom:1px dashed var(--line-soft)
}
.pago-resumen li b{font-family:var(--f-mono);color:var(--ember);font-weight:500}
.pago-resumen li span{margin-left:auto;font-family:var(--f-mono)}

.pago-codigo{margin-top:1rem;text-align:left}
.pago-codigo[hidden]{display:none}
.pago-codigo .campo{margin-bottom:.8rem}
/* Un código de cuatro cifras no necesita el ancho de un nombre,
   y centrado y espaciado se teclea mejor de pie en el
   mostrador. */
.pago-codigo input{
  font-family:var(--f-mono);font-size:1.3rem;letter-spacing:.4em;text-align:center
}

.pago-fallo{
  margin:1rem 0 0;color:var(--shut);font-size:.88rem
}
.pago-fallo[hidden]{display:none}

/* El cronometro de la reserva: grande, para que se vea correr.
   En el ultimo minuto se pone en rojo. */
.pago-reloj{
  margin:1.2rem 0 1.4rem;display:flex;flex-direction:column;align-items:center;gap:.2rem;
  font-size:.85rem;color:var(--ink-2)
}
.pago-reloj:empty{display:none}
.pago-reloj b{
  font-family:var(--f-mono);font-weight:500;font-size:2rem;letter-spacing:.04em;
  color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.1
}
.pago-reloj.prisa b{color:var(--shut);animation:latido-reloj 1s ease-in-out infinite}
@keyframes latido-reloj{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.pago-reloj.prisa b{animation:none}}

@media (max-width:400px){
  .caja-pago{padding:1.5rem 1.1rem 1.2rem}
  .pago-importe{font-size:2.1rem}
}