/* ==========================================================================
   41 · EL AMBIENTE DE PRUEBAS  (6 de octubre de 2026)

   Dos cosas en este archivo:

   1. EL BANCO DE TRABAJO de Configuración IA (js/32-ambiente.js): la cinta
      oscura de arriba, el recorrido del pedido, el teléfono del cliente y los
      cuatro paños del restaurante.
   2. EL PANEL DE ADENTRO (`/panel/?prueba`, la «caja» del ambiente): la misma
      interfaz de siempre con una cinta rayada que dice dónde se está, y sin
      lo que no es de una prueba —el menú de ajustes, que trae «Salir» y
      cerraría la sesión de quien prueba—.

   Lo que es del ambiente lleva RAYAS AMARILLAS. Es la única marca que se
   repite en las tres superficies —el banco, la caja y la moto— y es a
   propósito: es la que dice «esto no es de verdad» sin tener que leerla.
   ========================================================================== */
:root {
  --amb-rayas: repeating-linear-gradient(-45deg, var(--amarillo) 0 9px, var(--naranja-cl) 9px 18px);
  --amb-rayas-osc: repeating-linear-gradient(-45deg, rgba(251, 210, 75, .16) 0 9px, transparent 9px 18px);
  --amb-alto: min(76vh, 760px);
}

/* --------------------------------------------------------------------------
   1 · LA CINTA — qué es esto, en una línea, y las tres cifras
-------------------------------------------------------------------------- */
.amb { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
/* Ningún hijo empuja el ancho: la pista del recorrido se desplaza dentro de
   su caja en vez de ensanchar la pantalla entera en el celular. */
.amb > *, .amb__mesa > * { min-width: 0; }

.amb__cinta {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1.4rem;
  padding: 1.35rem 1.5rem 1.35rem 1.9rem; border-radius: var(--radio-g);
  background: radial-gradient(120% 140% at 100% 0, #3A2A1F 0, var(--nori) 58%);
  color: var(--crema);
  box-shadow: 0 18px 40px rgba(22, 16, 13, .22);
}
/* El canto rayado de la izquierda, y unas rayas tenues que caminan despacio. */
.amb__cinta::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; background: var(--amb-rayas);
}
.amb__cinta::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background: var(--amb-rayas-osc); background-size: 200% 200%;
  mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
  animation: amb-caminan 38s linear infinite;
}
@keyframes amb-caminan { to { background-position: 254px 0; } }

