/* ============================================================
   PANEL DEL LOCAL — estilos
   ------------------------------------------------------------
   Pensado para una pantalla vista de pie y a distancia: tipografía
   grande, contraste alto, botones que se aciertan sin mirar.
   Fondo oscuro porque la pantalla queda encendida todo el turno.
   ============================================================ */

:root {
  --fondo:        #14110f;
  --superficie:   #1e1a17;
  --superficie-2: #272220;
  --borde:        #3a3330;
  --texto:        #f0ebe6;
  --texto-suave:  #a39a92;
  --acento:       #e05c24;
  --ok:           #3d9970;
  --alerta:       #d9534f;
  --aviso:        #d4a017;
  --radio:        10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.oculto { display: none !important; }


/* ---------- Acceso ---------- */

.login-pantalla {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-caja {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 40px;
  width: 100%;
  max-width: 380px;
}

.login-caja h1 { font-size: 28px; letter-spacing: 1px; }
.login-sub { color: var(--texto-suave); margin-bottom: 28px; font-size: 14px; }

.login-caja label {
  display: block;
  font-size: 13px;
  color: var(--texto-suave);
  margin: 16px 0 6px;
}

.login-caja input {
  width: 100%;
  padding: 13px 14px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  font-size: 16px;
}

.login-caja input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

.login-caja button {
  width: 100%;
  margin-top: 26px;
  padding: 14px;
  background: var(--acento);
  color: #14110f;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.login-caja button:disabled { opacity: 0.6; cursor: wait; }
.login-error { color: var(--alerta); font-size: 14px; margin-top: 14px; min-height: 20px; }


/* ---------- Aviso de sonido ---------- */

.aviso-sonido {
  background: var(--aviso);
  color: #14110f;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
  cursor: pointer;
  position: sticky;
  top: 0;
  z-index: 100;
}

.aviso-sonido button {
  background: #14110f;
  color: var(--aviso);
  border: none;
  padding: 9px 18px;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}


/* ---------- Cabecera ---------- */

.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.cabecera-izq { font-size: 17px; }
.sep { color: var(--texto-suave); margin: 0 8px; }
.cabecera-der { display: flex; align-items: center; gap: 18px; }

.indicador { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--texto-suave); }
.indicador .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.indicador.caida .punto { background: var(--alerta); animation: latir 1s infinite; }
.indicador.caida { color: var(--alerta); }

@keyframes latir { 50% { opacity: 0.25; } }

.reloj { font-variant-numeric: tabular-nums; font-size: 17px; }

.btn-texto {
  background: none;
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  padding: 7px 13px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.btn-texto:hover { color: var(--texto); border-color: var(--texto-suave); }


/* ---------- Pestañas ---------- */

.pestanas {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}

.pestana {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--texto-suave);
  padding: 13px 18px;
  font-size: 15px;
  cursor: pointer;
}

.pestana.activa { color: var(--acento); border-bottom-color: var(--acento); }
.resumen-dia { margin-left: auto; color: var(--texto-suave); font-size: 14px; }


/* ---------- Vistas ---------- */

.vista { padding: 20px; }

.columnas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 1000px) { .columnas { grid-template-columns: 1fr; } }

.columna h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--texto-suave);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.cuenta {
  background: var(--superficie-2);
  border-radius: 11px;
  padding: 1px 9px;
  font-size: 13px;
  color: var(--texto);
}

.lista-pedidos { display: flex; flex-direction: column; gap: 14px; }


/* ---------- Tarjeta de pedido ---------- */

.pedido {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 4px solid var(--acento);
  border-radius: var(--radio);
  padding: 16px;
}

.pedido.urgente {
  border-left-color: var(--alerta);
  box-shadow: 0 0 0 1px rgba(217, 83, 79, 0.3);
}

.pedido header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.codigo { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 17px; color: var(--acento); }
.tiempo { font-size: 13px; color: var(--texto-suave); }
.tiempo.alerta { color: var(--alerta); font-weight: 700; }

.cliente { margin-bottom: 8px; }
.cliente strong { display: block; font-size: 17px; }
.cliente a { color: var(--texto-suave); font-size: 14px; text-decoration: none; }

.entrega { font-size: 14px; color: var(--texto-suave); margin-bottom: 12px; }
.entrega.despacho { color: var(--aviso); }

