/* ════════════════════════════════════════════════════════════════
   Recepción — Obarrio
   La agenda: los pedidos por el día en que hay que entregarlos.
   ════════════════════════════════════════════════════════════════ */

/* ───────── Cabecera ───────── */
.franja{background:var(--papel);padding:14px 28px;display:flex;align-items:center;gap:20px;
  flex-wrap:wrap;border-bottom:2px solid var(--linea-firme)}
.franja .quien{margin-left:auto;display:flex;align-items:center;gap:14px}
.franja .quien .datos{text-align:right;line-height:1.3}
.franja .quien strong{display:block;font-size:var(--t-s);font-weight:700}
.franja .quien .rol{font-size:var(--t-xs);color:var(--tinta-3)}
.franja .quien button{background:none;border:0;color:var(--tinta-3);cursor:pointer;
  padding:7px;border-radius:var(--r-s);display:grid;place-items:center}
.franja .quien button:hover{background:var(--papel-2);color:var(--tinta)}
.franja .quien svg{width:17px;height:17px}

/* ───────── Navegación ───────── */
.barra{background:var(--papel);border-bottom:1px solid var(--linea);padding:0 28px;
  display:flex;gap:4px;overflow-x:auto;position:sticky;top:0;z-index:20}
.barra button[data-seccion]{background:none;border:0;border-bottom:2px solid transparent;
  padding:13px 14px;color:var(--tinta-2);cursor:pointer;font-size:var(--t-m);white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;margin-bottom:-1px}
.barra button[data-seccion]:hover{color:var(--tinta)}
/* La pestaña activa es estructura, no estado: en verde competía con «Listo» y
   «Pagado», que sí lo son. Cuando un color significa «estado del pedido» y
   «dónde estoy en la aplicación» a la vez, deja de significar. */
.barra button[data-seccion].activa{color:var(--tinta);border-bottom-color:var(--tinta);font-weight:700}
.barra .cuenta{font-family:var(--mono);font-size:var(--t-xs);color:var(--tinta-3)}
.barra button.activa .cuenta{color:var(--tinta-2)}
.barra .punto{width:7px;height:7px;border-radius:50%;background:var(--tinta-3)}
.barra .punto.verde{background:var(--menta-honda)}
.barra .punto.ambar{background:var(--horno)}
.barra .punto.rojo{background:var(--alerta)}
.barra .derecha{margin-left:auto;display:flex;align-items:center;padding:7px 0}

/* ───────── Página ───────── */
/* ───────── Dos columnas: la lista y el detalle ─────────
   La pantalla de una laptop da de sobra para las dos. Con la ficha en un panel
   al lado en vez de un modal encima, se puede ir de un pedido a otro sin perder
   de vista el día — que es como se trabaja en una caja de verdad. */
/* Sin tope, en un monitor de 2500 px la fila se estira y el nombre del cliente
   queda a medio metro del precio: el ojo tiene que viajar para juntar dos datos
   del mismo pedido. Una línea de texto cómoda no pasa de ~1400 px. */
.hoja{padding:28px 32px 70px;max-width:1580px}
.cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 366px;gap:34px;align-items:start}
/* Con el panel de la derecha escondido —el calendario— la rejilla no puede
   seguir reservándole su columna: siete días necesitan todo el ancho. */
