/* ==========================================================================
   42 · NUEVO PEDIDO — el que arma la caja  (6 de octubre de 2026)
   ==========================================================================
   La lógica en js/34-pedido-a-mano.js. El cajón más ancho del panel: a la
   izquierda la ficha que se llena con el cliente al teléfono, a la derecha la
   carta para tocar y agregar. Cada columna se desplaza sola —la carta no se
   va cuando se baja a la dirección—, y el total queda pegado abajo de la
   ficha, que es lo que el cliente pregunta al final.

   La cabecera es de nori, como los cajones de la carta, con un brillo verde:
   el verde es el de «a cocina», el botón que termina esto.

   En el celular es una columna, y la carta va justo debajo de lo que lleva el
   pedido (`display: contents` en la ficha deja ordenar sus secciones junto a
   la carta).
   ========================================================================== */
/* --- En la pantalla de Pedidos: el botón y la marca de la ficha ------------ */
.pdx__acc { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.pdx__nuevo { padding: .7rem 1.15rem; border-radius: 13px; }
.ped__mano { display: inline-flex; align-items: center; gap: .3em;
             background: var(--verde-sua); color: var(--verde); }
.ped__mano .ico { font-size: .85em; }

.velo--pam .cajon { width: min(1160px, 100%); background: var(--crema); }
.velo--pam .cajon__cab {
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(30,158,92,.22), transparent 55%),
    linear-gradient(150deg, var(--nori-3), var(--nori) 72%);
  color: var(--crema); align-items: center;
}
.velo--pam .cajon__cab p { color: var(--crema-3); opacity: 1; max-width: 62ch; }
.velo--pam .cajon__icono { background: rgba(30,158,92,.16); border-color: rgba(30,158,92,.36); color: #74D7A2; }

.velo--pam .cajon__cuerpo { padding: 0; display: flex; overflow: hidden; }
.pam {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.pam__form {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.3rem 1.4rem 0; background: var(--surface);
  border-right: 1px solid var(--linea-sutil);
}
.pam__carta { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.pam .campos { margin-top: 1.5rem; }
.pam .campos:first-child, .pam-sede + .campos { margin-top: 0; }
.pam label { margin-top: .85rem; }
.pam-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .7rem; }
.pam-fila label { margin-top: 0; }
.pam .campos__t + .pam-fila label, .pam .campos__t + label { margin-top: 0; }

/* --- La sede, solo para la administración --------------------------------- */
.pam-sede {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem; flex-wrap: wrap;
  margin: 0 0 1.3rem; padding: .55rem .6rem .55rem .9rem; border-radius: 14px;
  background: var(--crema); border: 1px solid var(--linea-sutil);
  font-size: .86rem; font-weight: 600; color: var(--tinta-2);
}

/* --- El cliente ------------------------------------------------------------ */
.pam-cli {
  display: grid; gap: .5rem; margin-top: .8rem; padding: .75rem .8rem;
  border-radius: 14px; background: var(--crema); border: 1px solid var(--linea-sutil);
  animation: vista-entra .3s var(--ease) both;
}
.pam-cli__cab { display: flex; align-items: center; gap: .7rem; }
.pam-cli__cab .wac__ini { flex-basis: 38px; height: 38px; align-self: center; font-size: .82rem; }
.pam-cli__cab b { display: block; font-size: .95rem; line-height: 1.25; }
.pam-cli__cab small { display: block; color: var(--tinta-3); font-size: .78rem; line-height: 1.35; }
.pam-ojo {
  display: flex; align-items: flex-start; gap: .5rem; flex-wrap: wrap; margin: 0;
  padding: .55rem .65rem; border-radius: 11px; font-size: .82rem; line-height: 1.4;
  background: var(--ambar-sua); color: #7A4A0A;
}
.pam-ojo > .ico { flex: none; margin-top: .15em; }
.pam-ojo > span { flex: 1; min-width: 12rem; }
.pam-ojo--rojo { background: var(--rojo-sua); color: var(--rojo-osc); }
.pam-ojo--suave { background: var(--crema-2); color: var(--tinta-2); }
.pam-repetir { justify-self: start; text-align: left; white-space: normal; line-height: 1.35; }
.pam-repetir span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Lo que lleva ------------------------------------------------------------ */
.pam-lineas { margin: 0; }
.pam-lineas__vacio {
  display: flex; align-items: center; gap: .6rem; padding: .9rem .9rem;
  border-radius: 12px; border: 1.5px dashed var(--linea); color: var(--tinta-3);
}
.pam-lineas__vacio .ico { font-size: 1.2rem; flex: none; }
.pam-linea--llega { animation: pam-llega .45s var(--resorte) both; }
@keyframes pam-llega { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.pam-linea--falta { border-color: var(--naranja); background: #FFF6EA; }
.pam-linea--falta .rep-nota { border-color: var(--naranja); }

/* --- Cómo sale -------------------------------------------------------------- */
.pam-entrega { display: flex; width: 100%; }
.pam-entrega .tbl-seg__o { flex: 1; justify-content: center; gap: .45em; padding-block: .6rem; font-size: .88rem; }
.pam-dirs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .9rem;
            font-size: .78rem; color: var(--tinta-3); }
.pam-dirs > span { flex-basis: 100%; }
.pam-dirs .pista { display: inline-flex; align-items: center; gap: .35em; max-width: 100%;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pam-dirs .pista .ico { color: var(--rojo); flex: none; }
.pam-valor { font-variant-numeric: tabular-nums; font-weight: 700; }
.pam-cot {
  display: flex; align-items: flex-start; gap: .5rem; margin: .6rem 0 0;
  padding: .5rem .65rem; border-radius: 10px; font-size: .8rem; line-height: 1.4;
  background: var(--crema-2); color: var(--tinta-2);
}
.pam-cot .ico { flex: none; margin-top: .15em; }
.pam-cot--ok { background: var(--verde-sua); color: var(--verde); }
.pam-cot--ojo { background: var(--ambar-sua); color: #7A4A0A; }
.pam-rango { margin-top: 1rem; }
.pam-hora { display: flex; align-items: center; gap: .3rem .7rem; flex-wrap: wrap; }
.pam-hora .campo { width: 9rem; font-variant-numeric: tabular-nums; }
.pam-hora .sugerencias { margin-top: 0; }

/* --- Cómo paga --------------------------------------------------------------- */
.pam-pagos { display: flex; flex-wrap: wrap; gap: .4rem; }
.pam-pagos .pista { padding: .5rem .9rem; font-size: .86rem; font-weight: 600; }
.pam-pagos .pista[aria-pressed="true"], .pam-cats .pista[aria-pressed="true"] {
  background: var(--nori); border-color: var(--nori); color: var(--crema);
}
.pam-mas { margin-top: .8rem; font-size: .84rem; }
.pam-mas summary { cursor: pointer; width: fit-content; font-weight: 600; color: var(--tinta-2); }
.pam-mas summary:hover { color: var(--rojo); }
.pam-mas .campo { margin-top: .5rem; }
.pam-mas small { display: block; margin-top: .35rem; font-size: .76rem; color: var(--tinta-3); }

/* --- Para la cocina --------------------------------------------------------- */
.pam-alergia-l { display: flex; align-items: center; gap: .35em; color: var(--rojo); }
.pam-alergia:not(:placeholder-shown) { border-color: var(--rojo); background: #FFF4F3; font-weight: 600; color: var(--rojo-osc); }
.pam-alergia--puesta { box-shadow: 0 0 0 4px var(--rojo-sua); }

/* --- El total, pegado abajo de la ficha ------------------------------------- */
.pam-cuenta {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
  margin: 1.4rem -1.4rem 0; padding: .85rem 1.4rem .95rem;
  background: var(--surface); border-top: 1px dashed var(--linea);
  box-shadow: 0 -10px 22px rgba(255,253,249,.92);
}
.pam-cuenta__d { font-size: .8rem; color: var(--tinta-3); padding-bottom: .2rem; }
.pam-cuenta__t { display: grid; justify-items: end; line-height: 1; }
.pam-cuenta__t small { font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
                       color: var(--tinta-3); margin-bottom: .25rem; }
.pam-cuenta__t b { font-family: var(--display); font-size: 1.75rem; font-variant-numeric: tabular-nums;
                   letter-spacing: -.02em; }

/* --- La carta --------------------------------------------------------------- */
.pam-busca {
  position: sticky; top: 0; z-index: 3;
  padding: 1.1rem 1.3rem .75rem;
  background: linear-gradient(var(--crema) 82%, rgba(253,244,231,0));
}
.pam-busca__in { position: relative; }
.pam-busca__in > .ico { position: absolute; left: .9rem; top: 50%; translate: 0 -50%;
                        color: var(--tinta-3); pointer-events: none; }
.pam-busca__in .campo { padding-left: 2.5rem; background: var(--surface); }
.pam-cats { display: flex; gap: .4rem; margin-top: .7rem; overflow-x: auto; padding-bottom: .15rem;
            scrollbar-width: none; }
.pam-cats::-webkit-scrollbar { display: none; }
.pam-cats .pista { flex: none; font-weight: 600; }

.pam-platos {
  display: grid; gap: 9px; padding: .2rem 1.3rem 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  align-content: start;
}
.pam-plato {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: .2rem;
  min-height: 84px; padding: .7rem .8rem .65rem; border-radius: 14px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--linea-sutil);
  box-shadow: 0 1px 2px rgba(33,22,16,.04);
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.pam-plato:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--naranja);
                                  box-shadow: 0 6px 16px rgba(33,22,16,.08); }
.pam-plato:active:not(:disabled) { transform: scale(.97); }
.pam-plato:disabled { cursor: not-allowed; opacity: .55; background: var(--crema-2); }
.pam-plato__n { font-weight: 600; font-size: .9rem; line-height: 1.25; padding-right: 1.4rem; }
.pam-plato__x { font-size: .74rem; color: var(--tinta-3); }
.pam-plato__pie { margin-top: auto; padding-top: .35rem; display: flex; align-items: baseline;
                  justify-content: space-between; gap: .5rem; }
.pam-plato__pie b { font-family: var(--display); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.pam-plato__pie em { font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
                     text-transform: uppercase; }
.pam-plato__sab { color: var(--naranja); }
.pam-plato__no { color: var(--rojo); }
.pam-plato--en { border-color: var(--verde-cl); box-shadow: 0 0 0 3px var(--verde-sua); }
.pam-plato__ya {
  position: absolute; top: .5rem; right: .5rem; min-width: 22px; height: 22px; padding: 0 .3rem;
  display: grid; place-items: center; border-radius: 99px;
  background: var(--verde); color: #fff; font-size: .74rem; font-weight: 800;
  animation: pam-ya .35s var(--resorte) both;
}
@keyframes pam-ya { from { transform: scale(.4); } }
.pam-vacio { grid-column: 1 / -1; margin: 2rem 0; text-align: center; color: var(--tinta-3); font-size: .9rem; }
.pam-vacio .btn { margin-left: .5rem; }

/* El sabor, en su ventanita: los botones grandes, que es lo único que hay. */
.pam-sabores { display: flex; flex-wrap: wrap; gap: .5rem; }
.pam-sabores .pista { padding: .6rem 1rem; font-size: .92rem; font-weight: 600; }

/* --- Lo que se le dice al cliente, al terminar ------------------------------ */
.pam-decir {
  margin: .8rem 0 0; padding: .95rem 1.1rem; border-radius: 14px;
  background: var(--crema); border-left: 4px solid var(--verde-cl);
  font-family: var(--display); font-size: 1.08rem; line-height: 1.5; color: var(--tinta);
}
.pam-decir b { font-family: var(--sans); font-weight: 700; }

/* --- El pie: los dos botones que terminan ----------------------------------- */
.velo--pam .cajon__pie .btn--fantasma { margin-right: auto; }
.velo--pam .pam-cocinar { flex: 0 1 auto; min-width: 15rem; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Una columna: tableta angosta, celular, y con el chat al lado
   ==========================================================================
   Se mide el CAJÓN y no la ventana (8 de octubre de 2026): con el chat del
   cliente pegado a la izquierda, el cajón queda angosto aunque la ventana no
   lo sea —en la caja, media pantalla al lado de VectorPOS—, y es el cajón el
   que no cabe en dos columnas. */
.velo--pam .cajon { container-type: inline-size; }
@container (max-width: 920px) {
  .velo--pam .cajon__cuerpo { display: block; overflow-y: auto; }
  .pam { display: flex; flex-direction: column; }
  .pam__form { display: contents; }
  .pam__form > * { margin-inline: clamp(1rem, 4vw, 1.4rem); }
  /* Con `.pam` delante: `.pam .campos:first-child` le ganaba y la primera
     sección quedaba pegada a la cabecera. */
  .pam .pam__form > :first-child { margin-top: 1.2rem; }
  .pam-sede { order: 0; } .pam-quien { order: 1; } .pam-pide { order: 2; }
  .pam__carta { order: 3; overflow: visible; margin-top: 1rem; border-block: 1px solid var(--linea-sutil); }
  .pam-sale { order: 4; } .pam-paga { order: 5; } .pam-cocina { order: 6; }
  .pam-cuenta { order: 7; margin-inline: 0; padding-inline: clamp(1rem, 4vw, 1.4rem); }
  /* En una columna la carta no tiene por qué ocupar la pantalla entera: con
     el buscador se llega a cualquier plato. */
  .pam-platos { max-height: 52vh; overflow-y: auto; overscroll-behavior: contain; }
  .pam-busca { position: static; background: none; }
}
/* El pie de un cajón angosto: «Pasar a cocina» arriba y a lo ancho, como en
   el celular, en vez de caerse solo al renglón de abajo. */
@container (max-width: 640px) {
  .velo--pam .pam-cocinar { min-width: 0; flex-basis: 100%; order: -1; }
  .velo--pam .cajon__pie .btn--fantasma { margin-right: 0; }
}
@media (max-width: 720px) {
  .pam-fila { grid-template-columns: 1fr; }
  .pam-fila > div + div label { margin-top: .85rem; }
  .pam-platos { grid-template-columns: 1fr 1fr; padding-inline: 1rem; }
  .pam-plato { min-height: 76px; }
  .velo--pam .pam-cocinar { min-width: 0; flex-basis: 100%; order: -1; }
  .velo--pam .cajon__pie .btn--fantasma { margin-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pam-linea--llega, .pam-plato__ya, .pam-cli { animation: none; }
  .pam-plato { transition: none; }
}

/* ==========================================================================
   43 · EL CHAT AL LADO — el WhatsApp del cliente pegado al cajón
   (6 de octubre de 2026). La lógica en js/34-pedido-a-mano.js, `chatAlLado`.
   Va a la izquierda del cajón de editar y del de «Nuevo pedido», y entra con
   él. Las burbujas son las de la bandeja: el hilo lleva `.wag__burbujas`.
   Se contesta desde abajo (`.chal__pie`, 8 de octubre de 2026): solo texto,
   así que reaccionar, guardar un sticker o reintentar siguen en la bandeja y
   aquí no se enseñan.

   SIEMPRE A LA VISTA: al lado del cajón hasta 600 px —en la caja se trabaja
   en media pantalla, junto a VectorPOS—, y en un celular ARRIBA del cajón,
   con su alto. Antes, por debajo de 860 px iba encima y escondido.
   ========================================================================== */
.chal {
  display: none; flex: none; flex-direction: column; min-height: 0;
  width: clamp(300px, 27vw, 420px);
  background: #F5EADB; border-left: 1px solid var(--linea);
  box-shadow: -24px 0 70px rgba(22,16,13,.3);
  animation: cajon-entra .52s var(--ease) backwards;
}
.velo--con-chat .chal { display: flex; }
.velo--con-chat.velo--chat-oculto .chal { display: none; }
.velo--saliendo .chal { animation: cajon-sale .26s var(--ease-io) both; }
.velo--con-chat .cajon { min-width: 0; }

.chal__cab {
  flex: none; display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem; background: var(--nori); color: var(--crema);
}
.chal__ico {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  display: grid; place-items: center; background: #25D366; color: #fff;
}
.chal__quien { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.chal__quien b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chal__quien small { color: var(--crema-3); font-size: .75rem; }
.chal__x {
  width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center;
  color: inherit; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
}
.chal__x:hover { background: rgba(255,255,255,.22); }

.chal__hilo { padding-inline: .8rem; }
.chal__dias { display: flex; flex-direction: column; gap: .3rem; }
.chal .wag__burbujas .wa__b { max-width: 88%; }
.chal .wag__reaccionar, .chal .wag__guardar, .chal .wag__nosalio { display: none; }

/* El botón «Chat» de la cabecera del cajón, al lado de la X. */
.cajon__chat {
  position: absolute; top: .85rem; right: calc(.85rem + 34px + .5rem); z-index: 3;
  height: 34px; padding: 0 .75rem; border-radius: 11px;
  display: inline-flex; align-items: center; gap: .4rem;
  color: inherit; font-size: .82rem; font-weight: 600;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.16);
}
.cajon__chat:hover { background: rgba(255,255,255,.28); }
.cajon__chat[aria-pressed="true"] { background: #25D366; border-color: #25D366; color: #fff; }
.velo--con-chat .cajon__cab { padding-right: 9.5rem; }

/* La caja de escribir: la de la bandeja (`.wacomp`), un poco más chica. */
.chal__pie {
  flex: none; padding: .55rem .6rem .45rem;
  background: var(--surface); border-top: 1px solid var(--linea-sutil);
}
.chal__comp { gap: .45rem; }
.chal__comp .wacomp__caja { padding-inline: .6rem .3rem; }
.chal__comp textarea { max-height: 120px; font-size: .92rem; }
.chal__comp .wacomp__enviar { width: 42px; height: 42px; font-size: 1.08rem; }
.chal__nota { margin: .3rem .5rem 0; font-size: .7rem; line-height: 1.35; color: var(--tinta-3); }
.chal__pie .wag__cerrada { font-size: .8rem; padding: .6rem .7rem; }

/* MEDIA PANTALLA: al lado, más angosto. El cajón se encoge y pasa a una
   columna por su propio ancho (@container, arriba). */
@media (max-width: 859px) {
  .velo--con-chat .chal { width: clamp(250px, 38vw, 320px); }
  .chal__cab { padding: .7rem .75rem; gap: .55rem; }
  .chal__ico { width: 30px; height: 30px; border-radius: 10px; }
  .chal__hilo { padding-inline: .55rem; }
  .chal .wag__burbujas .wa__b { max-width: 92%; }
}
/* El cajón angosto: el botón «Chat» se vuelve solo el icono. */
@media (max-width: 859px) and (min-width: 601px) {
  .cajon__chat span { display: none; }
  .cajon__chat { padding: 0; width: 34px; justify-content: center; }
  .velo--con-chat .cajon__cab { padding-right: 6.4rem; }
}
/* Desde 720 px el cajón es una hoja que sube desde abajo (08-cajon.css). Con
   el chat al lado vuelve a ser cajón: de arriba abajo, entrando por el lado y
   con su X, o la hoja quedaba flotando a media altura junto al chat. */
@media (max-width: 720px) and (min-width: 601px) {
  .velo--con-chat:not(.velo--chat-oculto) { align-items: stretch; justify-content: flex-end; }
  .velo--con-chat:not(.velo--chat-oculto) .cajon {
    max-height: 100%; border-radius: 0; border-left: 1px solid var(--linea);
    box-shadow: -24px 0 70px rgba(22,16,13,.35); animation-name: cajon-entra;
  }
  .velo--con-chat.velo--saliendo:not(.velo--chat-oculto) .cajon { animation-name: cajon-sale; }
  .velo--con-chat:not(.velo--chat-oculto) .cajon__cab { border-radius: 0; padding: 1.15rem 6.4rem 1.05rem 1.1rem; }
  .velo--con-chat:not(.velo--chat-oculto) .cajon__asa { display: none; }
  .velo--con-chat:not(.velo--chat-oculto) .cajon__x { display: grid; }
}

/* CELULAR: no cabe al lado, así que va ARRIBA, con su caja de escribir, y la
   hoja del cajón debajo con el resto de la pantalla. «Chat» lo esconde, y
   entonces la hoja vuelve a ser la de siempre. */
@media (max-width: 600px) {
  .velo--con-chat:not(.velo--chat-oculto) { flex-direction: column; justify-content: flex-start; }
  .velo--con-chat .chal {
    width: 100%; height: 42dvh; min-height: 240px;
    border-left: 0; border-bottom: 1px solid var(--linea);
    box-shadow: none; animation-name: chal-baja;
  }
  .velo--con-chat:not(.velo--chat-oculto) .cajon {
    flex: 1; min-height: 0; max-height: none; margin-top: -18px;   /* la hoja monta un poco sobre el chat */
    position: relative; z-index: 1;
  }
  .velo--saliendo.velo--con-chat .chal { animation-name: chal-sube; }
  @keyframes chal-baja { from { transform: translateY(-101%); } }
  @keyframes chal-sube { to { transform: translateY(-101%); } }
  .chal__pie { padding-bottom: calc(.45rem + 18px); }
}
@media (max-width: 720px) {
  .cajon__chat { right: .85rem; }
  .velo--con-chat .cajon__cab { padding-right: 6.5rem; }
}
@media (max-width: 720px) and (min-width: 601px) {
  .velo--con-chat:not(.velo--chat-oculto) .cajon__chat { right: calc(.85rem + 34px + .5rem); }
}
@media (prefers-reduced-motion: reduce) { .chal { animation: none; } }