.items { list-style: none; margin-bottom: 12px; }
.items li { padding: 4px 0; border-bottom: 1px solid var(--superficie-2); font-size: 16px; }
.items li:last-child { border-bottom: none; }
.cant { color: var(--acento); font-weight: 700; margin-right: 6px; }

/* Los extras van resaltados: es lo que más se olvida preparar. */
.items li.item-extra {
  font-size: 14px;
  color: var(--aviso);
  font-weight: 600;
  padding: 2px 0 4px 18px;
  border-bottom: none;
}

.nota-pedido {
  background: var(--superficie-2);
  padding: 9px 11px;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 12px;
}

.pedido footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 11px;
  border-top: 1px solid var(--borde);
  margin-bottom: 12px;
}

.total { font-size: 19px; font-weight: 700; }

.etiqueta { font-size: 12px; padding: 3px 9px; border-radius: 11px; }
.etiqueta.pagado    { background: rgba(61, 153, 112, 0.2); color: var(--ok); }
.etiqueta.esperando { background: rgba(212, 160, 23, 0.2); color: var(--aviso); }
.etiqueta.local     { background: var(--superficie-2); color: var(--texto-suave); }
.etiqueta.reembolsado { background: rgba(176, 58, 46, 0.2); color: var(--alerta); }
.etiqueta.agotado   { background: rgba(217, 83, 79, 0.2); color: var(--alerta); }

.acciones { display: flex; gap: 8px; flex-wrap: wrap; }

.accion {
  flex: 1;
  min-width: 110px;
  padding: 12px;
  border: none;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: var(--superficie-2);
  color: var(--texto);
}

.accion:disabled { opacity: 0.5; cursor: wait; }
.accion.preparar  { background: var(--acento); color: #14110f; }
.accion.listo     { background: var(--ok); color: #fff; }
.accion.entregar  { background: var(--ok); color: #fff; }
.accion.verificar { background: var(--aviso); color: #14110f; }
.accion.anular    { flex: 0 0 auto; min-width: 0; background: none; color: var(--texto-suave); border: 1px solid var(--borde); }
.accion.anular:hover { color: var(--alerta); border-color: var(--alerta); }

/* Reembolsar mueve dinero hacia afuera. Va discreto a propósito: no
   debe competir visualmente con "Empezar a preparar", que es lo que
   el barista aprieta cien veces al día. */
.accion.reembolsar { flex: 0 0 auto; min-width: 0; background: none; color: var(--texto-suave); border: 1px dashed var(--alerta); }
.accion.reembolsar:hover { color: var(--alerta); border-style: solid; }


/* ---------- Tablas ---------- */

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabla th {
  text-align: left;
  padding: 11px;
  border-bottom: 2px solid var(--borde);
  color: var(--texto-suave);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.tabla td { padding: 11px; border-bottom: 1px solid var(--superficie-2); vertical-align: top; }
.tabla tr.agotado { opacity: 0.5; }
.mono { font-family: ui-monospace, Menlo, monospace; color: var(--acento); }
.chico { font-size: 12px; color: var(--texto-suave); }
.der { text-align: right; }

.precio-input {
  width: 100px;
  padding: 7px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 5px;
  color: var(--texto);
  text-align: right;
  font-size: 14px;
}

.barra-filtros { display: flex; gap: 11px; margin-bottom: 18px; }

.barra-filtros select,
.btn-secundario {
  padding: 9px 15px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 6px;
  color: var(--texto);
  font-size: 14px;
  cursor: pointer;
}

.btn-secundario:hover { border-color: var(--acento); }
.btn-secundario:disabled { opacity: 0.5; cursor: wait; }


/* ---------- Sistema ---------- */

.tarjetas-sistema {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
}

.tarjeta.ok  { border-left: 4px solid var(--ok); }
.tarjeta.mal { border-left: 4px solid var(--alerta); }
.tarjeta-valor { display: block; font-size: 26px; font-weight: 700; margin-bottom: 5px; }
.tarjeta-etiqueta { font-size: 12px; color: var(--texto-suave); }

.acciones-sistema { display: flex; gap: 11px; margin-bottom: 18px; flex-wrap: wrap; }

/* ---------- INFORME DIARIO ----------
   Ocupa el ancho completo a propósito. La primera versión reusaba
   .tarjetas-sistema, que es una grilla de columnas de 210px pensada
   para tarjetas de estado: el informe entero quedaba embutido en una
   sola columna angosta con el resto de la pantalla en blanco. */

.informe {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 22px;
  margin-bottom: 22px;
}

.informe-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.informe-cabecera h2 { margin: 0; font-size: 18px; }

/* Fila de cifras grandes. auto-fit (no auto-fill) para que con pocas
   cifras se repartan el ancho en vez de amontonarse a la izquierda. */
.informe-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.informe-cifra {
  background: var(--superficie-2);
  border-radius: var(--radio);
  padding: 14px 16px;
}
.informe-cifra .valor { display: block; font-size: 24px; font-weight: 700; }
.informe-cifra .etiqueta {
  font-size: 12px;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.informe-cifra .sube { color: var(--ok); }
.informe-cifra .baja { color: var(--alerta); }

.informe-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  align-items: start;
}
@media (max-width: 720px) { .informe-columnas { grid-template-columns: 1fr; } }

.informe-bloque h4 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--texto-suave);
}
.informe-lista { list-style: none; margin: 0; padding: 0; }
.informe-lista li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--superficie-2);
  font-size: 14px;
}
.informe-lista li:last-child { border-bottom: none; }
.informe-lista .cifra { color: var(--texto-suave); white-space: nowrap; }

.informe-alerta {
  border-left: 4px solid var(--aviso);
  background: var(--superficie-2);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 12px 16px;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.5;
}

/* El mensaje tal como sale a Telegram, plegado. Sirve para verificar
   que el formato real llega bien: si se maquillara solo la versión
   del panel, nadie notaría que el mensaje quedó feo en el teléfono. */
.informe-crudo { margin-top: 18px; }
.informe-crudo summary {
  cursor: pointer;
  font-size: 13px;
  color: var(--texto-suave);
}
.informe-crudo pre {
  margin-top: 12px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  white-space: pre-wrap;
  color: var(--texto-suave);
}

/* ---------- COBERTURA ---------- */

.cobertura {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 22px;
  margin-bottom: 22px;
}
.cobertura h3 { margin: 0 0 14px; font-size: 16px; }
.cobertura .nota { margin-top: 14px; }

/* Barra de avance por mes: el número solo no deja ver la tendencia,
   y la tendencia es justamente el dato — la cobertura subió de 0% a
   59% entre mayo y agosto. */
.barra {
  position: relative;
  background: var(--superficie-2);
  border-radius: 4px;
  height: 18px;
  min-width: 90px;
}
.barra span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--acento);
}
.barra.buena span { background: var(--ok); }

