/* UI de campo (docs/13): tema claro para sol directo, targets grandes (48–64 dp),
   cifras grandes, estados con color + texto + icono. */
:root {
  --verde: #2e5b34; --verde2: #3d7a45;
  --rojo: #c62828; --ambar: #ef8f00; --ok: #2e7d32;
  --gris: #eceff1; --gris2: #cfd8dc; --texto: #1a1a1a; --borde: #b0bec5;
}
* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, Roboto, sans-serif;
  font-size: 18px; color: var(--texto); background: #f4f6f4;
  padding-bottom: 72px;
}
h1 { font-size: 28px; } h2 { font-size: 20px; margin: 0 0 8px; }
h3 { font-size: 18px; margin: 0 0 6px; }

header {
  position: sticky; top: 0; z-index: 5;
  background: var(--verde); color: #fff; padding: 10px 14px;
}
header .titulo { display: flex; justify-content: space-between; align-items: baseline; }
header .fecha { font-size: 15px; opacity: .9; text-transform: capitalize; }
.syncbar { display: flex; gap: 10px; align-items: center; font-size: 14px; margin-top: 4px; }
.syncbar.offline { color: #ffcdd2; }
.syncbar .mini { margin-left: auto; }

.banner { padding: 10px 14px; font-size: 15px; }
.banner.rojo { background: var(--rojo); color: #fff; }
.banner.lectura { background: var(--ambar); color: #211; }

main { padding: 12px; max-width: 720px; margin: 0 auto; }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.tarjeta.destacado { border-color: var(--verde2); border-width: 2px; }
.fila-cab { display: flex; justify-content: space-between; align-items: center; }
.jefe { font-size: 14px; }
.cifras { display: flex; gap: 14px; font-size: 16px; margin: 6px 0; }
.cifras b { font-size: 30px; display: block; }
.dietas { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.chip { background: var(--gris); border-radius: 12px; padding: 2px 10px; font-size: 14px; }
.servicio { display: flex; gap: 10px; padding: 4px 0; border-top: 1px solid var(--gris); }
.servicio .etq, .etq2 { text-transform: capitalize; font-weight: 600; min-width: 84px; }
.vacio { color: #607d8b; font-style: italic; }
.fila { display: flex; justify-content: space-between; align-items: center; }
.prov { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid var(--gris); }
.tel { background: var(--verde); color: #fff; padding: 12px 16px; border-radius: 8px; text-decoration: none; font-weight: 600; }
.inc { padding: 6px 0; border-top: 1px solid var(--gris); }
.rech { color: var(--rojo); font-size: 14px; padding: 4px 0; }

/* checklist */
.check { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--gris); }
.check .punto { width: 14px; height: 14px; border-radius: 50%; background: var(--gris2); flex: none; }
.check.ok .punto { background: var(--ok); }
.check.tarde .punto { background: var(--ambar); }
.check.mal .punto { background: var(--rojo); }
.check.mal { order: -1; }
.check .detalle { color: #455a64; font-size: 14px; margin-left: auto; }
.check button { margin-left: auto; }

button { font: inherit; cursor: pointer; }
.mini { background: var(--gris); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.grande { background: var(--verde); color: #fff; border: none; border-radius: 10px; padding: 18px; font-size: 18px; width: 100%; min-height: 56px; font-weight: 600; }
.acciones { display: flex; gap: 10px; }
.acciones .grande { flex: 1; }

.arranque { padding: 24px; max-width: 520px; margin: 0 auto; }
.arranque .lista { list-style: none; padding: 0; }
.arranque .lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.aviso { background: #fff3cd; border: 1px solid var(--ambar); border-radius: 8px; padding: 8px 12px; font-size: 14px; }

/* paneles de formulario */
.panel { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: flex-end; z-index: 20; }
.panel-caja { background: #fff; width: 100%; max-width: 720px; margin: 0 auto; border-radius: 14px 14px 0 0; padding: 18px; max-height: 90vh; overflow: auto; }
.campo { display: block; margin-bottom: 12px; }
.campo span { display: block; font-size: 14px; color: #37474f; margin-bottom: 4px; }
.campo input, .campo select, .campo textarea { width: 100%; font: inherit; padding: 12px; border: 1px solid var(--borde); border-radius: 8px; }
.campo input[type=number] { font-size: 30px; text-align: center; }
.campo textarea { min-height: 80px; }
.panel-btns { display: flex; gap: 10px; margin-top: 8px; }
.panel-btns button:first-child { background: var(--gris); border: 1px solid var(--borde); border-radius: 10px; padding: 16px; flex: none; width: 40%; }
.tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.tipos button { padding: 16px 6px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; text-transform: capitalize; }
.tipos button.sel { background: var(--verde); color: #fff; border-color: var(--verde); }

/* Carencias: una tarjeta por propuesta = una llamada (docs/07 §3). */
.propuesta { padding: 12px 0; border-top: 1px solid var(--gris); }
.propuesta-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.propuesta-acc { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.propuesta-acc .grande { flex: 1; }

/* Pedidos: la agenda por día de entrega, y dentro un bloque por llamada. */
.pedido { padding: 12px 0; border-top: 1px solid var(--gris); }
.linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.linea-acc { display: flex; gap: 6px; margin-left: auto; }
.linea-acc .mini { min-height: 44px; }
.linea-no_disponible .plato-txt, .linea-sustituida .plato-txt { text-decoration: line-through; color: #607d8b; }
/* Estado del pedido: color Y palabra (docs/13). A pleno sol el color solo no
   se distingue, y el intendente no puede equivocarse de pedido. */
.conf.estado-planificado { background: var(--gris2); color: #37474f; }
.conf.estado-pedido { background: #fff3cd; color: #7a5200; }
.conf.estado-confirmado { background: #e3f2e4; color: var(--ok); }

/* Contador de lo que falta por llamar, sobre la pestaña Pedidos. */
.pastilla { background: var(--rojo); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 12px; margin-left: 4px; }

/* El aviso de carencia lleva el teléfono del proveedor dentro: avisar sin poder
   llamar no resuelve nada. */
.mini-tel { margin-left: 8px; padding: 4px 10px; font-size: 14px; }

/* Menú de hoy: una fila por plato, con su acción "Servido" al alcance. */
.servicio .platos { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.plato { display: flex; align-items: center; gap: 8px; }
.plato-txt { flex: 1; }
.plato-txt.servido { color: #607d8b; text-decoration: line-through; }

/* Presupuesto: barra doble gastado vs días (docs/09 §3). El desvío se lee
   comparando las dos barras de un vistazo, sin hacer cuentas. */
.barra-fila { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.barra-etq { font-size: 14px; color: #455a64; width: 62px; flex: none; }
.barra { flex: 1; height: 14px; background: var(--gris); border-radius: 7px; overflow: hidden; }
.barra-in { display: block; height: 100%; background: var(--verde2); border-radius: 7px; }
.barra-in.dias { background: var(--gris2); }
.barra.nivel-ambar .barra-in { background: var(--ambar); }
.barra.nivel-rojo .barra-in { background: var(--rojo); }
.barra-pct { font-size: 14px; font-weight: 600; width: 44px; text-align: right; flex: none; }
.tarjeta .detalle { color: #455a64; font-size: 14px; margin-top: 6px; }
.excede { color: var(--rojo); font-weight: 700; }

/* Recuento rápido (docs/06 §4). Una fila por producto: el dato a la izquierda,
   el pulgar a la derecha. Se cuenta de pie en la despensa y con prisa. */
.recuento { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--gris); }
.recuento-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
/* Sin `capitalize`: los nombres vienen del catálogo con su grafía ("Aceite de
   oliva", no "Aceite De Oliva"). Por eso no reutiliza .etq2. */
.recuento-nombre { font-weight: 600; }
.recuento-info .detalle { display: flex; align-items: center; gap: 8px; color: #455a64; font-size: 14px; }
.recuento-acc { display: flex; align-items: center; gap: 6px; flex: none; }
.recuento-acc .merma-btn { padding: 8px 10px; color: var(--ambar); font-size: 16px; }
.recuento-acc input { width: 84px; font: inherit; font-size: 20px; text-align: center; padding: 10px 6px; border: 1px solid var(--borde); border-radius: 8px; }
.recuento-acc .mini { min-height: 44px; }
.recuento-acc .mini.act { background: var(--verde); color: #fff; border-color: var(--verde); font-weight: 600; }
.recuento.hecho { opacity: .65; }
.recuento .hecho-etq { color: var(--ok); font-weight: 600; }
/* Pantalla Stock: badge "se acabó" / "queda poco" (docs/13). Color + palabra,
   y además un filete en el borde, que se ve antes de leer. */
.badge { border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.badge.agotado { background: #ffebee; color: var(--rojo); }
.badge.poco { background: #fff3cd; color: #7a5200; }
.recuento.nivel-agotado { box-shadow: inset 3px 0 0 var(--rojo); padding-left: 8px; }
.recuento.nivel-poco { box-shadow: inset 3px 0 0 var(--ambar); padding-left: 8px; }
.campo input[type=search] { width: 100%; font: inherit; padding: 12px; border: 1px solid var(--borde); border-radius: 8px; }

/* Indicador de confianza del stock (docs/06 §5). */
.conf { border-radius: 10px; padding: 1px 8px; font-size: 12px; background: var(--gris); }
.conf.fiable { background: #e3f2e4; color: var(--ok); }
.conf.dudoso { background: #fff3cd; color: #7a5200; }
.conf.estimado { background: var(--gris2); color: #37474f; }

nav.bottom { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: #fff; border-top: 1px solid var(--borde); z-index: 10; }
nav.bottom button { flex: 1; padding: 14px 0; border: none; background: none; font-size: 15px; color: #607d8b; }
nav.bottom button.act { color: var(--verde); font-weight: 700; box-shadow: inset 0 3px 0 var(--verde); }

/* Recepción: una fila por línea, con la cantidad grande para el pulgar. */
.recepcion-fila input[type=number] { font-size: 24px; }

/* Cuadrante: una fila por turno, con el mando a un toque (docs/03 §5). */
.turno { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--gris); }
.turno.hoy { box-shadow: inset 3px 0 0 var(--verde2); padding-left: 8px; }
.campo.fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.campo.fila span { margin: 0; }
.campo.fila input[type=checkbox] { width: 28px; height: 28px; flex: none; }