.amb__sello {
  display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .45rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--amarillo);
}
.amb__sello > .ico { font-size: 1.05rem; }
.amb__sello i {
  display: inline-flex; align-items: center; gap: .25rem; font-style: normal;
  padding: .18rem .5rem; border-radius: 99px; letter-spacing: .1em;
  background: rgba(251, 210, 75, .14); color: var(--crema); box-shadow: inset 0 0 0 1px rgba(251, 210, 75, .35);
}
.amb__sello i .ico { font-size: .8rem; color: var(--amarillo); }
.amb__t { font-size: clamp(1.25rem, 2.1vw, 1.65rem); color: #fff; }
.amb__t em { font-style: italic; color: var(--naranja-cl); }
.amb__s { margin: .4rem 0 0; max-width: 60ch; font-size: .88rem; line-height: 1.5; color: rgba(253, 244, 231, .72); }

.amb__cifras { display: flex; gap: .5rem; margin: 0; }
.amb__cifras > div {
  display: flex; flex-direction: column-reverse;
  min-width: 84px; padding: .55rem .8rem; border-radius: 14px; text-align: center;
  background: rgba(253, 244, 231, .06); box-shadow: inset 0 0 0 1px rgba(253, 244, 231, .1);
}
.amb__cifras dt { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
                  color: rgba(253, 244, 231, .55); }
.amb__cifras dd {
  margin: 0; font-family: var(--display); font-size: 1.55rem; line-height: 1.1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.amb-cambia { animation: amb-cifra .7s var(--resorte); }
@keyframes amb-cifra { 40% { transform: translateY(-4px) scale(1.12); color: var(--amarillo); } }
.amb__vaciar { white-space: nowrap; }

/* --------------------------------------------------------------------------
   2 · EL RECORRIDO — una pista con sus paradas
-------------------------------------------------------------------------- */
.amb__rec {
  position: relative; padding: 1.1rem 1.3rem 1rem; border-radius: var(--radio-g);
  background: var(--surface); box-shadow: 0 1px 0 var(--linea-sutil), 0 10px 30px rgba(33, 22, 16, .06);
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.amb-rec--otro { opacity: .35; transform: translateY(4px); transition: none; }

.amb-rec__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem 1rem; }
.amb-rec__quien { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; min-width: 0; }
.amb-rec__n { font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.amb-rec__dato { font-size: .88rem; color: var(--tinta-2); }
.amb-rec__total { font-family: var(--display); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.amb-rec__sede { font-size: .76rem; color: var(--tinta-3); }

.amb-rec__chips { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.amb-rec__chips::-webkit-scrollbar { display: none; }
.amb-chip {
  display: inline-flex; flex-direction: column; align-items: center; flex: none;
  padding: .3rem .6rem; border-radius: 10px; font-size: .78rem; font-weight: 700; line-height: 1.15;
  color: var(--tinta-2); background: var(--crema); box-shadow: inset 0 0 0 1px var(--linea-sutil);
  transition: background .2s var(--ease), color .2s var(--ease), transform .25s var(--resorte);
}
.amb-chip small { font-size: .62rem; font-weight: 600; color: var(--tinta-3); }
.amb-chip:hover { transform: translateY(-1px); }
.amb-chip--on { background: var(--nori); color: var(--crema); }
.amb-chip--on small { color: rgba(253, 244, 231, .6); }
.amb-chip--hecho:not(.amb-chip--on) { box-shadow: inset 0 0 0 1px rgba(21, 122, 71, .35); }
.amb-chip--muerto:not(.amb-chip--on) { color: var(--tinta-3); text-decoration: line-through; }

/* La pista: una línea de fondo y otra que se llena hasta la última parada
   cumplida (`--avance`, de 0 a 1). Las paradas van repartidas a lo ancho. */
.amb-rec__pista {
  --p: 30px;
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr);
  list-style: none; margin: .9rem 0 .2rem; padding: .35rem 0 .2rem; overflow-x: auto; scrollbar-width: thin;
}
.amb-rec__pista::before, .amb-rec__pista::after {
  content: ""; position: absolute; top: calc(.35rem + var(--p) / 2 - 1.5px); height: 3px; border-radius: 3px;
  left: calc(50% / var(--n)); right: calc(50% / var(--n));
}
.amb-rec__pista::before { background: var(--crema-3); }
.amb-rec__pista::after {
  right: auto; width: calc((100% - 100% / var(--n)) * var(--avance));
  background: linear-gradient(90deg, var(--verde) 0, var(--verde-cl) 100%);
  transition: width .9s var(--ease);
}
.amb-rec__pista--muerta::after { background: linear-gradient(90deg, var(--verde) 0, var(--rojo) 100%); }

.amb-paso {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .12rem; padding: 0 .2rem; min-width: 0;
  animation: amb-paso-entra .5s var(--ease) both; animation-delay: calc(var(--i) * 35ms);
}
@keyframes amb-paso-entra { from { opacity: 0; transform: translateY(6px); } }
.amb-paso__p {
  display: grid; place-items: center; width: var(--p); height: var(--p); margin-bottom: .3rem; border-radius: 50%;
  font-size: .78rem; font-weight: 800; color: var(--tinta-3);
  background: var(--surface); box-shadow: inset 0 0 0 2px var(--crema-3);
  transition: background .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease);
}
.amb-paso__p i { font-style: normal; }
.amb-paso__t { font-size: .82rem; line-height: 1.2; color: var(--tinta-3); }
.amb-paso__d { font-size: .7rem; line-height: 1.25; color: var(--tinta-3); overflow-wrap: anywhere; }
.amb-paso__h { font-size: .68rem; color: var(--verde); font-weight: 700; font-variant-numeric: tabular-nums; min-height: 1em; }

.amb-paso--hecho .amb-paso__p { background: var(--verde); color: #fff; box-shadow: 0 4px 12px rgba(21, 122, 71, .3); }
.amb-paso--hecho .amb-paso__t { color: var(--tinta); }
.amb-paso--mal .amb-paso__p { background: var(--rojo); box-shadow: 0 4px 12px rgba(176, 30, 36, .3); }
.amb-paso--opcional:not(.amb-paso--ahora) .amb-paso__p { box-shadow: inset 0 0 0 2px var(--crema-3); border: 2px dashed transparent; }
.amb-paso--opcional:not(.amb-paso--ahora) { opacity: .65; }
.amb-paso--ahora .amb-paso__p { background: var(--naranja); color: var(--nori); box-shadow: 0 0 0 0 rgba(240, 144, 30, .55);
                                animation: amb-late 1.8s var(--ease) infinite; }
.amb-paso--ahora .amb-paso__t { color: var(--tinta); }
@keyframes amb-late { 70% { box-shadow: 0 0 0 10px rgba(240, 144, 30, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 144, 30, 0); } }
.amb-paso--recien .amb-paso__p { animation: amb-cumple .6s var(--resorte); }
@keyframes amb-cumple { 0% { transform: scale(.4); } 60% { transform: scale(1.22); } }
.amb-paso--fin .amb-paso__p { background: var(--rojo); color: #fff; }
.amb-paso--fin .amb-paso__t { color: var(--rojo); }

/* Lo que sigue: una frase y el botón que lleva ahí. */
.amb-rec__sigue {
  display: flex; align-items: center; gap: .8rem; margin-top: .85rem; padding: .7rem .8rem .7rem 1rem;
  border-radius: 14px; background: var(--ambar-sua);
}
.amb-rec__sigue p { flex: 1; margin: 0; font-size: .88rem; line-height: 1.45; color: var(--tinta-2); }
.amb-rec__sigue--fin { background: var(--verde-sua); }
.amb-rec__sigue--fin > .ico { color: var(--verde); font-size: 1.2rem; flex: none; }
.amb-rec__sigue .btn { flex: none; }
.amb-rec__pulso { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--naranja); }
.amb-rec__pulso::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--naranja);
  animation: amb-onda 1.8s var(--ease) infinite;
}
@keyframes amb-onda { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

.amb-rec__vacio { display: grid; justify-items: center; gap: .7rem; padding: .4rem 0 .2rem; text-align: center; }
.amb-rec__vacio p { margin: 0; font-size: .86rem; color: var(--tinta-3); }
.amb-rec__guia { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 2.4rem; list-style: none; margin: 0; padding: 0; }
.amb-rec__guia li { display: flex; align-items: center; gap: .6rem; text-align: left; font-size: .84rem; line-height: 1.3; color: var(--tinta-2); }
.amb-rec__guia b {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
  font-family: var(--display); font-size: 1rem; color: var(--nori); background: var(--amb-rayas);
  box-shadow: 0 4px 12px rgba(240, 144, 30, .3);
}
.amb-rec__vacio--mal { display: flex; justify-content: center; text-align: left; color: var(--rojo); }
.amb-rec__vacio--mal div { display: grid; }
.amb-rec__vacio--mal span { font-size: .84rem; color: var(--tinta-3); }

/* --------------------------------------------------------------------------
   3 · LA MESA — el cliente a la izquierda, el restaurante a la derecha
-------------------------------------------------------------------------- */
.amb__mesa {
  display: grid; gap: 1.2rem; align-items: start;
  grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
}
.amb__cliente { display: grid; gap: .65rem; min-width: 0; }

.amb__como { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.amb__como .tbl-seg { flex: none; }
.amb__campo {
  display: inline-flex; align-items: center; gap: .35rem; min-width: 0;
  padding: .32rem .55rem; border-radius: 10px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--linea-sutil); color: var(--tinta-3);
  transition: box-shadow .2s var(--ease);
}
.amb__campo:focus-within { box-shadow: inset 0 0 0 1.5px rgba(240, 144, 30, .7); }
.amb__campo input { width: 6.4rem; border: 0; background: none; padding: 0; font-size: .86rem; color: var(--tinta); }
/* El teléfono en su propio renglón: con la sede, la hora y «Nueva» al lado
   no cabía y se montaba encima del botón. */
.amb__campo--tel { order: 4; flex: 1 1 100%; }
.amb__campo--tel input { width: 100%; }
.amb__campo input:focus { outline: none; }
/* El flujo y el modelo del probador (api/compacto.js). */
.amb__campo--sel select {
  border: 0; background: none; padding: 0; font-size: .82rem; font-weight: 600; color: var(--tinta);
  max-width: 11rem; cursor: pointer;
}
.amb__campo--sel select:focus { outline: none; }
.amb__nueva {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: .3rem; padding: .38rem .6rem; border-radius: 10px;
  font-size: .8rem; font-weight: 700; color: var(--tinta-2);
  transition: background .2s var(--ease), transform .3s var(--resorte);
}
.amb__nueva:hover { background: var(--crema-2); }
.amb__nueva:hover .ico { transform: rotate(-200deg); }
.amb__nueva .ico { transition: transform .6s var(--ease); }

.amb__tel { height: var(--amb-alto); min-height: 540px; }
.prb__hilo.amb-quieto .wa__b { animation: none !important; }
.amb__pistas { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; padding-bottom: .1rem;
               mask-image: linear-gradient(90deg, #000 85%, transparent);
               -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.amb__pistas::-webkit-scrollbar { display: none; }
.amb__pistas .pista { flex: none; }
.amb__turno { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .76rem; color: var(--tinta-3); }
.amb__turno .ico { color: var(--naranja); flex: none; }
.amb__turno b { color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* Lo que escribió una persona desde la caja del ambiente. */
.wa__b--persona { box-shadow: inset 3px 0 0 var(--naranja), 0 1px 1px rgba(33, 22, 16, .08); }
.amb-persona { display: block; margin-bottom: .15rem; font-size: .66rem; font-weight: 800;
               letter-spacing: .06em; text-transform: uppercase; color: #A8650E; }

/* El clip: mandar lo que no es texto. */
.amb__adj { position: relative; flex: none; }
.amb__clip {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  color: var(--tinta-3); font-size: 1.15rem; transition: background .2s var(--ease), color .2s var(--ease), transform .35s var(--resorte);
}
.amb__clip:hover, .amb__clip[aria-expanded="true"] { background: #fff; color: var(--tinta); }
.amb__clip[aria-expanded="true"] { transform: rotate(-35deg); }
.amb__menu {
  position: absolute; z-index: 5; left: 0; bottom: calc(100% + .5rem); width: 268px; padding: .45rem;
  border-radius: 16px; background: var(--surface);
  box-shadow: 0 24px 50px rgba(22, 16, 13, .28), 0 0 0 1px var(--linea-sutil);
  transform-origin: 22px 100%;
}
.amb__menu--entra { animation: amb-menu .32s var(--resorte); }
@keyframes amb-menu { from { opacity: 0; transform: scale(.85) translateY(8px); } }
.amb__menu-t {
  display: flex; align-items: center; gap: .35rem; margin: .35rem .45rem .25rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
}
.amb__menu-o {
  display: grid; width: 100%; padding: .5rem .65rem; border-radius: 11px; text-align: left; line-height: 1.25;
  transition: background .18s var(--ease);
}
.amb__menu-o b { font-size: .86rem; }
.amb__menu-o small { font-size: .74rem; color: var(--tinta-3); }
.amb__menu-o:hover:not(:disabled) { background: var(--crema); }
.amb__menu-o:disabled { opacity: .45; cursor: not-allowed; }

/* Las burbujas que no son texto: el pin y el PDF. */
.amb-adj { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .6rem; min-width: 210px; }
.amb-adj__t { display: grid; line-height: 1.25; }
.amb-adj__t b { font-size: .86rem; }
.amb-adj__t small { font-size: .72rem; opacity: .7; font-variant-numeric: tabular-nums; }
.amb-adj__mapa {
  position: relative; width: 58px; height: 58px; border-radius: 10px; overflow: hidden;
  background:
    linear-gradient(90deg, transparent 46%, rgba(255, 255, 255, .9) 46% 54%, transparent 54%),
    linear-gradient(0deg, transparent 30%, rgba(255, 255, 255, .8) 30% 36%, transparent 36%),
    linear-gradient(35deg, #CFE8C9, #E9F1D9 60%, #D8E6F2);
}
.amb-adj__mapa i { position: absolute; inset: 0; display: grid; place-items: center; color: var(--rojo-vivo); font-size: 1.5rem;
                   animation: amb-cae .6s var(--resorte) both; }
@keyframes amb-cae { from { transform: translateY(-14px); opacity: 0; } }
.amb-adj__pdf {
  display: grid; place-items: center; width: 44px; height: 54px; border-radius: 6px 14px 6px 6px;
  font-size: .7rem; font-weight: 800; letter-spacing: .06em; color: #fff; background: var(--rojo);
}
.amb-adj__x { grid-column: 1 / -1; font-size: .86rem; white-space: pre-wrap; }

/* La foto del cliente: arrastrada, pegada o escogida con el clip. */
.amb-foto { display: grid; gap: .35rem; max-width: 240px; padding: .3rem; }
.amb-foto__img { display: block; width: 100%; max-height: 300px; object-fit: cover; border-radius: 8px; }
.amb-foto__pie { font-size: .86rem; white-space: pre-wrap; padding: 0 .25rem; }
.amb-foto__vio { font-size: .7rem; line-height: 1.3; opacity: .75; padding: 0 .25rem .1rem; }
/* Soltar fotos encima del teléfono. */
.amb__cliente .prb__tel { position: relative; }
.amb__cliente .prb__tel.amb-soltar::after {
  content: '📷  Suelta la foto: llega como si la mandara el cliente';
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 2rem; text-align: center;
  font-weight: 700; color: var(--rojo-osc); background: rgba(253, 244, 231, .92);
  border: 3px dashed var(--rojo); border-radius: inherit; pointer-events: none;
}

/* --------------------------------------------------------------------------
   4 · LOS PAÑOS DEL RESTAURANTE
-------------------------------------------------------------------------- */
.amb__escena { display: grid; gap: .65rem; min-width: 0; }
.amb__secs { overflow-x: auto; scrollbar-width: none; }
.amb__secs::-webkit-scrollbar { display: none; }
.amb__secs .tbl-seg__o { display: inline-flex; align-items: center; gap: .35rem; }
.amb__sec-c { display: none; }
.amb__n { margin-left: .1rem; }
.amb__n--late { animation: late .5s var(--resorte) 2; }

.amb__panos { position: relative; min-width: 0; }
.amb__pano { min-width: 0; }
.amb__pano--entra { animation: amb-pano .4s var(--ease); }
@keyframes amb-pano { from { opacity: 0; transform: translateY(8px); } }

/* La caja: el panel de verdad en un marco, con su barrita. */
.amb-marco {
  display: flex; flex-direction: column; height: var(--amb-alto); min-height: 540px; overflow: hidden;
  border-radius: var(--radio-g); background: var(--crema);
  box-shadow: 0 0 0 1px var(--linea-sutil), 0 22px 50px rgba(33, 22, 16, .12);
}
.amb-marco__cab {
  display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem .5rem .9rem;
  background: var(--surface); border-bottom: 1px solid var(--linea-sutil);
}
.amb-marco__cab p { flex: 1; margin: 0; font-size: .8rem; color: var(--tinta-3); min-width: 0;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amb-marco__cab p b { color: var(--tinta); }
.amb-marco__luz { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--verde-cl);
                  box-shadow: 0 0 0 3px var(--verde-sua); }
.amb-marco__f { flex: 1; width: 100%; border: 0; background: var(--crema); }

/* La moto: la app en un celular, con el GPS al lado. */
.amb-moto { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.amb-cel {
  position: relative; width: 384px; height: var(--amb-alto); min-height: 540px; padding: 30px 12px 14px; border-radius: 42px;
  background: linear-gradient(160deg, #2C211B, var(--nori));
  box-shadow: 0 30px 60px rgba(22, 16, 13, .3), inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 0 0 5px #0E0A08;
}
.amb-cel__oreja {
  position: absolute; z-index: 2; top: 12px; left: 50%; width: 64px; height: 6px; margin-left: -32px;
  border-radius: 99px; background: #0E0A08; box-shadow: inset 0 1px 1px rgba(255, 255, 255, .08);
}
.amb-cel__f { width: 100%; height: 100%; border: 0; border-radius: 24px; background: var(--crema);
              transition: opacity .3s var(--ease), filter .3s var(--ease); }
.amb-cel__f--cambia { opacity: .3; filter: blur(2px); }
.amb-moto__lado { display: grid; gap: .85rem; min-width: 0; }
.amb-moto__caja { margin: 0; }
.amb-moto__caja .tbl-caja__t { margin-bottom: .7rem; }
.amb-moto__gps { display: grid; gap: .45rem; margin: .7rem 0; }
.amb-gps { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: .84rem; color: var(--tinta-2); }
.amb-gps .ico { color: var(--rojo-vivo); flex: none; }
.amb-nota { margin: .6rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--tinta-3); }
.amb-nota .ico { vertical-align: -.15em; }

/* Los papeles: la lista a la izquierda y el papel, de verdad, a la derecha. */
.amb-pap { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.amb-pap__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; max-height: var(--amb-alto); overflow-y: auto; }
.amb-pap__f {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; align-items: center;
  padding: .6rem .7rem; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--linea-sutil);
  transition: box-shadow .2s var(--ease), transform .3s var(--resorte);
}
.amb-pap__f--on { box-shadow: inset 0 0 0 1.5px var(--naranja), 0 8px 20px rgba(240, 144, 30, .12); }
.amb-pap__n { font-family: var(--display); font-weight: 700; }
.amb-pap__d { display: grid; font-size: .84rem; line-height: 1.25; min-width: 0; }
.amb-pap__d small { color: var(--tinta-3); font-size: .72rem; }
.amb-pap__b { grid-column: 1 / -1; display: flex; gap: .3rem; margin-top: .35rem; }
.amb-pap__t {
  padding: .25rem .6rem; border-radius: 8px; font-size: .74rem; font-weight: 700; color: var(--tinta-2);
  background: var(--crema); transition: background .18s var(--ease), color .18s var(--ease);
}
.amb-pap__t:hover { background: var(--crema-2); }
.amb-pap__t--on { background: var(--nori); color: var(--crema); }
.amb-pap__mesa {
  display: grid; justify-items: center; padding: 1.4rem 1rem; border-radius: var(--radio-g);
  background: var(--amb-rayas-osc), var(--crema-2); background-size: 26px 26px, auto;
}
/* El papel sale de la impresora: entra desde arriba, con el borde de abajo
   cortado en dientes. */
.amb-pap__hoja {
  position: relative; width: min(330px, 100%); min-height: 260px; padding-bottom: 10px;
  background: #fff; box-shadow: 0 18px 40px rgba(33, 22, 16, .18);
  -webkit-mask: conic-gradient(from 135deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 8px repeat-x,
                linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat;
          mask: conic-gradient(from 135deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 14px 8px repeat-x,
                linear-gradient(#000 0 0) top / 100% calc(100% - 7px) no-repeat;
}
.amb-pap__hoja--sale { animation: amb-imprime .7s var(--ease); }
@keyframes amb-imprime { from { clip-path: inset(0 0 100% 0); transform: translateY(-14px); } }
.amb-pap__papel { display: block; width: 100%; }
.amb-pap__cargando { display: grid; place-items: center; min-height: 240px; font-size: .84rem; color: var(--tinta-3); }

/* El rastro: una línea de tiempo de lo que habría salido. */
.amb-ras { display: grid; gap: .9rem; }
.amb-ras__cab p { margin: 0 0 .7rem; font-size: .86rem; line-height: 1.5; color: var(--tinta-2); }
.amb-ras__f { display: flex; flex-wrap: wrap; gap: .35rem; }
.amb-filtro {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 99px;
  font-size: .78rem; font-weight: 600; color: var(--tinta-2); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--linea-sutil); transition: background .18s var(--ease), color .18s var(--ease);
}
.amb-filtro small { font-weight: 800; color: var(--tinta-3); }
.amb-filtro--on { background: var(--nori); color: var(--crema); box-shadow: none; }
.amb-filtro--on small { color: var(--amarillo); }

.amb-ras__l { position: relative; list-style: none; margin: 0; padding: 0 0 0 .2rem; display: grid; gap: .55rem;
              max-height: calc(var(--amb-alto) - 7rem); overflow-y: auto; }
.amb-ras__l::before { content: ""; position: absolute; left: 21px; top: 10px; bottom: 10px; width: 2px; background: var(--crema-3); }
.amb-r { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .7rem; align-items: start; }
.amb-r--nuevo { animation: amb-r-llega .6s var(--ease); }
.amb-r--nuevo .amb-r__c { animation: amb-r-brilla 1.8s var(--ease); }
@keyframes amb-r-llega { from { opacity: 0; transform: translateX(14px); } }
@keyframes amb-r-brilla { 0%, 30% { box-shadow: inset 0 0 0 1.5px var(--naranja), 0 8px 20px rgba(240, 144, 30, .2); } }
.amb-r__i {
  position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  font-size: 1.05rem; color: var(--tinta-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--linea-sutil);
}
.amb-r--caja .amb-r__i      { color: var(--verde); background: var(--verde-sua); }
.amb-r--factura .amb-r__i   { color: var(--rojo); background: var(--rojo-sua); }
.amb-r--whatsapp .amb-r__i  { color: #0B7A4B; background: rgba(37, 211, 102, .14); }
.amb-r--impresora .amb-r__i { color: var(--nori); background: var(--crema-2); }
.amb-r--aviso .amb-r__i     { color: #A8650E; background: var(--ambar-sua); }
.amb-r--red .amb-r__i       { color: #fff; background: var(--rojo); }
.amb-r__c {
  min-width: 0; padding: .55rem .8rem; border-radius: 14px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--linea-sutil);
}
.amb-r__t { margin: 0; font-size: .88rem; line-height: 1.4; font-weight: 600; }
.amb-r__m { margin: .1rem 0 0; font-size: .74rem; color: var(--tinta-3); }
.amb-r__p { font-weight: 700; color: var(--tinta-2); text-decoration: underline; text-decoration-color: var(--arena);
            text-underline-offset: 2px; }
.amb-r details { margin-top: .4rem; }
.amb-r summary { font-size: .76rem; font-weight: 700; color: var(--tinta-2); cursor: pointer; width: fit-content; }
.amb-r pre {
  margin: .4rem 0 0; padding: .65rem .75rem; border-radius: 10px; max-height: 280px; overflow: auto;
  font: 500 .74rem/1.5 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  color: #F2E6D8; background: var(--nori-2); white-space: pre-wrap; overflow-wrap: anywhere;
}

.amb-vacio {
  display: grid; justify-items: center; gap: .35rem; padding: 3rem 1.5rem; text-align: center;
  border-radius: var(--radio-g); background: var(--surface); box-shadow: inset 0 0 0 1px var(--linea-sutil);
}
.amb-vacio .ico--g { font-size: 2rem; color: var(--arena); margin-bottom: .3rem; }
.amb-vacio span { max-width: 44ch; font-size: .84rem; color: var(--tinta-3); }

/* --------------------------------------------------------------------------
   5 · EL PANEL DE ADENTRO — `/panel/?prueba`
-------------------------------------------------------------------------- */
.modo-prueba .barra { position: relative; }
.modo-prueba .barra::before {
  content: 'Ambiente de pruebas · nada de esto sale a la cocina ni al cliente';
  display: block; padding: .3rem 1rem; text-align: center;
  font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--nori);
  background: var(--amb-rayas);
}
/* El menú de ajustes trae «Salir», que cerraría la sesión de quien prueba, y
   pantallas que no son del ambiente. El recorrido guiado tampoco es de aquí. */
.modo-prueba .ajustes, .modo-prueba #b-como { display: none !important; }
.modo-prueba .avatar { background: var(--amb-rayas); color: var(--nori); }

/* --------------------------------------------------------------------------
   6 · Pantallas más angostas
-------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .amb__cinta { grid-template-columns: minmax(0, 1fr) auto; }
  .amb__cifras { grid-column: 1 / -1; grid-row: 2; }
  .amb__mesa { grid-template-columns: 1fr; }
  .amb__cliente { max-width: 520px; width: 100%; margin: 0 auto; }
  .amb-cel { width: 330px; }
}
@media (max-width: 760px) {
  :root { --amb-alto: 78vh; }
  .amb__cinta { padding: 1.1rem 1.1rem 1.1rem 1.4rem; gap: .9rem; }
  .amb__cifras > div { flex: 1; min-width: 0; }
  .amb__sec-l--larga { display: none; }
  .amb__sec-c { display: inline; }
  .amb-moto { grid-template-columns: 1fr; }
  .amb-cel { width: min(360px, 100%); margin: 0 auto; }
  .amb-pap { grid-template-columns: 1fr; }
  .amb-pap__lista { max-height: none; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; }
  .amb-rec__pista { grid-auto-columns: 92px; }
  .amb-rec__sigue { flex-wrap: wrap; }
  .amb-rec__sigue .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .amb__cinta::after, .amb-paso--ahora .amb-paso__p, .amb-rec__pulso::after { animation: none; }
}