/* ==========================================================================
   21 · PIEZAS COMPARTIDAS Y LA PESTAÑA «CONFIGURACIÓN IA»

   Arriba, lo que comparten varias pantallas: los botones finos y verdes, la
   chapa de estado, la insignia de las pestañas, el interruptor de formulario
   y el hilo de burbujas. El hilo lo comparten DE VERDAD el probador y la
   bandeja de WhatsApp: el mismo `.wa__b` pinta las dos, porque quien prueba y
   quien atiende están mirando la misma conversación.

   Abajo, la pestaña IA, rehecha el 23 de septiembre de 2026 con el lenguaje del
   Resumen: una cabecera oscura que dice en un vistazo si Kenji está contestando
   y por dónde, secciones con la pastilla que se desliza, y los ajustes en
   tarjetas con su borrador. Las fichas de Pedidos se fueron a 20-pedidos.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Piezas que usan varias pantallas
-------------------------------------------------------------------------- */
.btn--fino  { --bg: transparent; --bd: var(--linea); --fg: var(--tinta-2); font-weight: 600; }
.btn--fino:hover { --bg: var(--crema-2); --bd: var(--arena); }
.btn--verde { --bg: var(--verde); --fg: #fff; --bd: var(--verde); }
.btn--verde:hover { --bg: var(--verde-cl); --bd: var(--verde-cl); }

.cargando {
  text-align: center; padding: 3.5rem 1.5rem; color: var(--tinta-3);
  font-size: .93rem;
}

/* La chapa de estado. `.marca-sede` ya existía y dice otra cosa —dónde se
   vende—, así que esta lleva su propio nombre en vez de colgarse de aquélla. */
.chapa {
  display: inline-block; font-size: .66rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  padding: .3em .6em; border-radius: 6px;
  background: var(--crema-2); color: var(--tinta-3);
}
.chapa--verde { background: var(--verde-sua); color: var(--verde); }
.chapa--rojo  { background: var(--rojo-sua);  color: var(--rojo); }
.chapa--ambar { background: var(--ambar-sua); color: #A8650E; }
/* RECOGE (20 de septiembre de 2026). En oscuro y no en un tono suave: no es un
   estado más del pedido, es lo que decide si sale en moto o se queda en el
   mostrador. Color propio, sin robarle el suyo a ningún estado. */
.chapa--recoge { background: var(--nori); color: var(--crema); }

/* El contador rojo de la pestaña. Es lo único de todo el panel que pide que lo
   miren, así que late — una vez, no en bucle: algo que parpadea sin parar en la
   pantalla de la caja se vuelve parte del mobiliario en dos días. */
.tab__n {
  min-width: 20px; height: 20px; padding: 0 .35rem; margin-left: .1rem;
  display: inline-grid; place-items: center;
  background: var(--rojo-vivo); color: #fff; border-radius: 99px;
  font-size: .7rem; font-weight: 800; line-height: 1;
  animation: late .5s var(--resorte) 2;
}
@keyframes late { 50% { transform: scale(1.28); } }

/* `button.pista` y no `.pista` a secas: la clase suelta es la de las notas al
   pie de todo el panel (05-dialogos.css), y con este chip encima cada nota de
   dos renglones salía como una pastilla con borde. */
button.pista {
  font-size: .8rem; padding: .4rem .75rem; border-radius: 99px;
  border: 1px solid var(--linea); color: var(--tinta-2); background: var(--surface);
  transition: border-color var(--d-rapido) var(--ease), color var(--d-rapido) var(--ease),
              transform .2s var(--resorte);
}
button.pista:hover { border-color: var(--naranja); color: var(--tinta); transform: translateY(-1px); }

/* El interruptor de formulario. `.palanca` ya existía y es un `<button
   role="switch">` de la carta; este es un `<input type="checkbox">` porque va
   dentro de un formulario que se lee entero al guardar. */
.suiche { position: relative; display: inline-block; flex: none; width: 52px; height: 30px; }
.suiche input { position: absolute; opacity: 0; width: 100%; height: 100%;
                margin: 0; cursor: pointer; z-index: 1; }
.suiche span {
  position: absolute; inset: 0; border-radius: 99px; background: var(--arena);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.18); pointer-events: none;
  transition: background .26s var(--ease);
}
.suiche span::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(33,22,16,.35);
  transition: transform .36s var(--resorte);
}
.suiche input:checked + span { background: var(--verde-cl); }
.suiche input:checked + span::after { transform: translateX(22px); }
.suiche input:focus-visible + span { outline: 2px solid var(--naranja); outline-offset: 2px; }
.suiche input:disabled + span { opacity: .6; }
.suiche--chico { width: 42px; height: 24px; }
.suiche--chico span::after { width: 18px; height: 18px; }
.suiche--chico input:checked + span::after { transform: translateX(18px); }
.suiche-fila { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }

/* ==========================================================================
   EL HILO DE BURBUJAS — compartido por el probador y la bandeja
   ========================================================================== */
.wa__b {
  max-width: min(78%, 460px); padding: .55rem .8rem; border-radius: 14px;
  font-size: .92rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  animation: burbuja-entra .32s var(--resorte) both;
}
@keyframes burbuja-entra { from { opacity: 0; transform: translateY(8px) scale(.96); } }

