/* ==========================================================================
   35 · PEDIDOS — cada pedido es una comanda

   Rehecha el 23 de septiembre de 2026, con el lenguaje del Resumen y de la
   bandeja de WhatsApp. Es la pantalla de quien está en turno, mirada de reojo
   en hora pico, así que manda una regla: **lo que hay que hacer se ve sin
   leer**. El reloj de cada ficha cambia de color con la espera, el número del
   pedido es lo más grande después del total, y el botón de confirmar ocupa el
   ancho donde cae el pulgar.

   La franja de color arriba de cada ficha dice en qué está —ámbar esperando,
   verde en cocina, rojo si se pasó—, y es lo ÚNICO que cambia de color en la
   ficha entera. Un borde de color por ficha, en una pantalla con quince, era
   quince cosas pidiendo atención a la vez.

   Va al final de la cascada: afina lo que venga de arriba sin tocarlo. Lo que
   se anima es `transform`, `opacity` y el trazo del aro.
   ========================================================================== */

/* --------------------------------------------------------------------------
   La cabecera y las cifras
-------------------------------------------------------------------------- */
.pdx__cab {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: .8rem 1.5rem; flex-wrap: wrap; margin: .1rem 0 1.3rem;
  animation: tbl-entra .55s var(--ease) both;
}
.pdx__kick { margin: 0 0 .15rem; font-size: .86rem; font-weight: 500; color: var(--tinta-3); }
.pdx__kick::first-letter { text-transform: uppercase; }
.pdx__t { font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.25rem); font-weight: 700; letter-spacing: -.028em; }

.pdx__kpis { margin-bottom: 1.3rem; }
.pdx__kpis .tbl-kpi { animation: tbl-entra .55s var(--ease) both; }
.pdx__kpis .tbl-kpi:nth-child(2) { animation-delay: .05s; }
.pdx__kpis .tbl-kpi:nth-child(3) { animation-delay: .1s; }
.pdx__kpis .tbl-kpi:nth-child(4) { animation-delay: .15s; }
.pdx__kpis .tbl-cifra__p b { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.pdx__kpis .tbl-cifra--ojo .tbl-cifra__p b { color: var(--rojo); }
.pdx-tarde { color: var(--rojo); font-weight: 700; }

.pdx__mando { margin-bottom: 1.25rem; }

/* Las facturas que no le han llegado al cliente: plegadas y sin color de
   alarma (12 de octubre de 2026). Ver `pedFacturas` en 16-pedidos.js. */
.pdx-fact { margin: 0 0 1.1rem; border: 1px solid var(--linea-sutil); border-radius: 14px;
  background: var(--crema-2, transparent); }
.pdx-fact__cab { display: flex; align-items: center; gap: .65rem; padding: .7rem 1rem;
  cursor: pointer; list-style: none; color: var(--tinta-2); }
.pdx-fact__cab::-webkit-details-marker { display: none; }
.pdx-fact__cab::after { content: '▾'; margin-left: auto; color: var(--tinta-3); transition: transform .2s var(--ease); }
.pdx-fact[open] > .pdx-fact__cab::after { transform: rotate(180deg); }
.pdx-fact__cab .ico { flex: none; color: var(--tinta-3); }
.pdx-fact__cab span { display: flex; flex-direction: column; min-width: 0; }
.pdx-fact__cab small { color: var(--tinta-3); font-size: .82rem; }
.pdx-fact__l { list-style: none; margin: 0; padding: 0 1rem .6rem; }
.pdx-fact__f { display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .6rem 0; border-top: 1px solid var(--linea-sutil); }
.pdx-fact__f p { margin: .15rem 0 0; font-size: .86rem; color: var(--tinta-3); }
.pdx-fact__f .btn { flex: none; }
.tbl-seg__n--suave { background: var(--crema-3); color: var(--tinta-2); }

/* --------------------------------------------------------------------------
   La rejilla
-------------------------------------------------------------------------- */
.peds {
  position: relative; display: grid; gap: 16px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  transition: opacity .2s var(--ease);
}
.peds--cargando { opacity: .45; pointer-events: none; }
/* Entregados, por día: la raya ocupa la fila entera de la rejilla. */
.peds__dia {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .75rem;
  margin: .5rem 0 -.25rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-2);
}
.peds__dia::after { content: ''; flex: 1; height: 1px; background: var(--crema-3); }
.peds__dia:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   La comanda
-------------------------------------------------------------------------- */
.ped {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1.15rem 1.15rem 1rem; border-radius: 22px;
  background: var(--surface); border: 1px solid var(--linea-sutil);
  box-shadow: 0 1px 2px rgba(33, 22, 16, .04), 0 14px 34px rgba(33, 22, 16, .06);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.ped:hover { box-shadow: 0 1px 2px rgba(33, 22, 16, .05), 0 18px 40px rgba(33, 22, 16, .09); }

/* La franja: en qué está, de un vistazo. La de la espera corre despacio. */
.ped::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 1;
  background: var(--crema-3);
}
.ped--esperando_confirmacion::before {
  background: linear-gradient(90deg, var(--naranja-cl), var(--naranja), var(--amarillo), var(--naranja-cl));
  background-size: 300% 100%;
  animation: ped-franja 3s linear infinite;
}
.ped--confirmado::before, .ped--pagado::before, .ped--en_camino::before { background: var(--verde-cl); }
.ped--rechazado::before { background: var(--rojo); }
.ped[data-tono="mal"]::before {
  background: linear-gradient(90deg, var(--rojo-vivo), var(--rojo), var(--rojo-vivo));
  background-size: 300% 100%;
  animation: ped-franja 2s linear infinite;
}
@keyframes ped-franja { to { background-position: -300% 0; } }
.ped--rechazado, .ped--entregado { background: color-mix(in srgb, var(--surface) 70%, var(--crema)); }