.cuerpo:has(#rail.oculto){grid-template-columns:minmax(0,1fr)}
/* La regla base va ANTES del media query: si va después, gana por orden y el
   panel se queda visible en pantallas donde no cabe. */
.rail{position:sticky;top:76px;display:flex;flex-direction:column;gap:16px}
@media(max-width:1240px){
  .cuerpo{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
}
.encabezado{display:flex;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.encabezado > div:first-child{min-width:0}
/* Por encima de 1240 px el panel de la derecha ya muestra lo que falta cobrar.
   Repetirlo arriba es gastar una banda entera en decir dos veces el mismo
   número; por debajo de ese ancho el panel desaparece y entonces sí hace falta. */
@media(min-width:1240px){ #cifras-agenda{display:none} }
.encabezado h1{font-family:var(--serif);font-size:var(--t-2xl);margin:0 0 4px;font-weight:400;
  letter-spacing:.005em;line-height:1.15}
.encabezado p{margin:0;color:var(--tinta-2);font-size:var(--t-s);max-width:62ch}
.encabezado .acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ───────── Cifras ─────────
   Sin caja: son cinco datos, no cinco objetos. Un recuadro alrededor solo
   añade una línea más a una pantalla que ya tiene muchas. */
.cifras{display:flex;gap:26px;flex-wrap:wrap;align-items:baseline;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--linea)}
.cifra{display:flex;align-items:baseline;gap:7px;cursor:pointer;padding:3px 7px;
  margin:-3px -7px;border-radius:var(--r-s)}
.cifra:hover{background:var(--papel-2)}
.cifra b{font-family:var(--mono);font-size:var(--t-cifra);font-weight:500;letter-spacing:-.02em}
.cifra span{font-size:var(--t-s);color:var(--tinta-2)}
.cifra.alta b{color:var(--alerta)}

/* ───────── Buscar y filtrar ───────── */
.herramientas{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-bottom:14px;padding-top:18px}
.herramientas .acciones{margin-left:auto}
.buscador{position:relative;flex:1 1 280px;max-width:380px}
.buscador svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:var(--tinta-3)}
.buscador input{width:100%;padding:9px 34px;border:1px solid var(--linea-firme);
  border-radius:var(--r-s);font-size:var(--t-m);font-family:inherit;background:var(--papel);color:var(--tinta)}
.buscador input:focus{border-color:var(--menta-honda);outline:none}
.buscador input::-webkit-search-cancel-button{display:none}
.buscador .limpia{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;
  background:none;color:var(--tinta-3);font-size:18px;line-height:1;cursor:pointer;
  padding:4px 7px;border-radius:var(--r-s)}
.buscador .limpia:hover{background:var(--papel-2);color:var(--tinta)}

/* Los filtros son texto, no botones. Cinco cápsulas con borde compiten con el
   contenido; cinco palabras con la activa subrayada, no. */
.filtros{display:flex;gap:3px;flex-wrap:wrap}
.filtro{border:0;background:none;color:var(--tinta-2);padding:8px 11px;border-radius:var(--r-s);
  cursor:pointer;font-size:var(--t-s);display:inline-flex;align-items:baseline;gap:6px}
.filtro:hover{background:var(--papel-2);color:var(--tinta)}
/* Un filtro elegido tampoco es un estado del pedido: neutro seleccionado. */
.filtro.activo{background:var(--papel-2);color:var(--tinta);font-weight:700;
  box-shadow:inset 0 0 0 1px var(--linea-firme)}
.filtro .n{font-family:var(--mono);font-size:var(--t-xs);color:var(--tinta-3)}
.filtro.activo .n{color:var(--tinta-2)}

/* Los meses filtran el mismo eje que los chips —elegir Diciembre reemplaza a
   Hoy, no se suman— pero en dos filas separadas parecían dos controles
   independientes y no se entendía qué hacía «Hoy + Diciembre». Van en la misma
   línea, detrás de un separador, para que se lean como lo que son: más opciones
   del mismo filtro. */
.meses{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:0 0 18px;
  padding-left:14px;border-left:1px solid var(--linea)}
.meses .rotulo{margin-right:6px}
@media(max-width:1100px){.meses{border-left:0;padding-left:0;width:100%}}
.mes{border:0;background:none;color:var(--tinta-2);padding:7px 11px;border-radius:var(--r-s);
  cursor:pointer;font-size:var(--t-s);display:inline-flex;align-items:baseline;gap:6px}
.mes:hover{background:var(--papel-2);color:var(--tinta)}
.mes.activo{background:var(--menta-palida);color:var(--menta-honda);font-weight:700}
.mes .n{font-family:var(--mono);font-size:var(--t-xs);color:var(--tinta-3)}
.mes.activo .n{color:var(--menta-honda)}

.resumen-mes{display:flex;gap:24px;flex-wrap:wrap;align-items:baseline;
  padding:0 0 18px;margin-bottom:6px;border-bottom:1px solid var(--linea)}
.resumen-mes strong{font-family:var(--serif);font-size:var(--t-xl);font-weight:400}
.resumen-mes span{font-size:var(--t-s);color:var(--tinta-2)}
.resumen-mes b{font-family:var(--mono);font-weight:500}

.resultado{font-size:var(--t-s);color:var(--tinta-3);margin:0 0 18px}
.resultado b{color:var(--tinta);font-weight:700}

/* ───────── El día ───────── */
/* Cada día es un bloque cerrado, no una lista suelta sobre el papel.
   «El pedido no es una fila en una lista, es algo que pasa un día» — así que el
   día se dibuja como lo que es. Sin el borde, las filas flotaban y no se veía
   dónde empezaba un día y terminaba el otro. */
/* El día es un grupo, no un objeto. Con fondo, borde y esquinas propias, cada
   fecha se leía como una tarjeta suelta — y en una agenda de veinte días son
   veinte cajas compitiendo con lo único que hay que leer, que son las filas.
   Ahora el día es un encabezado con una regla debajo, y las filas cuelgan de
   él sobre el papel de la página. Menos bordes, misma jerarquía. */
.dia{margin-bottom:28px}
.dia-titulo{display:flex;align-items:baseline;gap:11px;padding:0 4px 8px;
  border-bottom:2px solid var(--linea-firme)}
/* Hoy se distingue por el canto, no por el fondo: teñir el bloque entero
   apagaría las filas de dentro, que es lo que hay que leer. */
/* Hoy es estructura de la página, no un estado del pedido: se marca con un
   canto neutro firme y el rótulo, sin gastar el verde ni el rojo en ello. */
.dia.es-hoy .dia-titulo{border-bottom-color:var(--arcilla-honda)}
.dia.es-hoy .dia-titulo h2{font-weight:500}
.dia-titulo h2{font-family:var(--serif);font-size:var(--t-xl);margin:0;font-weight:400}
.dia-titulo .marcador{font-size:var(--t-xs);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-3)}
/* «Hoy» no es una alerta: en rojo pedía la misma atención que una alergia. */
.dia-titulo .marcador.hoy{color:var(--tinta)}
.dia-titulo .marcador.manana{color:var(--horno)}
.dia-titulo .cuantos{margin-left:auto;font-size:var(--t-s);color:var(--tinta-3)}

/* Los pedidos de un día son una lista, no cinco tarjetas sueltas: filas sobre el
   papel, separadas por una línea fina. Se leen de corrido y la pantalla respira. */
.reng{display:grid;grid-template-columns:76px minmax(0,1fr) 168px 152px 172px;gap:16px;
  align-items:start;padding:15px 4px;border-bottom:1px solid var(--linea);cursor:pointer;
  transition:background .1s;border-radius:var(--r-s)}
.dia .reng:last-child{border-bottom:0}
.reng:last-child{border-bottom:0}
.reng:hover{background:var(--papel-2)}
@media(max-width:980px){
  .reng{grid-template-columns:70px minmax(0,1fr);gap:6px 14px}
  .reng .quien-col,.reng .plata,.reng .mandos{grid-column:2}
  .reng .mandos{align-items:flex-start;margin-top:4px}
}

/* Rojo solo cuando hay un problema de verdad: el pedido se pasó de fecha.
   "Hoy" ya lo dice el título del día; repetirlo en cada fila lo vuelve ruido. */
/* Un pedido con la fecha pasada es un retraso, no un riesgo. El rojo se guarda
   entero para la alergia — que es lo único de esta pantalla que puede mandar a
   alguien al hospital — y el retraso va en ámbar, como «en cocina». */
.reng.atrasado{background:var(--horno-palida)}
.reng.atrasado:hover{background:#F6EAD2}
.reng.entregado{opacity:.5}
.reng.nuevo{animation:aparece 1s ease-out}
@keyframes aparece{0%{background:var(--menta-palida)}100%{background:transparent}}

.reng .rotulo-hora{display:block;font-size:var(--t-micro);font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:2px}
.reng .hora{font-family:var(--mono);font-size:var(--t-l);font-weight:500;letter-spacing:-.02em}
.reng .numero{font-family:var(--mono);font-size:var(--t-xs);color:var(--tinta-3);margin-top:3px}

.reng .quefue{font-size:var(--t-l);font-weight:500;line-height:1.35}
.reng .detalle{font-size:var(--t-s);color:var(--tinta-2);margin-top:3px}
.reng .lugar{font-size:var(--t-s);color:var(--tinta-3);margin-top:3px}

.reng .quien-col .nom{font-size:var(--t-m)}

.reng .plata{font-family:var(--mono);font-size:var(--t-s)}
.reng .plata .saldo{font-size:var(--t-xs);color:var(--tinta-3);margin-top:3px}
.reng.atrasado .plata .saldo{color:var(--horno)}
.reng .plata .saldado{font-size:var(--t-xs);color:var(--menta-honda);margin-top:3px}

.reng .mandos{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.acciones-fila{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}

/* ───────── El recorrido del pedido ─────────
   Pendiente → En cocina → Listo → Entregado. La barra dice en qué va y cuánto
   falta; una etiqueta suelta solo dice lo primero. */
/* El estado primero y con peso; los tramos debajo, como pista de cuánto falta.
   Antes el nombre iba en 11 px bajo la barra y había que buscarlo. */
/* Los cuatro tramos se quedan en la ficha, no en la fila: con el nombre del
   estado escrito al lado no añadían información y sí ruido — cuatro rayitas por
   renglón en una lista de veinte. */
.proceso{display:flex;flex-direction:column;gap:5px;width:100%}
.reng .proceso .tramos{display:none}
.proceso .tramos{display:flex;gap:3px}
.proceso .tramo{height:3px;flex:1;border-radius:2px;background:var(--linea)}
.proceso .tramo.hecho{background:var(--paso)}
.proceso .aqui{display:flex;align-items:center;gap:6px;
  font-size:var(--t-m);font-weight:600;color:var(--paso);letter-spacing:-.01em}
.punto{width:8px;height:8px;border-radius:50%;background:var(--paso);flex:none}

.recorrido{display:flex;margin:0 0 16px}
.recorrido .etapa{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.recorrido .etapa::before{content:"";position:absolute;top:6px;left:-50%;width:100%;height:2px;
  background:var(--linea);z-index:0}
.recorrido .etapa:first-child::before{display:none}
.recorrido .etapa.hecha::before{background:var(--paso)}
.recorrido .bolita{width:13px;height:13px;border-radius:50%;background:var(--papel);
  border:2px solid var(--linea);z-index:1}
.recorrido .etapa.hecha .bolita{background:var(--paso);border-color:var(--paso)}
.recorrido .etapa.actual .bolita{box-shadow:0 0 0 4px color-mix(in srgb,var(--paso) 18%,transparent)}
.recorrido .nombre{font-size:var(--t-xs);color:var(--tinta-3);text-align:center}
.recorrido .etapa.actual .nombre{color:var(--paso);font-weight:700}

/* ───────── Tablas ───────── */
.tabla-caja{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:880px}
thead th{text-align:left;font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta-3);padding:13px 16px;
  border-bottom:1px solid var(--linea);white-space:nowrap}
tbody td{padding:14px 16px;border-bottom:1px solid var(--linea);vertical-align:top;font-size:var(--t-m)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--papel-2)}
td .nombre{font-weight:500;white-space:nowrap}
td .sub{font-size:var(--t-s);color:var(--tinta-3);margin-top:2px}
td.mono,td .mono{font-family:var(--mono);font-size:var(--t-s)}
td .sub.mono{white-space:nowrap;font-size:var(--t-xs)}
.vacio{padding:48px 20px;text-align:center;color:var(--tinta-3);font-size:var(--t-s)}

/* ───────── Conversaciones ───────── */
.conv{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
@media(max-width:980px){.conv{grid-template-columns:minmax(0,1fr)}}
.chat{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);
  padding:16px 18px;margin-bottom:12px}
.chat-alto{display:flex;align-items:center;gap:10px;margin-bottom:13px;padding-bottom:12px;
  border-bottom:1px solid var(--linea)}
.chat-alto .q{font-weight:700;font-size:var(--t-m)}
.chat-alto .t{font-family:var(--mono);font-size:var(--t-xs);color:var(--tinta-3);margin-top:2px}
.chat-alto .est{margin-left:auto}
.globos{display:flex;flex-direction:column;gap:7px;max-height:300px;overflow-y:auto}
.g{max-width:78%;padding:8px 12px;border-radius:var(--r-m);font-size:var(--t-s);
  line-height:1.5;white-space:pre-wrap}
.g.cliente{background:var(--papel-2);align-self:flex-start;border-bottom-left-radius:3px}
.g.bot{background:var(--menta-palida);align-self:flex-end;border-bottom-right-radius:3px;color:#2A5A45}
.g .h{display:block;font-family:var(--mono);font-size:var(--t-micro);color:var(--tinta-3);
  margin-top:4px;text-align:right}

.caja{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);
  padding:18px 20px;margin-bottom:16px}
.caja h3{margin:0 0 5px;font-family:var(--serif);font-size:var(--t-l);font-weight:400}
.caja p.ayuda{margin:0 0 16px;font-size:var(--t-s);color:var(--tinta-2)}

/* ───────── Ficha del pedido ───────── */
.ficha-alto{background:var(--papel-2);border-bottom:1px solid var(--linea);
  border-top:2px solid var(--menta);margin:-26px -28px 24px;padding:22px 28px;
  display:flex;align-items:flex-start;gap:14px}
.ficha-alto .rotulo-hora{display:block;font-size:var(--t-micro);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:4px}
.ficha-alto .hora{font-family:var(--mono);font-size:28px;font-weight:500;letter-spacing:-.03em;
  line-height:1;color:var(--tinta)}
.ficha-alto .dia{font-size:var(--t-s);color:var(--tinta-2);margin-top:6px}
.ficha-alto .der{margin-left:auto;text-align:right}
.ficha-alto .num{font-family:var(--mono);font-size:var(--t-s);color:var(--tinta-3)}

.bloque{margin-bottom:24px}
.bloque > h4{margin:0 0 12px;font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-3)}

.cobro{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--papel-2);
  border-radius:var(--r-m);padding:14px 16px}