.wa__b--ellos {
  align-self: flex-start; background: var(--surface); color: var(--tinta);
  box-shadow: 0 1px 1.5px rgba(33, 22, 16, .13); border-top-left-radius: 4px;
}
.wa__b--mio {
  align-self: flex-end; background: #D9FDD3; color: #112B0D;
  box-shadow: 0 1px 1.5px rgba(33, 22, 16, .13); border-top-right-radius: 4px;
}
.wa__b--error { background: var(--rojo-sua); color: var(--rojo); }
/* El formato de WhatsApp (`waFormato` en 19-whatsapp.js), como en el teléfono. */
.wa__b b { font-weight: 700; }
.wag__mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .86em; }
.wag__cita {
  display: inline-block; padding-left: .55rem; border-left: 3px solid currentColor;
  opacity: .78;
}

/* --- EL RELEVO -------------------------------------------------------------
   La raya donde el chat cambió de manos: de Kenji a una persona, o de vuelta.
   Centrada y con una línea a cada lado, no como burbuja y sin firma, porque al
   recorrer un hilo largo lo que hay que ver de un golpe es dónde dejó de
   contestar la IA y dónde volvió — y porque no lo dijo nadie del restaurante,
   lo dijo el sistema. Lo marca `tipo = 'sistema'` (ver api/relevo.js). */
.wa__relevo {
  align-self: stretch; display: flex; align-items: center; gap: .55rem;
  margin: .35rem 0; color: var(--tinta-2);
}
.wa__relevo::before,
.wa__relevo::after { content: ''; flex: 1 1 1.5rem; height: 1px; background: var(--linea); }
.wa__relevo span {
  flex: 0 1 auto; max-width: min(80%, 430px); text-align: center;
  font-size: .76rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word;
}

/* Los tres puntos. Es la única forma de que quien prueba entienda que el
   modelo está pensando y no que se colgó: un turno va entre 400 ms y 3 s. */
.wa__b--pensando { display: flex; gap: .28rem; padding: .75rem .9rem; }
.wa__b--pensando span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--arena);
  animation: puntea 1.1s ease-in-out infinite;
}
.wa__b--pensando span:nth-child(2) { animation-delay: .16s; }
.wa__b--pensando span:nth-child(3) { animation-delay: .32s; }
@keyframes puntea { 0%, 60%, 100% { opacity: .3; transform: translateY(0); }
                    30% { opacity: 1; transform: translateY(-3px); } }

.wa__costo {
  display: block; margin-top: .4rem; padding-top: .35rem;
  border-top: 1px dashed rgba(33, 22, 16, .12);
  font-size: .68rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; white-space: normal;
}

.wa__vacio { margin: auto; text-align: center; color: var(--tinta-3); max-width: 30ch; }
.wa__vacio p { font-size: .95rem; margin: .6rem 0 .3rem; color: var(--tinta-2); }
.wa__vacio small { font-size: .78rem; color: var(--tinta-3); line-height: 1.5; }

/* ==========================================================================
   LA PESTAÑA «CONFIGURACIÓN IA»
   ========================================================================== */

/* --------------------------------------------------------------------------
   La cabecera: una ficha oscura con Kenji adentro
-------------------------------------------------------------------------- */
.iah {
  position: relative; overflow: hidden; isolation: isolate;
  margin: .1rem 0 1.35rem; padding: 1.35rem 1.4rem 1.2rem; border-radius: 24px;
  background: linear-gradient(135deg, var(--nori-2), var(--nori) 60%);
  color: var(--crema);
  box-shadow: 0 18px 44px rgba(22, 16, 13, .22);
  animation: tbl-entra .55s var(--ease) both;
}
/* El resplandor de atrás: verde si contesta, rojo si está apagado. Quieto; es
   la ficha la que dice el estado, no una luz que parpadea. */
.iah::before {
  content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -120px; top: -220px;
  border-radius: 50%; background: radial-gradient(circle, rgba(30, 158, 92, .28), transparent 65%);
}
.iah--off::before { background: radial-gradient(circle, rgba(210, 38, 45, .32), transparent 65%); }
.iah::after {
  content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; left: -120px; bottom: -200px;
  border-radius: 50%; background: radial-gradient(circle, rgba(240, 144, 30, .18), transparent 65%);
}

.iah__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; }
.iah__quien { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.iah__av {
  position: relative; flex: none; width: 78px; height: 78px; border-radius: 24px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(253, 244, 231, .14), rgba(253, 244, 231, .04));
  border: 1px solid rgba(253, 244, 231, .12);
}
.iah__av img {
  width: 70px; height: 70px; object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35));
  animation: ia-saluda 5s var(--ease-io) 1s infinite;
  transform-origin: 50% 90%;
}
@keyframes ia-saluda { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-7deg); }
                       82% { transform: rotate(6deg); } 88% { transform: rotate(-3deg); } }
.iah__av i {
  position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--verde-cl); border: 3px solid var(--nori);
}
.iah--off .iah__av i { background: var(--rojo-vivo); }
.iah--on .iah__av i::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--verde-cl);
  animation: tbl-onda 2.8s var(--ease-suave) infinite; z-index: -1;
}
.iah__kick { margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .14em;
             text-transform: uppercase; color: var(--arena); }