.ped--entra { animation: ped-entra .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
.ped--llega { animation: ped-llega .75s var(--resorte) both; }
.ped--cambia { animation: ped-cambia 1.3s var(--ease) both; }
.ped--sale { animation: ped-sale .42s var(--ease) forwards; pointer-events: none; z-index: 0; }
@keyframes ped-entra { from { opacity: 0; transform: translateY(14px); } }
@keyframes ped-llega {
  0% { opacity: 0; transform: scale(.9) translateY(-10px); }
  60% { box-shadow: 0 0 0 6px rgba(247, 183, 51, .35), 0 14px 34px rgba(33, 22, 16, .06); }
}
@keyframes ped-cambia { from { box-shadow: 0 0 0 4px rgba(247, 183, 51, .45), 0 14px 34px rgba(33, 22, 16, .06); } }
@keyframes ped-sale { to { opacity: 0; transform: scale(.92) translateY(12px); } }

/* La ficha a la que se llegó desde la franja de la alarma o desde el chat
   (`pedFoco`). Va DESPUÉS de `.ped--entra` y con dos clases: con una sola y
   en 17-alarma.css, la animación de entrada la pisaba y no se veía nada. El
   aro se queda mientras dure la clase —unos segundos— y el pulso lo hace
   imposible de pasar por alto. */
.ped.alarma-foco {
  outline: 3px solid var(--rojo-vivo); outline-offset: 3px;
  animation: ped-foco 1.1s var(--ease-io) 3;
}
@keyframes ped-foco {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210,38,45,0), 0 14px 34px rgba(33, 22, 16, .06); }
  40%      { box-shadow: 0 0 0 12px rgba(210,38,45,.28), 0 14px 34px rgba(33, 22, 16, .06); }
}
@media (prefers-reduced-motion: reduce) { .ped.alarma-foco { animation: none; } }