.cobro .monto{font-family:var(--mono);font-size:var(--t-s);color:var(--tinta-2)}
.cobro .monto b{font-size:20px;font-weight:500;color:var(--tinta)}
.cobro .falta{color:var(--tinta-2);margin-top:3px}
.cobro .pagado{color:var(--menta-honda);margin-top:3px}
.cobro .abonar{margin-left:auto;display:flex;gap:8px;align-items:center}
.cobro .abonar input{width:92px;padding:8px 10px;border:1px solid var(--linea-firme);
  border-radius:var(--r-s);font-family:var(--mono);font-size:var(--t-s);background:var(--papel)}

.pasos{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

.historial{list-style:none;margin:0;padding:0;font-size:var(--t-s);color:var(--tinta-2)}
.historial li{display:flex;gap:10px;padding:6px 0;align-items:baseline}
.historial li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--linea-firme);
  flex:0 0 auto;margin-top:5px}
.historial li:last-child::before{background:var(--menta-honda)}
.historial .cuando{font-family:var(--mono);font-size:var(--t-xs);color:var(--tinta-3);
  margin-left:auto;white-space:nowrap}

.atajos{display:flex;gap:5px;flex-wrap:wrap;margin:-4px 0 14px}
.atajo{border:1px solid var(--linea);background:var(--papel);color:var(--tinta-2);
  padding:5px 11px;border-radius:var(--r-s);cursor:pointer;font-size:var(--t-s)}
.atajo:hover{border-color:var(--menta-honda);color:var(--menta-honda)}
.atajo.activo{background:var(--menta-palida);border-color:var(--menta);color:var(--menta-honda);font-weight:700}

.pista{font-size:var(--t-s);color:var(--menta-honda);background:var(--menta-palida);
  border-radius:var(--r-s);padding:9px 12px;margin:-6px 0 14px}
.pista.aviso{color:var(--horno);background:var(--horno-palida)}

/* ───────── Conexión ───────── */
.estado-linea{display:flex;align-items:center;gap:10px;font-size:var(--t-l);margin-bottom:8px}
.punto{width:8px;height:8px;border-radius:50%;background:var(--tinta-3);flex:0 0 auto}
.punto.verde{background:var(--menta-honda)}
.punto.ambar{background:var(--horno)}
.punto.rojo{background:var(--alerta)}
.qr-caja img{width:260px;height:260px;border:1px solid var(--linea);border-radius:var(--r-m);
  background:#fff;padding:8px}
.mandos-fila{display:flex;gap:8px;flex-wrap:wrap}
.bitacora{background:var(--papel-2);border:1px solid var(--linea);color:var(--tinta-2);
  border-radius:var(--r-m);padding:13px 15px;font-family:var(--mono);font-size:var(--t-xs);
  line-height:1.7;max-height:230px;overflow-y:auto}
.bitacora div{white-space:pre-wrap}
.bitacora .t{color:var(--tinta-3)}


/* ───────── El panel de la derecha ───────── */
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);overflow:hidden}
.tarjeta > header{padding:14px 18px;border-bottom:1px solid var(--linea);
  display:flex;align-items:baseline;gap:10px}
/* La serif es para las fechas y la marca. En el título de un widget mezclaba dos
   registros: «Martes, 8 de septiembre» y «Todo lo pendiente» no son la misma
   clase de cosa, y verlas con la misma letra las igualaba. */
.tarjeta > header h3{margin:0;font-size:var(--t-m);font-weight:600;letter-spacing:-.01em}
.tarjeta > header .rotulo{margin-left:auto}
.tarjeta .cuerpo-t{padding:18px}

/* Lo próximo que hay que entregar: el dato que más se mira en el día. */
.proxima{padding:18px}
.proxima .hora{font-family:var(--mono);font-size:32px;font-weight:500;letter-spacing:-.03em;line-height:1}
.proxima .que{font-size:var(--t-l);font-weight:500;margin-top:8px;line-height:1.35}
.proxima .quien{font-size:var(--t-s);color:var(--tinta-2);margin-top:3px}
.proxima .falta{font-size:var(--t-s);color:var(--menta-honda);font-weight:700;margin-top:10px}
.proxima .falta.ya{color:var(--alerta)}

.marcas{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linea);
  border-top:1px solid var(--linea)}
.marcas div{background:var(--papel);padding:13px 18px}
/* Tres datos en dos columnas dejaban una celda gris vacía. El último se estira. */
.marcas.impar div:last-child{grid-column:1 / -1}
.marcas b{display:block;font-family:var(--mono);font-size:var(--t-cifra);font-weight:500;letter-spacing:-.02em}
.marcas span{font-size:var(--t-s);color:var(--tinta-2)}
.marcas .alta b{color:var(--alerta)}

.ultimos{list-style:none;margin:0;padding:0}
.ultimos li{padding:11px 18px;border-bottom:1px solid var(--linea);display:flex;
  align-items:baseline;gap:10px}
.ultimos li:last-child{border-bottom:0}
.ultimos .nom{font-size:var(--t-m)}
.ultimos .cuando{margin-left:auto;font-family:var(--mono);font-size:var(--t-xs);color:var(--tinta-3)}

/* La ficha, cuando vive en el panel y no en un modal. */
.rail .ficha-alto{margin:0;border-top:0;border-bottom:0;border-radius:0;padding:18px 18px 13px}
.rail .ficha-alto .hora{font-size:26px}
.rail .bloque{margin-bottom:20px}
.rail .ficha-cuerpo{padding:18px}
.rail .modal-pie{margin-top:18px}
.rail .recorrido .nombre{font-size:var(--t-micro)}
.rail .cobro{flex-direction:column;align-items:stretch;gap:12px}
.rail .cobro .abonar{margin-left:0}
.rail .cobro .abonar input{flex:1}
.rail .dos{grid-template-columns:1fr}

/* La selección es neutra a propósito: en menta competía con «Listo» y «Pagado»,
   que son verdes de verdad. Estar seleccionado no es un estado del pedido — es
   dónde está mirando el usuario — así que se marca con gris cálido y un canto,
   no con color de significado. */
.reng.elegido,.reng.elegido:hover{background:var(--papel-2);
  box-shadow:inset 3px 0 0 var(--tinta-3)}


/* ───────── Solicitudes por confirmar ─────────
   Lo que un cliente pidió por WhatsApp y todavía nadie contestó. No va en la
   agenda porque no tiene fecha: si se mezclara, o habría que inventarle un día
   o se hundiría al final de la lista, que es justo el problema que resolvemos. */
.solicitudes{border:1px solid var(--menta);border-radius:var(--r-m);
  background:var(--menta-palida);padding:16px 18px;margin-bottom:26px}