.iah__t { margin: .1rem 0 .2rem; font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.5rem);
          font-weight: 700; letter-spacing: -.03em; color: #fff; }
.iah__estado { margin: 0; font-size: .92rem; color: rgba(253, 244, 231, .78); }

/* El interruptor grande: el freno de mano de las dos sedes. */
.iah__sw {
  display: inline-flex; align-items: center; gap: .9rem;
  padding: .55rem .6rem .55rem 1rem; border-radius: 99px;
  background: rgba(253, 244, 231, .08); border: 1px solid rgba(253, 244, 231, .14);
  color: var(--crema); text-align: left;
  transition: background .25s var(--ease), transform .25s var(--resorte);
}
.iah__sw:hover { background: rgba(253, 244, 231, .14); transform: translateY(-1px); }
.iah__sw-t { display: flex; flex-direction: column; line-height: 1.15; }
.iah__sw-t b { font-size: .95rem; }
.iah__sw-t small { font-size: .72rem; color: var(--arena); }
.iah__sw-p {
  position: relative; width: 58px; height: 32px; border-radius: 99px; flex: none;
  background: var(--rojo-vivo); transition: background .3s var(--ease);
}
.iah__sw-p i {
  position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  transition: transform .45s var(--resorte);
}
.iah--on .iah__sw-p { background: var(--verde-cl); }
.iah--on .iah__sw-p i { transform: translateX(26px); }
.iah__sw--ocupado { opacity: .6; pointer-events: none; }

.iah__datos {
  display: grid; gap: 1px; margin-top: 1.2rem; border-radius: 16px; overflow: hidden;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: rgba(253, 244, 231, .08);
}
.iah__d {
  display: flex; flex-direction: column; gap: .15rem; min-width: 0;
  padding: .8rem 1rem; background: rgba(22, 16, 13, .45);
}
.iah__d > span:first-child {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--arena);
}
.iah__d b {
  font-size: 1.05rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.iah__d b em { font-style: normal; font-weight: 500; font-size: .82rem; color: rgba(253, 244, 231, .65); }
.iah__d small { font-size: .74rem; color: rgba(253, 244, 231, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iah__mal { color: #FF9B9F !important; }
.iah__canal { display: inline-flex; align-items: center; gap: .45rem; }
.iah__canal i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--verde-cl); flex: none; }
.iah__canal i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--verde-cl);
  animation: tbl-onda 2.8s var(--ease-suave) infinite;
}
.iah__canal--off i { background: var(--naranja); }
.iah__canal--off i::after { display: none; }
.iah__barra {
  display: block; height: 5px; margin: .3rem 0 .1rem; border-radius: 99px; overflow: hidden;
  background: rgba(253, 244, 231, .12);
}
.iah__barra i {
  display: block; height: 100%; width: var(--p, 0%); border-radius: 99px; background: var(--verde-cl);
  transform-origin: left; animation: tbl-crece-x .9s var(--ease) .3s both;
}
.iah__barra--ojo i { background: var(--naranja); }