.salida {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  white-space: pre-wrap;
  min-height: 60px;
  color: var(--texto-suave);
}


/* ---------- Pedidos que entraron con el local cerrado ----------

   Franja fija, no notificación. Una notificación a las 3 de la
   mañana no la ve nadie; esto tiene que seguir ahí cuando alguien
   encienda la pantalla a las 8. Se va sola cuando el pedido pasa a
   "en preparación".                                               */

.franja-fuera-horario {
  background: #3a2a12;
  border: 1px solid #6b4c1f;
  border-left: 4px solid #e0a524;
  border-radius: 10px;
  color: #f5d9a8;
  padding: 14px 18px;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.5;
}

/* Misma forma que la franja de reposición y distinto color: esta
   no es una carencia, es trabajo disponible. Los valores van
   literales como en su hermana de arriba — son tonos de franja,
   no tokens del panel; los únicos nombres de variable válidos en
   este archivo son los del :root de las primeras 20 líneas. */
/* La caja del café del día. Usa los tokens del :root de este
   archivo —los únicos nombres válidos acá— y no un color propio:
   no es una alerta, es un estado permanente de la jornada, así que
   se ve como parte del panel y no como algo que hay que atender.
   Ver ama-cafe-panel-estilos: nunca inventar var(--x, respaldo). */
/* La receta del blend en la tarjeta del pedido. Se separa del
   nombre con color y con la balanza porque es una INSTRUCCIÓN de
   trabajo, no un detalle del producto: es lo que hay que pesar.
   Tokens del :root de este archivo, nunca inventados. */
.item-blend {
  color: var(--acento);
  font-size: 13px;
  padding-left: 14px;
  list-style: none;
}

.item-blend strong { color: var(--texto); }

.cafe-dia {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 18px;
  margin-bottom: 18px;
}

.cafe-dia-titulo h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.cafe-dia-titulo p { margin-bottom: 10px; }
.cafe-dia-titulo strong { font-size: 18px; }

