.ped-section { padding: 2.5rem 1.5rem; background: var(--t-bg); min-height: 50vh; }
.ped-mesa-info { color: var(--t-muted); margin-bottom: 1.5rem; }
.ped-empty { color: var(--t-muted, #6b7280); font-style: italic; text-align: center; padding: 2rem 0; }

/* Esta plantilla (carrito.html) solo carga pedidos.css, así que estas
   clases genéricas de layout/botón/textarea que usa deben vivir aquí — no
   en el CSS de otra app que esta página nunca importa. */
.section-inner { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.section-title { font-size: 1.5rem; color: var(--t-text); margin-bottom: 1.2rem; display: flex; align-items: center; gap: .6rem; }

.pd-form-row { display: flex; gap: 1rem; margin-bottom: .75rem; }
.pd-form-row > div { flex: 1; }
.pd-label { display: block; font-size: .75rem; font-weight: 700; color: var(--t-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem; }
.pd-input {
  width: 100%; box-sizing: border-box; padding: .55rem .75rem; border: 1px solid var(--t-line);
  border-radius: 6px; font-size: .9rem; font-family: inherit; background: var(--t-panel, #fff); color: var(--t-text);
}
.pd-input:focus { outline: none; border-color: var(--t-accent); box-shadow: 0 0 0 3px rgba(58,173,168,.15); }

.pd-textarea {
  width: 100%; box-sizing: border-box;
  padding: .7rem .9rem; border: 1px solid var(--t-line); border-radius: 8px;
  font-size: .9rem; font-family: inherit; min-height: 70px; resize: vertical;
  background: var(--t-panel, #fff); color: var(--t-text);
}
.pd-textarea:focus { outline: none; border-color: var(--t-accent); box-shadow: 0 0 0 3px rgba(58,173,168,.15); }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--t-accent); color: #fff;
  padding: .8rem 1.6rem; border: none; border-radius: 10px;
  font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer;
  transition: background .15s, transform .15s;
}
.btn-primary:hover { background: #2d8a86; transform: translateY(-1px); }

.ped-carrito-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.ped-carrito-item {
  display: flex; align-items: center; gap: .8rem;
  background: var(--t-panel); border: 1px solid var(--t-line); border-radius: 10px;
  padding: .8rem 1rem;
}
.ped-carrito-cant { font-weight: 800; color: var(--t-accent); }
.ped-carrito-nombre { flex: 1; }
.ped-carrito-precio { font-weight: 700; }
.ped-carrito-total { text-align: right; font-size: 1.1rem; margin: 1rem 0; }
.ped-carrito-total--general { border-top: 1px dashed var(--t-line); padding-top: .6rem; font-weight: 800; color: var(--t-accent); }
.ped-carrito-subtitulo { font-size: .95rem; color: var(--t-muted); margin: 1rem 0 .5rem; }
.ped-carrito-list--confirmado .ped-carrito-item { opacity: .8; }
/* Línea cancelada por el bar — visible pero claramente distinta de lo que
   sí se va a cobrar/servir (decisión de Eduardo: el cliente debe enterarse,
   no que desaparezca sin explicación; foco en comandas, 2026-08-13). */
.ped-carrito-item--cancelado { opacity: .55; border-style: dashed; }
.ped-carrito-item--cancelado .ped-carrito-nombre { text-decoration: line-through; }
.ped-carrito-cancelado-etiqueta { font-size: .78rem; color: #ef4444; font-weight: 700; white-space: nowrap; }

/* Panel de personal (cocina/barra) -- modo claro, mismo lenguaje visual
   que Avisos de voz (2026-08-14, hallazgo real de Eduardo: "hay q
   ponerlo con el estilo de los avisos, modo claro"). Antes este panel
   usaba un tema oscuro (#14213d) propio, pensado para el "modo pantalla"
   de una tablet fija -- pero ahora que todos los paneles de personal
   comparten el mismo shell claro (staff/base_panel.html), tener uno
   oscuro suelto desentonaba con el resto en vez de reforzar que es la
   misma familia de pantallas. */
.ped-panel-wrap { padding: 2rem 1.5rem; background: #f4f6f8; min-height: 100vh; }
.ped-panel-titulo { color: #16232e; font-size: 1.6rem; font-weight: 800; margin-bottom: 0; }

/* Avisos por voz, fusionados dentro de este mismo panel (2026-08-14) --
   antes era una pantalla aparte (staff_asistente "Avisos de voz"),
   eliminada por redundancia visual con este panel. */
.ped-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; }
.ped-voz-btn {
  background: var(--t-accent); color: #fff; border: none; border-radius: 9px;
  padding: .6rem 1.1rem; font-weight: 700; font-size: .85rem; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.ped-voz-btn:hover { background: #087a7d; }
.ped-voz-btn:disabled { background: #16a34a; cursor: default; }
.ped-voz-hint { color: #6b7280; font-size: .85rem; max-width: 60ch; margin: 0 0 1rem; }
.ped-voz-config {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
  padding: .8rem 1rem; margin-bottom: 1.5rem; font-size: .85rem; color: #374151;
}
.ped-voz-toggle { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.ped-voz-probar {
  border: 1.5px solid var(--t-accent); color: var(--t-accent); background: none;
  border-radius: 7px; padding: .4rem .9rem; font-weight: 700; font-size: .82rem;
  cursor: pointer; font-family: inherit; transition: background .15s, color .15s;
}
.ped-voz-probar:hover { background: var(--t-accent); color: #fff; }

.ped-historial-wrap { margin-top: 2rem; }
.ped-historial-toggle {
  border: 1px solid #e5e7eb; background: #fff; color: #374151;
  border-radius: 9px; padding: .55rem 1rem; font-weight: 700; font-size: .82rem;
  cursor: pointer; font-family: inherit;
}
.ped-historial-toggle:hover { background: #f4f6f8; }
.ped-historial-lista { margin-top: .8rem; display: flex; flex-direction: column; gap: .5rem; }
.ped-historial-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
  padding: .6rem .9rem; font-size: .82rem; color: #374151;
}
.ped-btn-deshacer {
  border: none; background: #e4f1f0; color: var(--t-accent); border-radius: 7px;
  padding: .35rem .8rem; font-weight: 700; font-size: .78rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.ped-btn-deshacer:hover { background: var(--t-accent); color: #fff; }

.ped-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.ped-comanda {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem 1.2rem;
  border-left: 5px solid #f59e0b;
  color: #16232e;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.ped-comanda--en_preparacion { border-left-color: var(--t-accent); }
.ped-comanda--listo { border-left-color: #22c55e; opacity: .7; }
/* App `simulador` (2026-08-16): comandas generadas por un bot, no un
   cliente real -- borde discontinuo + etiqueta, para que cocina/barra no
   las confundan con trabajo de verdad de un vistazo rápido. */
.ped-comanda--simulado { border-left-style: dashed; border-left-color: #8b5cf6; }
.ped-comanda-sim-badge {
  display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .03em;
  color: #6d28d9; background: #ede9fe; border-radius: 20px; padding: 2px 9px; margin-bottom: .5rem;
}
.ped-comanda-head { display: flex; justify-content: space-between; font-size: .8rem; color: #6b7280; margin-bottom: .5rem; }
.ped-comanda-plato { font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.ped-comanda-nota { font-size: .85rem; color: #92400e; font-style: italic; margin-bottom: .6rem; }
.ped-comanda-btns { display: flex; gap: .5rem; }
.ped-comanda-btn {
  flex: 1; padding: .6rem; border: none; border-radius: 8px;
  background: var(--t-accent); color: #fff; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background .15s;
}
.ped-comanda-btn:hover { background: #2d8a86; }
/* Cancelar línea (mismo tratamiento visual que otras acciones destructivas
   del sitio — nunca del mismo color que "avanzar", para no confundir un
   toque accidental) — foco en comandas, 2026-08-13. */
.ped-comanda-btn--cancelar {
  flex: 0 0 auto; width: auto; padding: .6rem .9rem;
  background: transparent; border: 1px solid #e5e7eb; color: #6b7280;
}
.ped-comanda-btn--cancelar:hover { background: #fee2e2; border-color: #ef4444; color: #ef4444; }

/* Cronómetro de un solo toque (2026-08-15, Eduardo: "un cronometro en
   esa tarea... pasado ese tiempo ese elemento se desaparecera solo con
   efecto fadeout suave") -- sustituye al botón "Marcar listo" mientras
   la tarjeta está "en_preparacion": barra que se vacía + mm:ss restante,
   sin ningún toque manual salvo Cancelar. */
.ped-comanda-cronometro { flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.ped-comanda-cronometro-pista { height: 6px; border-radius: 3px; background: #e5e7eb; overflow: hidden; }
.ped-comanda-cronometro-barra {
  height: 100%; width: 100%; background: var(--t-accent); border-radius: 3px;
  transition: width 1s linear;
}
.ped-comanda-cronometro-txt { font-size: .8rem; font-weight: 700; color: var(--t-accent); }
/* Fundido suave al terminar el cronómetro -- la tarjeta se retira sola,
   sin esperar al siguiente refresco de la lista. */
.ped-comanda--terminando {
  opacity: 0; transform: scale(.96); transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ped-comanda--terminando { transition: none; }
  .ped-comanda-cronometro-barra { transition: none; }
}

/* Comandera — selector visual de mesas (fondo claro var(--t-bg)).
   2026-08-14: mejoras de usabilidad aprobadas tras auditoría con
   capturas reales (leyenda/resumen/zonas pegajosos, reloj además de
   color en mesas ocupadas, tiempo abierto). */
.mesa-header-sticky {
  /* Ojo con calcular offsets a mano otra vez -- dos bugs reales de este
     tipo (top:112px huérfano, barras apiladas) ya salieron hoy mismo en
     esta pantalla. Sin trucos de márgenes negativos: sticky simplemente
     se pega al borde de scroll tal cual está, con su propio fondo para
     tapar el contenido que pase por debajo. */
  position: sticky; top: 0; z-index: 40;
  background: var(--t-bg); padding-bottom: 1rem;
  /* 2026-08-16 (Eduardo: "ay un corte muy feo entre el top y el
     contenido... un border bottom suave del color verde suave le daria
     un toque"). Antes el corte lo marcaba solo el contenido de debajo
     empezando de golpe, sin ningún límite visual propio -- mismo verde
     suave ya usado en el resto del panel (cobro, dividir cuenta). */
  border-bottom: 1px solid #bfe3c7;
}
.mesa-resumen { color: var(--t-text); font-size: .9rem; margin-bottom: .7rem; }
.mesa-resumen-ocupadas { color: #b45309; }
.mesa-resumen-ocupadas--cero { color: #16a34a; font-weight: 700; }

.mesa-leyenda { display: flex; gap: 1.5rem; margin-bottom: 1rem; color: var(--t-muted); font-size: .85rem; }
.mesa-leyenda span { display: inline-flex; align-items: center; gap: .5rem; }
.mesa-dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.mesa-dot--libre { background: #22c55e; }
.mesa-dot--activa { background: #f59e0b; }

/* Chips de zona con salto directo (mismo patrón que las categorías de
   "Tomar pedido") -- con 23 mesas en 3 zonas, scrollear a pelo hasta
   Terraza pasando por las 14 de Barra+Interior era el único camino. */
.mesa-zonas-nav { display: flex; gap: .5rem; flex-wrap: wrap; }
.mesa-zona-chip {
  padding: .4rem 1rem; border-radius: 20px; border: 1.5px solid var(--t-line);
  background: var(--t-panel); color: var(--t-text); font-weight: 700; font-size: .82rem;
  text-decoration: none; transition: background .15s, border-color .15s;
}
.mesa-zona-chip:hover { background: var(--t-accent); border-color: var(--t-accent); color: #fff; }

/* scroll-margin-top: al saltar con los chips de arriba, el título de la
   zona no debe quedar tapado detrás de la cabecera pegajosa -- sin esto
   el navegador centra el salto justo en el borde de abajo del sticky. */
.mesa-zona-titulo { color: var(--t-accent); font-size: 1.15rem; font-weight: 800; margin: 1.6rem 0 1rem; scroll-margin-top: 150px; }

.mesa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 1rem;
}
.mesa-box {
  position: relative;
  aspect-ratio: 1;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  text-decoration: none;
  font-weight: 900;
  border: 3px solid transparent;
  transition: transform .12s, box-shadow .12s;
  box-shadow: 0 3px 0 rgba(0,0,0,.15);
}
.mesa-box:active { transform: scale(.94); }
.mesa-box:hover { box-shadow: 0 5px 14px rgba(0,0,0,.25); }
.mesa-box-num { font-size: 2.1rem; line-height: 1; }
.mesa-box-info { font-size: .78rem; font-weight: 700; opacity: .85; }
/* Aviso de reserva en la propia tarjeta de mesa (2026-08-15) -- de un
   vistazo, sin tener que entrar en la mesa para enterarse. */
.mesa-box-reserva {
  display: block; font-size: .68rem; font-weight: 700; margin-top: 2px;
  background: rgba(255,255,255,.9); color: #7c3aed; border-radius: 6px;
  padding: 1px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* Reloj en la esquina de las mesas ocupadas -- distinguirlas no depende
   SOLO del color (accesibilidad para daltonismo rojo/verde-ámbar): un
   icono real es una segunda señal que no depende de percibir el matiz. */
.mesa-box-reloj { position: absolute; top: 8px; right: 10px; font-size: .95rem; }

.mesa-box--libre {
  background: #dcfce7;
  color: #14532d;
  border-color: #22c55e;
}
.mesa-box--activa {
  background: #fef3c7;
  color: #78350f;
  border-color: #f59e0b;
}

@media (max-width: 480px) {
  .mesa-grid { grid-template-columns: repeat(auto-fill, minmax(85px, 1fr)); gap: .7rem; }
  .mesa-box-num { font-size: 1.6rem; }
}

/* ── Picking rápido del comandero — fichas de "comanda" ───────────── */
.pk-wrap { background: var(--t-bg); min-height: 100vh; padding-bottom: 100px; }
@media (max-width: 767px) {
  /* Hueco extra para que el contenido no quede tapado por las DOS
     tarjetas flotantes apiladas en móvil: el carrito + la barra de
     pestañas del rail (staff/base_panel.html). */
  .pk-wrap { padding-bottom: 170px; }
}

/* Cabecera pegajosa única: título + buscador + etiquetas, sin huecos entre
   ellos (antes cada uno tenía su propio "sticky" con offsets calculados a
   mano, y el buscador tenía márgenes laterales — al hacer scroll se colaba
   el grid de productos por esos huecos, dando un efecto de "rejilla"). */
.pk-header-sticky {
  /* Bug real encontrado con captura de Eduardo (2026-08-14): "top: 112px"
     estaba calibrado para la altura de la cabecera pública fija de
     base.html (topbar+navbar), que esta pantalla ya no tiene desde que
     pasó a extender staff/base_panel.html (sin cabecera pública, sidebar
     lateral en vez de superior). Con ese hueco de sobra ya no reservado
     por nada, el navegador "pegaba" esta barra 112px más abajo de su
     posición natural nada más cargar (sin haber hecho scroll todavía),
     solapándose con la rejilla de productos de debajo. */
  position: sticky; top: 0; z-index: 50;
  background: var(--t-panel); border-bottom: 1px solid var(--t-line);
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.pk-topbar {
  display: flex; align-items: center; gap: .5rem;
  padding: .9rem 1.3rem .7rem;
}
/* Bug real (captura de Eduardo, 2026-08-15, versión móvil vertical): esta
   fila no tenía "min-width:0" en el chip de mesa ni "flex-wrap", así que
   con mesa+lupa+reservar+"Cambiar de mesa" (texto largo) todos en una
   sola línea, la fila se salía por la derecha del viewport en vez de
   encogerse. El chip ahora puede truncar su texto y "Cambiar de mesa"
   pasa a ser un icono más (mismo patrón que la lupa/reservar) en vez de
   un enlace de texto que no cabía. */
.pk-mesa-chip {
  font-weight: 800; color: var(--t-text); font-size: 1.05rem; display: flex; align-items: baseline; gap: .4rem;
  min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.pk-mesa-chip em { font-style: normal; font-weight: 600; font-size: .78rem; color: var(--t-muted); text-transform: uppercase; letter-spacing: .04em; }
.pk-cambiar {
  flex-shrink: 0; margin-left: 0; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--t-bg); border: 1px solid var(--t-line); border-radius: 50%;
  color: var(--t-muted); cursor: pointer; padding: 0; transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.pk-cambiar svg { width: 17px; height: 17px; }
.pk-cambiar:hover { background: var(--t-line); }

/* Icono de lupa que despliega el buscador (2026-08-15, Eduardo: "reducir
   el tamaño del buscador del top, ocultando el buscador en si... que
   salga un icono de lupa... reduciendo asi el tamaño a la mitad en
   vertical") -- antes el buscador ocupaba su propia fila siempre,
   aunque casi nunca hace falta con la rejilla de productos a la vista. */
.pk-search-toggle {
  flex-shrink: 0; margin-left: auto; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--t-bg); border: 1px solid var(--t-line); border-radius: 50%;
  color: var(--t-muted); cursor: pointer; padding: 0; transition: background .15s, color .15s, border-color .15s;
}
.pk-search-toggle svg { width: 17px; height: 17px; }
.pk-search-toggle:hover { background: var(--t-line); }
.pk-search-toggle.is-active { background: var(--t-accent); border-color: var(--t-accent); color: #fff; }

/* Buscador — pegado justo debajo del título, sin margen lateral que deje ver
   el fondo detrás al hacer scroll. */
.pk-search-bar {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 1.3rem .8rem;
  background: var(--t-bg); border: 2px solid var(--t-line); border-radius: 14px;
  padding: .1rem .9rem;
  transition: border-color .15s;
}
/* Bug real (2026-08-15, mismo patrón ya visto con .pk-footer-lista): un
   selector de tipo/clase con `display: flex` gana SIEMPRE al estilo por
   defecto del atributo [hidden] del navegador (origen "autor" contra
   origen "user-agent", la especificidad no entra en juego) -- sin esto,
   el buscador aparecía desplegado desde el primer render pese al
   atributo `hidden` en el HTML. */
.pk-search-bar[hidden] { display: none; }
.pk-search-bar:focus-within { border-color: var(--t-accent); }

/* Reservar mesa (2026-08-15, Eduardo: "boton al lado de la lupa para
   Reservar, y que abra un formulario debajo con los detalles y la hora
   de la reserva"). Mismo patrón de toggle + [hidden] que el buscador --
   con display:flex declarado desde el principio, para no repetir el bug
   ya conocido de que gane siempre al [hidden] por defecto. */
.pk-reservar-bar {
  display: flex; flex-direction: column; gap: .8rem;
  margin: 0 1.3rem .8rem; background: var(--t-panel); border: 2px solid var(--t-line);
  border-radius: 14px; padding: .9rem 1rem;
}
.pk-reservar-bar[hidden] { display: none; }
.pk-reservar-lista { display: flex; flex-direction: column; gap: .4rem; padding-bottom: .6rem; border-bottom: 1px dashed var(--t-line); }
.pk-reservar-lista-tit { margin: 0 0 .2rem; font-size: .78rem; font-weight: 800; color: var(--t-text); }
.pk-reservar-fila {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  font-size: .82rem; color: var(--t-text); background: var(--t-bg); border-radius: 8px; padding: .5rem .7rem;
}
.pk-reservar-cancelar {
  all: unset; cursor: pointer; color: #b91c1c; font-weight: 800; font-size: .85rem;
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.pk-reservar-cancelar:hover { background: #fee2e2; }
.pk-reservar-form { display: flex; flex-direction: column; gap: .5rem; }
.pk-reservar-form-fila { display: flex; gap: .5rem; }
.pk-reservar-form-fila input, .pk-reservar-form > input {
  flex: 1; min-width: 0; border: 1px solid var(--t-line); border-radius: 8px;
  padding: .55rem .7rem; font: inherit; font-size: .85rem; color: var(--t-text); background: var(--t-bg);
}
.pk-reservar-form-fila input:focus, .pk-reservar-form > input:focus { outline: none; border-color: var(--t-accent); }
.pk-reservar-form .pk-cobrar-mesa-btn { align-self: flex-start; }
@media (max-width: 480px) {
  .pk-reservar-form-fila { flex-direction: column; }
}
.pk-search-ico { width: 19px; height: 19px; color: var(--t-muted); flex-shrink: 0; }
.pk-search-input {
  flex: 1; border: none; background: none; outline: none;
  font-family: inherit; font-size: .95rem; color: var(--t-text);
  padding: .8rem 0;
}
.pk-search-input::placeholder { color: var(--t-muted); }
.pk-search-clear {
  border: none; background: var(--t-panel); color: var(--t-muted);
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  font-size: .8rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}

/* Etiquetas — pegadas justo debajo del buscador, mismo fondo que la
   cabecera para que no haya costura visible. */
.pk-cats {
  /* 2026-08-15 (Eduardo, reclasificación a 4 categorías): centradas en
     vez de pegadas a la izquierda -- con solo 4 (antes eran más
     dispersas y a menudo no cabían todas, de ahí que naciera pegadas al
     borde con scroll). justify-content:center no rompe el scroll
     horizontal en pantallas donde SÍ desborden -- solo centra cuando el
     contenido cabe entero. */
  display: flex; gap: .5rem; overflow-x: auto; justify-content: center;
  padding: 0 1.3rem .9rem;
}
/* Pista visual de que hay más categorías deslizando (2026-08-14, mejora
   de diseño aprobada): en móvil, la última categoría se cortaba a media
   palabra en el borde derecho sin ningún indicio de que se puede seguir
   deslizando -- un degradado sutil sugiere "hay más" sin ocupar espacio
   ni un icono de flecha permanente. position:absolute sobre
   .pk-header-sticky (que ya es el contenedor con posición establecida),
   no dentro de .pk-cats -- si viviera dentro del propio elemento con
   scroll, el degradado se desplazaría junto con el contenido en vez de
   quedarse fijo pegado al borde. */
.pk-header-sticky::after {
  content: ''; position: absolute; bottom: 0; right: 0; width: 32px; height: 48px;
  background: linear-gradient(to right, transparent, var(--t-panel));
  pointer-events: none;
}
@media (min-width: 900px) { .pk-header-sticky::after { display: none; } }
.pk-cat-btn {
  flex-shrink: 0; padding: .55rem 1.1rem; border-radius: 20px;
  border: 1.5px solid var(--t-line); background: var(--t-panel);
  color: var(--t-text); font-weight: 700; font-size: .84rem;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.pk-cat-btn:active { transform: scale(.95); }
/* Icono propio de categoría (2026-08-15, Eduardo generó imágenes con
   Gemini) -- mismo tamaño de línea que el emoji que sustituye. */
.pk-cat-btn-icono { width: 1.1em; height: 1.1em; vertical-align: -.2em; object-fit: contain; }
.pk-cat-btn.is-active { background: var(--t-accent); border-color: var(--t-accent); color: #fff; }
/* 2026-08-15 (Eduardo: "los filtros se quedan cortados... para
   versiones muy estrechas quizas sea mejor colocar solo iconos y no
   nombres"). Con nombres de categoría largos ("Desayunos — cocina"),
   la fila de pastillas no cabía entera en pantallas estrechas y la
   última quedaba cortada a media palabra en el borde. Por debajo de
   480px se quedan solo los iconos (ya inequívocos, con el nombre
   accesible vía aria-label/title) -- pastillas más pequeñas, caben
   todas sin scroll ni corte. */
@media (max-width: 480px) {
  .pk-cat-btn-nombre { display: none; }
  .pk-cat-btn { padding: .55rem .8rem; font-size: 1rem; }
}

/* Estados de línea, reutilizados dentro del panel único de abajo (ver
   .pk-footer-seccion) -- antes eran de ".pk-comanda-*", que ya no
   existe como bloque aparte en la pantalla principal. */
.pk-comanda-estado {
  flex-shrink: 0; font-size: .72rem; font-weight: 700; padding: .2rem .55rem;
  border-radius: 999px; text-transform: uppercase; letter-spacing: .02em;
}
.pk-comanda-estado--pendiente { background: #fef3c7; color: #92400e; }
.pk-comanda-estado--en_preparacion { background: #dbeafe; color: #1e40af; }
.pk-comanda-estado--listo { background: #dcfce7; color: #166534; }
.pk-comanda-estado--entregado { background: #e5e7eb; color: #374151; }

/* Botón de cobrar la mesa -- ahora vive DENTRO del panel único de la
   tarjeta flotante (.pk-footer-seccion), no suelto con su propio margen
   de página. */
.pk-cobrar-mesa-btns { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* 2026-08-16 (Eduardo: "lo de dividir cuenta deberia salir a la derecha
   de las opciones de pago y no ocupar toda una fila... efectivo,
   tarjeta, bizum || separador Dividir Cuenta"). Barra vertical entre los
   métodos de pago y "Dividir cuenta", ahora en la misma fila. */
.pk-cobrar-sep { width: 1px; height: 22px; background: #bfe3c7; margin: 0 .2rem; flex-shrink: 0; }
.pk-cobrar-mesa-btn {
  border: 1.5px solid #bfe3c7; background: #fff; color: #2f6b3f;
  border-radius: 8px; padding: .5rem .9rem; font-weight: 700; font-size: .82rem; cursor: pointer;
  transition: background .15s;
}
.pk-cobrar-mesa-btn:hover { background: #dcfce7; }
.pk-cobrar-mesa-btn:disabled { opacity: .5; cursor: default; }

.pk-productos { padding: .4rem 1.3rem 1.5rem; }
.pk-cat-panel { display: none; }
.pk-cat-panel.is-active { display: block; }
.pk-productos.pk-modo-busqueda .pk-cat-panel { display: block; }

/* Tarjeta de "Menú de hoy" (2026-08-15, Eduardo: "las tarjetas de menu
   del dia deberia de contener un listado de todo su contenido") -- el
   plato "Menú del día" es solo nombre+precio como cualquier otro; el
   desglose real (primero/segundo/postre/bebida) sale de
   MenuDia/MenuSemanal y se muestra aquí encima de la rejilla de esa
   categoría. */
.pk-menu-dia-detalle {
  background: var(--t-panel); border: 1px solid var(--t-line); border-radius: 12px;
  padding: 1rem 1.2rem; margin: 0 1.3rem 1rem;
}
.pk-menu-dia-tit { margin: 0 0 .6rem; font-size: .95rem; color: var(--t-text); }
.pk-menu-dia-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.pk-menu-dia-lista li { display: flex; gap: .6rem; font-size: .88rem; color: var(--t-text); }
.pk-menu-dia-lista li span {
  flex-shrink: 0; width: 4.2rem; font-weight: 700; color: var(--t-muted);
  text-transform: uppercase; font-size: .7rem; letter-spacing: .03em; padding-top: .15rem;
}
.pk-menu-dia-nota { margin: .7rem 0 0; padding-top: .6rem; border-top: 1px dashed var(--t-line); font-size: .82rem; color: #92400e; font-style: italic; }
.pk-menu-dia-vacio { margin: 0 1.3rem 1rem; color: var(--t-muted); font-size: .88rem; font-style: italic; }

/* 2026-08-22 (Eduardo: "convertirla en el formato que usamos en el modo
   en la vista de la caja... la vista de la caja es muy cómoda para
   añadir elementos... para no mezclar y quedarnos con un solo
   mecanismo"). Esta rejilla tenía su propio diseño ("papeleta de
   comanda", foto circular grande, muesca dentada) distinto del de Caja
   (.cj-tile en panel_caja.html: tarjeta compacta, foto cuadrada
   pequeña, fondo tintado por categoría) -- mismo propósito (tocar un
   producto para añadirlo), dos lenguajes visuales distintos en el mismo
   panel de personal. Se adopta aquí el formato de Caja, MISMOS nombres
   de clase que ya usa el JS de esta página (.pk-producto, .pk-producto-
   qty...) -- no se toca ni un selector ni la lógica de añadir/quitar,
   solo el aspecto. El stepper −/+ (que Caja no necesita, porque ahí cada
   toque abre una línea nueva en el ticket en vez de sumar sobre la
   propia tarjeta) se mantiene, ya que aquí sí hace falta corregir un
   toque de más sin salir de la rejilla. */
.pk-productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .6rem;
}

.pk-producto {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 0;
  background: #f3f5f4;
  border: 1px solid #d7dfdc;
  border-radius: 14px;
  cursor: pointer; font-family: inherit;
  padding: .8rem .5rem;
  transition: transform .08s, box-shadow .1s, border-color .15s;
}
.pk-producto:hover { border-color: var(--t-accent); }
.pk-producto:active { transform: scale(.95); }

/* Tinte de fondo por categoría (mismo criterio de contraste ya validado
   en Caja: cada categoría con su propio fondo suave en vez de solo un
   gris neutro, para localizar el producto más rápido en plena hora
   punta) -- aplicado por el panel contenedor (.pk-cat-panel--*), no por
   cada tarjeta suelta, para no repetir la clase en cada botón. */
.pk-cat-panel--bebida .pk-producto { background: #fdf1de; border-color: #f2ddb3; }
.pk-cat-panel--bocadillo .pk-producto { background: #e8f6ee; border-color: #bfe6cc; }
.pk-cat-panel--plato .pk-producto { background: #fdecea; border-color: #f3c9c3; }
.pk-cat-panel--menu .pk-producto { background: #e3f3f2; border-color: #bfe0de; }

.pk-producto-qty {
  position: absolute; top: -6px; right: -6px; z-index: 2;
  height: 22px; padding: 0 3px 0 7px;
  background: var(--t-accent); color: #fff;
  border-radius: 999px; font-size: .7rem; font-weight: 800;
  display: flex; align-items: center; gap: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
/* Bug real encontrado en auditoría de diseño (2026-08-14): el HTML ya
   marcaba este badge con el atributo "hidden" cuando la cantidad es 0
   (ver comandero_pedir.html), pero "display: flex" de arriba tiene más
   especificidad que la regla UA por defecto de [hidden] (display:none)
   y siempre ganaba -- el "0" se veía en TODAS las tarjetas todo el
   rato, compitiendo visualmente con el precio real. */
.pk-producto-qty[hidden] { display: none; }
.pk-producto-qty-num { min-width: 12px; text-align: center; }
.pk-producto-qty-menos {
  all: unset; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.3); color: #fff; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .82rem; line-height: 1;
}
.pk-producto-qty-menos:hover { background: rgba(255,255,255,.45); }
.pk-producto-qty-mas {
  all: unset; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.3); color: #fff; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .82rem; line-height: 1;
}
.pk-producto-qty-mas:hover { background: rgba(255,255,255,.45); }

.pk-producto-foto {
  width: 44px; height: 44px; border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.6); flex-shrink: 0; margin: 0 auto .3rem;
}
.pk-producto-foto img { width: 100%; height: 100%; object-fit: cover; }
.pk-producto-foto-emoji { font-size: 1.5rem; }

.pk-producto-nombre {
  font-weight: 800; font-size: .74rem; color: #12201d;
  text-align: center; line-height: 1.2; min-height: 2.2em;
  display: flex; align-items: center; justify-content: center;
}
.pk-producto-precio {
  font-weight: 800; font-size: .76rem; color: #12201d; opacity: .72;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}

.pk-producto--added { border-color: var(--t-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-accent) 30%, transparent); }

.pk-sin-resultados { text-align: center; padding: 3rem 1rem; color: var(--t-muted); }
.pk-sin-resultados span { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .6; }

/* Barra clara + mini-lista desplegable (2026-08-14, mejora de diseño
   aprobada: "no nos convence la barra inferior" -- el azul marino
   desentonaba con el resto (blanco/gris claro), y solo "Ver pedido →"
   era tocable. Ahora TODA la barra es un <button> real (área táctil
   completa) que despliega, encima de sí misma, lo añadido en esta
   visita sin salir de la pantalla. */
.pk-footer {
  all: unset; box-sizing: border-box; cursor: pointer;
  /* Tarjeta flotante, no barra a los dos bordes (2026-08-14, mejora de
     diseño aprobada: "no nos gusta que ese resumen... salga tan al
     100%, rompe todo" -- se veía sosa y cortaba la pantalla en dos en
     vez de flotar sobre el contenido). Margen a los lados + bordes
     redondeados en las 4 esquinas + sombra alrededor, no solo arriba. */
  /* z-index 260, no 1250: #agentia-sidebar (admin_custom.css) usa 300
     -- si la barra fina va por delante del rail, al desplegarse en hover
     (más ancho, con etiquetas de texto) queda tapado por esta tarjeta en
     vez de al revés (2026-08-14, captura de Eduardo: "cuando desplegamos
     el sidebar, deberia estar por delante de eso tambien... del bottom
     ese del resumen de pedido"). Sigue muy por encima del contenido
     normal (z-index auto), solo el rail del sidebar gana. */
  position: fixed; left: 1.3rem; right: 1.3rem; bottom: 1rem; z-index: 260;
  background: var(--t-panel); color: var(--t-text);
  border-radius: 16px;
  padding: .95rem 1.3rem;
  display: flex; align-items: center; gap: 1.2rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
}
.pk-footer:hover { background: var(--t-bg); }
/* Bug real (2026-08-14, captura de Eduardo: "por aora ocupa mas de ese
   ancho y tapa el menu sidebar y queda feo"): left:1.3rem se mide desde
   el borde de LA VENTANA, pero el contenido (#panel-main en
   staff/base_panel.html) ya empieza 64px más allá, tras el rail lateral
   fijo. La tarjeta flotante flotaba correctamente pero por debajo del
   rail en vez de alinearse con la columna de contenido. A partir de
   768px (el rail es rail, no barra de pestañas -- ver mismo corte en
   staff/base_panel.html) se suma el ancho del rail al margen izquierdo. */
@media (min-width: 768px) {
  .pk-footer { left: calc(64px + 1.3rem); }
}
/* En móvil, la tarjeta flotante del carrito y la barra de pestañas del
   rail (staff/base_panel.html) comparten la zona inferior -- sin este
   ajuste, el carrito tapaba los accesos del sidebar (2026-08-14,
   detectado al verificar la mejora anterior). Aquí el rail YA es una
   barra de pestañas abajo, no un rail lateral, así que no hace falta
   compensar ningún ancho a la izquierda. */
@media (max-width: 767px) {
  .pk-footer { left: .7rem; right: .7rem; bottom: 74px; }
}
.pk-footer-items strong { color: var(--t-accent); }
.pk-footer-total { flex: 1; text-align: right; font-size: .95rem; }
.pk-footer-total strong { font-size: 1.2rem; color: var(--t-text); }
.pk-footer-flecha { color: var(--t-muted); font-size: .85rem; }

/* Panel de la mesa: bloque normal del documento, no flotante
   (2026-08-14, propuesta C elegida por Eduardo entre 3 mockups --
   "puede estar justo debajo del listado de ingredientes no tiene pq
   ser flotante"). Con 66 platos y varias pantallas de scroll, una
   tarjeta fixed tapaba parte de la rejilla mientras estaba abierta;
   aquí vive en el flujo, debajo de #pk-productos, y la barra fina de
   abajo (#pkFooter, que SÍ sigue fija) solo hace scroll hasta él. */
.pk-panel-mesa {
  background: var(--t-panel); border-radius: 16px;
  border: 1px solid var(--t-line);
  padding: .3rem 1.3rem; margin: 1.2rem 0 6rem;
}
.pk-panel-mesa-vacio {
  text-align: center; color: var(--t-muted); font-size: .88rem;
  padding: 1.4rem .5rem; margin: 0;
}
/* Panel único con todo lo relativo a la mesa (2026-08-14, mejora
   aprobada: "el panel expandible tiene que mostrar todo lo referente a
   la mesa... para dejar el panel libre para los elementos") -- 3
   secciones posibles (ya confirmado / añadiendo ahora / cobrar mesa),
   cada una con su propio título, separadas visualmente entre sí. */
.pk-footer-seccion { padding: .9rem 0; border-bottom: 1px solid var(--t-line); }
.pk-footer-seccion:last-child { border-bottom: none; }
.pk-footer-seccion-titulo { font-size: .8rem; font-weight: 800; color: var(--t-text); margin: 0 0 .5rem; }
.pk-footer-lista-fila {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .4rem 0; font-size: .88rem; color: var(--t-text);
}
/* Nota por producto (2026-08-15, Eduardo: "lo de poco tomate se lo puse
   a una cosa pero aparecen en varias... no se relaciona bien") -- cada
   fila de "Añadiendo ahora" lleva su propio input, en vez de una única
   nota para todo lo confirmado de golpe. */
.pk-footer-lista-fila--nota { flex-direction: column; align-items: stretch; gap: .3rem; }
.pk-footer-lista-fila-top { display: flex; justify-content: space-between; gap: .8rem; }
.pk-footer-nota-item {
  width: 100%; box-sizing: border-box; border: 1px solid var(--t-line); border-radius: 7px;
  padding: .4rem .6rem; font: inherit; font-size: .8rem; color: var(--t-text); background: var(--t-bg);
}
.pk-footer-nota-item:focus { outline: none; border-color: var(--t-accent); }
.pk-footer-nota-item::placeholder { color: var(--t-muted); }
.pk-linea-nota { color: #92400e; font-style: italic; font-size: .8rem; }

/* Stepper −/+ en la propia mini-lista (2026-08-15, Eduardo: "en la
   lista pon tambien los simbolos de - + no? para q el camarero pueda
   manipularlos si es necesario") -- SOLO en "Añadiendo ahora" (lo que
   aún no se ha confirmado); "Ya confirmado" no lleva estos controles a
   propósito, un pedido ya lanzado a cocina no se puede "restar" desde
   aquí. */
.pk-footer-lista-stepper { display: flex; align-items: center; gap: .5rem; }
.pk-footer-lista-stepper strong { min-width: 1ch; text-align: center; color: var(--t-text); }
.pk-footer-lista-menos, .pk-footer-lista-mas {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--t-bg); border: 1px solid var(--t-line); color: var(--t-text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-weight: 900; font-size: .85rem; line-height: 1;
}
.pk-footer-lista-menos:hover, .pk-footer-lista-mas:hover { background: var(--t-line); }

.pk-footer-lista-subtotal {
  text-align: right; font-size: .85rem; color: var(--t-muted); padding-top: .4rem;
  border-top: 1px dashed var(--t-line); margin-top: .3rem;
}
.pk-footer-lista-subtotal strong { color: var(--t-text); font-size: 1rem; }
.pk-footer-lista-confirmar {
  display: block; text-align: center; text-decoration: none;
  background: var(--t-accent); color: #fff; font-weight: 700; font-size: .9rem;
  padding: .7rem; border-radius: 10px; margin-top: .7rem;
}
.pk-footer-lista-confirmar:hover { background: #2d8a86; }
.pk-footer-lista-confirmar:disabled { opacity: .6; cursor: default; }
/* Formulario de confirmar pedido embebido (2026-08-14: "esa vista
   deberia estar en ese panel... q el usuario no tenga q navegar a otro
   lado"), mismo textarea que carrito.html pero a tamaño de panel. */
.pk-footer-nota {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 2.4rem;
  font: inherit; font-size: .85rem; color: var(--t-text);
  border: 1px solid var(--t-line); border-radius: 8px; padding: .5rem .7rem;
  margin-top: .3rem;
}
.pk-footer-lista-confirmar { width: 100%; border: none; font: inherit; cursor: pointer; }
/* La sección de cobro reutiliza el mismo verde de "todo pagado" que ya
   tenía suelta, ahora dentro de su propia sección del panel.
   2026-08-15 (Eduardo: "propon colores suaves para el fondo del ticket,
   asi se diferenciara del resto... facil accesible a la vista" →
   aprobada la opción A, "verde salvia"). Fondo propio + borde + padding
   -- antes no tenía ningún fondo, se confundía visualmente con el resto
   de filas del panel. Mismo verde que ya usa el badge "PAGADO", ahora
   con más superficie -- refuerza el significado en vez de añadir uno
   nuevo. Contraste de texto por encima de 4.5:1 (AA). */
.pk-footer-seccion.pk-cobrar-mesa {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
  font-size: .88rem; font-weight: 700; color: #2f6b3f;
  background: #eef7f0; border: 1px solid #bfe3c7; border-radius: 12px; padding: .9rem 1rem;
}
/* Ticket embebido en el propio panel tras cobrar (2026-08-15, Eduardo:
   "en vez de que aparezca el enlace de ver ticket, vamos a poner
   directamente el ticket debajo... asi el camarero no navega tontamente
   por el sitio"). Mismas clases .tk-* que usa la página standalone del
   ticket (ticket_digital.html) -- aquí sin fondo de página propio, ya
   vive dentro de la tarjeta del panel. */
#pkTicketWrap .tk-card, .pk-division-parte .tk-card {
  background: var(--t-bg); border: 1px solid var(--t-line); border-radius: 10px;
  padding: 1rem 1.1rem; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .82rem; color: var(--t-text); margin-top: .3rem;
}
#pkTicketWrap .tk-negocio { text-align: center; margin-bottom: .8rem; }
.pk-division-parte .tk-negocio { text-align: center; margin-bottom: .8rem; }
#pkTicketWrap .tk-negocio h1 { font-size: .95rem; margin: 0 0 .15rem; font-family: inherit; }
.pk-division-parte .tk-negocio h1 { font-size: .95rem; margin: 0 0 .15rem; font-family: inherit; }
#pkTicketWrap .tk-negocio p { margin: 0; color: var(--t-muted); font-size: .74rem; }
.pk-division-parte .tk-negocio p { margin: 0; color: var(--t-muted); font-size: .74rem; }
#pkTicketWrap .tk-meta { display: flex; justify-content: space-between; font-size: .74rem; color: var(--t-muted); margin: .6rem 0; border-top: 1px dashed var(--t-line); border-bottom: 1px dashed var(--t-line); padding: .4rem 0; }
.pk-division-parte .tk-meta { display: flex; justify-content: space-between; font-size: .74rem; color: var(--t-muted); margin: .6rem 0; border-top: 1px dashed var(--t-line); border-bottom: 1px dashed var(--t-line); padding: .4rem 0; }
#pkTicketWrap .tk-linea { display: flex; justify-content: space-between; gap: .6rem; padding: .2rem 0; }
.pk-division-parte .tk-linea { display: flex; justify-content: space-between; gap: .6rem; padding: .2rem 0; }
#pkTicketWrap .tk-linea span:first-child { flex: 1; }
.pk-division-parte .tk-linea span:first-child { flex: 1; }
#pkTicketWrap .tk-totales { border-top: 1px dashed var(--t-line); margin-top: .5rem; padding-top: .5rem; }
.pk-division-parte .tk-totales { border-top: 1px dashed var(--t-line); margin-top: .5rem; padding-top: .5rem; }
#pkTicketWrap .tk-totales div { display: flex; justify-content: space-between; padding: .1rem 0; }
.pk-division-parte .tk-totales div { display: flex; justify-content: space-between; padding: .1rem 0; }
#pkTicketWrap .tk-total-final { font-weight: 700; font-size: .98rem; border-top: 1px solid var(--t-text); margin-top: .3rem; padding-top: .3rem; }
.pk-division-parte .tk-total-final { font-weight: 700; font-size: .98rem; border-top: 1px solid var(--t-text); margin-top: .3rem; padding-top: .3rem; }
#pkTicketWrap .tk-qr { text-align: center; margin-top: 1rem; }
.pk-division-parte .tk-qr { text-align: center; margin-top: 1rem; }
#pkTicketWrap .tk-qr img { width: 120px; height: 120px; }
.pk-division-parte .tk-qr img { width: 120px; height: 120px; }
#pkTicketWrap .tk-qr p { font-size: .66rem; color: var(--t-muted); margin: .3rem 0 0; line-height: 1.4; }
.pk-division-parte .tk-qr p { font-size: .66rem; color: var(--t-muted); margin: .3rem 0 0; line-height: 1.4; }
#pkTicketWrap .tk-aviso { background: #fef3e0; color: #92400e; border-radius: 8px; padding: .6rem .7rem; font-size: .72rem; line-height: 1.4; margin-top: 1rem; font-family: -apple-system, sans-serif; }
.pk-division-parte .tk-aviso { background: #fef3e0; color: #92400e; border-radius: 8px; padding: .6rem .7rem; font-size: .72rem; line-height: 1.4; margin-top: 1rem; font-family: -apple-system, sans-serif; }
#pkTicketWrap .tk-cliente { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--t-line); font-size: .74rem; color: var(--t-muted); }
.pk-division-parte .tk-cliente { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--t-line); font-size: .74rem; color: var(--t-muted); }
#pkTicketWrap .tk-cliente strong { color: var(--t-text); }
.pk-division-parte .tk-cliente strong { color: var(--t-text); }
/* 2026-08-15 (Eduardo: "colocar un boton en el top del ticket q sea
   Convertir a fACTUTRA... aparezcan los campos a rellenar" -- opción A
   aprobada; luego: "esos dos botones... ocupan mucho espacio... colocale
   tambien algun color al convertir a factura, hazlo mas boton"). Los dos
   botones de acción (Limpiar mesa + Convertir a factura) pasan a
   compartir fila en vez de ir cada uno a ancho completo -- #pkTicketWrap
   como flex-wrap, forzando a ancho completo solo el título/ticket/panel
   de factura (que si necesitan su propia línea), dejando que los dos
   botones se repartan la fila que sobra. */
#pkTicketWrap { display: flex; flex-wrap: wrap; gap: .6rem; align-items: stretch; }
#pkTicketWrap > .pk-footer-seccion-titulo,
#pkTicketWrap > .tk-card,
#pkTicketWrap > .tk-staff-box { flex: 1 1 100%; margin: 0; }
#pkTicketWrap > #formLimpiarMesa { flex: 1.4 1 170px; margin: 0; }
#pkTicketWrap > .tk-acciones-top { flex: 1 1 130px; margin: 0; }

#pkTicketWrap .tk-btn-factura-toggle, .pk-division-parte .tk-btn-factura-toggle {
  width: 100%; height: 100%; border: 1.5px solid var(--t-accent); background: var(--t-accent-soft, #e1f2f1);
  color: var(--t-accent-ink, #065a5c); font-weight: 800; font-size: .82rem; padding: .8rem .7rem;
  border-radius: 10px; cursor: pointer; font-family: -apple-system, sans-serif;
}
#pkTicketWrap .tk-btn-factura-toggle:hover, .pk-division-parte .tk-btn-factura-toggle:hover {
  background: var(--t-accent); color: #fff;
}
#pkTicketWrap .tk-btn-factura-toggle.is-active, .pk-division-parte .tk-btn-factura-toggle.is-active {
  background: var(--t-accent); border-color: var(--t-accent); color: #fff;
}
/* Bug ya conocido en este proyecto: display:flex/grid (origen autor)
   gana siempre a [hidden]{display:none} (user-agent) -- forzado a mano. */
#pkTicketWrap .tk-staff-box[hidden], .pk-division-parte .tk-staff-box[hidden] { display: none; }

#pkTicketWrap .tk-staff-box, .pk-division-parte .tk-staff-box {
  margin-top: 0; margin-bottom: .8rem; padding: .8rem; border: 1px solid var(--t-line); border-radius: 10px;
  font-family: -apple-system, sans-serif; font-size: .8rem;
}
#pkTicketWrap .tk-staff-box h2 { font-size: .8rem; margin: 0 0 .5rem; font-weight: 800; }
.pk-division-parte .tk-staff-box h2 { font-size: .8rem; margin: 0 0 .5rem; font-weight: 800; }
#pkTicketWrap .tk-staff-box form { display: grid; gap: .5rem; }
.pk-division-parte .tk-staff-box form { display: grid; gap: .5rem; }
#pkTicketWrap .tk-staff-box input, .pk-division-parte .tk-staff-box input {
  border: 1px solid var(--t-line); border-radius: 7px; padding: .5rem .6rem; font: inherit; width: 100%; box-sizing: border-box;
}
#pkTicketWrap .tk-staff-box button, .pk-division-parte .tk-staff-box button {
  border: none; background: var(--t-accent); color: #fff; font-weight: 700; border-radius: 8px;
  padding: .6rem; cursor: pointer; font: inherit;
}

/* Dividir cuenta (2026-08-15, propuesta aprobada -- ver
   AUDITORIA.md/artifact de la propuesta). "Dividir cuenta" abre un
   panel colapsado con los dos modos; una vez dividida, la sección de
   cobro normal se sustituye por la lista de partes. */
.pk-dividir-toggle {
  display: inline-block; width: auto; margin-top: 0; border: 1px dashed #bfe3c7;
  background: transparent; color: #2f6b3f; font-weight: 700; font-size: .82rem;
  padding: .5rem .8rem; border-radius: 8px; cursor: pointer; font: inherit; white-space: nowrap;
}
.pk-dividir-toggle:hover { background: #dcfce7; }
/* 2026-08-15 (Eduardo: "se deberia de mostrar, abrir hacia abajo,
   desplegar" -- no un salto seco de [hidden]). Mismo patrón ya usado en
   el resto del panel: [hidden] se quita primero (vuelve al flujo), y la
   clase --show (añadida un frame después) dispara la transición real de
   opacidad + deslizamiento hacia abajo. */
.pk-dividir-panel {
  display: flex; flex-direction: column; gap: 1rem;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
  /* Bug real encontrado verificando en vivo (2026-08-15): el
     scrollIntoView() al desplegar dejaba las 2 cards justo en la franja
     que ocupa la barra fina fija (.pk-footer) -- los toques ahí
     interceptaban el botón de la barra en vez de la card de debajo
     (confirmado con elementFromPoint: BUTTON.pk-footer por encima de la
     card "B"). scroll-margin-bottom hace que el navegador deje ese
     hueco automáticamente al hacer scrollIntoView, sin tocar el JS. */
  scroll-margin-bottom: 140px;
}
.pk-dividir-panel[hidden] { display: none; }
.pk-dividir-panel.pk-dividir-panel--show { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .pk-dividir-panel { transition: none; } }

/* 2 cards para elegir modo (2026-08-15: "que salgan las dos opciones en
   dos cards para escojer, y mas tarde al pulsar en uno de ellos que se
   muestre la opcion escojida"). */
.pk-dividir-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 420px) { .pk-dividir-cards { grid-template-columns: 1fr; } }
.pk-dividir-card {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: .3rem;
  border: 1.5px solid var(--t-line); border-radius: 12px; padding: .9rem 1rem; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pk-dividir-card:hover { border-color: var(--t-accent); background: color-mix(in srgb, var(--t-accent) 6%, transparent); }
.pk-dividir-card-letra {
  width: 26px; height: 26px; border-radius: 50%; background: var(--t-accent); color: #fff;
  font-weight: 800; font-size: .8rem; display: flex; align-items: center; justify-content: center;
}
.pk-dividir-card-tit { font-weight: 800; font-size: .9rem; color: var(--t-text); }
.pk-dividir-card-desc { font-size: .78rem; color: var(--t-muted); line-height: 1.4; }

/* Botón "← Volver" (2026-08-15: "poner boton para volver atras por si
   cambian de opinion los clientes") -- pura navegación de cliente entre
   pasos, nada se envía al servidor hasta el formulario real. */
.pk-dividir-volver {
  all: unset; color: var(--t-accent); font-weight: 700; font-size: .82rem;
  cursor: pointer; margin-bottom: .6rem; display: inline-block;
}
.pk-dividir-volver:hover { text-decoration: underline; }

.pk-dividir-modo-tit { font-weight: 800; font-size: .82rem; margin: 0 0 .5rem; color: var(--t-text); }
.pk-dividir-form { display: flex; flex-direction: column; gap: .5rem; }
.pk-dividir-form label { font-size: .85rem; color: var(--t-text); display: flex; align-items: center; gap: .4rem; }
.pk-dividir-form input[type="number"] {
  width: 3.2rem; border: 1px solid var(--t-line); border-radius: 6px; padding: .3rem .4rem; font: inherit;
}
.pk-dividir-linea {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  font-size: .84rem; padding: .3rem 0; border-bottom: 1px solid var(--t-line);
}
.pk-dividir-linea:last-of-type { border-bottom: none; }
.pk-dividir-linea input {
  width: 4.4rem; border: 1px solid var(--t-line); border-radius: 6px; padding: .3rem .4rem; font: inherit; text-align: center;
}
.pk-dividir-form .pk-cobrar-mesa-btn { align-self: flex-start; }

.pk-division-parte {
  border: 1px solid var(--t-line); border-radius: 10px; padding: .7rem .9rem; margin-top: .6rem;
}
.pk-division-parte--pagada { border-color: #86efac; background: #f0fdf4; }
.pk-division-parte-head {
  display: flex; justify-content: space-between; align-items: center; font-size: .88rem; font-weight: 700; color: var(--t-text);
}
.pk-division-parte-ok { color: #166534; font-weight: 700; font-size: .82rem; margin: .3rem 0 0; }
.pk-division-parte-btns { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.pk-division-cancelar {
  width: 100%; border: 1px solid #fecaca; background: transparent; color: #b91c1c;
  font-size: .8rem; font-weight: 700; padding: .5rem; border-radius: 8px; cursor: pointer; font: inherit;
}
.pk-division-cancelar:hover { background: #fee2e2; }
#pkTicketWrap .tk-card, .pk-division-parte .tk-card { margin-top: .5rem; }

.pk-btn-limpiar-mesa {
  display: block; width: 100%; height: 100%; box-sizing: border-box; margin-top: .9rem; border: none; cursor: pointer;
  background: #1f2937; color: #fff; font-weight: 700; font-size: .82rem;
  padding: .8rem .7rem; border-radius: 10px; font: inherit;
}
.pk-btn-limpiar-mesa:hover { background: #111827; }
/* Dentro de #pkTicketWrap el margen lo da el `gap` del flex, no margin-top. */
#pkTicketWrap .pk-btn-limpiar-mesa { margin-top: 0; }

@media (max-width: 480px) {
  /* 2026-08-22: la rejilla compacta (formato Caja) ya usa un mínimo de
     110px por tarjeta en cualquier ancho -- este override la agrandaba
     de más (115px/52px), pensado para el formato "papeleta" grande
     anterior. Ya no hace falta, se deja la base tal cual en móvil. */
  .pk-footer { flex-wrap: wrap; gap: .6rem; }
  .pk-footer-total { text-align: left; }
}

/* Encargado -- mejoras de distribución aprobadas 2026-08-14 tras
   auditoría con capturas en los 3 anchos (ver AUDITORIA.md). */
.ped-encargado-head { margin-bottom: 1.2rem; }
.ped-encargado-contab-link { color: var(--t-accent); font-weight: 700; text-decoration: none; font-size: .9rem; }
.ped-encargado-contab-link:hover { text-decoration: underline; }
.ped-encargado-desglose { font-size: .8rem; color: var(--t-muted); margin: 0 0 2rem; }

.ped-encargado-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 701px) and (max-width: 1024px) {
  /* Bug real: minmax(160px,1fr) en tablet dejaba una rejilla 3+1 (una
     tarjeta suelta descolgada en su propia fila) -- 2 columnas fijas da
     un 2x2 siempre equilibrado en ese ancho intermedio. */
  .ped-encargado-stats { grid-template-columns: repeat(2, 1fr); }
}
.ped-stat-card {
  background: var(--t-panel); border: 1px solid var(--t-line); border-radius: 12px;
  padding: 1.2rem; text-align: center;
}
.ped-stat-card strong { display: block; font-size: 2rem; font-weight: 900; color: var(--t-accent); }
.ped-stat-card span { font-size: .82rem; color: var(--t-muted); }
/* Color con significado, mismo patrón que ya usa el dashboard del admin
   (verde=dinero/todo en orden, ámbar=necesita atención) -- antes las 8
   tarjetas de este panel eran todas del mismo teal, sin distinguir de un
   vistazo si hacía falta correr o no. */
.ped-stat-card--atencion { border-color: #fcd34d; background: #fffbeb; }
.ped-stat-card--atencion strong { color: #b45309; }
.ped-stat-card--listo { border-color: #86efac; background: #f0fdf4; }
.ped-stat-card--listo strong { color: #16a34a; }
.ped-stat-card--dinero strong { color: #16a34a; }

/* Dos columnas en pantallas anchas: la tabla de pedidos activos ocupa
   2/3, "Mesas sin cobrar" 1/3 como panel lateral -- antes iban apiladas
   a toda altura, mucho scroll para ver el estado completo del bar. */
.ped-encargado-2col { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 1024px) {
  .ped-encargado-2col { grid-template-columns: 1fr; }
}
.ped-encargado-2col-lateral .ped-cobrar-lista { margin-bottom: 0; }

.ped-encargado-tabla { background: var(--t-panel); border: 1px solid var(--t-line); border-radius: 12px; overflow: hidden; }
.ped-encargado-fila {
  display: grid; grid-template-columns: 1.2fr 2fr 1fr 1fr .8fr;
  gap: .5rem; padding: .8rem 1.2rem; font-size: .88rem;
  border-bottom: 1px solid var(--t-line);
}
.ped-encargado-fila:last-child { border-bottom: none; }
.ped-encargado-fila--head { font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; color: var(--t-muted); background: var(--t-bg); }
/* App `simulador` (2026-08-16): misma idea que .ped-comanda--simulado de
   más arriba, aplicada a la tabla del encargado y a "mesas sin cobrar". */
.ped-encargado-fila--simulado { background: #faf5ff; }
.ped-estado-badge { display: inline-block; padding: .15rem .6rem; border-radius: 12px; font-size: .76rem; font-weight: 700; }
.ped-estado-badge--pendiente { background: #fef3c7; color: #92400e; }
.ped-estado-badge--en_preparacion { background: #dbeafe; color: #1e40af; }
.ped-estado-badge--listo { background: #dcfce7; color: #166534; }
.ped-estado-badge--entregado { background: #e2e8f0; color: #334155; }
.ped-estado-badge--cancelado { background: #fee2e2; color: #991b1b; }

@media (max-width: 700px) {
  /* Bug real: 5 columnas apretadas en móvil partían las cabeceras en 3
     líneas ilegibles -- cada fila pasa a tarjeta apilada, con el nombre
     de columna como etiqueta (mismo patrón "responsive table" clásico,
     data-label + ::before, sin duplicar el HTML por JS). */
  .ped-encargado-fila {
    display: flex; flex-direction: column; gap: .35rem;
    padding: .9rem 1rem;
  }
  .ped-encargado-fila span { display: flex; justify-content: space-between; gap: .8rem; font-size: .85rem; }
  .ped-encargado-fila span::before {
    content: attr(data-label); font-weight: 700; text-transform: uppercase;
    font-size: .68rem; letter-spacing: .03em; color: var(--t-muted); flex-shrink: 0;
  }
  /* Bug real encontrado al verificar esta misma mejora con captura: esta
     regla iba ANTES de ".ped-encargado-fila { display:flex }" -- como la
     cabecera tiene AMBAS clases (fila Y fila--head), la de abajo ganaba
     por orden de aparición (misma especificidad) y el "display:none" no
     llegaba a aplicarse nunca, dejando la cabecera vacía flotando encima
     de cada tarjeta. Va después, no antes. */
  .ped-encargado-fila--head { display: none; }
}

/* Mesas sin cobrar */
.ped-cobrar-lista { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 2rem; }
.ped-cobrar-fila {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--t-panel); border: 1px solid var(--t-line); border-radius: 12px;
  padding: .9rem 1.2rem; transition: opacity .3s;
}
.ped-cobrar-mesa { font-weight: 800; color: var(--t-text); }
.ped-cobrar-mesa em { font-style: normal; font-weight: 600; color: var(--t-muted); font-size: .8rem; margin-left: .3rem; }
.ped-cobrar-total { font-weight: 900; font-size: 1.15rem; color: var(--t-accent); margin-left: auto; }
.ped-cobrar-btns { display: flex; gap: .5rem; }
.ped-cobrar-btn {
  border: 1.5px solid var(--t-line); background: var(--t-bg); color: var(--t-text);
  border-radius: 8px; padding: .5rem .9rem; font-weight: 700; font-size: .82rem;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.ped-cobrar-btn:hover { border-color: var(--t-accent); background: #fff; }
.ped-cobrar-btn:disabled { opacity: .5; cursor: default; }

/* ── Resumen de ventas (propuesta 1 aprobada 2026-08-16: "Resumen diario")
   Sustituye a la tabla plana de admin.Pedido como destino de "Historial de
   pedidos" en el dashboard -- una tendencia de ingresos en vez de filas
   sueltas. La geometría del SVG (line_path, area_path, x/y de cada punto)
   se calcula en Python (ver pedidos_qr.views.resumen_ventas), no aquí. */
.ped-ventas-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 1.4rem; }
.ped-ventas-pill {
  font-size: .78rem; font-weight: 700; padding: 7px 14px; border-radius: 20px;
  border: 1px solid var(--t-line); background: var(--t-panel); color: var(--t-muted);
  text-decoration: none !important;
}
.ped-ventas-pill.is-active { background: var(--t-accent); border-color: var(--t-accent); color: #fff !important; }
.ped-ventas-tabla-link { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--t-accent) !important; text-decoration: none !important; }
.ped-ventas-tabla-link:hover { text-decoration: underline !important; }

.ped-ventas-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.6rem; }
.ped-ventas-stat { padding: 0 1rem 0 0; border-right: 1px solid var(--t-line); }
.ped-ventas-stat:last-child { border-right: none; }
.ped-ventas-stat .lb { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--t-muted); margin-bottom: 4px; }
.ped-ventas-stat .v { font-size: 1.5rem; font-weight: 800; color: var(--t-text); font-variant-numeric: tabular-nums; }
.ped-ventas-stat .v--money { color: #16a34a; }
.ped-ventas-stat .d { font-size: .78rem; color: var(--t-muted); margin-top: 2px; }
.ped-ventas-stat .d--up { color: #16a34a; font-weight: 700; }
.ped-ventas-stat .d--down { color: #b91c1c; font-weight: 700; }

.ped-ventas-card { background: var(--t-panel); border: 1px solid var(--t-line); border-radius: 14px; padding: 1.2rem 1.3rem 1.4rem; }
.ped-ventas-chart-title { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--t-muted); margin: 0 0 .6rem; }
.ped-ventas-svg text { font-family: inherit; }
.ped-ventas-grid { stroke: var(--t-line); stroke-width: 1; stroke-dasharray: 2 3; }
.ped-ventas-line { fill: none; stroke: #16a34a; stroke-width: 2; stroke-linecap: round; }
.ped-ventas-area { fill: url(#pedVentasAreaGrad); }
.ped-ventas-dot { fill: #16a34a; stroke: var(--t-panel); stroke-width: 2; }
.ped-ventas-bar { fill: #16a34a; opacity: .85; }
.ped-ventas-bar:hover { opacity: 1; }
.ped-ventas-cat-label { font-size: 11px; fill: var(--t-muted); }
.ped-ventas-value-label { font-size: 11px; font-weight: 700; fill: var(--t-text); }
.ped-ventas-point-link { cursor: pointer; }
.ped-ventas-point-link:hover .ped-ventas-dot { r: 6; }

/* ── Desgloses (2026-08-16: zona / método de pago / platos / franja) ── */
.ped-ventas-desgloses { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1rem; margin-top: 1rem; }
@media (max-width: 900px) { .ped-ventas-desgloses { grid-template-columns: 1fr; } }
.ped-ventas-donut-wrap { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.ped-ventas-legend { display: flex; flex-direction: column; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--t-text); }
.ped-ventas-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.ped-ventas-legend .muted { color: var(--t-muted); font-weight: 400; }
.ped-ventas-empty { color: var(--t-muted); font-size: .85rem; padding: 1rem 0; text-align: center; }

.ped-ventas-hbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ped-ventas-hbar-row:last-child { margin-bottom: 0; }
.ped-ventas-hbar-label { width: 108px; flex-shrink: 0; font-size: .8rem; color: var(--t-muted); }
.ped-ventas-hbar-track { flex: 1; height: 14px; background: var(--t-bg); border-radius: 4px; overflow: hidden; }
.ped-ventas-hbar-fill { height: 100%; background: #16a34a; border-radius: 4px; }
.ped-ventas-hbar-value { width: 84px; flex-shrink: 0; text-align: right; font-size: .82rem; font-weight: 700; color: var(--t-text); font-variant-numeric: tabular-nums; }
.ped-ventas-hbar-sub { font-size: .72rem; color: var(--t-muted); font-weight: 400; }

/* ── Detalle de un día (click en el gráfico de tendencia) ── */
.ped-ventas-detalle { margin-top: 1rem; }
.ped-ventas-detalle-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.ped-ventas-detalle-head h3 { margin: 0; font-size: 1rem; color: var(--t-text); }
.ped-ventas-detalle-cerrar { font-size: .82rem; font-weight: 700; color: var(--t-muted); text-decoration: none !important; }
.ped-ventas-detalle-cerrar:hover { color: var(--t-text); }
.ped-ventas-detalle-fila {
  display: flex; align-items: center; gap: 12px; padding: .6rem .2rem; border-bottom: 1px solid var(--t-line);
  font-size: .85rem; flex-wrap: wrap;
}
.ped-ventas-detalle-fila:last-child { border-bottom: none; }
.ped-ventas-detalle-mesa { font-weight: 700; width: 100px; flex-shrink: 0; }
.ped-ventas-detalle-hora { color: var(--t-muted); width: 56px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.ped-ventas-detalle-metodo { color: var(--t-muted); font-size: .78rem; }
.ped-ventas-detalle-total { margin-left: auto; font-weight: 800; color: var(--t-text); font-variant-numeric: tabular-nums; }

/* 2026-08-22 (Eduardo: "paginacion 10items ese listado y todos los que
   puedas encontrar en el sitio"). Paginador compartido, ver
   templates/pedidos_qr/_paginacion.html -- mismo diseño mínimo en
   cualquier vista que lo incluya. */
.pg-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--t-line); }
.pg-btn { color: var(--t-accent); font-weight: 700; font-size: .85rem; text-decoration: none; }
.pg-btn:hover { text-decoration: underline; }
.pg-btn--disabled { color: var(--t-muted, #9ca3af); pointer-events: none; }
.pg-info { font-size: .8rem; color: var(--t-muted, #6b7280); }

/* ── Selector de opciones al pedir (2026-08-23, Eduardo: "café solo/con
   leche/sin lactosa... eso debería ser una opción más a ofrecer en ese
   comandero") -- modal ligero, mismo lenguaje visual que el resto del
   panel (radio/checkbox de toda la vida, sin reinventar el widget). ── */
.pk-opciones-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5);
  z-index: 600; align-items: center; justify-content: center; padding: 1rem;
}
.pk-opciones-backdrop.is-open { display: flex; }
.pk-opciones-modal {
  background: #fff; border-radius: 16px; padding: 1.2rem; width: 100%; max-width: 400px;
  max-height: 85vh; overflow-y: auto;
}
.pk-opciones-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem; font-weight: 800; font-size: 1.05rem; color: var(--t-text);
}
.pk-opciones-cerrar {
  border: none; background: #f1f5f9; color: var(--t-muted); width: 30px; height: 30px;
  border-radius: 999px; cursor: pointer; font-size: .9rem;
}
.pk-opciones-grupo { margin-bottom: 1.1rem; }
.pk-opciones-grupo-tit { font-weight: 700; font-size: .86rem; color: var(--t-text); margin-bottom: .5rem; }
.pk-opciones-grupo-tit em { color: var(--t-muted); font-style: italic; font-weight: 500; font-size: .78rem; }
.pk-opcion-fila {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .3rem; cursor: pointer;
  font-size: .9rem; color: var(--t-text); border-bottom: 1px dashed var(--t-line);
}
.pk-opcion-fila:last-child { border-bottom: none; }
.pk-opcion-fila input { flex: none; width: 18px; height: 18px; accent-color: var(--t-accent); }
.pk-opciones-error {
  background: #fef2f2; color: #dc2626; border-radius: 8px; padding: .6rem .8rem;
  font-size: .82rem; margin-bottom: .8rem;
}
.pk-opciones-anadir {
  width: 100%; background: var(--t-accent); color: #fff; border: none; border-radius: 10px;
  padding: .8rem; font-weight: 700; font-size: .95rem; cursor: pointer;
}
.pk-opciones-anadir:hover { opacity: .92; }
.pk-linea-opciones { font-style: italic; color: var(--t-muted); font-size: .82rem; font-weight: 400; }

/* 2026-08-23 (Eduardo: "dashboard de qué se vende más / qué deja más
   margen... unificarse en un solo panel de un vistazo") -- pastilla de
   margen junto a cada plato en "Platos más vendidos" (resumen_ventas.html).
   Mismos 3 tramos de color que ya usa la matriz de rentabilidad de Carta. */
.ped-ventas-margen-pill {
  display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 700;
  padding: 1px 7px; border-radius: 999px; vertical-align: middle;
}
.ped-ventas-margen-pill--alto { background: #e5f5ea; color: #166534; }
.ped-ventas-margen-pill--medio { background: #fef3c7; color: #92400e; }
.ped-ventas-margen-pill--bajo { background: #fee2e2; color: #991b1b; }