.iah__avisos { display: grid; gap: .45rem; margin-top: .9rem; }
.iah__aviso {
  display: flex; align-items: center; gap: .55rem; margin: 0;
  padding: .6rem .85rem; border-radius: 12px; font-size: .86rem; font-weight: 600;
}
.iah__aviso--rojo  { background: rgba(210, 38, 45, .22); color: #FFD2D4; }
.iah__aviso--ambar { background: rgba(240, 144, 30, .16); color: var(--amarillo); }
.iah__aviso .ico { flex: none; }

/* --------------------------------------------------------------------------
   Las secciones
-------------------------------------------------------------------------- */
.iax__mando { margin-bottom: 1.2rem; }
.iax__secs { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.iax__secs::-webkit-scrollbar { display: none; }
.iax__cuerpo--entra { animation: ia-entra .45s var(--ease) both; }
@keyframes ia-entra { from { opacity: 0; transform: translateY(10px); } }
.iax { padding-bottom: 5rem; }

/* --------------------------------------------------------------------------
   1 · EL PROBADOR — un teléfono con Kenji adentro
-------------------------------------------------------------------------- */
.prb {
  display: grid; gap: 1.2rem; align-items: start;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
}
.prb__tel {
  position: relative; display: flex; flex-direction: column;
  height: min(72vh, 720px); min-height: 520px;
  border-radius: 34px; overflow: hidden;
  background: var(--nori); padding: 10px;
  box-shadow: 0 30px 60px rgba(22, 16, 13, .25), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.prb__tel > * { position: relative; }
.prb__cab {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .8rem; border-radius: 24px 24px 0 0;
  background: #0B3D2A; color: #fff;
}
.prb__av {
  width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center; background: #fff;
}
.prb__av img { width: 36px; height: 36px; object-fit: contain; }
.prb__quien { flex: 1; min-width: 0; line-height: 1.2; }
.prb__quien b { display: block; font-size: .95rem; }
.prb__quien small { font-size: .74rem; color: #A6E3C3; }
.prb__sede {
  padding: .22rem .6rem; border-radius: 99px; background: rgba(255, 255, 255, .14);
  font-size: .7rem; font-weight: 700;
}
.prb__hilo {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: .4rem; padding: .9rem .8rem;
  background-color: #EFE4D2;
  background-image: radial-gradient(rgba(126, 20, 24, .06) 1px, transparent 1.3px),
                    radial-gradient(rgba(240, 144, 30, .08) 1px, transparent 1.3px);
  background-size: 22px 22px; background-position: 0 0, 11px 11px;
}
.prb__hilo .wa__b { max-width: 84%; }
.prb__hilo .wa__b--sticker { background: none; box-shadow: none; padding: 0; }
.prb__hilo .wag__sticker { width: 120px; height: 120px; }
.prb__vacio-i {
  display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 20px;
  background: rgba(255, 253, 249, .8); color: var(--verde); font-size: 1.8rem;
}
.prb__caja {
  display: flex; gap: .5rem; padding: .6rem; border-radius: 0 0 24px 24px; background: #F7F0E6;
}
.prb__caja input {
  flex: 1; min-width: 0; border: 0; border-radius: 99px; padding: .7rem 1rem;
  background: #fff; font-size: .92rem; box-shadow: 0 1px 2px rgba(33, 22, 16, .1);
}
.prb__caja input:focus { outline: 2px solid rgba(240, 144, 30, .6); outline-offset: 0; }
.prb__enviar {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--verde); color: #fff; font-size: 1.1rem;
  transition: transform .3s var(--resorte), background .2s var(--ease);
}
.prb__enviar:hover { background: var(--verde-cl); transform: scale(1.08) rotate(-8deg); }

.prb__lado { display: grid; gap: .85rem; min-width: 0; }
.prb__caja-l { margin: 0; }
.prb__caja-l .tbl-caja__t { margin-bottom: .8rem; }
.prb__campos { display: grid; gap: .8rem; margin-bottom: .9rem;
               grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.prb__campo { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.prb__campo > span {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3);
}
.prb__campo input {
  width: 100%; padding: .5rem .7rem; border-radius: 10px;
  border: 1.5px solid transparent; background: var(--crema); font-size: .9rem;
}
.prb__campo input:focus { outline: none; background: #fff; border-color: rgba(240, 144, 30, .55); }
.prb__pistas { display: flex; flex-wrap: wrap; gap: .4rem; }
.prb__turno {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem;
}
.prb__turno div { padding: .6rem .5rem; border-radius: 12px; background: var(--crema); text-align: center; }
.prb__turno b { display: block; font-family: var(--display); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.prb__turno span { font-size: .7rem; color: var(--tinta-3); }
.prb__turno-m { margin: .6rem 0 0; font-size: .78rem; color: var(--tinta-3); }
/* Kenji libre: el estado de la compra, tal como lo lee el modelo. */
.prb__estado { margin: .4rem 0 0; padding: .6rem .7rem; max-height: 22rem; overflow: auto;
  font: .74rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap;
  background: var(--crema); border: 1px solid var(--linea-sutil); border-radius: 8px; color: var(--tinta-2); }
.prb__nota {
  display: flex; gap: .45rem; align-items: flex-start; margin: 0;
  font-size: .8rem; line-height: 1.5; color: var(--tinta-3);
}
.prb__nota .ico { flex: none; margin-top: .2em; }

/* --------------------------------------------------------------------------
   2 y 3 · Los ajustes en tarjetas
-------------------------------------------------------------------------- */
.iagr { display: grid; gap: .9rem; }
.iagrupo { margin: 0; animation: tbl-entra .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.iagrupo__cab { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: .6rem; }
.iagrupo__i {
  flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--crema); color: var(--rojo); font-size: 1.1rem;
}
.iagrupo__cab .tbl-caja__t { font-size: 1.05rem; padding-top: .45rem; }

.iacampos { display: grid; }
.iaf {
  position: relative; display: grid; gap: .5rem 1.4rem; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 320px);
  padding: .95rem 0; border-top: 1px solid var(--linea-sutil);
}
.iacampos > .iaf:first-child { border-top: 0; padding-top: .4rem; }
.iaf--suiche { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.iaf--ancho { grid-template-columns: minmax(0, 1fr); }
.iaf__t label { font-weight: 700; font-size: .93rem; }
.iaf__t p { margin: .25rem 0 0; max-width: 70ch; font-size: .8rem; line-height: 1.5; color: var(--tinta-3); }
/* Lo cambiado y sin guardar lleva su punto naranja al lado del nombre. */
.iaf--sucio .iaf__t label::after, .iasede.iaf--sucio .iasede__t b::after, .iastk-cab.iaf--sucio .tbl-caja__t::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: .45rem; vertical-align: .15em;
  border-radius: 50%; background: var(--naranja);
  animation: tbl-aparece .3s var(--ease) both;
}

.iaf__c input, .iaf__c select, .iaf__c textarea {
  width: 100%; padding: .62rem .8rem; border-radius: 12px;
  border: 1.5px solid transparent; background: var(--crema); font-size: .9rem; color: var(--tinta);
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.iaf__c textarea { resize: vertical; line-height: 1.55; min-height: 5.2rem; }
.iaf__c input:focus, .iaf__c select:focus, .iaf__c textarea:focus {
  outline: none; background: #fff; border-color: rgba(240, 144, 30, .55);
  box-shadow: 0 0 0 4px rgba(240, 144, 30, .12);
}
.iaf__in { position: relative; display: flex; align-items: center; }
.iaf__in input { flex: 1; font-variant-numeric: tabular-nums; }
.iaf__u, .iaf__pre {
  position: absolute; font-size: .8rem; font-weight: 600; color: var(--tinta-3); pointer-events: none;
}
.iaf__u { right: .85rem; }
.iaf__pre { left: .8rem; }
.iaf__pre + input { padding-left: 2.8rem; }
.iaf__in:has(.iaf__u) input { padding-right: 4.2rem; }
.iaf__pie { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .4rem; }
.iaf__huecos { display: flex; flex-wrap: wrap; gap: .3rem; }
.iaf__hueco {
  padding: .2rem .55rem; border-radius: 7px; background: var(--nori); color: var(--naranja-cl);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: .74rem;
  transition: transform .2s var(--resorte);
}
.iaf__hueco:hover { transform: translateY(-1px); }
.iaf__cuenta { font-size: .72rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }

/* El eco: lo que el motor entendió de un campo de texto libre. */
.iaf__eco {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .55rem 0 0;
  padding: .55rem .7rem; border-radius: 12px; background: var(--verde-sua); font-size: .8rem;
}
.iaf__eco > span { color: var(--verde); font-weight: 600; margin-right: .2rem; }
.iaf__eco b {
  padding: .15rem .55rem; border-radius: 99px; background: var(--surface); color: var(--tinta);
  font-weight: 600; box-shadow: 0 1px 2px rgba(33, 22, 16, .08);
}
.iaf__eco b.iaf__eco-raro { background: var(--ambar-sua); color: #8A520B; }
.iaf__eco small { flex-basis: 100%; color: var(--tinta-3); }

/* Las palabras que escalan: fichas que se quitan con la equis. */
.iachips {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  padding: .45rem; border-radius: 12px; background: var(--crema); cursor: text;
  border: 1.5px solid transparent; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.iachips:focus-within { background: #fff; border-color: rgba(240, 144, 30, .55); box-shadow: 0 0 0 4px rgba(240, 144, 30, .12); }
.iachip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .28rem .35rem .28rem .65rem; border-radius: 99px;
  background: var(--surface); color: var(--tinta); font-size: .82rem; font-weight: 600;
  box-shadow: 0 1px 2px rgba(33, 22, 16, .1);
  animation: tbl-aparece .25s var(--ease) both;
}
.iachip button {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  color: var(--tinta-3); font-size: .7rem;
}
.iachip button:hover { background: var(--rojo-sua); color: var(--rojo); }
.iachips__in {
  flex: 1 1 10rem; min-width: 8rem; border: 0; background: transparent; outline: none;
  padding: .3rem .4rem; font-size: .88rem;
}

/* Las dos sedes, lado a lado y con su color. */
.iasedes { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.iasede {
  position: relative; display: flex; align-items: center; gap: .8rem; cursor: pointer;
  padding: .9rem 1rem; border-radius: 16px; background: var(--crema);
  border: 1.5px solid transparent; transition: background .2s var(--ease), border-color .2s var(--ease);
}
.iasede:hover { background: var(--crema-2); }
.iasede__p { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--rojo); }
.iasede--norte .iasede__p { background: var(--naranja); }
.iasede__t { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.iasede__t b { font-size: .95rem; }
.iasede__t small { font-size: .78rem; color: var(--tinta-3); }
.iasede--on { background: var(--surface); border-color: rgba(21, 122, 71, .28); }
.iasede--on .iasede__t small { color: var(--verde); font-weight: 600; }

/* --------------------------------------------------------------------------
   2b · Las anotaciones — lo que Kenji da por cierto de la cocina
-------------------------------------------------------------------------- */
.ian { display: grid; gap: .9rem; }
.ian > .tbl-caja { margin: 0; animation: tbl-entra .45s var(--ease) both; }
.ian-cab { display: grid; gap: 1rem 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; }
.ian-cab__t .tbl-caja__d { margin-top: .35rem; max-width: 56ch; line-height: 1.55; }
/* Las tres capas, contadas: es lo que hace que esto no sea «otro campo de texto». */
.ian-pasos {
  list-style: none; margin: 0; padding: 0; counter-reset: paso;
  display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ian-pasos li {
  counter-increment: paso; position: relative;
  padding: .75rem .8rem .75rem 2.6rem; border-radius: 14px; background: var(--crema);
  font-size: .78rem; line-height: 1.35; color: var(--tinta-3);
}
.ian-pasos li::before {
  content: counter(paso); position: absolute; left: .7rem; top: .72rem;
  width: 1.45rem; height: 1.45rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--nori); color: var(--naranja-cl); font-weight: 800; font-size: .74rem;
}
.ian-pasos li:last-child::before { background: var(--verde); color: #fff; }
.ian-pasos b { display: block; color: var(--tinta); font-size: .84rem; margin-bottom: .1rem; }

.ian-nueva { display: grid; gap: .6rem; }
/* `label` suelto trae el margen de los cajones (05-dialogos.css). */
.ian-nueva__t { margin: 0; font-weight: 700; font-size: .93rem; color: var(--tinta); }
#ian-rev:empty { display: none; }
.ian-nueva textarea, .ianf__ed textarea {
  width: 100%; padding: .75rem .9rem; border-radius: 14px; resize: vertical; min-height: 4.2rem;
  border: 1.5px solid transparent; background: var(--crema); font-size: .95rem; line-height: 1.5; color: var(--tinta);
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ian-nueva textarea:focus, .ianf__ed textarea:focus {
  outline: none; background: #fff; border-color: rgba(240, 144, 30, .55);
  box-shadow: 0 0 0 4px rgba(240, 144, 30, .12);
}
.ian-nueva__pie { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ian-nueva__pie > .btn { margin-left: auto; }
.ian-reemp {
  display: inline-flex; align-items: center; gap: .4rem; max-width: 100%;
  padding: .3rem .35rem .3rem .65rem; border-radius: 99px; background: var(--ambar-sua); color: #8A520B;
  font-size: .78rem; font-weight: 600;
}
.ian-reemp span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.ian-reemp button { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; }
.ian-reemp button:hover { background: rgba(138, 82, 11, .14); }

/* Lo que entendió el servidor, mientras se escribe. */
.ianrev {
  display: grid; gap: .45rem; padding: .7rem .8rem; border-radius: 14px;
  background: var(--verde-sua); animation: tbl-aparece .25s var(--ease) both;
}
.ianrev + .ianrev { margin-top: .45rem; }
.ianrev--mal { background: var(--rojo-sua); }
.ianrev__txt { margin: 0; font-size: .82rem; font-weight: 700; color: var(--tinta-2); }
.ianrev__lee, .ianf__lee {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0; font-size: .8rem;
}
.ianrev__lee > span { color: var(--verde); font-weight: 700; margin-right: .2rem; }
.ianrev--mal .ianrev__lee > span { color: var(--rojo); }
.ianrev__lee b, .ianf__lee b {
  padding: .14rem .55rem; border-radius: 99px; background: var(--surface); color: var(--tinta);
  font-weight: 600; box-shadow: 0 1px 2px rgba(33, 22, 16, .08);
}
.ianrev__lee i, .ianf__lee i { font-style: normal; font-weight: 700; color: var(--verde); }
.ianrev__lee i.ianrev__no, .ianf__lee i.ianrev__no { color: var(--rojo); }
.ianrev__lee em, .ianf__lee em { font-style: normal; color: var(--tinta-3); margin: 0 .15rem; }
.ianrev__platos {
  display: flex; gap: .45rem; align-items: flex-start; margin: 0; font-size: .78rem; line-height: 1.45; color: var(--tinta-2);
}
.ianrev__platos .ico { flex: none; margin-top: .15em; color: var(--tinta-3); }
.ianrev__prob { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.ianp {
  display: flex; align-items: flex-start; gap: .5rem; margin: 0;
  padding: .5rem .6rem; border-radius: 10px; font-size: .79rem; line-height: 1.45;
  background: var(--surface); color: var(--tinta-2);
}
.ianp > .ico { flex: none; margin-top: .15em; }
.ianp > span { flex: 1; }
.ianp--bloquea { color: var(--rojo); }
.ianp--bloquea > span { color: var(--tinta); }
.ianp--avisa > .ico { color: #C27012; }
.ianp--info > .ico { color: var(--tinta-3); }
.ianp__b {
  flex: none; align-self: center; padding: .28rem .6rem; border-radius: 8px;
  background: var(--nori); color: var(--crema); font-size: .74rem; font-weight: 700;
  transition: transform .2s var(--resorte);
}
.ianp__b:hover { transform: translateY(-1px); }

/* Las líneas de las indicaciones que son datos: un aviso con su botón. */
.ianmover {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .8rem 1rem; border-radius: 16px; background: var(--ambar-sua); color: #6E420A;
  font-size: .84rem; line-height: 1.5; animation: tbl-entra .45s var(--ease) both;
}
.ianmover > .ico { flex: none; font-size: 1.15rem; color: #C27012; }
.ianmover p { flex: 1 1 22rem; margin: 0; }
.ianmover b { font-weight: 700; color: var(--tinta); }
.ianmover--atiende { margin-top: .6rem; }

.ian-lista-cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }
.ian-lista-cab p { margin: 0; font-size: .86rem; color: var(--tinta-3); }
.ian-lista-cab b { color: var(--tinta); }
.ian-lista { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); align-items: start; }

/* La ficha: el dato, lo que se entiende de él y lo que contestó Kenji. */
.ianf {
  display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--linea-sutil);
  box-shadow: 0 1px 2px rgba(33, 22, 16, .04);
  animation: tbl-entra .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms);
  transition: opacity .25s var(--ease), box-shadow .25s var(--ease);
}
.ianf:hover { box-shadow: 0 12px 28px rgba(33, 22, 16, .08); }
.ianf--off { opacity: .62; }
.ianf--ed { box-shadow: 0 0 0 2px rgba(240, 144, 30, .45), 0 12px 28px rgba(33, 22, 16, .08); opacity: 1; }
.ianf__cab { display: flex; align-items: center; gap: .4rem; padding: .85rem 1rem 0; }
.ianf__cab .suiche { margin-left: auto; }
.ianf__sede--sur { background: var(--rojo-sua); color: var(--rojo); }
.ianf__sede--norte { background: var(--ambar-sua); color: #A8650E; }
.ianf__t {
  margin: .55rem 1rem .5rem; font-family: var(--display); font-size: 1.08rem; line-height: 1.35;
  letter-spacing: -.01em; color: var(--tinta); word-break: break-word;
}
.ianf__lee { margin: 0 1rem .8rem; }
.ianf__lee small { margin-left: auto; font-size: .72rem; color: var(--tinta-3); font-weight: 600; }
.ianf__lee--suelta { color: var(--tinta-3); font-size: .77rem; }
.ianf > .ianrev__prob { margin: -.2rem 1rem .8rem; }
.ianf .ianp { background: var(--crema); }
.ianf__pie {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  margin-top: auto; padding: .55rem .7rem .55rem 1rem; border-top: 1px solid var(--linea-sutil); background: var(--crema);
  font-size: .76rem; color: var(--tinta-3); font-variant-numeric: tabular-nums;
}
.ianf__acc { display: flex; gap: .35rem; }
.ianf__ed { display: grid; gap: .6rem; padding: .7rem 1rem 1rem; }
.ianf__ed-b { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ianf__ed-b > span { flex: 1; }

/* La prueba: la pregunta y lo que contestó, sobre el fondo del chat. */
.ianf__prueba:empty { display: none; }
.ianpr {
  margin: 0 .7rem .8rem; border-radius: 16px; overflow: hidden;
  background-color: #EFE4D2;
  background-image: radial-gradient(rgba(126, 20, 24, .06) 1px, transparent 1.3px),
                    radial-gradient(rgba(240, 144, 30, .08) 1px, transparent 1.3px);
  background-size: 22px 22px; background-position: 0 0, 11px 11px;
  border: 1.5px solid transparent;
}
.ianpr--bien { border-color: rgba(21, 122, 71, .45); }
.ianpr--mal { border-color: rgba(176, 30, 36, .5); }
.ianpr__q { display: flex; gap: .4rem; padding: .55rem .55rem 0; }
.ianpr__q input {
  flex: 1; min-width: 0; border: 0; border-radius: 99px; padding: .55rem .9rem;
  background: #fff; font-size: .84rem; box-shadow: 0 1px 2px rgba(33, 22, 16, .1);
}
.ianpr__q input:focus { outline: 2px solid rgba(240, 144, 30, .6); outline-offset: 0; }
.ianpr__q .prb__enviar { width: 36px; height: 36px; font-size: .92rem; }
.ianpr__hilo { display: flex; flex-direction: column; gap: .35rem; padding: .7rem .7rem .5rem; }
.ianpr__hilo .wa__b { max-width: 88%; font-size: .86rem; }
.ianpr__v {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: 0;
  padding: .5rem .8rem; background: rgba(255, 253, 249, .88); font-size: .8rem;
}
.ianpr--bien .ianpr__v { color: var(--verde); }
.ianpr--mal .ianpr__v { color: var(--rojo); }
.ianpr--neutro .ianpr__v { color: var(--tinta-2); }
.ianpr__v small { margin-left: auto; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.ianpr__antes { padding: 0 .8rem .6rem; background: rgba(255, 253, 249, .88); font-size: .76rem; color: var(--tinta-3); }
.ianpr__antes summary { cursor: pointer; padding: .2rem 0 .4rem; }
.ianpr__antes .wa__b { margin-top: .3rem; font-size: .82rem; animation: none; }
.ianpr__tachada { text-decoration: line-through; text-decoration-color: rgba(176, 30, 36, .55); opacity: .75; }

/* --------------------------------------------------------------------------
   4 · Los stickers
-------------------------------------------------------------------------- */
.iastk-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.iastk-cab__t .tbl-caja__d { margin-top: .3rem; }
.iastk__intro { margin: 1rem .2rem 1.1rem; max-width: 80ch; font-size: .88rem; line-height: 1.6; color: var(--tinta-2); }
.iastk { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.iastk__f {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: .85rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--linea-sutil);
  animation: tbl-entra .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms);
}
.iastk__f:not(.iastk__f--sale) .iastk__img img { filter: grayscale(.55); opacity: .7; }
.iastk__f--roto { background: color-mix(in srgb, var(--surface) 80%, var(--rojo-sua)); }
.iastk__img {
  flex: none; width: 84px; height: 84px; border-radius: 16px; display: grid; place-items: center;
  background: var(--crema);
}
.iastk__img img { width: 76px; height: 76px; object-fit: contain; transition: transform .35s var(--resorte); }
.iastk__f:hover .iastk__img img { transform: scale(1.1) rotate(-4deg); filter: none; opacity: 1; }
.iastk__t { min-width: 0; }
.iastk__t b { display: block; font-size: .92rem; }
.iastk__chapas { display: flex; flex-wrap: wrap; gap: .3rem; margin: .35rem 0; }
.iastk__t p { margin: 0; font-size: .77rem; line-height: 1.45; color: var(--tinta-3); }

/* --------------------------------------------------------------------------
   5 · Las respuestas rápidas
-------------------------------------------------------------------------- */
.iafaq-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
  margin-bottom: 1.1rem;
}
.iafaq-cab p { margin: 0; max-width: 70ch; font-size: .88rem; line-height: 1.6; color: var(--tinta-2); }
.iafaqs { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.iafaq {
  display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--linea-sutil);
  box-shadow: 0 1px 2px rgba(33, 22, 16, .04);
  animation: tbl-entra .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms);
  transition: opacity .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--resorte);
}
.iafaq:hover { box-shadow: 0 12px 28px rgba(33, 22, 16, .08); transform: translateY(-2px); }
.iafaq--off { opacity: .6; }
.iafaq__cuerpo {
  flex: 1; display: flex; flex-direction: column; gap: .45rem; text-align: left; padding: 1rem 1.05rem .8rem;
}
.iafaq__cuerpo b { font-size: .95rem; }
.iafaq__r {
  font-size: .84rem; line-height: 1.5; color: var(--tinta-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  padding: .55rem .7rem; border-radius: 4px 12px 12px 12px; background: #D9FDD3;
}
.iafaq__d { display: flex; flex-wrap: wrap; gap: .25rem; }
.iafaq__d i {
  font-style: normal; font-size: .7rem; font-weight: 600; color: var(--tinta-3);
  padding: .12rem .45rem; border-radius: 99px; background: var(--crema);
}
.iafaq__pie {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem 1.05rem; border-top: 1px solid var(--linea-sutil); background: var(--crema);
  font-size: .76rem; color: var(--tinta-3); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   6 · Lo que cuesta
-------------------------------------------------------------------------- */
#ia-costos { margin-top: .9rem; }
.iacost__kpis { margin-bottom: .75rem; }
.iacost__tabla { margin-top: 1rem; }

/* --------------------------------------------------------------------------
   El borrador: la barra de guardar
-------------------------------------------------------------------------- */
.iaguardar {
  position: fixed; left: 50%; bottom: 1.2rem; z-index: 45;
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .5rem .5rem 1.1rem; border-radius: 18px;
  background: var(--nori); color: var(--crema);
  box-shadow: 0 18px 50px rgba(22, 16, 13, .35);
  transform: translate(-50%, 150%); opacity: 0; pointer-events: none;
  transition: transform .45s var(--resorte), opacity .25s var(--ease);
}
.iaguardar--on { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.iaguardar__t { display: inline-flex; align-items: center; gap: .55rem; margin-right: .5rem; font-size: .9rem; white-space: nowrap; }
.iaguardar__t i { width: 8px; height: 8px; border-radius: 50%; background: var(--naranja); animation: late 1.4s var(--resorte) infinite; }
.iaguardar .btn--fantasma { --fg: var(--arena); }
.iaguardar .btn--fantasma:hover { --bg: rgba(253, 244, 231, .1); --fg: var(--crema); }

/* ==========================================================================
   22 · Pantalla angosta
   ========================================================================== */
@media (max-width: 980px) {
  .prb { grid-template-columns: 1fr; }
  .ian-cab { grid-template-columns: 1fr; }
  .prb__tel { height: min(70vh, 640px); max-width: 460px; width: 100%; margin: 0 auto; }
  .iah__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .wa__b { max-width: 86%; }
  .iah { padding: 1.1rem 1rem 1rem; border-radius: 20px; }
  .iah__av { width: 60px; height: 60px; border-radius: 18px; }
  .iah__av img { width: 54px; height: 54px; }
  .iah__sw { width: 100%; justify-content: space-between; }
  .iaf, .iaf--suiche { grid-template-columns: 1fr; }
  .iaf--suiche { grid-template-columns: minmax(0, 1fr) auto; }
  .prb__tel { border-radius: 26px; padding: 6px; min-height: 460px; }
  .prb__turno { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iaguardar { left: .6rem; right: .6rem; transform: translateY(150%); }
  .iaguardar--on { transform: none; }
  .iaguardar__t { flex: 1; margin-right: 0; font-size: .82rem; white-space: normal; }
  .ian-pasos { grid-template-columns: 1fr; }
  .ian-nueva__pie > .btn { width: 100%; }
  .ian-sedes { display: flex; }
  .ian-sedes .tbl-seg__o { flex: 1 1 0; justify-content: center; }
}

/* Con el movimiento reducido no late la insignia ni entran las burbujas: el
   contador y el texto se ven igual, que es lo que hace falta. */
@media (prefers-reduced-motion: reduce) {
  .tab__n, .wa__b, .wa__b--pensando span, .iah, .iah__av img, .iagrupo, .iastk__f, .iafaq,
  .ian > .tbl-caja, .ianrev, .ianmover, .ianf,
  .iax__cuerpo--entra, .iaguardar__t i { animation: none; }
  .iaguardar { transition: none; }
}