/* Esta sí es una alerta: se acabó el grano que se está sirviendo. */
.cafe-dia-alerta { color: var(--alerta); }

.cafe-dia select {
  background: var(--superficie-2);
  color: var(--texto);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 15px;
  min-width: 280px;
}

.franja-envasar {
  background: #16281f;
  border: 1px solid #2c5240;
  border-left: 4px solid var(--ok);
  border-radius: 10px;
  color: #bfe3d0;
  padding: 14px 18px;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.5;
}

.lista-fuera-horario {
  margin: 10px 0 0;
  padding-left: 18px;
}

.lista-fuera-horario li { padding: 2px 0; }

/* ---------- Interruptor de venta fuera de horario ---------- */

.interruptor {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--texto-suave);
  user-select: none;
}

.interruptor input { cursor: pointer; }
.interruptor input:checked + span { color: var(--texto); font-weight: 600; }
.interruptor input:disabled { cursor: wait; }

/* ---------- Varios ---------- */

.vacio { text-align: center; color: var(--texto-suave); padding: 50px 20px; }
.nota { color: var(--texto-suave); font-size: 14px; margin-bottom: 16px; }

.avisos {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  z-index: 200;
  max-width: 380px;
}

.aviso {
  background: var(--superficie-2);
  border-left: 4px solid var(--acento);
  padding: 13px 17px;
  border-radius: 7px;
  font-size: 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
  animation: entrar 0.22s ease;
}

.aviso-nuevo { border-left-color: var(--acento); font-weight: 600; }
.aviso-ok    { border-left-color: var(--ok); }
.aviso-error { border-left-color: var(--alerta); }
.aviso.saliendo { opacity: 0; transform: translateX(24px); transition: 0.55s; }

@keyframes entrar {
  from { opacity: 0; transform: translateX(24px); }
}

.estado-entregado      { color: var(--ok); }
.estado-anulado        { color: var(--alerta); }
.estado-pendiente_pago { color: var(--aviso); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ============================================================
   ASISTENTE DE VENTAS
   ------------------------------------------------------------
   Burbuja abajo a la derecha. Dos restricciones que vienen del
   resto del panel y que conviene no perder de vista:

   - La pantalla del local está encendida todo el turno mostrando
     PEDIDOS. El asistente no puede taparlos ni robarse la
     atención: por eso una burbuja chica y no un panel fijo, y
     por eso el z-index queda por DEBAJO de los avisos de pedido
     nuevo (200). Un pedido que entra siempre gana.
   - Se toca de pie y a distancia. 56 px de burbuja es el mínimo
     que se acierta sin mirar.
   ============================================================ */

.agente-boton {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--acento);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agente-boton:hover { filter: brightness(1.1); }
.agente-boton:focus-visible { outline: 3px solid var(--texto); outline-offset: 2px; }

.agente-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 400px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 44px);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  z-index: 150;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.agente-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--borde);
  background: var(--superficie-2);
}

.agente-sub {
  display: block;
  font-size: 12px;
  color: var(--texto-suave);
}

.agente-mensajes {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.agente-msg {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.agente-msg-usuario {
  align-self: flex-end;
  background: var(--acento);
  color: #fff;
  border-bottom-right-radius: 3px;
}

.agente-msg-agente {
  align-self: flex-start;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-bottom-left-radius: 3px;
}

/* Un fallo se ve distinto de una respuesta. Si un error de red
   se pinta igual que una respuesta normal, el barista lo lee
   como si fuera un dato. */
.agente-msg-error {
  align-self: flex-start;
  background: rgba(217, 83, 79, 0.12);
  border: 1px solid var(--alerta);
  color: var(--texto);
  border-bottom-left-radius: 3px;
}

/* Qué herramientas usó. Chico y gris a propósito: no es para
   leerlo siempre, es para poder auditar de dónde salió una cifra
   cuando algo huele raro. */
.agente-fuente {
  align-self: flex-start;
  font-size: 11px;
  color: var(--texto-suave);
  margin-top: -6px;
  padding-left: 4px;
}

.agente-pensando { align-self: flex-start; color: var(--texto-suave); font-size: 13px; }
.agente-pensando::after {
  content: '…';
  animation: agentePuntos 1.2s steps(4, end) infinite;
}
@keyframes agentePuntos { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '…'; } }

.agente-sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 10px;
}