.solicitudes-alto{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.solicitudes-alto h2{margin:0;font-family:var(--serif);font-size:var(--t-l);font-weight:400;color:var(--menta-honda)}
.solicitudes-alto .n{font-family:var(--mono);font-size:var(--t-s);color:var(--menta-honda)}
.solicitudes-alto .desde{margin-left:auto;font-size:var(--t-s);color:var(--tinta-2)}

.solicitud{background:var(--papel);border-radius:var(--r-s);padding:13px 15px;
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap}
.solicitud + .solicitud{margin-top:8px}
.solicitud .quien{min-width:150px}
.solicitud .quien .nom{font-weight:500}
.solicitud .quien .tel{font-family:var(--mono);font-size:var(--t-xs);color:var(--tinta-3);margin-top:2px}
.solicitud .dijo{flex:1;min-width:220px;font-size:var(--t-m);line-height:1.45}
.solicitud .dijo em{color:var(--tinta-3);font-style:normal;font-size:var(--t-xs);display:block;margin-bottom:3px}
.solicitud .cuando{font-family:var(--mono);font-size:var(--t-xs);color:var(--tinta-3);white-space:nowrap}

/* ───────── Canal caído ─────────
   No es el WhatsApp del negocio: es esta pantalla contra el servidor. Cuando se
   corta, la agenda sigue mostrando pedidos que pueden ser de hace media hora y
   se ve exactamente igual que al día. La banda lo dice; sin ella, caja confirma
   sobre información vieja sin enterarse. */
.banda-canal{display:none}
body.canal-caido .banda-canal{
  display:block;background:var(--alerta);color:#fff;
  padding:8px 20px;font-size:var(--t-s);font-weight:600;text-align:center}

/* ───────── El lugar, solo cuando no es el de siempre ─────────
   Antes cada fila decía «Obarrio · retiro en local». Repetido en todas, la
   única fila que decía otra cosa se perdía entre las demás. Ahora aparece solo
   al salirse de lo normal — y por eso se pinta para que se lea. */
.reng .lugar.ojo{color:var(--arcilla-honda);font-weight:500}

/* ───────── Alergias ─────────
   Una dedicatoria y una alergia no pueden pintarse igual. La primera es un
   detalle bonito; la segunda es información de seguridad, y en una pastelería
   equivocarse con ella manda a alguien al hospital. Por eso rompe la retícula:
   es lo único de la fila que lleva recuadro. */
.reng .alergia,.alergia{display:flex;align-items:baseline;gap:8px;margin-top:5px;
  padding:5px 9px;border:1.5px solid var(--alerta);border-radius:var(--r-s);
  background:var(--alerta-palida);color:var(--alerta);
  font-size:var(--t-s);font-weight:600;line-height:1.35}
.alergia .rot{font-size:var(--t-xs);font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap}
.alergia.grande{font-size:var(--t-m);padding:9px 12px;margin-top:9px}
/* En la FICHA va con recuadro. En la FILA no: ahí competía con el estado, que
   es lo que se escanea, y empujaba el alto del renglón. Se queda el color y el
   símbolo —que es lo que hace parar la mano— sin la caja. */
.reng .alergia{display:inline-flex;padding:0;border:0;background:none;margin-top:4px}
.reng .alergia .rot{font-size:var(--t-xs)}

/* ───────── El pago, separado del estado del pedido ─────────
   Un saldo pendiente es lo normal hasta el día de la entrega: si fuera rojo
   siempre, casi todas las filas serían rojas y el rojo dejaría de avisar de
   nada. Sube de tono cuando el pedido ya está listo —hay que cobrar antes de
   entregarlo— y se pone en alerta si ya se entregó sin cobrar. */
/* Se invierte: antes lo grande era «15.00 de 32.00» y había que restar para
   saber lo único que se usa al cobrar. Ahora lo que falta va primero y en
   grande; el abonado sobre el total queda de apoyo. */
/* En una agenda de mostrador el orden de lectura es hora → producto → estado.
   El cliente y el monto hacen falta, pero un escalón por debajo: con el mismo
   peso que el producto, la fila no tiene por dónde empezar a leerse. */
.reng .quien-col .nom{font-size:var(--t-s);color:var(--tinta-2);font-weight:400}
.reng .pagado-de{font-family:var(--mono);font-size:var(--t-xs);color:var(--tinta-3);margin-top:3px}
.pago{font-family:var(--mono);font-size:var(--t-s);color:var(--tinta-2)}
.pago.pagado{color:var(--menta-honda);font-weight:500;font-family:var(--sans);font-size:var(--t-s)}
.pago.cobrar{color:var(--horno);font-weight:600}
.pago.deuda{color:var(--alerta);font-weight:700}

.avisado-ya{display:block;font-size:var(--t-xs);color:var(--menta-honda);
  font-weight:500;margin-top:2px}

/* ───────── La ficha, en bloques ───────── */
.estado-grande{display:flex;align-items:center;gap:8px;margin-bottom:14px;
  font-size:var(--t-xl);font-weight:600;color:var(--paso);letter-spacing:-.01em}
.estado-grande .punto{width:11px;height:11px}
.estado-grande .avisado-ya{margin:0 0 0 auto}
.btn.ancho{width:100%;justify-content:center}

/* Lo que falta arriba y en grande —es el número que se usa al cobrar—; el
   abonado sobre el total, de apoyo, en la misma línea. Antes eran tres
   renglones para decir dos cosas. */
.cobro-grande{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cobro-grande .pago{font-family:var(--mono);font-size:var(--t-l);letter-spacing:-.02em;margin:0}
.cobro-grande .cifra{margin-left:auto;font-family:var(--mono);font-size:var(--t-s);color:var(--tinta-3)}
.cobro-grande .regla{flex:0 0 100%;height:5px;border-radius:3px;background:var(--linea);
  overflow:hidden;margin:2px 0 0}
/* Neutra a propósito. Debajo del recorrido —que va en el color del estado— una
   segunda barra de color metía dos semánticas en 200 px. La barra mide una
   cantidad; quien dice si está bien o mal es la etiqueta de al lado. */
.cobro-grande .regla i{display:block;height:100%;background:var(--tinta-3)}

.lleva{font-size:var(--t-l);line-height:1.4}
.nota-ficha{margin-top:8px;padding-left:10px;border-left:2px solid var(--menta);
  color:var(--tinta-2);font-size:var(--t-s)}

.cliente-ficha{display:flex;align-items:center;gap:12px}
.cliente-ficha .nom{font-weight:500}
.cliente-ficha .tel{font-family:var(--mono);font-size:var(--t-s);color:var(--tinta-3);margin-top:2px}
.cliente-ficha .btn{margin-left:auto;text-decoration:none}

/* Corregir un pedido es la excepción, no lo que se hace al abrirlo. Plegado, el
   panel cabe sin scroll y muestra lo que se mira: estado, cobro, qué lleva. */
.editar{border-top:1px solid var(--linea);margin-top:4px}
.editar > summary{padding:13px 0;cursor:pointer;font-size:var(--t-s);
  color:var(--tinta-2);font-weight:500;list-style:none}
.editar > summary::-webkit-details-marker{display:none}
.editar > summary::before{content:"▸ ";color:var(--tinta-3)}
.editar[open] > summary::before{content:"▾ "}
.editar > summary:hover{color:var(--tinta)}

/* ───────── La ficha: de quién es y cómo se cierra ─────────
   El renglón queda marcado en menta, pero eso se ve solo si la fila está a la
   vista. El nombre en la cabecera dice de quién es sin tener que subir. */
/* El cliente vive en la cabecera, no en un bloque aparte al fondo: tenerlo en
   los dos sitios era repetir el nombre y estirar el panel media pantalla. */
.ficha-cliente{display:flex;align-items:center;gap:12px;
  background:var(--papel-2);border-bottom:1px solid var(--linea);
  padding:0 18px 15px;margin-bottom:18px}
.ficha-cliente .nom{font-weight:500;font-size:var(--t-m)}
.ficha-cliente .tel{font-family:var(--mono);font-size:var(--t-s);color:var(--tinta-3);margin-top:2px}
.ficha-cliente .btn{margin-left:auto;text-decoration:none;flex:none}

/* Lo secundario es un botón, no un enlace: sigue siendo un paso del flujo y un
   subrayado suelto lo dejaba como el elemento más débil del panel. Botón, pero
   sin relleno y sin ancho completo. */
.pasos .secundaria{background:var(--papel);border:1px solid var(--linea-firme);
  border-radius:var(--r-s);padding:7px 13px;color:var(--tinta-2);
  font-size:var(--t-s);cursor:pointer;align-self:flex-start}
.pasos .secundaria:hover{border-color:var(--tinta-3);color:var(--tinta)}

.rail .bloque{margin-bottom:16px}
.rail .ficha-alto{padding:16px 18px}
.rail .recorrido{margin-bottom:12px}
.ficha-alto .der{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.cerrar-ficha{background:none;border:0;font-size:24px;line-height:1;cursor:pointer;
  color:var(--tinta-3);padding:0 2px;border-radius:var(--r-s)}
.cerrar-ficha:hover{color:var(--tinta)}

/* ───────── Después de hoy ─────────
   Con el filtro en «Hoy» y dos pedidos, dos tercios de la pantalla quedaban
   muertos. Aquí va lo siguiente que viene, apagado: se ve de reojo sin competir
   con lo de hoy, que es lo que hay que resolver ahora. */
/* Sin opacidad: apagar el bloque entero dejaba el texto por debajo del contraste
   mínimo legible. Lo que lo separa de «hoy» es el tamaño y el color de la
   tipografía, no un velo encima. */
.viene{margin-top:26px;border-top:1px solid var(--linea);padding-top:16px}
.viene-alto{display:flex;align-items:baseline;gap:12px;margin-bottom:6px;padding:0 18px}
.viene-alto h3{margin:0;font-size:var(--t-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-3)}
.viene-alto .ver-todo{margin-left:auto;background:none;border:0;cursor:pointer;
  font-size:var(--t-s);color:var(--tinta-2);text-decoration:underline;text-underline-offset:3px}
.viene-alto .ver-todo:hover{color:var(--tinta)}
.viene-fila{display:grid;grid-template-columns:88px 58px minmax(0,1fr) 170px 120px;gap:14px;
  align-items:baseline;padding:9px 18px;border-radius:var(--r-s);cursor:pointer;
  font-size:var(--t-s);color:var(--tinta)}
.viene-fila:hover{background:var(--papel-2)}
.viene-fila .cuando{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em;
  color:var(--tinta-2);font-weight:600}
.viene-fila .hora{font-family:var(--mono);font-size:var(--t-xs);color:var(--tinta-2)}
.viene-fila .quien{color:var(--tinta-2);font-size:var(--t-xs)}
.viene-fila .est{display:flex;align-items:center;gap:5px;font-size:var(--t-xs);color:var(--paso)}
.viene-fila .est .punto{width:6px;height:6px}
@media(max-width:1100px){.viene-fila{grid-template-columns:80px 56px minmax(0,1fr) 110px}
  .viene-fila .quien{display:none}}

/* ───────── Alcance de las cifras del panel ─────────
   Estaban bajo «Lo próximo de hoy» pero cuentan TODO lo pendiente: alguien podía
   leer «2 en cocina» como «2 en cocina hoy» y no cuadraba con la lista. */
.alcance{padding:0 18px 10px;font-size:var(--t-xs);color:var(--tinta-3)}

/* La tarjeta de «lo próximo» avisaba de lo más urgente del tablero y no dejaba
   hacer nada: había que buscar la fila para actuar. */
.proxima-accion{margin-top:12px}
.proxima-accion .btn{width:100%;justify-content:center}

/* El monto a abonar era el control más pequeño de una pantalla de mostrador,
   que se usa con el dedo. Va a la misma altura que el botón, con la moneda
   dentro para no tener que adivinar en qué se escribe. */
.abonar .monto-caja{display:flex;align-items:center;gap:6px;background:var(--papel);
  border:1px solid var(--linea-firme);border-radius:var(--r-s);padding:0 10px;height:38px}
.abonar .monto-caja span{font-family:var(--mono);font-size:var(--t-s);color:var(--tinta-3)}
.abonar .monto-caja input{border:0;padding:0;width:78px;height:100%;background:none;
  font-family:var(--mono);font-size:var(--t-m)}
.abonar .monto-caja input:focus{outline:none}
.abonar .monto-caja:focus-within{border-color:var(--tinta-3)}
.abonar .btn{height:38px}

/* Con dos filas una barra de 3 px se ve; con veinte, no. La fila elegida se
   marca también con el fondo y un borde, no solo con el canto. */
/* Neutro: la arcilla pasó a significar «esto se toca», y estar seleccionado no
   es una acción. Ahora que «hoy» no usa barra izquierda, este recurso queda
   libre para lo único que lo necesita — la fila que estás mirando. */
.reng.elegido,.reng.elegido:hover{background:var(--papel-2);
  box-shadow:inset 4px 0 0 var(--tinta),inset 0 0 0 1px var(--linea-firme)}


/* ───────── Escalones de la fila ─────────
   Producto, cliente y monto estaban casi al mismo tamaño y solo los separaba el
   color. Con veinte pedidos eso no se escanea: hace falta que el tamaño diga
   por dónde empezar. hora → producto → estado, y el resto un escalón atrás. */
.reng .quefue{font-size:var(--t-l);font-weight:500;letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis}
.reng .quien-col .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reng .proceso .aqui{font-size:var(--t-s)}

/* ───────── Jerarquía de las mayúsculas ─────────
   «ENTREGA» (rótulo de campo), «DESPUÉS DE HOY» (sección) y «ALERGIA» (aviso
   crítico) llevaban el mismo tracking y el mismo peso, así que se leían con la
   misma importancia. El tracking los ordena: cuanto más suelto, más de fondo. */
.reng .rotulo-hora{letter-spacing:.14em;font-weight:600;color:var(--tinta-3)}
.viene-alto h3,.tarjeta .rotulo,.bloque > h4{letter-spacing:.1em}
.alergia .rot{letter-spacing:.03em;font-weight:800}

/* ───────── El panel ─────────
   28 px de hora competían con las cifras de abajo. La hora ya está en el título
   del bloque; no necesita ser lo más grande de la columna. */
.rail .ficha-alto .hora{font-size:21px}
.rail .proxima .hora{font-size:32px}

/* «Se pasó la hora» es un retraso, no un riesgo: ámbar, no el rojo de alergia. */
.proxima .falta.ya,.proxima .rotulo.ya{color:var(--horno)}

/* ───────── La columna de acción ─────────
   Tres botones de anchos distintos alineados a la derecha dejaban el canto
   derecho dentado, y encima el estado de arriba también variaba de largo. Un
   ancho mínimo común lo endereza sin tener que igualar los textos. */
.reng .acciones-fila{display:flex;justify-content:flex-end}
.reng .acciones-fila .btn{min-width:168px;justify-content:center}
@media(max-width:1100px){.reng .acciones-fila .btn{min-width:0}}

/* ───────── Un atributo no es una acción ─────────
   «Entrega a domicilio» en terracota, sin fondo y subrayado por el hover,
   parecía un enlace — y ahora que el terracota significa «esto se toca», peor.
   Es una propiedad del pedido: chip neutro. */
.reng .lugar.ojo{display:inline-block;color:var(--tinta-2);font-weight:500;
  background:var(--papel-2);border:1px solid var(--linea-firme);
  border-radius:var(--r-s);padding:2px 8px;font-size:var(--t-xs);margin-top:5px}

/* ───────── Hoy y «seleccionado» necesitaban recursos distintos ─────────
   Los dos usaban una barra izquierda. La barra pasa a ser exclusiva de la fila
   que estás mirando; hoy se marca en la regla del encabezado (más arriba).
   El borde y el fondo que había aquí eran de cuando el día era una tarjeta:
   sin tarjeta no tienen a qué agarrarse y solo ensuciaban el encabezado. */

/* Los contadores por día («1 pedido») decían lo que la propia lista ya enseña. */
.dia-titulo .cuantos{display:none}

/* Los meses viven en la misma fila que los chips y se ven igual que ellos: son
   el mismo filtro de un solo eje, no un control aparte. */
.meses{margin:0 0 18px;padding-left:12px}
.meses .rotulo{display:none}
.meses .mes{border:0;background:none;color:var(--tinta-2);padding:8px 11px;
  border-radius:var(--r-s);cursor:pointer;font-size:var(--t-s);display:flex;
  align-items:baseline;gap:6px}
.meses .mes:hover{background:var(--papel-2);color:var(--tinta)}
.meses .mes.activo{background:var(--papel-2);color:var(--tinta);font-weight:700;
  box-shadow:inset 0 0 0 1px var(--linea-firme)}
.meses .mes .n{font-family:var(--mono);font-size:var(--t-xs);color:var(--tinta-3)}

/* La tarjeta de «requiere atención» se puede abrir. */
.proxima[data-abrir]{cursor:pointer}
.proxima[data-abrir]:hover{background:var(--papel-2)}
.proxima .hora .num{font-size:var(--t-s);color:var(--tinta-3);margin-left:10px;font-weight:400}

/* Lo que el cliente pidió por su cuenta, en la tarjeta de «Por confirmar»: para
   que caja no tenga que abrir el chat para saber para cuándo lo quiere. */
.solicitud .pidio{margin-top:5px;font-size:var(--t-s);color:var(--tinta-2)}
.solicitud .pidio em{font-style:normal;color:var(--tinta-3)}


/* ───────── Imágenes que manda el cliente ─────────
   Miniatura para reconocerla, clic para verla en grande. Un comprobante se
   confirma leyendo el monto, y eso no se lee en 84 píxeles. */
.adjuntos{margin-top:10px}
.adjuntos .rot{display:block;font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.06em;
  color:var(--tinta-3);margin-bottom:6px}
.adjuntos .tiras{display:flex;gap:8px;flex-wrap:wrap}
.adjuntos a{display:block;border:1px solid var(--linea-firme);border-radius:var(--r-chico);
  overflow:hidden;background:var(--papel-2);line-height:0}
.adjuntos a:hover{border-color:var(--menta-honda)}
.adjuntos img{width:84px;height:84px;object-fit:cover;display:block}
.adjuntos .pdf{display:flex;align-items:center;justify-content:center;width:84px;height:84px;
  font-size:var(--t-mini);font-weight:700;color:var(--tinta-2);line-height:1}

/* ───────── La orden de compra dentro de la ficha de confirmación ─────────
   Es el talonario de papel de Karamel pasado a pantalla, y por eso se lee como
   un bloque aparte: recuadro propio, rótulos en versalita y las opciones en
   filas que se dejan recorrer con la vista, como las casillas del papel. */
.orden{border:1px solid var(--linea-firme);border-radius:var(--r-chico);
  padding:14px 14px 4px;margin:14px 0;background:var(--papel-2)}
.orden-alto{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.orden-alto h3{margin:0;font-family:var(--serif);font-size:var(--t-m);font-weight:400}
.orden-alto .para{font-size:var(--t-mini);color:var(--tinta-3)}

.orden .grupo{margin-bottom:12px}
.orden .rot{display:block;font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.06em;
  color:var(--tinta-3);margin-bottom:5px}
.orden .opciones{display:flex;flex-wrap:wrap;gap:5px}

/* El relleno son 26 casillas: en columnas y con tope de alto, para que no empuje
   el resto del formulario fuera de la pantalla. */
.orden .opciones.rellenos{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:2px 10px;max-height:190px;overflow-y:auto;padding-right:4px}

.orden .opcion{display:flex;align-items:center;gap:6px;cursor:pointer;
  font-size:var(--t-s);padding:4px 9px;border:1px solid var(--linea-firme);
  border-radius:999px;background:var(--papel);white-space:nowrap}
.orden .opciones.rellenos .opcion{border:0;background:none;padding:2px 0;white-space:normal}
.orden .opcion:hover{border-color:var(--menta-honda)}
.orden .opcion input{margin:0;accent-color:var(--menta-honda)}
.orden .opcion:has(input:checked){background:var(--menta-palida);border-color:var(--menta-honda);font-weight:600}
.orden .opciones.rellenos .opcion:has(input:checked){background:none;color:var(--menta-honda)}

.orden .cuatro{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media(max-width:700px){.orden .cuatro{grid-template-columns:repeat(2,minmax(0,1fr))}}
.orden .campo.chico{font-size:var(--t-mini)}

/* La orden de compra ya llenada, dentro de la ficha del pedido. */
.orden-ficha{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:10px 0 0;
  font-size:var(--t-s)}
.orden-ficha dt{color:var(--tinta-3);text-transform:uppercase;font-size:var(--t-mini);
  letter-spacing:.05em;padding-top:2px}
.orden-ficha dd{margin:0;font-weight:600}

/* Acciones de la ficha de cliente. Enlaces y no botones: una tabla con doce
   botones se lee como un tablero de mandos, y esto son dos acciones que se usan
   de vez en cuando. Además caben sin empujar la tabla fuera del panel. */
#tabla-clientes td.acciones{white-space:nowrap;text-align:right;padding-left:0}
/* El teléfono entero en una línea —se lee y se copia— y el correo recortado con
   puntos suspensivos: es el dato más largo y el que menos se lee de un vistazo.
   Entre los dos, la tabla vuelve a caber sin barra de desplazamiento. */
/* Siete columnas no caben con el respiro de una tabla de cuatro. Se aprieta solo
   esta: el mismo alto de fila, doce píxeles menos a cada lado. */
#tabla-clientes tbody td,#tabla-clientes thead th{padding-left:10px;padding-right:10px}
#tabla-clientes table{min-width:0}
#tabla-clientes td:nth-child(2){white-space:nowrap}
#tabla-clientes td:nth-child(3){max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.enlace{background:none;border:0;padding:2px 4px;margin-left:8px;cursor:pointer;
  font-family:inherit;font-size:var(--t-mini);color:var(--tinta-2);text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:var(--linea-firme)}
.enlace:hover{color:var(--arcilla);text-decoration-color:currentColor}
.enlace.peligro{color:var(--alerta)}
.btn.peligro{color:var(--alerta);border-color:var(--alerta-palida)}
.btn.peligro:hover{background:var(--alerta-palida);border-color:var(--alerta)}
.btn.principal.peligro{background:var(--alerta);border-color:var(--alerta);color:#fff}
.btn.principal.peligro:hover{filter:brightness(.94)}

/* ════════════════════════════════════════════════════════════════
   La orden de compra completa — «Nuevo pedido»

   Es el talonario de Karamel en pantalla. Tres columnas y la cuenta
   abajo, sin desplazarse: quien toma el pedido tiene al cliente
   delante, y cada campo que hay que buscar hacia abajo es un hilo de
   conversación perdido.

   Los grupos se separan por rótulo y aire, no por recuadros: nueve
   cajas dentro de una caja convierten una orden en un formulario de
   trámite. El papel tampoco tenía bordes por todas partes.
   ════════════════════════════════════════════════════════════════ */
.modal-caja.ancho{width:min(1320px,96vw);padding:0;max-height:94vh;display:flex;flex-direction:column}

.orden-completa{display:flex;flex-direction:column;min-height:0;flex:1}

.oc-alto{display:flex;align-items:flex-start;gap:20px;padding:22px 26px 18px;
  border-bottom:1px solid var(--linea)}
.oc-alto h2{margin:0;font-family:var(--serif);font-size:22px;font-weight:400}
.oc-alto .ayuda{margin:2px 0 0;color:var(--tinta-3);font-size:var(--t-s)}
.oc-sello{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:var(--t-s);color:var(--tinta-2)}
/* El número es cómo se llama el pedido en la pastelería: «el 2133». Se lee de
   lejos, y por eso es lo más grande de la cabecera después del nombre. */
.oc-sello .num{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.02em;
  color:var(--tinta);border:1px solid var(--linea-firme);border-radius:var(--r-chico);
  padding:4px 14px;display:inline-flex;align-items:baseline;gap:6px}
.oc-sello .num i{font-style:normal;font-size:var(--t-s);color:var(--tinta-3)}
.oc-sello label{display:flex;align-items:center;gap:7px}
.oc-sello input{font-family:var(--mono);border:1px solid var(--linea-firme);border-radius:var(--r-chico);
  padding:5px 8px;background:var(--papel)}

/* Tres columnas: quién y qué bizcocho · el relleno · decoración y pago.
   El relleno es una lista de 26 y necesita su propio ancho. */
.oc-cuerpo{display:grid;grid-template-columns:1.05fr .95fr 1fr;gap:0;overflow:auto;flex:1;min-height:0}
.oc-col{padding:22px 26px;display:flex;flex-direction:column;gap:10px;min-width:0;overflow:hidden}
.oc-col + .oc-col{border-left:1px solid var(--linea)}
.oc-relleno{background:var(--papel-2)}

.oc-col .rot{font-size:var(--t-mini);text-transform:uppercase;letter-spacing:.09em;
  color:var(--tinta-3);margin-top:14px}
.oc-col .rot:first-child{margin-top:0}
.oc-alto-col{display:flex;align-items:baseline;gap:10px}
.oc-alto-col .nota{margin-left:auto;font-size:var(--t-mini);color:var(--tinta-3)}

.oc-campo{width:100%;border:1px solid var(--linea-firme);border-radius:var(--r-chico);
  padding:8px 11px;font:inherit;font-size:var(--t-s);background:var(--papel);color:var(--tinta)}
.oc-campo:focus{outline:0;border-color:var(--menta-honda);box-shadow:0 0 0 3px var(--menta-palida)}
.oc-campo.apagado{background:var(--papel-2);color:var(--tinta-3)}
textarea.oc-campo{resize:vertical;line-height:1.45}
/* La descripción es el campo que más se escribe de toda la orden: el papel le
   daba media hoja, así que aquí tampoco puede ser un renglón. */
textarea.oc-campo.grande{min-height:118px}

.oc-fila{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-items:start;min-width:0}
.oc-fila > *{min-width:0}
.oc-fila.alto{gap:18px}

/* Las opciones: pastillas que se tocan, no radios de formulario. Se marcan con
   fondo menta porque a un metro de distancia un punto de 8 px no se ve. */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips.columna{flex-direction:column}
.chip{display:inline-flex;align-items:center;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;border:1px solid var(--linea-firme);border-radius:999px;
  padding:5px 12px;font-size:var(--t-s);background:var(--papel);white-space:nowrap}
.chip span i{font-style:normal;color:var(--tinta-3);font-size:var(--t-mini);margin-left:5px}
.chip:hover span{border-color:var(--menta-honda)}
.chip input:checked + span{background:var(--menta-palida);border-color:var(--menta-honda);
  color:var(--menta-honda);font-weight:600}
.chip input:checked + span i{color:var(--menta-honda)}
.chip input:focus-visible + span{box-shadow:0 0 0 3px var(--menta-palida)}
.chips.columna .chip span{width:100%;border-radius:var(--r-chico);text-align:left}

.oc-toggle{display:flex;gap:6px}
.oc-toggle.ancho .chip{flex:1}
.oc-toggle.ancho .chip span{width:100%;text-align:center;border-radius:var(--r-chico)}

/* Los 26 rellenos: dos columnas de casillas, sin pastillas. Con pastillas la
   columna se convierte en un muro de bordes y deja de poder leerse en diagonal. */
.casillas{display:flex;flex-direction:column;gap:1px}
.casilla{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px 7px;
  border-radius:var(--r-chico);font-size:var(--t-s)}
.casilla:hover{background:var(--papel)}
.casilla input{margin:0;accent-color:var(--menta-honda)}
.oc-relleno .casilla:has(input:checked){background:var(--menta-palida);color:var(--menta-honda);font-weight:600}
.chips .casilla{border:1px solid var(--linea-firme);border-radius:999px;padding:4px 11px;background:var(--papel)}

/* Rosas, hoja de azúcar, base, frutas: cinco campos cortos que en el papel son
   una línea punteada. Aquí también: rótulo y raya, sin caja. */
/* `min-width:0` en las dos partes: sin eso, una celda de grid nunca se encoge
   por debajo del ancho de su contenido y los campos se salían de la columna,
   con la raya cruzando el borde. */
.oc-extras{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin-top:4px;min-width:0}
.oc-extras label{display:flex;align-items:baseline;gap:7px;min-width:0;
  font-size:var(--t-mini);color:var(--tinta-3)}
.oc-extras input{flex:1 1 0;width:100%;min-width:0;border:0;border-bottom:1px solid var(--linea-firme);
  background:none;font:inherit;font-size:var(--t-s);color:var(--tinta);padding:3px 2px}
.oc-extras input:focus{outline:0;border-bottom-color:var(--menta-honda)}

/* El recorrido del pedido, dentro de la orden: cuatro pasos que además son los
   botones para moverlo. Lo hecho en menta, lo que falta apagado. */
.oc-pasos{display:flex;gap:4px;margin-top:2px}
.oc-pasos .paso{flex:1;border:1px solid var(--linea-firme);background:var(--papel);
  border-radius:var(--r-chico);padding:6px 4px;font:inherit;font-size:var(--t-mini);
  color:var(--tinta-3);cursor:pointer;line-height:1.2}
.oc-pasos .paso:hover{border-color:var(--menta-honda);color:var(--tinta)}
.oc-pasos .paso.hecho{color:var(--menta-honda);border-color:var(--menta-palida);background:var(--menta-palida)}
.oc-pasos .paso.actual{background:var(--menta-honda);border-color:var(--menta-honda);color:#fff;font-weight:700}

/* Si pagó todo o dejó abono. Es lo primero que pregunta quien entrega, y estaba
   solo implícito en dos números. */
.oc-pago{display:flex;gap:6px;margin-top:2px}
.oc-pago .chip span{width:100%;text-align:center}
.oc-pago .chip{flex:1}

.oc-dinero{display:flex;align-items:center;gap:7px;border:1px solid var(--linea-firme);
  border-radius:var(--r-chico);padding:4px 10px;background:var(--papel);
  font-size:var(--t-mini);color:var(--tinta-3)}
.oc-dinero input{flex:1;min-width:0;border:0;background:none;font-family:var(--mono);
  font-size:var(--t-m);color:var(--tinta);padding:4px 0}
.oc-dinero input:focus{outline:0}

/* El pie: la cuenta a la izquierda y lo que falta al lado. Es el renglón que se
   mira antes de cobrar, así que va fijo y no se va con el desplazamiento. */
.oc-pie{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 26px;border-top:1px solid var(--linea);background:var(--papel-2)}
.oc-cuenta{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;font-size:var(--t-s);color:var(--tinta-3)}
.oc-cuenta b{font-family:var(--mono);font-size:var(--t-l);color:var(--tinta);margin-left:5px}
.oc-cuenta b.mal{color:var(--alerta)}
.oc-cuenta .falta{color:var(--horno);font-weight:600}
.oc-cuenta .falta.ok{color:var(--menta-honda)}
.oc-botones{margin-left:auto;display:flex;gap:9px;align-items:center}
.oc-avisar{display:flex;align-items:center;gap:7px;font-size:var(--t-s);color:var(--tinta-2);
  cursor:pointer;margin-right:4px}
.oc-avisar input{margin:0;accent-color:var(--menta-honda)}
.oc-avisar:has(input:disabled){color:var(--tinta-3);cursor:default}

/* En pantallas angostas —una tablet en el mostrador— las tres columnas se
   apilan. Ahí sí hay que desplazarse, pero el orden sigue siendo el del papel. */
@media(max-width:1180px){
  .oc-cuerpo{grid-template-columns:1fr 1fr}
  .oc-col:nth-child(3){grid-column:1 / -1;border-left:0;border-top:1px solid var(--linea)}
}
@media(max-width:820px){
  .oc-cuerpo{grid-template-columns:1fr}
  .oc-col + .oc-col{border-left:0;border-top:1px solid var(--linea)}
  .oc-col:nth-child(3){grid-column:auto}
}

/* Los dos botones de una solicitud: cotizar antes, confirmar después. */
.acciones-solicitud{display:flex;gap:7px;align-items:center}

/* Aviso de versión nueva. Abajo y discreto, pero imposible de no ver: lo que
   está en pantalla ya no es lo que el servidor tiene, y seguir trabajando así
   es buscar botones que no existen. */
.banda-version{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;
  display:flex;align-items:center;gap:12px;background:var(--tinta);color:var(--papel);
  padding:10px 16px;border-radius:999px;box-shadow:0 6px 24px rgba(0,0,0,.22);font-size:var(--t-s)}
.banda-version button{background:var(--papel);color:var(--tinta);border:0;border-radius:999px;
  padding:5px 13px;font:inherit;font-weight:600;cursor:pointer}
.banda-version button:hover{background:var(--menta-palida)}

/* ════════════════════════════════════════════════════════════════
   La agenda como calendario

   Un pedido es algo que pasa un día, no una fila de una tabla. En
   día, semana o mes se contesta de un vistazo la pregunta real de
   una pastelería: «¿cómo viene el sábado, y le queda cupo?».

   El color dice el estado y nada más — pendiente en tinta apagada,
   el horno en ámbar, listo en menta. La alergia es lo único que se
   permite gritar.
   ════════════════════════════════════════════════════════════════ */
/* En calendario el buscador se queda solo con el botón de nuevo pedido: los
   chips y los meses son de la lista. */
.herramientas.sin-filtros .filtros,.herramientas.sin-filtros .meses{display:none}

.agenda-alto{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.agenda-alto h2{margin:0;font-family:var(--serif);font-size:24px;font-weight:400;
  display:flex;align-items:baseline;gap:12px}
.agenda-alto .rango{font-family:var(--sans);font-size:var(--t-s);color:var(--tinta-3)}

.modos{display:flex;gap:2px;background:var(--papel-2);padding:3px;border-radius:var(--r-chico);
  margin-left:auto}
.modos .modo{border:0;background:none;padding:6px 15px;border-radius:calc(var(--r-chico) - 2px);
  font:inherit;font-size:var(--t-s);color:var(--tinta-2);cursor:pointer}
.modos .modo:hover{color:var(--tinta)}
.modos .modo.activo{background:var(--papel);color:var(--tinta);font-weight:600;box-shadow:var(--sombra)}

.nav-fecha{display:flex;gap:4px}
.nav-fecha button{border:1px solid var(--linea-firme);background:var(--papel);border-radius:var(--r-chico);
  padding:6px 12px;font:inherit;font-size:var(--t-s);color:var(--tinta-2);cursor:pointer;line-height:1.2}
.nav-fecha button:hover{border-color:var(--menta-honda);color:var(--tinta)}

.leyenda{display:flex;gap:14px;align-items:center;font-size:var(--t-mini);color:var(--tinta-3);flex-wrap:wrap}
.leyenda .cupo-ayuda{padding-left:14px;border-left:1px solid var(--linea-firme)}

.salto-mes{border:1px solid var(--linea-firme);background:var(--papel);border-radius:var(--r-chico);
  padding:6px 10px;font:inherit;font-size:var(--t-s);color:var(--tinta-2);cursor:pointer}
.salto-mes:hover{border-color:var(--menta-honda);color:var(--tinta)}
.punto-estado{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.punto-estado::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tinta-3)}
.punto-estado.cocina::before{background:var(--horno)}
.punto-estado.listo::before{background:var(--menta-honda)}
.punto-estado.entregado::before{background:var(--linea-firme)}
i.punto-estado{width:8px;height:8px;border-radius:50%;background:var(--tinta-3);display:inline-block}
i.punto-estado::before{content:none}
i.punto-estado.cocina{background:var(--horno)}
i.punto-estado.listo{background:var(--menta-honda)}

/* ───────── semana ───────── */
.cal-semana{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px;align-items:start}
.cal-col{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);
  min-height:300px;display:flex;flex-direction:column;overflow:hidden}
.cal-col.es-hoy{border-color:var(--arcilla);background:var(--papel-2)}
.cal-col header{padding:14px 14px 12px;border-bottom:1px solid var(--linea)}
.cal-col .alto{display:flex;align-items:baseline;justify-content:space-between}
.cal-col .dia-corto{font-size:var(--t-mini);letter-spacing:.11em;color:var(--tinta-3)}
.cal-col .cuenta{font-family:var(--mono);font-size:var(--t-mini);color:var(--tinta-3)}
.cal-col .cuenta.lleno{color:var(--alerta);font-weight:700}
.cal-col .fecha{font-size:var(--t-s);color:var(--tinta-2)}
.cal-col .fecha{margin-top:3px}
.cal-col .fecha b{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--tinta);margin-right:4px}
.cal-col .cuerpo{padding:12px;display:flex;flex-direction:column;gap:10px}

.cal-pedido{background:var(--papel);border:1px solid var(--linea);border-left:3px solid var(--tinta-3);
  border-radius:var(--r-chico);padding:12px 13px;cursor:pointer;text-align:left;width:100%;
  transition:background .12s,border-color .12s}
.cal-pedido:hover{border-color:var(--menta-honda);border-left-color:var(--menta-honda);
  background:var(--menta-palida)}
.cal-pedido.cocina{border-left-color:var(--horno)}
.cal-pedido.listo{border-left-color:var(--menta-honda)}
.cal-pedido.entregado{opacity:.6}
.cal-pedido .alto{display:flex;align-items:baseline;gap:8px;justify-content:space-between}
.cal-pedido .hora{font-family:var(--mono);font-size:var(--t-l);font-weight:600;color:var(--tinta);
  letter-spacing:-.02em}
.cal-pedido .num{font-family:var(--mono);font-size:var(--t-mini);color:var(--tinta-3)}
/* La alergia va en su renglón, debajo de la hora: dentro de la fila se comía
   el número del pedido y encima obligaba a recortarla. */
.cal-pedido .alergia-chip{display:block;width:100%;font-size:var(--t-s);color:var(--alerta);
  font-weight:600;margin-top:7px;line-height:1.35}
.cal-pedido .que{font-size:var(--t-m);line-height:1.4;margin-top:7px}
.cal-pedido .quien{font-size:var(--t-s);color:var(--tinta-3);margin-top:5px}

/* ───────── día ───────── */
.cal-dia{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);overflow:hidden}
.cal-fila{display:grid;grid-template-columns:104px 1fr 150px 130px 110px;gap:14px;align-items:center;
  padding:14px 18px;border-top:1px solid var(--linea);cursor:pointer}
.cal-fila:first-child{border-top:0}
.cal-fila:hover{background:var(--menta-palida)}
.cal-fila .rotulo-hora{display:block;font-size:var(--t-mini);letter-spacing:.09em;color:var(--tinta-3)}
.cal-fila .hora{font-family:var(--mono);font-size:var(--t-xl);font-weight:600;letter-spacing:-.03em}
.cal-fila .num{font-family:var(--mono);font-size:var(--t-mini);color:var(--tinta-3)}
.cal-fila .titulo{font-size:var(--t-m);font-weight:600}
.cal-fila .nota{font-size:var(--t-s);color:var(--tinta-2);margin-top:2px}
.cal-fila .alergia{font-size:var(--t-s);color:var(--alerta);font-weight:600;margin-top:2px}
.cal-fila .quien{font-size:var(--t-s);color:var(--tinta-2)}
.cal-fila .plata{font-size:var(--t-s);color:var(--tinta-2)}
.cal-fila .plata.deuda,.cal-fila .plata.cobrar{color:var(--arcilla);font-weight:600}
.cal-fila .estado{font-size:var(--t-s);color:var(--tinta-2)}

/* ───────── mes ───────── */
.cal-mes{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r-m);padding:12px}
.cal-dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:8px}
.cal-dias span{font-size:var(--t-mini);letter-spacing:.11em;color:var(--tinta-3);padding-left:4px}
.cal-rejilla{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.cal-celda{min-height:104px;border:1px solid var(--linea);border-radius:var(--r-chico);
  padding:8px 10px;cursor:pointer;display:flex;flex-direction:column;gap:5px;background:var(--papel)}
.cal-celda:hover{border-color:var(--menta-honda);background:var(--menta-palida)}
.cal-celda.otro-mes{background:var(--papel-2);opacity:.5}
.cal-celda.es-hoy{border-color:var(--arcilla);background:var(--papel-2)}
.cal-celda .alto{display:flex;align-items:baseline;justify-content:space-between}
.cal-celda .numero-dia{font-family:var(--serif);font-size:var(--t-l)}
.cal-celda .cuenta{font-family:var(--mono);font-size:var(--t-mini);color:var(--tinta-3)}
.cal-celda .cuenta.lleno{color:var(--alerta);font-weight:700}
.cal-celda .puntos{display:flex;gap:4px}
.cal-celda .primero{font-size:var(--t-mini);color:var(--tinta-2);line-height:1.3;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cal-celda .primero b{color:var(--tinta-3)}

/* ───────── el pie ───────── */
.pie-agenda{display:flex;gap:22px;flex-wrap:wrap;align-items:baseline;margin-top:14px;
  background:var(--papel-2);border:1px solid var(--linea);border-radius:var(--r-m);
  padding:12px 18px;font-size:var(--t-s);color:var(--tinta-3)}
.pie-agenda b{font-family:var(--mono);color:var(--tinta)}
.pie-agenda .lleno{color:var(--alerta);font-weight:600}
.pie-agenda .holgado{color:var(--menta-honda)}

/* En pantalla angosta la semana se vuelve dos columnas y el mes se lee como
   lista de días con pedidos: siete columnas de 40 px no son un calendario. */
@media(max-width:1100px){
  .cal-semana{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cal-fila{grid-template-columns:90px 1fr;gap:10px}
  .cal-fila .quien,.cal-fila .plata,.cal-fila .estado{grid-column:2;font-size:var(--t-mini)}
}
@media(max-width:720px){
  .cal-semana{grid-template-columns:1fr}
  .cal-celda{min-height:74px}
  .cal-celda .primero{display:none}
  .agenda-alto .modos{margin-left:0}
}

/* Cuándo se tomó el pedido a la orden. Va bajo el recorrido del estado: es el
   punto de partida de ese recorrido, no un dato más de la ficha. */
.tomado {
  margin: 6px 0 0;
  font-size: 12px;
  color: #6b625c;
}
.tomado b { color: #3d3531; font-weight: 600; }

/* «+3»: el resto de las fotos que mandó el cliente, a un clic. Mismo tamaño que
   una miniatura para que la fila no se descuadre al abrirlas. */
.adjuntos .mas-imagenes {
  flex: none;
  width: 84px; height: 84px;
  border: 1px dashed var(--linea-firme);
  border-radius: var(--r-s);
  background: var(--papel-2);
  color: var(--tinta-2);
  font-family: var(--mono); font-size: 14px;
  cursor: pointer;
  display: grid; place-items: center;
}
.adjuntos .mas-imagenes:hover { border-color: var(--arcilla); color: var(--tinta); }

/* El sello de elaboración: un dato, no un campo. Se ve como lo que está
   impreso en un talonario —rótulo chico arriba, fecha debajo— para que nadie
   intente cambiarlo ni lo confunda con la fecha de entrega, que sí se edita y
   está a dos columnas de aquí. */
.oc-sello .sello-fecha {
  display: flex; flex-direction: column; gap: 1px; line-height: 1.2;
}
.oc-sello .sello-fecha i {
  font-style: normal; font-size: var(--t-mini);
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3);
}
.oc-sello .sello-fecha b {
  font-family: var(--mono); font-size: var(--t-m); font-weight: 500; color: var(--tinta-2);
}
/* La factura sí se escribe, y casi siempre después: se deja angosta y discreta
   para que no compita con el número de pedido, que es lo que se lee de lejos. */
.oc-sello .sello-factura { gap: 7px; }
.oc-sello .sello-factura input { width: 120px; }

/* «Aprobado por» viene relleno con quien tiene la sesión abierta, así que ya no
   puede ir con un placeholder como único rótulo: un campo con texto dentro y
   sin etiqueta no dice qué es ese texto. */
.oc-aprobado {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1;
  font-size: var(--t-mini); letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-3);
}