/* --- Cabecera: número, cómo sale, reloj ------------------------------------ */
.ped__cab { display: flex; align-items: flex-start; gap: .85rem; }
.ped__num { flex: none; line-height: 1; }
.ped__num small {
  display: block; margin-bottom: .2rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3);
}
.ped__num b {
  font-family: var(--display); font-size: 1.75rem; font-weight: 700;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.ped__que { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding-top: 1.05rem; }
.ped__modo {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .26rem .6rem; border-radius: 99px;
  background: var(--crema); color: var(--tinta-2); font-size: .76rem; font-weight: 700; white-space: nowrap;
}
.ped__modo .ico { font-size: .95rem; }
/* RECOGE 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. */
.ped__modo--recoge { background: var(--nori); color: var(--crema); }
.ped__modo--recoge .ico { color: var(--naranja-cl); }

/* --- El reloj ------------------------------------------------------------- */
.pdr { flex: none; display: flex; flex-direction: column; align-items: center; gap: .2rem; margin-top: -.15rem; }
.pdr__aro { position: relative; width: 56px; height: 56px; display: grid; place-items: center; }
.pdr__aro svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pdr__f { fill: none; stroke: var(--crema-2); stroke-width: 3.6; }
.pdr__a {
  fill: none; stroke: var(--verde-cl); stroke-width: 3.6; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset .9s var(--ease), stroke .4s var(--ease);
}
.pdr[data-tono="ojo"] .pdr__a { stroke: var(--naranja); }
.pdr[data-tono="mal"] .pdr__a { stroke: var(--rojo-vivo); }
.pdr__n {
  position: relative; font-family: var(--display); font-size: 1.22rem; font-weight: 700;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.pdr[data-tono="mal"] .pdr__n { color: var(--rojo); }
.pdr__t { font-size: .64rem; font-weight: 600; color: var(--tinta-3); white-space: nowrap; }
.pdr[data-tono="mal"] .pdr__t { color: var(--rojo); }
.pdr[data-tono="mal"] .pdr__aro { animation: pdr-late 1.8s var(--ease-io) infinite; }
@keyframes pdr-late { 50% { transform: scale(1.07); } }

/* --- Quién ---------------------------------------------------------------- */
.ped__quien { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.ped__quien .wac__ini { flex: 0 0 38px; height: 38px; font-size: .8rem; align-self: center; }
.ped__quien div { min-width: 0; line-height: 1.3; }
.ped__quien b { display: block; font-size: .96rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ped__quien small { font-size: .76rem; color: var(--tinta-3); }

/* La alergia. Es lo único de esta pantalla que puede hacerle daño a alguien:
   fondo lleno, blanco sobre rojo, y antes que los platos. */
.ped__alergia {
  display: flex; align-items: flex-start; gap: .55rem; margin: 0;
  padding: .7rem .85rem; border-radius: 14px;
  background: var(--rojo); color: #fff; font-size: .88rem; font-weight: 600; line-height: 1.4;
  box-shadow: 0 8px 18px rgba(176, 30, 36, .25);
}
.ped__alergia .ico { flex: none; margin-top: .15em; font-size: 1.1rem; }
.ped__alergia b { letter-spacing: .08em; margin-right: .3rem; }

/* --- Los platos ----------------------------------------------------------- */
.ped__items { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ped__i {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .65rem;
  align-items: start; font-size: .93rem;
}
.ped__cant {
  min-width: 27px; height: 27px; padding: 0 .35rem; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--nori); color: var(--crema);
  font-size: .82rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.ped__plato { padding-top: .2rem; line-height: 1.3; font-weight: 500; }
/* La nota del plato —«sin cebolla»— en rojo y debajo, nunca empujando el
   precio: es la línea que la cocina tiene que leer. */
.ped__plato em {
  display: block; margin-top: .15rem; font-style: normal; font-size: .78rem; font-weight: 700; color: var(--rojo);
}
.ped__p { padding-top: .2rem; font-weight: 600; color: var(--tinta-2); font-variant-numeric: tabular-nums; }

/* El corte de la comanda: una línea punteada con dos muescas en los bordes. */
.ped__corte { position: relative; margin: .1rem -1.15rem; border-top: 2px dashed var(--crema-3); }
.ped__corte::before, .ped__corte::after {
  content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--crema); box-shadow: inset 0 0 0 1px var(--linea-sutil);
}
.ped__corte::before { left: -9px; }
.ped__corte::after { right: -9px; }

.ped__cuenta { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.ped__cuenta > span:first-child { font-size: .8rem; color: var(--tinta-3); padding-bottom: .15rem; }
.ped__total { text-align: right; line-height: 1; }
.ped__total small {
  display: block; margin-bottom: .2rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-3);
}
.ped__total b {
  font-family: var(--display); font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* --- Los datos de la entrega ---------------------------------------------- */
.ped__datos {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: .45rem .6rem; margin: 0;
  padding: .75rem .85rem; border-radius: 14px; background: var(--crema);
  font-size: .85rem; line-height: 1.4;
}
.ped__datos dt { color: var(--arena); padding-top: .1rem; }
.ped__datos dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ped__datos dd em { display: block; font-style: normal; font-size: .76rem; color: var(--tinta-3); }
.ped__mapa {
  color: var(--tinta); text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px; text-decoration-color: var(--arena);
}
.ped__mapa:hover { color: var(--rojo); text-decoration-color: currentColor; }
/* La hora de una recogida ocupa el sitio de la dirección, y se lee más grande:
   decide CUÁNDO se cocina. */
.ped__hora { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.ped__motivo, .ped__ok {
  display: flex; align-items: flex-start; gap: .5rem; margin: 0;
  padding: .55rem .7rem; border-radius: 11px; font-size: .8rem; line-height: 1.4;
}
.ped__motivo .ico, .ped__ok .ico { flex: none; margin-top: .15em; }
.ped__motivo { background: var(--rojo-sua); color: var(--rojo); }
.ped__ok     { background: var(--verde-sua); color: var(--verde); }
.ped__ok--premio { background: var(--ambar-sua); color: #8A520B; }

/* --- El pie: el botón donde cae el pulgar ---------------------------------- */
.ped__pie { display: flex; gap: .5rem; margin-top: auto; }
.ped__si {
  flex: 1; padding: .82rem 1rem; border-radius: 14px; font-size: .96rem;
  box-shadow: 0 8px 18px rgba(21, 122, 71, .24);
}
.ped__si:hover { box-shadow: 0 10px 24px rgba(21, 122, 71, .32); }
/* «Cliente recoge en sede / Ármalo en VectorPOS»: dos renglones en el sitio de
   «Confirmar», para que quepa al lado de Editar y No se puede (migración 087). */
.ped__si--mesa { padding-block: .6rem; }
.ped__si--mesa span { display: grid; text-align: left; line-height: 1.15; }
.ped__si--mesa small { font-size: .74rem; font-weight: 500; opacity: .85; }
.ped__si--suave { box-shadow: none; }
.ped__si--suave:hover { box-shadow: none; --bg: var(--verde-sua); --fg: var(--verde); --bd: rgba(21, 122, 71, .3); }
.ped__no { padding: .82rem .9rem; border-radius: 14px; --fg: var(--rojo); --bd: rgba(176, 30, 36, .22); }
.ped__no:hover { --bg: var(--rojo-sua); --bd: rgba(176, 30, 36, .35); }
/* Editar antes de confirmar: neutro, al lado de «Confirmar». */
.ped__ed { padding: .82rem .9rem; border-radius: 14px; }
.ped__ed:hover { --bg: rgba(240, 144, 30, .12); --bd: rgba(240, 144, 30, .4); }
.ped__chat { width: 50px; padding: 0; border-radius: 14px; --fg: #0B8A5B; font-size: 1.15rem; }
.ped__chat:hover { --bg: var(--verde-sua); --bd: rgba(21, 122, 71, .3); }
/* Cuatro botones en «Esperando» —Confirmar, Editar, No se puede y el chat— no
   caben en una ficha de tres columnas, y el que se salía por la derecha era
   justo el de WhatsApp, la vuelta al chat. Se mide la ficha, no la pantalla:
   cuando no cabe, Editar y No se puede quedan en su ícono, con su `title`. */
.ped__pie { container-type: inline-size; }
@container (max-width: 440px) {
  .ped__pie .ped__no span, .ped__pie .ped__ed span { display: none; }
}

/* El sello: un segundo de «A cocina» encima de la ficha antes de que se vaya. */
.ped__sello {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  background: rgba(255, 253, 249, .84);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: tbl-aparece .18s var(--ease) both;
}
.ped__sello span {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .65rem 1.2rem; border-radius: 14px; border: 3px solid currentColor;
  font-family: var(--display); font-size: 1.55rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--verde); transform: rotate(-7deg);
  animation: ped-sello .5s var(--resorte) both;
}
.ped__sello--rojo span { color: var(--rojo); }
@keyframes ped-sello { from { opacity: 0; transform: rotate(-7deg) scale(1.9); } }

/* --- Nada por acá ----------------------------------------------------------- */
.pdx-vacio {
  grid-column: 1 / -1; display: grid; justify-items: center; gap: .45rem;
  padding: 3.6rem 1.2rem; text-align: center; color: var(--tinta-3);
  background: var(--surface); border: 1.5px dashed var(--crema-3); border-radius: 22px;
  animation: tbl-entra .5s var(--ease) both;
}
.pdx-vacio__i {
  width: 74px; height: 74px; border-radius: 24px; margin-bottom: .4rem;
  display: grid; place-items: center; font-size: 2rem;
  background: var(--verde-sua); color: var(--verde);
  animation: wa-flota 4.5s var(--ease-io) infinite;
}
.pdx-vacio h3 { font-size: 1.25rem; color: var(--tinta); }
.pdx-vacio p { margin: 0; max-width: 42ch; font-size: .88rem; }

/* ==========================================================================
   Los diálogos de confirmar y rechazar
   ========================================================================== */
.dial__p { font-size: .88rem; color: var(--tinta-2); line-height: 1.6; margin-bottom: .9rem; }
.sugerencias { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }

/* Confirmar un pedido: el enlace al mapa en su propia línea, para que no se
   pierda al final del párrafo, y los minutos con la palabra al lado — un «40»
   suelto en una caja no dice si son minutos o pesos. */
.pc-mapa { display: flex; width: fit-content; align-items: center; gap: .3rem; margin-top: .45rem;
           font-weight: 700; color: var(--rojo); text-decoration: none; }
.pc-mapa:hover { text-decoration: underline; }
.pc-min__fila { display: flex; align-items: center; gap: .6rem; margin-top: .35rem;
                font-weight: 600; color: var(--tinta-2); }
.pc-min__fila .campo { width: 7rem; font-variant-numeric: tabular-nums; }

/* El rango de minutos: los atajos encima y las dos casillas en una frase
   —«Entre 30 y 45 minutos»—, que es como lo dice la cajera. El atajo que
   coincide con lo escrito queda marcado; un rango que no cuadra pinta las
   casillas y dice por qué, en vez de la frase que leería el cliente. */
.pc-rango { display: block; font-weight: 600; }
.pc-rango .pc-min__fila .campo { width: 5.5rem; }
.pc-rango__atajos { margin: .45rem 0 .1rem; }
.pc-rango__atajos .pista[aria-pressed="true"] {
  background: var(--nori); border-color: var(--nori); color: var(--crema); }
.pc-rango--mal .campo { border-color: var(--rojo); }
.pc-rango__mal { margin-top: .5rem; font-size: .8rem; font-weight: 700; color: var(--rojo); }

/* El medio de pago, cuando la caja cobra desde acá. Separado de los minutos
   por una línea: son dos preguntas, y la segunda emite una factura. */
.pc-min + .pc-min { margin-top: .9rem; }
.pc-min select.campo { width: 100%; margin-top: .35rem; }
.dial__nota { margin-top: .5rem; font-size: .8rem; color: var(--tinta-3, var(--tinta-2)); font-weight: 600; }

/* ==========================================================================
   Pantalla angosta — el celular apoyado al lado de la caja
   ========================================================================== */
@media (max-width: 720px) {
  .peds { grid-template-columns: 1fr; gap: 12px; }
  .ped { padding: 1rem 1rem .95rem; border-radius: 20px; }
  .ped__corte { margin-inline: -1rem; }
  .ped__no span, .ped__ed span { display: none; }
  .pdx__cab .tbl-vivo { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ped, .ped::before, .pdr__aro, .pdx-vacio__i, .ped__sello span { animation: none !important; }
  .pdr__a { transition: none; }
}

/* ==========================================================================
   36 · EL REPARTO EN LA FICHA — quién lo lleva, la novedad, la caja
   (27 de septiembre de 2026; la lógica en js/26-reparto.js)
   ========================================================================== */
.ped__calle {
  display: flex; align-items: center; gap: .5rem; margin: 0;
  padding: .5rem .7rem; border-radius: 11px; font-size: .82rem; line-height: 1.35;
  background: var(--crema-2); color: var(--tinta-2);
}
.ped__calle .ico { flex: none; }
.ped__calle span { flex: 1; }
.ped__calle--nadie { background: transparent; border: 1px dashed var(--linea); color: var(--tinta-3); }
.ped__enlace {
  flex: none; padding: 0; background: none; border: 0; font: inherit; font-weight: 700;
  color: var(--rojo); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.ped__motivo--suave { background: var(--ambar-sua); color: #8A520B; }
.ped__ok--gris { background: var(--crema-2); color: var(--tinta-3); }
.ped__quien-entrega { margin: 0; font-size: .78rem; color: var(--tinta-3); }

/* La novedad no es una línea más: alguien está esperando en una puerta. */
.ped__nov {
  display: grid; gap: .35rem; padding: .75rem .8rem .8rem; border-radius: 13px;
  background: #FFF2DF; border: 1.5px solid var(--naranja);
  animation: ped-nov 2.4s var(--ease-io) infinite;
}
.ped__nov-t { display: flex; align-items: flex-start; gap: .45rem; margin: 0; font-size: .86rem;
              color: #7A4308; line-height: 1.35; }
.ped__nov-t .ico { flex: none; margin-top: .12em; }
.ped__nov-t span { flex: 1; }
.ped__nov-t small { flex: none; color: #9C6B33; font-size: .74rem; }
.ped__nov-x { margin: 0; padding: .45rem .6rem; border-radius: 9px; background: rgba(255,255,255,.7);
              font-size: .86rem; white-space: pre-line; }
.ped__nov-p { margin: 0; font-size: .74rem; color: #9C6B33; }
.ped__nov-b { justify-self: start; padding: .55rem 1rem; border-radius: 11px; }
@keyframes ped-nov { 50% { box-shadow: 0 0 0 5px rgba(240, 144, 30, .16); } }
@media (prefers-reduced-motion: reduce) { .ped__nov { animation: none; } }

.ped__mas { width: 50px; padding: 0; border-radius: 14px; font-size: 1.15rem; }
.ped--anulado::before { background: var(--rojo); }
.ped__si:disabled { opacity: .45; cursor: not-allowed; }

/* --- El menú de un pedido en la calle -------------------------------------- */
.rep-ops { display: grid; gap: .45rem; }
.rep-op {
  display: flex; align-items: flex-start; gap: .75rem; width: 100%; text-align: left;
  padding: .75rem .85rem; border-radius: 12px; border: 1px solid var(--linea-sutil);
  background: var(--surface); transition: background .2s, border-color .2s;
}
.rep-op:hover { background: var(--crema-2); border-color: var(--linea); }
.rep-op .ico { flex: none; margin-top: .15rem; color: var(--tinta-2); }
.rep-op b { display: block; font-size: .95rem; }
.rep-op small { display: block; color: var(--tinta-3); font-size: .8rem; line-height: 1.4; }
.rep-op--peligro b, .rep-op--peligro .ico { color: var(--rojo); }

.rep-quien { display: grid; gap: .4rem; }
.rep-quien__o { display: flex; align-items: center; gap: .7rem; padding: .6rem .75rem; border-radius: 11px;
                border: 1px solid var(--linea-sutil); cursor: pointer; }
.rep-quien__o:has(input:checked) { border-color: var(--verde); background: var(--verde-sua); }
.rep-quien__o b { display: block; }
.rep-quien__o small { color: var(--tinta-3); }
.rep-chk { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; font-size: .9rem; cursor: pointer; }

.rep-nov { padding: .7rem .85rem; border-radius: 12px; background: #FFF2DF; border: 1px solid var(--naranja);
           margin-bottom: .9rem; color: #7A4308; }
.rep-nov p { margin: .3rem 0 0; color: var(--tinta); white-space: pre-line; }
/* El mensaje para la moto va primero en el editor: es lo único obligatorio. */
.rep-nov + .rep-para { margin-top: 0; }
.rep-para .campo { border-color: var(--naranja); }
.rep-para small { display: block; margin-top: .35rem; font-size: .78rem; color: var(--tinta-3); }

/* --- Lo que la caja le dijo a la moto, y si lo vio (migración 048) ---------- */
.ped__visto, .ped__novisto {
  display: flex; align-items: center; gap: .45rem; margin: 0; padding: .4rem .7rem;
  border-radius: 11px; font-size: .78rem; line-height: 1.35;
}
.ped__visto .ico, .ped__novisto .ico { flex: none; }
.ped__visto span, .ped__novisto > span { flex: 1; }
.ped__visto { color: var(--verde); background: transparent; border: 1px dashed rgba(21, 122, 71, .35); }
.ped__novisto { color: #8A520B; background: var(--ambar-sua); }
.ped__novisto--tarde { color: #fff; background: var(--rojo); animation: ped-nov 2.4s var(--ease-io) infinite; }
.ped__novisto--tarde .ped__enlace { color: #fff; }

/* --- Los menús de lo que pasa ------------------------------------------------ */
.rep-ops__t { margin: 0 0 .5rem; font-size: .76rem; font-weight: 700; letter-spacing: .08em;
              text-transform: uppercase; color: var(--tinta-3); }
.rep-minis { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; padding-top: .8rem;
             border-top: 1px dashed var(--linea); }
.rep-mini { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border-radius: 999px;
            border: 1px solid var(--linea-sutil); background: var(--surface); font-size: .84rem; font-weight: 600;
            color: var(--tinta-2); transition: background .2s, border-color .2s; }
.rep-mini:hover { background: var(--crema-2); border-color: var(--linea); }
.rep-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }
.rep-pill { padding: .55rem .9rem; border-radius: 999px; border: 1.5px solid var(--linea);
            background: var(--surface); font-weight: 600; font-size: .9rem; transition: all .18s var(--ease); }
.rep-pill:hover { border-color: var(--tinta-3); }
.rep-pill[aria-checked="true"] { border-color: var(--rojo); background: var(--rojo-sua); color: var(--rojo); }
.rep-aviso-moto { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 1rem; padding: .65rem .8rem;
                  border-radius: 12px; background: var(--crema-2); font-size: .86rem; line-height: 1.4; }
.rep-aviso-moto .ico { flex: none; margin-top: .15em; color: var(--rojo); }
.rep-previa { display: block; margin: .35rem 0 .3rem; font-size: .84rem; font-weight: 400; color: var(--tinta-3); }
/* «El pedido dice Efectivo → Carlos dice Nequi»: la decisión, en grande. */
.rep-cambia { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem;
              margin: 0 0 .9rem; padding: .8rem .9rem; border-radius: 13px; background: var(--surface);
              border: 1px solid var(--linea); text-align: center; }
.rep-cambia small { display: block; font-size: .72rem; color: var(--tinta-3); }
.rep-cambia b { font-family: var(--display); font-size: 1.2rem; }
.rep-cambia span:last-child b { color: var(--verde); }

/* --- El editor ------------------------------------------------------------- */
.rep-lineas { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .4rem; }
.rep-linea {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: .6rem;
  padding: .5rem .55rem; border-radius: 11px; background: var(--surface); border: 1px solid var(--linea-sutil);
}
.rep-cant { display: inline-flex; align-items: center; gap: .15rem; border-radius: 999px;
            background: var(--crema-2); padding: .15rem; }
.rep-cant button { width: 30px; height: 30px; border-radius: 50%; font-size: 1.05rem; font-weight: 700; }
.rep-cant button:hover { background: var(--surface); }
.rep-cant b { min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; }
.rep-plato { font-size: .9rem; line-height: 1.3; min-width: 0; }
.rep-nota { display: block; width: 100%; margin-top: .25rem; padding: .2rem .45rem; border-radius: 7px;
            border: 1px solid var(--linea-sutil); font-size: .78rem; background: transparent; }
.rep-precio { font-variant-numeric: tabular-nums; font-size: .88rem; }
.rep-quitar { width: 30px; height: 30px; border-radius: 50%; color: var(--tinta-3); }
.rep-quitar:hover { background: var(--rojo-sua); color: var(--rojo); }
.rep-vacio { padding: .6rem; color: var(--tinta-3); font-size: .86rem; list-style: none; }
.rep-busca { list-style: none; margin: .35rem 0 0; padding: .3rem; border-radius: 12px;
             border: 1px solid var(--linea); background: var(--surface); display: grid; gap: .15rem; }
.rep-busca button { display: flex; justify-content: space-between; gap: .8rem; width: 100%; padding: .5rem .6rem;
                    border-radius: 9px; text-align: left; font-size: .9rem; }
.rep-busca button:hover:not(:disabled) { background: var(--crema-2); }
.rep-busca button:disabled { opacity: .45; cursor: not-allowed; }
.rep-busca em { font-style: normal; font-size: .72rem; color: var(--rojo); margin-left: .35rem; }
.rep-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: .9rem;
             padding-top: .7rem; border-top: 1px dashed var(--linea); }
.rep-total b { font-family: var(--display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }

/* --- Imprimir desde el panel: solo el papel sale ---------------------------- */
#papel-panel { display: none; }
@media print {
  body.imprimiendo-papel > *:not(#papel-panel) { display: none !important; }
  body.imprimiendo-papel #papel-panel { display: block !important; }
  body.imprimiendo-papel { background: #fff; }
}

/* Con dos medios (#653, migración 089; js/26-reparto.js, `repPartesHtml`). */
.rep-partes { margin: .2rem 0 .4rem; }
.rep-partes__fila { display: grid; grid-template-columns: 1fr 9rem; gap: .5rem; margin-bottom: .5rem; }
.rep-partes__fila .campo { width: 100%; }
.rep-partes__fila input.campo { font-variant-numeric: tabular-nums; }
.rep-partes [data-resto] { margin-top: .6rem; }