.agente-sugerencias button {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  color: var(--texto-suave);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  cursor: pointer;
  font-family: inherit;
}

.agente-sugerencias button:hover { color: var(--texto); border-color: var(--acento); }

.agente-entrada {
  display: flex;
  gap: 8px;
  padding: 11px 14px;
  border-top: 1px solid var(--borde);
}

.agente-entrada input {
  flex: 1;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
}

.agente-entrada input:focus { outline: none; border-color: var(--acento); }

.agente-entrada button {
  background: var(--acento);
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 46px;
  font-size: 17px;
  cursor: pointer;
}

.agente-entrada button:disabled { opacity: 0.45; cursor: default; }

.agente-pie {
  font-size: 11px;
  color: var(--texto-suave);
  padding: 0 14px 11px;
  line-height: 1.4;
}

/* En el teléfono ocupa la pantalla: 400 px fijos en una pantalla
   de 360 se sale por el costado. */
@media (max-width: 520px) {
  .agente-panel {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    height: calc(100vh - 16px);
  }
}

/* ---------- Inventario ---------- */

.stock-num { font-size: 18px; font-weight: 700; }

/* Un producto sin contar no está agotado: nadie ha mirado la
   estantería todavía. Se atenúa en vez de marcarse en rojo para
   que no se lea como un problema. */
tr.sin-contar { opacity: 0.7; }

.modal-inv {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--fondo-panel, #171717);
  border: 1px solid var(--borde);
  border-radius: 12px;
  z-index: 120;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.inv-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--borde);
  position: sticky;
  top: 0;
  background: inherit;
}

.inv-cabecera h4, .inv-cabecera h3 { font-size: 18px; font-weight: 700; }
.inv-cuerpo { padding: 20px 22px 26px; }

.inv-acciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.inv-bloque {
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 14px 16px;
}

.inv-bloque h4 { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.inv-bloque p { margin-bottom: 10px; }

/* El bloque de envasar se distingue del resto de la ficha: no es
   una corrección del stock como las otras tres, es una conversión
   —grano que se transforma en bolsas— y toca DOS productos a la
   vez. Que se vea distinto es parte de que no se confunda con
   "sumar bolsas". */
.inv-envasar {
  border-color: var(--ok);
  background: var(--superficie-2);
}

.inv-envasar h4 { color: var(--ok); }

/* El aviso de que solo se anotan las bolsas de estantería. Va en
   el color de alerta suave porque equivocarse acá descuenta el
   saco dos veces, que es el error que rompe el número. */
.inv-aviso {
  color: var(--aviso);
  margin-top: 10px;
  margin-bottom: 0;
}

/* El aviso de que los blends no descuentan. Va en el color de
   aviso, no en el de alerta: no hay nada roto que arreglar, hay
   algo que saber antes de interpretar un número. */
.inv-aviso-blend {
  border-color: var(--aviso);
}

.inv-aviso-blend h4 { color: var(--aviso); }
.inv-aviso-blend p:last-child { margin-bottom: 0; }

/* Campos grandes: esto se usa de pie, con una mano, mirando una
   estantería. Un input de 28 px de alto no se acierta así. */
.inv-fila {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.inv-fila input {
  flex: 1 1 90px;
  min-width: 80px;
  padding: 11px 12px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
}

.inv-costo {
  margin-top: 8px;
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
}


/* ============================================================
   PRODUCTO NUEVO, BUSCADORES Y RETIRADOS
   ------------------------------------------------------------
   ERROR QUE SE CORRIGIÓ EL 25 DE AGOSTO DE 2026 Y CONVIENE NO
   REPETIR: la primera versión de este bloque usaba
   `var(--linea, #ddd)` y `var(--fondo-suave, #fafafa)`. Esas
   variables NO EXISTEN en este archivo — se inventaron sin mirar
   el :root de arriba— así que se aplicaba el valor de respaldo y
   quedaba un panel casi blanco con el texto casi blanco encima
   (`--texto` es #f0ebe6). Ilegible.

   El panel es OSCURO. Los únicos nombres válidos son los del
   :root: --fondo, --superficie, --superficie-2, --borde, --texto,
   --texto-suave, --acento, --ok, --alerta, --aviso, --radio.
   Nunca inventar uno nuevo con valor de respaldo: el respaldo
   esconde el error en vez de mostrarlo.
   ============================================================ */

/* ---------- Botón principal ---------- */

/* `.btn-secundario` es del color de la superficie y con 83 filas
   alrededor no se lee como botón. La acción que ABRE algo lleva el
   acento; las que solo cambian un estado siguen siendo
   secundarias. Uno por pantalla, o dejan de destacar. */
.btn-principal {
  padding: 10px 18px;
  background: var(--acento);
  border: 1px solid var(--acento);
  border-radius: 6px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.btn-principal:hover  { filter: brightness(1.12); }
.btn-principal:disabled { opacity: 0.5; cursor: wait; }


/* ---------- Buscador de listas ---------- */

.buscador { margin: 12px 0; position: relative; max-width: 30rem; }

/* La lupa es un fondo SVG y no un carácter suelto: un emoji cambia
   de forma en cada sistema y en Windows sale de otro color. */
.buscador input[type="search"] {
  width: 100%;
  padding: 10px 12px 10px 38px;
  font: inherit;
  color: var(--texto);
  background-color: var(--superficie-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a39a92' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 11px center;
  background-size: 17px 17px;
  border: 1px solid var(--borde);
  border-radius: 6px;
}

.buscador input[type="search"]::placeholder { color: var(--texto-suave); }
.buscador input[type="search"]:focus {
  outline: none;
  border-color: var(--acento);
}


/* ---------- Formulario de producto nuevo ---------- */

.nuevo-producto {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px 20px;
  margin: 0 0 20px;
  color: var(--texto);
}

.nuevo-producto h3 { font-size: 18px; margin-bottom: 6px; }
.nuevo-producto .chico { color: var(--texto-suave); }

.nuevo-busqueda input[type="search"] {
  width: 100%;
  max-width: 30rem;
  padding: 10px 12px;
  font: inherit;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 6px;
}

.nuevo-busqueda input[type="search"]::placeholder { color: var(--texto-suave); }

/* Con 274 filas y sin tope, el formulario queda debajo del pliegue
   y nadie lo encuentra. */
.nuevo-resultados {
  max-height: 15rem;
  overflow-y: auto;
  margin: 10px 0 0;
  max-width: 30rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--superficie-2);
}

.nuevo-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--borde);
  background: transparent;
  color: var(--texto);
  font: inherit;
  cursor: pointer;
}

.nuevo-item:last-child { border-bottom: 0; }
.nuevo-item:hover { background: rgba(224, 92, 36, 0.14); }
.nuevo-item-nombre { display: block; font-weight: 600; }
.nuevo-item .chico { color: var(--texto-suave); font-size: 13px; }

/* Un ítem ya tomado se muestra apagado, no se esconde: quien no lo
   ve concluye que no está en SumUp y lo crea suelto. */
.nuevo-item.bloqueado { opacity: 0.45; cursor: not-allowed; }
.nuevo-item.bloqueado:hover { background: transparent; }

.nuevo-campos { margin-top: 14px; }

.nuevo-campos label {
  display: block;
  margin: 12px 0;
  color: var(--texto-suave);
  font-size: 14px;
}

.nuevo-campos label input[type="text"],
.nuevo-campos label input[type="number"],
.nuevo-campos label select {
  display: block;
  width: 100%;
  max-width: 26rem;
  margin-top: 5px;
  padding: 9px 12px;
  font: inherit;
  color: var(--texto);
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: 6px;
}

.nuevo-campos label input:focus,
.nuevo-campos label select:focus { outline: none; border-color: var(--acento); }

/* El interruptor de "solo web" hereda el color suave de los
   formularios y ahí no se lee: es una decisión, no una etiqueta. */
.nuevo-producto > .interruptor { color: var(--texto); margin: 10px 0; display: block; }


/* ---------- Fuera de la carta ---------- */

/* Un producto retirado se queda EN SU LUGAR de la lista, atenuado
   y con su etiqueta. Igor pidió que no se mueva a otra sección: si
   hay que buscarlo en otra parte para devolverlo, la acción deja
   de ser reversible en la práctica. */
tr.retirado > td { opacity: 0.65; }
tr.retirado > td:first-child { opacity: 1; }
tr.retirado .etiqueta.fuera { background: var(--superficie-2); color: var(--texto-suave); }

/* Un margen negativo se vende bajo el costo. No puede pasar
   desapercibido entre nueve columnas de números grises. */
.margen-malo { color: var(--alerta); font-weight: 700; }