:root {
  --vino: #1f2935;          /* color principal: negro azulado */
  --vino-d: #141c26;
  --vino-soft: #45566a;
  --accent: #3a79b6;        /* acento azul */
  --accent-bg: #eaf1f9;
  --gold: #b9842c;          /* solo para "anterior / vender primero" */
  --gold-bg: #f8efda;
  --gold-bd: #e7cb92;
  --bg: #edf0f5;
  --surface: #ffffff;
  --surface-2: #f5f8fc;
  --ink: #1f2935;
  --muted: #818c9b;
  --line: #e0e6ee;
  --line-soft: #eef1f6;
  --ok: #2e9e6b;
  --neg: #d24b3e;
  --amar: #c98a1e;
  --celeste: #2284c6;
  --celeste-bg: #e9f3fb;
  --celeste-bd: #bcdaf2;
  --sh-sm: 0 1px 2px rgba(25,35,55,.08);
  --sh: 0 4px 16px rgba(25,35,55,.10);
  --sh-lg: 0 16px 36px rgba(20,28,40,.20);
  --r: 10px;
  --r-sm: 7px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
html { font-size: 14.5px; } /* un poco más chico que el default (16px) */
body {
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(1100px 460px at 82% -10%, #f7faff 0%, rgba(247,250,255,0) 62%),
    var(--bg);
  color: var(--ink);
  padding-bottom: 84px;
  font-size: 1rem;
}

/* ---------- topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(120deg, var(--vino) 0%, #2a3747 60%, var(--vino-d) 100%);
  color: #fff; display: flex; justify-content: space-between; align-items: center;
  padding: 13px 20px; box-shadow: 0 4px 16px rgba(20,28,40,.25);
  /* Con cinco botones arriba esta barra ya no entra en una tablet: si no puede
     envolver, empuja la pagina a lo ancho y TODA la app se ve corrida, no solo
     la barra. */
  flex-wrap: wrap; gap: 8px 14px;
}
.brand { font-weight: 900; font-size: 1.25rem; letter-spacing: .3px; }
.top-right { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.fecha { font-size: .85rem; opacity: .9; text-transform: capitalize; font-weight: 600; }
/* accesos administrativos (Administración / Reportes): viven arriba porque esta
   barra sólo se ve en modo dueño */
.btn-top {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.32);
  border-radius: 8px; padding: 7px 13px; font-weight: 800; font-size: .85rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.btn-top:hover { background: rgba(255,255,255,.24); }
.btn-top:active { transform: scale(.95); }
.btn-top.active { background: #fff; color: var(--vino); border-color: #fff; }
/* tablet: la barra se compacta para que entre sin empujar la pagina */
@media (max-width: 900px) {
  .topbar { padding: 10px 12px; }
  .btn-top { padding: 6px 9px; font-size: .8rem; }
  .top-right { gap: 6px 8px; }
  .fecha { width: 100%; text-align: right; }
}
.btn-lock {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px; padding: 8px 11px; font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.btn-lock:active { transform: scale(.92); }
.btn-lock.on { background: var(--ok); border-color: var(--ok); }
/* la barra de arriba NO existe para la empleada (gana espacio en el monitor del
   local); aparece entera sólo en modo dueño. Para entrar está el candado de
   acá abajo, arriba a la derecha de la pantalla. */
.topbar { display: none; }
body.dueno .topbar { display: flex; }
.btn-candado {
  position: fixed; top: 8px; right: 10px; z-index: 30;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.82); border: 1px solid var(--line);
  box-shadow: var(--sh-sm); font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: .55;
}
.btn-candado:hover { opacity: 1; }
.btn-candado:active { transform: scale(.92); }
body.dueno .btn-candado { display: none; } /* adentro se cierra con el 🔓 de la barra */
/* sin barra de arriba el candado queda flotando sobre la primera fila de
   controles: le reservo la esquina para que ningún botón quede tapado */
body:not(.dueno) #segMotivo { padding-right: 58px; }

/* ---- acceso por usuario -------------------------------------------------- */
/* Administración es del negocio: sólo el dueño la ve */
body.sin-admin [data-vista="admin"] { display: none; }
/* Una franquicia es otra empresa: no ve las pantallas de la FÁBRICA (recetas =
   know-how, mayorista = clientes de la fábrica, pedido = lista compartida).
   Sus reportes, su cierre, sus precios y sus gastos SÍ los ve. */
body.es-franquicia [data-vista="pedidos"],
body.es-franquicia [data-vista="recetas"],
body.es-franquicia [data-vista="mayorista"],
/* Configuración es cómo está armado EL NEGOCIO: los locales (que son de la
   casa) y la grilla de toda la gente. render() ya la rebota, pero si el botón
   se ve, tocarlo te manda a Inventario sin explicar por qué. */
body.es-franquicia [data-vista="config"] { display: none; }
/* Costos es toda de plata: sin el candado abierto, la pestaña no aparece.
   Antes convivia con la solapa "Producir", que era lo unico que se veia sin
   candado; esa solapa se saco (la fabrica anota lo que hace por Entro). */
body:not(.dueno) [data-vista="recetas"] { display: none; }
/* sin sesión no se ve NADA de la app: ni barra, ni pestañas, ni candado */
body.sin-sesion .topbar,
body.sin-sesion .tabbar,
body.sin-sesion .btn-candado { display: none !important; }
.login-wrap { display: flex; align-items: center; justify-content: center;
  min-height: 72vh; padding: 20px; }
.login-box { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 20px; box-shadow: var(--sh-sm); }
.login-marca { font-size: 1.35rem; font-weight: 900; color: var(--vino); }
.login-box label { display: flex; flex-direction: column; gap: 4px;
  font-size: .8rem; font-weight: 700; color: var(--vino-soft); }
.login-box input { font-size: 1rem; font-weight: 700; }
.login-box .btn { margin-top: 4px; }
.login-box .link-mini { align-self: center; }
.login-err { margin: 0; padding: 7px 10px; border-radius: 8px;
  background: #fdecea; color: #a02a21; font-size: .82rem; font-weight: 800; }
/* en el producto: qué significa la fecha del lote (fabricación o vencimiento) */
.mp-fecha { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface-2); }
.mp-fecha-h { display: block; font-size: .78rem; font-weight: 900;
  color: var(--vino-soft); margin-bottom: 6px; }
.mp-fecha .chk { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.mp-fecha p { margin: 4px 0 0; }

/* vencimientos por grupo: días desde que se hizo, o fecha impresa del paquete */
.vence-ayuda { margin: 4px 0 8px; padding-left: 18px; }
.vence-ayuda li { margin-bottom: 3px; }
/* Vencimientos con la misma disposicion que el Inventario: una columna por
   quien lo fabrica. Adentro de una columna la fila es mas angosta que en la
   pantalla ancha de antes, asi que el casillero de dias se achica. */
.vence-cols .col { min-width: 260px; }
.vence-cols .vence-lista { margin-bottom: 0; }
.vence-cols .vence-fila { grid-template-columns: 1fr 62px; }
.vence-cols .vence-fila .vf-chk { grid-column: 1 / -1; }
/* grupo que se hace en mas de una fabrica: el plazo es uno solo */
.vf-repe { color: var(--celeste, #2a6f97); font-weight: 900; cursor: help; }
.vence-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.vence-fila { display: grid; grid-template-columns: 1fr 84px auto; gap: 10px; align-items: center;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.vence-fila.porfecha { background: var(--surface-2); }
.vence-fila .vf-nom { font-weight: 800; font-size: .88rem; }
.vence-fila input[type="number"] { text-align: right; font-weight: 800; }
.vence-fila input:disabled { opacity: .35; }
.vence-fila .vf-chk { display: flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.vence-fila.porfecha .vf-chk { color: var(--vino-soft); }
@media (max-width: 620px) {
  .vence-fila { grid-template-columns: 1fr auto; }
  .vence-fila .vf-chk { grid-column: 1 / -1; }
}

/* el candado: el dueño entra encima de la sesión que está abierta */
.modal-dueno { max-width: 340px; display: flex; flex-direction: column; gap: 10px; }
.modal-dueno label { display: flex; flex-direction: column; gap: 4px;
  font-size: .8rem; font-weight: 700; color: var(--vino-soft); }
.modal-dueno input { font-size: 1rem; font-weight: 700; }
.modal-dueno .modal-acc { display: flex; gap: 8px; }
.modal-dueno .modal-acc .btn, .modal-dueno .modal-acc .btn-ghost { flex: 1 1 0; width: auto; }
.modal-dueno p { margin: 0; }
.du-quien { font-size: .9rem; padding: 7px 10px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line); }
/* quién está adentro: la inicial, arriba a la derecha. Para un empleado es la
   única salida, porque la barra de arriba no existe para él. */
.btn-quien { position: fixed; top: 8px; right: 62px; z-index: 30;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--vino); color: #fff; border: none; box-shadow: var(--sh-sm);
  font: 900 1rem/1 inherit; cursor: pointer; opacity: .85; }
.btn-quien:hover { opacity: 1; }
.btn-quien:active { transform: scale(.92); }
body.dueno .btn-quien { top: auto; bottom: 14px; right: 14px; }
.modal-dueno .danger { width: auto; align-self: center; }
/* grilla del personal: dos turnos por día (M mañana / T tarde) */
.pers-turnos { white-space: nowrap; }
.pers-turnos .pt { display: flex; align-items: center; gap: 3px; margin-bottom: 3px; }
.pers-turnos .pt:last-child { margin-bottom: 0; }
.pers-turnos .pt b { font-size: .66rem; color: var(--muted); width: 10px; }
.pers-turnos .pers-dia { min-width: 72px; }
/* tabla de usuarios */
.usr-todos { display: block; margin-top: 2px; }
.usr-baja { opacity: .5; }
.usr-acc { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.usr-roles { line-height: 1.7; }
.usr-acceso { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.usr-acceso p { margin: 2px 0 0; max-width: 46ch; }
.usr-acceso .mini { width: auto; flex: 0 0 auto; }

/* en el celular la barra de arriba y las pestañas tienen que entrar sin que la
   pantalla se corra para el costado */
@media (max-width: 560px) {
  .topbar { padding: 10px 12px; gap: 10px; }
  .brand { font-size: 1.05rem; }
  .top-right { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .btn-top { padding: 6px 10px; font-size: .78rem; }
  .tab { min-width: 0; font-size: .66rem; }
  .tab span { font-size: 1.2rem; }
}

/* ---------- vistas ---------- */
.view { padding: 16px 16px 32px; max-width: 820px; margin: 0 auto; }
.view.vender { max-width: 1180px; } /* 2 columnas: pensado para el monitor 1280×1024 del local */
h2 { margin: 4px 0 14px; font-size: 1.4rem; font-weight: 800; }
h3 { margin: 16px 0 8px; font-size: 1.05rem; font-weight: 800; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }

/* ---------- segmentos ---------- */
.seg { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.seg.off { opacity: .45; pointer-events: none; }
.seg-b {
  flex: 1; min-width: 90px; padding: 11px 10px; border: 1.5px solid var(--line);
  background: var(--surface); border-radius: 8px; font-size: .95rem; font-weight: 700;
  color: var(--ink); cursor: pointer; transition: all .12s; box-shadow: var(--sh-sm);
}
.seg-b:hover { border-color: var(--vino-soft); }
.seg-b.on { background: var(--vino); color: #fff; border-color: var(--vino); box-shadow: 0 4px 12px rgba(31,41,53,.3); }
/* botones de precio con su color cuando están activos */
/* Ojo con aclarar estos dos: el texto es BLANCO. Jueves daba 3,67 de contraste
   y PedidosYa 4,46, los dos por debajo del mínimo legible de 4,5 — o sea que ya
   se leían mal antes de tocar nada. Oscurecerlos los sube a 4,8 y 5,9. */
#segPrecio .precio-pedidosya.on { background: linear-gradient(120deg, #b8342a, #6e1611); border-color: #6e1611; }
#segPrecio .precio-jueves.on { background: linear-gradient(120deg, #1d7a50, #0e4a31); border-color: #0e4a31; }

/* controles fijos arriba (motivo + precio + cantidad) mientras se scrollea */
.ctrl-fijo {
  position: sticky; top: var(--topbar-h, 62px); z-index: 6;
  background: var(--bg); margin: -16px -16px 12px; padding: 12px 16px 4px;
  box-shadow: 0 8px 14px -10px rgba(25,35,55,.4);
}
/* Los motivos usan el MISMO mecanismo que los modos de precio. Antes no
   entraban acá: data-modo sólo se ponía estando en Venta, así que cargar
   mercadería o tirar desperdicio no pintaba nada más que su botón.

   Los tonos son suaves a propósito: el color tiene que avisar en qué modo
   estás, no competir con los números. Un tono más cargado que el fondo, para
   que la barra se lea como una banda y no se funda con la pantalla. */
body[data-modo="jueves"] .ctrl-fijo { background: #bfe3d1; }
body[data-modo="pedidosya"] .ctrl-fijo { background: #f7cec8; }
body[data-modo="entrada"] .ctrl-fijo { background: #c4dcef; }
body[data-modo="salida"] .ctrl-fijo { background: #ddc9ea; }
body[data-modo="ajuste"] .ctrl-fijo { background: #d5c9e6; }

/* selector de cantidad por toque */
.cant-seg { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.cant-lbl { font-size: .82rem; font-weight: 800; color: var(--ink); }
.cantb {
  min-width: 44px; padding: 10px 0; border: 1.5px solid var(--line); background: var(--surface);
  border-radius: 9px; font-size: 1.05rem; font-weight: 800; color: var(--ink); cursor: pointer; box-shadow: var(--sh-sm);
}
.cantb.on { background: var(--vino); color: #fff; border-color: var(--vino); }

/* fondo de color según el modo de precio (cue al vender) */
/* Verde jueves, rojo PedidosYa, azul entra, violeta sale. Ninguno se parece a
   otro, y sobre todo entrada y salida no se parecen ENTRE SÍ: una suma stock y
   la otra lo baja.

   A pleno color no se leía: la pantalla entera quedaba teñida y los números
   peleaban contra el fondo. Ahora es un lavado claro —alcanza para saber en
   qué modo estás de un vistazo— y la fuerza queda para el botón prendido y el
   cartel de aviso, que son los que tienen que gritar.

   (Las reglas de texto blanco que había acá se sacaron: .leyenda y .cant-lbl
   ya no existen en la app, y sobre un fondo claro habrían quedado invisibles.) */
body[data-modo="jueves"] { background: linear-gradient(165deg, #e6f5ed 0%, #c9e6d8 100%) fixed; }
body[data-modo="pedidosya"] { background: linear-gradient(165deg, #fdeeec 0%, #f6d6d1 100%) fixed; }
body[data-modo="entrada"] { background: linear-gradient(165deg, #e8f2fa 0%, #c9dff1 100%) fixed; }
body[data-modo="salida"] { background: linear-gradient(165deg, #f3ecf8 0%, #e0cfec 100%) fixed; }
body[data-modo="ajuste"] { background: linear-gradient(165deg, #f0ecf6 0%, #d9cfe8 100%) fixed; }

/* campo editable de Ajuste (tipo Excel) */
.ajin {
  width: 54px; padding: 6px 4px; text-align: center; font-size: 1.02rem; font-weight: 800;
  border: 2px solid var(--accent); border-radius: 7px; background: #fff; color: var(--ink);
}
.ajin:focus { outline: none; border-color: var(--vino); }

/* Casilla "cuánto entró" (modo Entró): se escribe el número y Enter. Más angosta
   que la de Ajuste y del azul de Entró, para que no se confundan las dos. */
.entin {
  width: 46px; padding: 5px 3px; text-align: center; font-size: .95rem; font-weight: 800;
  border: 2px dashed #2e86c1; border-radius: 7px; background: #fff; color: var(--ink);
}
.entin::placeholder { color: #2e86c1; opacity: .55; font-weight: 900; }
.entin:focus { outline: none; border-style: solid; border-color: var(--vino); }
/* La misma casilla pero para descontar: se escribe cuanto sale y Enter.
   Borde comun y numero negro: el punteado de la de Entro llenaba la pantalla
   de rayitas, porque esta aparece en TODAS las filas del inventario. */
.salin {
  width: 46px; padding: 5px 3px; text-align: center; font-size: .95rem; font-weight: 800;
  border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--ink);
}
.salin::placeholder { color: var(--muted); opacity: .6; font-weight: 900; }
.salin:focus { outline: none; border-style: solid; border-color: var(--vino); }
.pc { gap: 3px; }
body.m-entrada .pc { gap: 3px; }
body.m-entrada .pc b { min-width: 16px; }
/* En pantallas angostas (tablet/celu) la casilla de más no entra en el renglón:
   se deja que los controles bajen a la línea de abajo en vez de cortarse. El
   nombre reserva un mínimo para no quedar en cero y desaparecer. */


/* ---------- venta en columnas por proveedor ---------- */
.leyenda { font-size: .82rem; color: var(--muted); margin: 4px 2px 12px; font-weight: 600; }
.leyenda .cong { color: var(--celeste); font-weight: 800; }
/* 2 columnas por fila (RAMOS|HAEDO arriba, Sin TACC|Extras abajo): en el monitor
   del local (1280×1024) 4 columnas no entraban y se rompían las fechas */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; padding-bottom: 4px; }
.col {
  flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 8px 12px 14px; box-shadow: var(--sh);
}
.col-h {
  font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em;
  color: #fff; background: linear-gradient(120deg, var(--vino), #2c3a4b);
  text-align: center; border-radius: 4px; padding: 10px; margin: 2px 0 8px;
  box-shadow: 0 3px 8px rgba(31,41,53,.22);
}
.col-h.pasteleria-h { margin-top: 18px; }
.subh {
  display: flex; align-items: center; gap: 7px;
  font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em;
  color: var(--vino); margin: 14px 0 4px; padding-bottom: 4px;
  border-bottom: 2px solid var(--line);
}
.subh::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); flex: none; }
.subh .grip { margin-left: auto; }

.prow {
  display: flex; align-items: center; gap: 7px;
  /* Nunca cortar la fila: si los controles no entran (celu/tablet, o un producto
     con 2 fechas + freezer), bajan al renglón de abajo en vez de quedar tapados. */
  flex-wrap: wrap;
  padding: 5px 4px; border-radius: 6px; transition: background .1s;
}
.prow + .prow { border-top: 1px solid var(--line-soft); }
.prow:hover { background: var(--surface-2); }
.pn { flex: 1; min-width: 92px; font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* control de stock (fresco / lote / congelado) */
.pc { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.pc b { min-width: 20px; text-align: center; font-size: 1.02rem; font-weight: 800; }
/* El mostaza de "queda poco" se saco a pedido del dueno: el numero del stock
   va siempre del mismo color. El rojo de "no hay" (.neg) queda, que es otra
   cosa. La clase .low se sigue poniendo por si algun dia se quiere volver. */
.pc b.low { color: inherit; }
.pc b.neg { color: var(--neg); }
.pm { display: flex; flex-direction: column; gap: 2px; }
.pm button {
  width: 26px; height: 17px; padding: 0; line-height: 1; cursor: pointer;
  border: 1.5px solid var(--line); background: var(--surface); border-radius: 5px;
  font-size: .9rem; font-weight: 800; transition: all .1s;
  user-select: none; -webkit-user-select: none; /* mantener apretado no selecciona texto */
}
.pm button[data-act="mas"] { color: var(--ok); }
/* en Entro va solo el +: el boton queda centrado y no a media altura */
.pm.pm-solo-mas { justify-content: center; }
.pm.pm-solo-menos { justify-content: center; }
.pm button[data-act="menos"] { color: var(--neg); }
.pm button:hover { background: var(--surface-2); border-color: var(--vino-soft); }
.pm button:active { transform: scale(.85); }

.pc.lote { background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 6px; }
.pc.lote.ant { background: var(--gold-bg); border-color: var(--gold-bd); }
.fdate {
  width: 44px; padding: 3px 2px; font-size: .74rem; font-weight: 700; text-align: center; flex: none;
  border: 1.5px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink);
}
.fdate:focus { outline: none; border-color: var(--accent); }
.fdate.venc { border-color: var(--neg); color: var(--neg); background: #fceae8; }
.addlote {
  border: 1.5px dashed var(--accent); background: var(--accent-bg); border-radius: 6px; align-self: center;
  font-size: .8rem; padding: 4px 7px; cursor: pointer; color: var(--accent); flex: none; font-weight: 700;
}
.addlote:hover { background: #ddeaf6; }

/* fila apilada: producto con 2-3 fechas (una fecha por renglón) */
.prow.multi { flex-direction: column; align-items: stretch; gap: 5px; }
.prow-head { display: flex; align-items: center; gap: 7px; }
.prow-head .tot { flex: none; font-weight: 800; font-size: 1.02rem; color: var(--vino-soft); }
.lotes-stack { display: flex; flex-direction: column; gap: 5px; padding-left: 22px; }
.lote-lin { display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; }
.lote-lin.ant { background: var(--gold-bg); border-color: var(--gold-bd); }
.lote-lin .fdate { flex: none; font-size: .82rem; width: 52px; }
.lote-lin .pc.lote { margin-left: auto; background: none; border: none; padding: 0; }
.lote-lin.cong { background: var(--celeste-bg); border-color: var(--celeste-bd); }
.lote-lin .lote-lbl { flex: 1; font-size: .82rem; font-weight: 800; color: var(--celeste); }
.lotes-stack .addlote { align-self: flex-start; }
/* botón ✕ para quitar una fecha (sólo en Entró/Ajuste) */
.rmlote { flex: none; border: 1.5px solid var(--neg); background: #fceae8; color: var(--neg); border-radius: 6px; width: 22px; height: 22px; padding: 0; line-height: 1; font-weight: 800; cursor: pointer; font-size: .78rem; margin-left: 4px; }
.rmlote:active { transform: scale(.9); }

/* barra de modo pedido */
.inv-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.inv-bar .seg-b { flex: none; min-width: 0; padding: 8px 13px; font-size: .86rem; }

/* pronóstico de la semana (para armar el pedido) */
.pron { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; }
.pron-d {
  flex: none; min-width: 82px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 9px 6px; box-shadow: var(--sh-sm);
}
.pron-d.ent { border: 2px solid var(--accent); background: var(--accent-bg); }
.pd-dia { font-size: .72rem; font-weight: 800; color: var(--muted); text-transform: capitalize; }
.pron-d.ent .pd-dia { color: var(--accent); }
.pd-ico { font-size: 1.55rem; line-height: 1; }
.pd-t { font-size: .95rem; font-weight: 800; }
.pd-t small { color: var(--muted); font-weight: 700; }
.pd-ll { font-size: .68rem; font-weight: 800; color: var(--celeste); }
.pd-ent { font-size: .58rem; font-weight: 900; text-transform: uppercase; color: var(--accent); letter-spacing: .04em; }

/* alertas de vencimiento */
.alerta-venc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 10px; box-shadow: var(--sh-sm); font-size: .88rem; font-weight: 700; }
.av-row { padding: 2px 0; }
.av-row.venc { color: var(--neg); }
.av-row.prox { color: var(--amar); }
.av-row .muted { font-weight: 600; }
/* cuántos hay de cada color, y cuántos quedaron sin mostrar */
.av-cant { display: inline-block; min-width: 17px; padding: 0 5px; border-radius: 999px;
  color: #fff; font-size: .68rem; font-weight: 900; text-align: center; }
.av-row.venc .av-cant { background: var(--neg); }
.av-row.prox .av-cant { background: var(--amar); color: #3a2c00; }
.av-mas { font-weight: 900; opacity: .75; }
.av-ver { margin-top: 4px; border: none; background: none; padding: 2px 0; cursor: pointer;
  font-family: inherit; font-size: .76rem; font-weight: 800; color: var(--accent); }
.av-ver:hover { text-decoration: underline; }
/* desplegado: crece sólo este recuadro, con tope y scroll propio si es enorme */
.alerta-venc.abierta { max-height: 260px; overflow-y: auto; }

/* historial de pedidos (en Reportes) */
.hist-ped { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 6px; box-shadow: var(--sh-sm); }
.hp-top { font-size: .92rem; font-weight: 800; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.hp-top .muted { font-weight: 600; font-size: .82rem; }
.hp-items { font-size: .82rem; margin-top: 4px; line-height: 1.4; }
.hist-ped.editando { border-color: var(--accent); }
.hp-acc { display: flex; gap: 8px; margin-top: 8px; }
.hp-acc .mini { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 5px 11px; font-size: .78rem; font-weight: 800; color: var(--ink); cursor: pointer; }
.hp-acc .mini.danger { color: var(--neg); border-color: var(--neg); }
.hp-acc .btn { margin-top: 0; }
.hp-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin-top: 8px; }
.hp-ed-it { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .82rem; font-weight: 700; }
.hp-ed-it input { width: 58px; flex: none; text-align: center; padding: 6px 4px; font-weight: 800; }

/* modos pedido / precios: encabezado de columna alineado con las filas */
.lhead {
  display: flex; align-items: center; gap: 7px; padding: 8px 4px 4px;
  font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
.lhead .grip { visibility: hidden; }
.lhead .pn { flex: 1; }
.lhead .hcol { flex: none; text-align: center; }
.pedmode .pcell, .lhead.pedmode .pcell { width: 36px; text-align: center; flex: none; }
.pedmode .pcell { font-weight: 800; font-size: 1.02rem; }
.pedmode .pcell.cong, .lhead.pedmode .pcell.cong { color: var(--celeste); }
.pedin, .lhead.pedmode .hcol { width: 46px; }
.pedin { flex: none; padding: 4px 2px; text-align: center; font-size: .82rem; font-weight: 700; border: 1.5px solid var(--line); border-radius: 5px; }
.prcin, .lhead.precmode .hcol { width: 74px; }
.prcin { flex: none; padding: 4px 3px; text-align: center; font-size: .82rem; font-weight: 800; color: var(--ink); border: 1.5px solid var(--line); border-radius: 5px; }
/* con la columna Costo (modo dueño) son 4 columnas: angosto los inputs y le doy
   ancho mínimo a las columnas (se scrollea al costado) para que el nombre no se aplaste */
.cols-costo .col { min-width: 420px; }
.precmode.con-costo, .lhead.precmode.con-costo { gap: 5px; }
.precmode.con-costo .prcin, .lhead.precmode.con-costo .hcol { width: 52px; }
/* Las dos PUNTAS de la fila con ancho fijo. Sin esto las casillas quedan
   corridas de una fila a otra: el agarre mide 15px en un producto pero 6 en la
   fila del grupo y en la sub-fila del congelado, y el lapiz 29 contra 8 del
   espaciador (el encabezado directamente no lo tenia). Como el nombre se
   estira, esa diferencia empuja TODAS las casillas y se ve desalineado. Se
   notaba mas en los grupos con sub-fila de congelado, tipo Sorrentinos, que
   tienen las dos variantes una debajo de la otra. */
.precmode .grip, .lhead.precmode .grip { flex: 0 0 15px; width: 15px; text-align: center; }
.precmode .editp, .lhead.precmode .editp { flex: 0 0 29px; width: 29px; }
.prcin.costo { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
/* Con la columna "Franquicia" son 5: se angostan un poco mas los casilleros y la
   columna necesita mas ancho minimo. Se ve igual que el inventario, que es la
   idea: la misma lista, con una casilla mas. */
.cols-costo .col:has(.con-franq) { min-width: 480px; }
.precmode.con-franq, .lhead.precmode.con-franq { gap: 4px; }
.precmode.con-franq .prcin, .lhead.precmode.con-franq .hcol { width: 48px; }
.lhead.precmode.con-franq .hcol { font-size: .62rem; }
/* Los títulos de las columnas, abajo del todo: con "💵 Efectivo" partido en dos
   renglones, los de una sola línea quedaban centrados a media altura y el
   encabezado se leía como un bloque de palabras pegadas. */
.lhead.precmode { align-items: flex-end; }
/* En el monitor del local SOBRA lugar y estaba todo apretado: el nombre se
   quedaba con más de la mitad del ancho (423px de 769) y las cinco casillas de
   precio se apretaban a 48px. Desde 1200px las casillas crecen con la pantalla
   y le devuelven el aire a los títulos; el nombre sigue teniendo de sobra. */
/* El umbral es 1500 y no puede ser menos: la pantalla misma no se ensancha
   hasta ahí (ver `.view.vender { max-width: 1860px }`), así que abajo de 1500
   la columna mide 566px vengas de 1280 o de 1440 — y ensanchar las casillas
   sólo le come el nombre (probado: quedaba en 136px). En el monitor del local
   (1280) todo sigue exactamente igual que antes. */
@media (min-width: 1500px) {
  .precmode.con-costo, .lhead.precmode.con-costo,
  .precmode.con-franq, .lhead.precmode.con-franq { gap: 6px; }
  .precmode.con-costo .prcin, .lhead.precmode.con-costo .hcol { width: 78px; }
  .precmode.con-franq .prcin, .lhead.precmode.con-franq .hcol { width: 72px; }
  .lhead.precmode.con-franq .hcol { font-size: .7rem; }
}
/* Abajo de 900 la grilla pasa a UNA sola columna, así que esa columna se lleva
   el ancho entero: en una tablet de 820 medía 773px con las casillas todavía
   en 48. Mismo aire que en el monitor grande. (Abajo de 680 no: ahí sí se
   necesita cada píxel para el nombre.) */
@media (min-width: 680px) and (max-width: 900px) {
  .precmode.con-costo, .lhead.precmode.con-costo,
  .precmode.con-franq, .lhead.precmode.con-franq { gap: 6px; }
  .precmode.con-costo .prcin, .lhead.precmode.con-costo .hcol { width: 78px; }
  .precmode.con-franq .prcin, .lhead.precmode.con-franq .hcol { width: 72px; }
  .lhead.precmode.con-franq .hcol { font-size: .7rem; }
}
/* lo que le cobras a la franquicia: se distingue del costo y del precio al publico */
/* precio en efectivo: verde, para que se distinga del normal de un vistazo */
.prcin.efec { border-color: #2e7d5b; background: #eef8f2; color: #1f6b4a; }
/* sin numero = sin descuento: la casilla queda apagada para que se vea de un
   vistazo cuales tienen precio en efectivo y cuales no */
.prcin.efec.efec-vacio { border-color: var(--line); background: transparent; color: var(--muted); }
.prcin.efec::placeholder { color: var(--muted); opacity: .5; }
.seg-b.precio-efectivo.on { background: #2e7d5b; border-color: #2e7d5b; color: #fff; }
/* modo Cocina: se prende y tocar la pasta abre la ventana del plato */
.seg-b.precio-cocina.on { background: var(--gold-bd, #c9a227); border-color: var(--gold-bd, #c9a227); color: #3a2f0b; }
/* modo Cocina prendido: se ve de un vistazo que se puede servir y a cuanto */
.aviso-motivo.m-cocina { background: var(--gold-bg, #fdf6e3); border-color: var(--gold-bd, #c9a227); color: #6b5310; }
.prow.coc-no { opacity: .38; }
.prow.coc-si { background: var(--gold-bg, #fdf6e3); border-radius: 6px; }
.coc-tag { font-size: .74rem; font-weight: 900; color: #8a6d0b; background: #fdf6e3;
  border: 1px solid var(--gold-bd, #e8d9a8); border-radius: 999px; padding: 1px 6px; margin-left: 5px;
  white-space: nowrap; }
/* precio a franquicia, ahora en la tabla de Costos */
.mg-in.mg-franq { width: 74px; text-align: right; }
.prcin.franq { border-color: var(--celeste-bd, #7fb3d5); background: var(--celeste-bg, #eef6fb); color: var(--celeste, #2a6f97); }
.lhead .hcol.hcol-franq { color: var(--celeste, #2a6f97); }
/* celda de "sin precio de jueves" (mismo ancho que el input, pero sin editar) */
.prcin.nojueves { display: inline-flex; align-items: center; justify-content: center; border-color: transparent; background: transparent; color: var(--muted); box-shadow: none; }
/* celda de precio calculado (Jueves / PedidosYa): solo lectura, se ve distinto al input editable */
.prcin.prcin-ro { display: inline-flex; align-items: center; justify-content: center; border-style: dashed; border-color: var(--line); background: var(--surface-2); color: var(--muted); box-shadow: none; }
/* fila de precio por grupo (edita a todos juntos) */
.grouprow { background: var(--accent-bg); border-radius: 7px; margin: 2px 0; }
.grouprow .pn { font-weight: 900; color: var(--accent); font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; }
.grouprow .prcin { border-color: var(--accent); border-width: 2px; font-weight: 900; background: #fff; }

/* sub-fila de precio congelado en Precios (debajo del producto, mismos casilleros) */
.prow.precmode.preccong { border-top: none; padding-top: 0; padding-bottom: 7px; }
.preccong .grip { visibility: hidden; }
.preccong .pn { flex: 1; min-width: 0; font-size: .76rem; font-weight: 800; color: var(--celeste); padding-left: 20px; white-space: nowrap; }
.preccong .prcin { border-color: var(--celeste-bd); background: var(--celeste-bg); color: var(--celeste); }
.preccong .prcin::placeholder { color: var(--celeste); opacity: .55; font-weight: 700; }
.preccong .cong-spacer, .preccong .editp { visibility: hidden; }
.lhead.precmode.con-costo .hcol:first-of-type { color: var(--accent); }
.pedin:focus, .prcin:focus { outline: none; border-color: var(--accent); }

.pc.cong { background: var(--celeste-bg); border: 1px solid var(--celeste-bd); border-radius: 7px; padding: 3px 6px; }
.pc.cong b { color: var(--celeste); }
.pc.cong .pm button { color: var(--celeste); border-color: var(--celeste-bd); }

.prow.filavenc { background: #fceae8; box-shadow: inset 3px 0 0 var(--neg); }
.prow.filavenc:hover { background: #f9ddda; }

/* ---------- arrastrar para ordenar ---------- */
.grip {
  flex: none; cursor: grab; color: #b6bfcc; font-size: 1rem; line-height: 1;
  padding: 0 3px; user-select: none; letter-spacing: -2px;
}
.grip:hover { color: var(--vino-soft); }
.grip:active { cursor: grabbing; }
.prow.dragover { box-shadow: inset 0 2px 0 var(--accent); background: var(--accent-bg); }
.subh.dragover { background: var(--accent-bg); border-radius: 5px; }
.dragging { opacity: .4; }

/* ---------- vencimiento config ---------- */
/* Precios automaticos: un bloque por cada %, para que se vea cual toca que */
.pa-bloque { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--surface); }
.pa-bloque p { margin: 6px 0 0; }
.pa-btn { display: flex; align-items: flex-end; }
.vence-cfg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 16px; box-shadow: var(--sh); }
.vence-cfg h3 { margin-top: 0; }
.vence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin: 10px 0 4px; }
.vence-grid label { display: flex; flex-direction: column; font-size: .74rem; font-weight: 700; color: var(--muted); gap: 3px; }

/* ---------- balanza + movimientos ---------- */
.balanza {
  display: flex; justify-content: space-between; align-items: center;
  background: linear-gradient(120deg, var(--vino), var(--vino-d));
  color: #fff; border-radius: var(--r); padding: 18px 22px; margin: 20px 0 12px;
  box-shadow: 0 10px 26px rgba(20,28,40,.28);
}
.balanza .muted { color: #aebccd; font-weight: 700; font-size: .85rem; }
.balanza .big { font-size: 2rem; font-weight: 900; letter-spacing: .5px; }
/* aviso grande: no estás en modo Venta (esos toques no suman a la balanza) */
.aviso-motivo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-radius: var(--r-sm); padding: 11px 16px; margin-bottom: 10px; cursor: pointer;
  color: #fff; font-weight: 800; font-size: .92rem; box-shadow: var(--sh-sm);
  animation: avisoLatido 1.6s ease-in-out infinite;
}
/* mismo azul que el boton: en #2e86c1 el texto blanco daba 3,97 de contraste,
   abajo del minimo de 4,5. Con este da 5,4. */
.aviso-motivo.m-entrada { background: #1c6fa8; }
.aviso-motivo.m-desperdicio, .aviso-motivo.m-consumo { background: #cf3b33; }
.aviso-motivo.m-ajuste { background: #7d5ba6; }
.aviso-motivo .am-b { background: rgba(255,255,255,.22); border-radius: 999px; padding: 6px 14px; font-weight: 900; white-space: nowrap; }
.aviso-motivo:hover .am-b { background: rgba(255,255,255,.35); }
@keyframes avisoLatido { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }

/* ---- cargar con fecha de OTRO día (sólo dueño) --------------------------- */
.aviso-fecha {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-radius: var(--r-sm); padding: 11px 16px; margin-bottom: 10px; cursor: pointer;
  color: #fff; font-weight: 800; font-size: .92rem; box-shadow: var(--sh-sm);
  background: linear-gradient(120deg, #d97706, #92400e);
  border: 2px solid #78350f;
  animation: avisoLatido 1.6s ease-in-out infinite;
}
.aviso-fecha .am-b { background: rgba(255,255,255,.22); border-radius: 999px; padding: 6px 14px; font-weight: 900; white-space: nowrap; }
.aviso-fecha:hover .am-b { background: rgba(255,255,255,.35); }
.seg .seg-b.btn-dia.on { background: #d97706; border-color: #92400e; color: #fff; }
.fecha-pick { flex-wrap: wrap; }
.fecha-pick .seg-b { flex: 1 1 84px; font-size: .82rem; }
.fecha-pick .seg-b.on { background: #d97706; border-color: #92400e; color: #fff; }

/* la balanza (arriba y abajo) es clickeable: abre el detalle de lo vendido */
.balanza, .ts-bal { cursor: pointer; }
.vd-ver { color: var(--amar); font-weight: 800; font-size: .72rem; margin-left: 4px; white-space: nowrap; }

/* modal "Vendido hoy" */
.vd-modal .vd-kpi { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.vd-modal .vd-kpi b { font-size: 1.3rem; color: var(--vino); }
.vd-grupo { margin-bottom: 14px; }
.vd-gh { font-weight: 900; color: var(--accent); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
  padding-bottom: 4px; margin-bottom: 4px; border-bottom: 2px solid var(--line); }
.vd-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 2px; border-bottom: 1px solid var(--line-soft); }
.vd-row .vd-nom { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.vd-row .vd-cant { flex: 0 0 auto; font-weight: 900; font-size: 1.05rem; color: var(--ink); min-width: 44px; text-align: right; }
.vd-row .vd-imp { flex: 0 0 96px; text-align: right; font-weight: 800; color: var(--vino-soft); }
/* filtro Todo / Mostrador / PedidosYa arriba del detalle */
.vd-seg { margin-bottom: 12px; }
.vd-seg .vd-fb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 8px; font-size: .8rem; }
.vd-seg .vd-fb b { font-size: .95rem; font-weight: 900; }
.vd-seg .vd-fb.on { background: var(--vino); border-color: var(--vino); color: #fff; }
.vd-seg .vd-fb[data-vdf="py"].on { background: linear-gradient(120deg, #d8453a, #7d1a13); border-color: #7d1a13; }
/* PedidosYa pedido por pedido: cada pedido en su cajita, para comparar contra
   la pantalla de PedidosYa sin perder de vista dónde empieza y dónde termina */
.vd-seg2 { margin: -6px 0 12px; }
.vd-ped { margin-bottom: 12px; padding: 8px 10px 4px; border: 1px solid #f0bdb7;
  border-radius: var(--r); background: #fdf6f5; }
.vd-ph { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 5px; margin-bottom: 3px; border-bottom: 2px solid #f0bdb7;
  font-weight: 900; color: #a02a21; font-size: .82rem; }
.vd-ph-r { display: flex; align-items: baseline; gap: 9px; }
.vd-ph b { font-size: 1.05rem; color: var(--vino); }
.vd-hora { font-weight: 700; opacity: .7; font-size: .74rem; }
.vd-ped .vd-row:last-child { border-bottom: none; }

/* la parte del producto que salió por PedidosYa */
.vd-py, .rep-py { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  background: #fceae8; border: 1px solid #f0bdb7; color: #a02a21; font-size: .7rem; font-weight: 800; white-space: nowrap; }
.mov-list { display: flex; flex-direction: column; gap: 9px; }
.mov-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .92rem; font-weight: 700; box-shadow: var(--sh-sm); }
.mov-r { display: flex; gap: 12px; align-items: center; }
.undo { border: none; background: none; color: var(--accent); cursor: pointer; font-size: .82rem; font-weight: 700; text-decoration: underline; }

/* ---------- stock ---------- */
.stock-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 12px; box-shadow: var(--sh-sm); }
.sr-main { display: flex; gap: 10px; margin-bottom: 10px; }
.sr-nombre { flex: 1; font-weight: 800; }
.sr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sr-grid label { display: flex; flex-direction: column; font-size: .74rem; font-weight: 700; color: var(--muted); gap: 3px; }
.sr-grid label.cong input { color: var(--celeste); border-color: var(--celeste-bd); }
.sr-actions { display: flex; gap: 10px; margin-top: 12px; }
input, select { padding: 10px 11px; border: 1.5px solid var(--line); border-radius: 7px; font-size: .95rem; font-weight: 600; background: #fff; color: var(--ink); width: 100%; font-family: inherit; }
/* …pero un tilde NO es un campo de texto. El width:100% de arriba está pensado
   para los que se escriben, y a las casillas las estiraba a lo ancho del
   renglón: quedaban a 380px de la frase que las explica, con el texto empujado
   al otro extremo. Se veía en los vencimientos por grupo y en cada tilde nuevo.
   Venía parchándose de a uno (.mp-chks .chk input, y van…). Esto lo resuelve en
   un lugar, para los que hay y los que se agreguen. */
input[type="checkbox"], input[type="radio"] {
  width: auto; flex: none; padding: 0; margin: 0;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }

/* ---------- botones ---------- */
.btn { display: block; width: 100%; padding: 15px; border-radius: 9px; border: none; font-size: 1.02rem; font-weight: 800; cursor: pointer; margin-top: 14px; font-family: inherit; transition: transform .06s; }
.btn:active { transform: scale(.985); }
.btn-primary { background: linear-gradient(120deg, var(--vino), #2c3a4b); color: #fff; box-shadow: 0 6px 16px rgba(31,41,53,.32); }
.btn-ghost { flex: 1; padding: 11px; border-radius: 8px; border: 1.5px solid var(--line); background: #fff; font-weight: 700; cursor: pointer; font-family: inherit; }
.danger { color: var(--neg); border-color: #eec4bf; }

/* ---------- cierre ---------- */
.cierre-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; box-shadow: var(--sh); }
.cierre-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cierre-line:last-of-type { border-bottom: none; }
.cierre-line span { flex: 1; font-size: .92rem; font-weight: 600; }
.cierre-line input { max-width: 150px; text-align: right; font-size: 1.15rem; font-weight: 800; }
.cierre-line b { font-size: 1.25rem; font-weight: 800; }
.cierre-line.dif b { font-size: 1.4rem; }

/* las dos solapas del Cierre (el día ⇄ la tabla del mes), arriba de todo.
   Mismo aspecto que las de Administración, pero más grandes: son el título de
   la pantalla, no una fila de opciones. */
.cie-solapas { margin: 0 0 14px; gap: 18px; }
.cie-solapas .adm-solapa { font-size: 1.25rem; font-weight: 900; color: var(--muted); padding: 2px 2px 10px; }
.cie-solapas .adm-solapa.on { color: var(--ink); }
@media (max-width: 560px) { .cie-solapas { gap: 12px; } .cie-solapas .adm-solapa { font-size: 1.02rem; } }

/* navegador de fecha del cierre */
.cie-dianav { margin: 8px 0 14px; }
.cie-dianav .dia-lbl { text-transform: capitalize; }
/* estado borrador / cerrado */
.cie-estado { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.cie-cerrado { display: inline-block; font-weight: 800; color: var(--ok); background: #e7f6ee; border: 1px solid #b6e2cb; border-radius: 8px; padding: 5px 11px; font-size: .85rem; }

/* balanza (arriba de todo) */
.cie-bal { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch;
  background: var(--accent-bg); border: 1px solid var(--celeste-bd); border-radius: var(--r); padding: 12px; margin-bottom: 6px; }
/* con el detalle abierto el recuadro se hace largo; si los dos siguen
   estirados, la Balanza queda flotando sola en el medio de un bloque vacío */
.cie-bal-abierta { align-items: flex-start; }
.cie-bal-in { flex: 1 1 45%; min-width: 180px; display: flex; flex-direction: column; justify-content: center; }
.cie-bal-tot { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.cie-bal-tot b { font-size: 1.5rem; font-weight: 900; color: var(--accent); }
/* control de caja (mitad derecha): recuadro que se pinta según la diferencia.
   Se toca para abrir el detalle de las dos cuentas, así que va con manito. */
.cie-control { flex: 1 1 45%; min-width: 180px; display: flex; flex-direction: column; gap: 2px; justify-content: center;
  color: #fff; border-radius: 12px; padding: 12px 14px; transition: background .25s; text-align: right;
  cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cie-control:hover { filter: brightness(1.06); }
.cie-control .cc-lbl { font-size: .78rem; font-weight: 800; opacity: .95; }
.cie-control .cc-flecha { font-style: normal; opacity: .8; }
/* día recién abierto, sin nada cargado: no controla nada todavía, explica */
.cie-control.cc-blanco .cc-dif { font-size: 1.05rem; opacity: .95; }
/* la diferencia (falta / sobra / coincide) es el titular del recuadro */
.cie-control .cc-dif { font-size: 1.35rem; font-weight: 900; letter-spacing: 0; line-height: 1.2; }
.cie-control .cc-hint { font-size: .68rem; opacity: .85; line-height: 1.45; }
/* las dos cuentas escritas: los <b> son sólo los títulos, no números grandes */
.cie-control .cc-hint b { font-size: inherit; font-weight: 900; letter-spacing: .02em; }

/* Los DOS valores que se comparan, uno debajo del otro: "Se vendió" y "Está la
   plata". La diferencia ya está arriba en grande y pintando todo el recuadro,
   así que acá sólo van los dos números, para poder mirarlos de a uno. */
.cie-control .cc-dos { display: flex; flex-direction: column; gap: 1px; margin-top: 8px; padding: 7px 9px;
  border-top: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.10); border-radius: 8px; }
.cie-control .cc-v { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cie-control .cc-v + .cc-v { margin-top: 3px; padding-top: 3px; border-top: 1px solid rgba(255,255,255,.18); }
.cie-control .cc-v-lbl { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.cie-control .cc-v b { font-size: 1.15rem; font-weight: 900; line-height: 1.15; letter-spacing: 0; }

/* El desplegable: las dos cuentas renglón por renglón, con lo que suma y lo que
   resta. Antes esto era una línea de texto con las dos fórmulas seguidas y no
   se entendía dónde terminaba una y empezaba la otra. Va alineado a la
   IZQUIERDA aunque el recuadro sea a la derecha: es una lista para leer. */
.cc-detalle { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.28); text-align: left; }
.cc-d-bloque + .cc-d-bloque { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.3); }
.cc-d-tit { font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; opacity: .8; margin-bottom: 3px; }
.cc-d-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: .78rem; }
.cc-d-row b { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-d-lbl { display: flex; align-items: baseline; gap: 6px; font-weight: 700; }
/* la columna del signo, para que los renglones queden en línea */
.cc-d-lbl i { font-style: normal; font-weight: 900; width: .8em; flex: none; opacity: .85; }
.cc-d-lbl em { font-style: normal; font-size: .66rem; font-weight: 600; opacity: .7; }
.cc-d-row.cero { opacity: .45; }              /* lo que está en cero no distrae */
.cc-d-row.cero em { display: none; }
/* …salvo el renglón que está en cero POR UNA RAZÓN y hay que explicarla
   (el error de ticket cuando la balanza es la del sistema) */
.cc-d-row.avisa { opacity: .9; }
.cc-d-row.avisa em { display: inline; opacity: .95; font-weight: 800; } /* gana también en celular */
.cc-d-tot { margin-top: 3px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.35); font-size: .88rem; }
.cc-d-tot b, .cc-d-tot .cc-d-lbl { font-weight: 900; }
@media (max-width: 560px) { .cc-d-lbl em { display: none; } }

/* subtítulos con total a la derecha */
.cie-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 18px 0 8px; font-size: .95rem; }
.cie-tot { font-size: 1.05rem; font-weight: 900; color: var(--ink); }

/* Campos a mano, en dos columnas: la CAJA a la izquierda (caja, retiro,
   ingreso, error de ticket) y los COBROS a la derecha, uno debajo del otro
   — así los dos Mercado Pago de Ciudad Jardín se leen juntos y no cada uno
   en una columna distinta. En el celular las dos columnas se apilan. */
.cie-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; align-items: start; }
.cie-col { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 560px) { .cie-grid { grid-template-columns: 1fr; } }
.cie-campo { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 700; color: var(--vino-soft); }
.cie-campo input { text-align: right; font-size: 1.05rem; font-weight: 800; }
/* ayuda debajo de "Pedidos Ya": lo que marcó el sistema + botón "usar" */
.cie-hint { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px 6px; font-size: .72rem; font-weight: 700; color: var(--muted); }
.cie-hint-avi { width: 100%; text-align: right; color: var(--amar); font-weight: 800; }
.cie-hint b { color: #a02a21; }
.cie-hint .link-mini { padding: 0; color: var(--accent); }
.cie-hint-ok { color: var(--ok); font-weight: 900; }
.cie-py-nota { color: #a02a21; font-weight: 800; }
/* aviso de que las casillas suman como en Excel */
.cie-ayuda { margin: -2px 0 10px; }
/* globito "= $8.000" mientras se escribe una suma en una casilla del cierre */
.cie-eq { position: fixed; z-index: 90; display: none; pointer-events: none;
  padding: 3px 8px; border-radius: 8px; background: var(--ink); color: #fff;
  font-size: .82rem; font-weight: 900; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }

/* filas de proveedores / extras (elegir + monto + quitar) */
.cie-lins { display: flex; flex-direction: column; gap: 8px; }
.cie-lin { display: flex; gap: 8px; align-items: center; }
.cie-lin .cie-sel { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.cie-lin .cie-monto { flex: 0 0 108px; text-align: right; font-size: 1.05rem; font-weight: 800; }
.cie-x { flex: 0 0 auto; width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface-2);
  border-radius: 8px; color: var(--muted); font-weight: 800; cursor: pointer; padding: 0; }
.cie-add { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.cie-add .mini { width: auto; }

/* botón "Marcar pago" en el historial mayorista */
.hist-ped .hp-acc { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.cie-pago { width: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 12px; font-weight: 800; font-size: .8rem; color: var(--ink); cursor: pointer; }
.cie-pago.on { background: #e7f6ee; border-color: #b6e2cb; color: var(--ok); }
.hist-ped.pagado { border-left: 3px solid var(--ok); }

/* tabla del mes (se desliza al costado en pantallas chicas) */
/* ◀ ▶ para ver meses anteriores en la tabla del cierre */
.cie-mes-nav { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
.cie-mes-nav .dia-fl { flex: none; min-width: 0; padding: 6px 12px; font-size: .9rem; }
.cie-mes-nav .dia-fl[disabled] { opacity: .35; cursor: default; }
.cie-mes-nav .link-mini { padding: 0 0 0 4px; }
.cie-mes-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  /* rompe la columna angosta (820px) y usa todo el ancho de la pantalla para ver el mes entero */
  width: min(1600px, calc(100vw - 24px));
  position: relative; left: 50%; transform: translateX(-50%);
}
table.cie-mes { border-collapse: collapse; width: 100%; font-size: .8rem; white-space: nowrap; }
table.cie-mes th, table.cie-mes td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--line-soft); }
table.cie-mes thead th { position: sticky; top: 0; background: var(--surface-2); font-weight: 800; color: var(--vino-soft); }
table.cie-mes .cie-td-f { text-align: left; font-weight: 800; position: sticky; left: 0; background: var(--surface); }
table.cie-mes thead th:first-child { left: 0; z-index: 1; background: var(--surface-2); }
table.cie-mes tfoot td { font-weight: 900; border-top: 2px solid var(--line); background: var(--surface-2); }
table.cie-mes tbody tr.cie-mes-row { cursor: pointer; }
table.cie-mes tbody tr.cie-mes-row:hover td { background: var(--accent-bg); }
table.cie-mes tbody tr.cie-mes-row:hover .cie-td-f { background: var(--accent-bg); }
table.cie-mes tbody tr.sel td { background: var(--gold-bg); }
table.cie-mes tbody tr.sel .cie-td-f { background: var(--gold-bg); }
/* columna Proveedores desplegable (tocá el encabezado para ver el detalle) */
table.cie-mes thead th.cie-provcol { cursor: pointer; color: var(--accent); background: var(--accent-bg); white-space: nowrap; }
table.cie-mes thead th.cie-provcol:hover { text-decoration: underline; }
table.cie-mes td.cie-provcol { background: var(--accent-bg); }
table.cie-mes tbody tr:hover td.cie-provcol { background: #dfeaf6; }
/* columna Control: chequeo de caja por día (fondo de color según falta/sobra) */
table.cie-mes th.cie-ctrlcol { background: var(--vino); color: #fff; }
table.cie-mes td.cie-ctrlcol { white-space: nowrap; text-align: center; }
table.cie-mes tbody tr:hover td.cie-ctrlcol { filter: brightness(1.06); }

/* ---------- reportes ---------- */
.dia-nav { display: flex; align-items: center; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.dia-nav input[type="date"] { width: auto; max-width: 170px; }
.dia-nav .dia-fl { padding: 8px 14px; font-weight: 900; }
.dia-nav .dia-fl[disabled] { opacity: .35; pointer-events: none; }
.dia-lbl { font-weight: 800; color: var(--ink); margin-left: auto; text-transform: capitalize; }
.dueno-lock { margin: 10px 0; width: 100%; }
.dueno-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin: 10px 0; box-shadow: var(--sh-sm); }
.dueno-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; margin-bottom: 12px; gap: 8px; flex-wrap: wrap; }
.dueno-head .mini { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: .78rem; font-weight: 700; width: auto; margin-left: 6px; cursor: pointer; color: var(--ink); }
.dueno-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.dueno-kpis > div { display: flex; flex-direction: column; gap: 3px; }
.dueno-kpis .muted { font-size: .72rem; }
.dueno-kpis b { font-size: 1.05rem; }
.dueno-kpis .gan-ok { color: var(--ok); }
.dueno-kpis .gan-neg { color: var(--neg); }
.link-mini { background: none; border: none; color: var(--muted); font-size: .76rem; font-weight: 700; cursor: pointer; padding: 8px 0 0; width: auto; text-decoration: underline; }
.sync-chk { display: flex; flex-direction: row; align-items: center; gap: 9px; font-weight: 800; color: var(--ink); background: var(--accent-bg); border: 1px solid var(--accent); border-radius: 9px; padding: 11px 13px; margin: 6px 0 12px; font-size: .86rem; cursor: pointer; }
.sync-chk input { width: auto; }

/* tildes de qué pedido guardar (Ramos / Haedo / …) */
.ped-chks { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.ped-chks label { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .9rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 10px 14px; cursor: pointer; box-shadow: var(--sh-sm); }
.ped-chks input { width: auto; }
.ped-chks label:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }

/* conversor fresco → congelado */
.conv-row { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 13px; margin-bottom: 6px; box-shadow: var(--sh-sm); }
.conv-row .pn { flex: 1; }
.conv-st { font-size: .82rem; font-weight: 700; color: var(--muted); flex: none; }
.conv-st b { font-size: 1.02rem; color: var(--ink); margin-left: 3px; }
.conv-st.cong b { color: var(--celeste); }
.convin { width: 58px; text-align: center; flex: none; padding: 7px 4px; font-weight: 800; }
.conv-btn { flex: none; border: 1.5px solid var(--celeste-bd); background: var(--celeste-bg); color: var(--celeste); border-radius: 7px; padding: 9px 13px; font-weight: 800; cursor: pointer; font-family: inherit; font-size: .88rem; }
.conv-btn:active { transform: scale(.94); }

/* botón Mié/Sáb dentro de la barra de controles (no ocupa fila propia) */
.toggle-ped {
  flex: 0 0 auto; min-width: 0; margin-left: auto; font-size: .88rem; padding: 11px 13px;
  border-style: dashed; border-color: var(--accent); color: var(--accent); background: var(--accent-bg);
}
.toggle-ped.on { background: var(--accent); border-color: var(--accent); color: #fff; border-style: solid; box-shadow: 0 4px 12px rgba(58,121,182,.35); }
.seg-ley { margin-left: auto; align-self: center; }
.mp-costo label:last-child input { background: var(--bg); color: var(--muted); }
.rep-kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; text-align: center; font-size: 1.05rem; font-weight: 700; box-shadow: var(--sh-sm); }
.rep-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 6px; font-size: .92rem; font-weight: 700; box-shadow: var(--sh-sm); }
/* mostrador vs PedidosYa (en Reportes, debajo del total del día) */
.rep-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 4px; }
.rep-split > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--sh-sm); }
.rep-split b { font-size: 1.15rem; font-weight: 900; color: var(--vino); }
.rep-split .rp-py { background: #fceae8; border-color: #f0bdb7; }
.rep-split .rp-py b { color: #a02a21; }
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: .84rem; font-weight: 700; }
.bar-row > span:first-child { width: 46px; }
.bar-row > span:last-child { width: 80px; text-align: right; }
.bar { flex: 1; background: var(--line-soft); border-radius: 5px; height: 16px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--vino)); border-radius: 5px; }
.pos { color: var(--ok); }
.neg { color: var(--neg); }

/* ---------- pedidos ---------- */
.ped-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 6px; font-weight: 700; box-shadow: var(--sh-sm); }
.ped-row input { max-width: 84px; text-align: center; }
.ped-bloque { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px 12px; margin-bottom: 14px; box-shadow: var(--sh-sm); }
.ped-bloque .col-h { margin-bottom: 8px; }
.ped-it { display: flex; justify-content: space-between; align-items: center; padding: 5px 2px; border-bottom: 1px solid var(--line-soft); font-weight: 700; font-size: .9rem; }
.ped-it:last-of-type { border-bottom: none; }
.ped-it b { font-size: 1.02rem; }
.ped-acc { display: flex; gap: 10px; margin-top: 10px; }
.ped-acc .btn-ghost { flex: 1; }
.ped-botones { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.ped-botones .btn { flex: 1 1 auto; margin: 0; }
.ped-botones .btn-ghost { flex: 0 1 auto; }
.btn-ghost.danger { color: var(--neg); border-color: var(--neg); }

/* ---------- tabbar ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -4px 18px rgba(25,35,55,.07);
}
.tab {
  flex: 1; border: none; background: none; padding: 9px 2px 11px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: .72rem; font-weight: 700; color: var(--muted); cursor: pointer; position: relative;
}
.tab span { font-size: 1.35rem; }
.tab.active { color: var(--vino); }
.tab.active::before { content: ""; position: absolute; top: 0; width: 30px; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent); }

/* ---------- Administración / Gastos fijos ---------- */
/* la sección de administración se ve en PC: ancha, a todo lo que dé */
.view.admin { max-width: 1640px; }

.adm-solapas { display: flex; gap: 10px; flex-wrap: wrap; margin: 2px 0 16px; border-bottom: 1px solid var(--line); }
.adm-solapa { border: none; background: none; padding: 8px 2px 11px; font-size: .92rem; font-weight: 800; color: var(--muted); cursor: pointer; position: relative; }
.adm-solapa.on { color: var(--vino); }
.adm-solapa.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); }

.gf-top { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 6px; }
.gf-nav { display: flex; align-items: center; gap: 12px; }
.gf-nav .gf-fl { padding: 8px 15px; font-weight: 900; }
.gf-anio { font-size: 1.3rem; font-weight: 900; color: var(--vino); min-width: 66px; text-align: center; }
.gf-total-box { display: flex; flex-direction: column; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 16px; }
.gf-total-box b { font-size: 1.25rem; font-weight: 900; color: var(--vino); }
.gf-addg { width: auto; margin: 0; }
.gf-ayuda { margin: 2px 0 12px; }

/* planilla completa (concepto × 12 meses), editable directo */
.gf-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--sh-sm); }
table.gf-tabla { border-collapse: collapse; width: 100%; font-size: .86rem; white-space: nowrap; }
table.gf-tabla th, table.gf-tabla td { border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); text-align: right; }
table.gf-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--vino-soft); font-weight: 800; padding: 8px 10px; }
table.gf-tabla thead th.gf-c0 { z-index: 3; text-align: left; }
table.gf-tabla .gf-c0 { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; padding: 7px 10px; font-weight: 700; min-width: 200px; }
table.gf-tabla tbody tr:hover td { background: var(--accent-bg); }
table.gf-tabla tbody tr:hover .gf-c0 { background: var(--accent-bg); }

/* casilla editable con marcador de comentario */
.gf-cell { position: relative; padding: 0; }
.gf-cell input.gf-monto { width: 100%; min-width: 88px; border: none; background: transparent; text-align: right; padding: 7px 10px; font-weight: 700; font-size: .9rem; color: var(--ink); font-family: inherit; border-radius: 0; }
.gf-cell input.gf-monto:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: #fff; }
.gf-nota { position: absolute; top: 1px; left: 2px; border: none; background: none; cursor: pointer; font-size: .62rem; line-height: 1; opacity: 0; padding: 1px; }
.gf-cell:hover .gf-nota { opacity: .5; }
.gf-cell.con-nota .gf-nota { opacity: 1; }
.gf-cell.con-nota::after { content: ""; position: absolute; top: 0; right: 0; border-top: 8px solid var(--accent); border-left: 8px solid transparent; pointer-events: none; }
/* casillas automáticas (se llenan del diario): fondo tenue para distinguirlas */
.gf-cell.gf-auto { background: var(--accent-bg); }
.gf-cell.gf-auto input.gf-monto { color: var(--vino-soft); }
table.gf-tabla tbody tr:hover .gf-cell.gf-auto { background: #dfeaf6; }
.gf-badge { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 6px; background: var(--accent-bg); color: var(--accent); font-size: .58rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; vertical-align: middle; }

/* filas de grupo, subtotal y total general */
table.gf-tabla tr.gf-a-gh td { background: var(--accent-bg); }
table.gf-tabla tr.gf-a-gh .gf-c0 { background: var(--accent-bg); text-transform: uppercase; font-size: .76rem; letter-spacing: .02em; }
table.gf-tabla tr.gf-a-gh:hover td, table.gf-tabla tr.gf-a-gh:hover .gf-c0 { background: var(--accent-bg); }
table.gf-tabla tr.gf-a-sub td { background: var(--surface-2); font-weight: 800; border-top: 1px solid var(--line); padding: 7px 10px; }
table.gf-tabla tr.gf-a-sub:hover td { background: var(--surface-2); }
table.gf-tabla .gf-rowtot { padding: 7px 10px; font-weight: 800; color: var(--vino-soft); background: var(--surface); }
table.gf-tabla tfoot td { position: sticky; bottom: 0; background: var(--gold-bg); font-weight: 900; border-top: 2px solid var(--line); padding: 8px 10px; }
table.gf-tabla tfoot .gf-c0 { background: var(--gold-bg); }

/* ---------- Check semanal (sobres) ---------- */
.ck-mes { min-width: 150px; }
.ck-pcts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; }
.ck-pcts label { display: flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 800; color: var(--vino-soft); }
.ck-pcts input.ck-pctin { width: 54px; text-align: right; font-weight: 800; padding: 6px 8px; }
.ck-pctg { font-size: .85rem; font-weight: 800; color: var(--vino); }
.ck-pctwarn { color: var(--neg); font-weight: 800; font-size: .8rem; }
.ck-h { margin: 22px 0 8px; }
.ck-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 14px; font-weight: 900; font-size: .85rem; color: #fff; }
.ck-chip.pend { background: #cf3b33; }
.ck-chip.ok { background: #1f9d57; }

/* ---------- Administración / Sobres (plata separada) ---------- */
.sob-cards { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 4px; }
.sob-card {
  flex: 1 1 205px; max-width: 340px; background: var(--surface); border: 1px solid var(--line);
  border-left: 5px solid var(--accent); border-radius: 12px; padding: 12px 16px; box-shadow: var(--sh-sm);
}
.sob-card.vacio { border-left-color: var(--line); opacity: .85; }
.sob-top { display: flex; align-items: center; gap: 7px; font-weight: 800; color: var(--vino-soft); font-size: .9rem; }
.sob-emo { font-size: 1.1rem; }
.sob-saldorow { display: flex; align-items: center; gap: 8px; }
.sob-saldo { display: block; font-size: 1.9rem; font-weight: 900; color: var(--vino); line-height: 1.15; margin: 4px 0 2px; }
.sob-saldo.neg, .sob-h-saldo.neg, .sob-sal.neg { color: #cf3b33; }
.sob-lapiz { background: none; border: none; cursor: pointer; font-size: .95rem; opacity: .6; padding: 2px 4px; }
.sob-lapiz:hover { opacity: 1; }
.sob-card.fix { border-left-color: var(--accent); background: var(--surface-2); }
.sob-fixrow { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
input.sob-in.sob-fixin { font-size: 1.1rem; width: 150px; }
select.sob-in.sob-sel { width: auto; text-align: left; }
tr.sob-editrow td { background: var(--surface-2); }
tr.sob-editrow .sob-add { margin: 0; border: none; background: none; padding: 4px 0; }
.sob-sub { font-size: .78rem; font-weight: 700; color: var(--muted); }
.sob-nota { font-size: .76rem; color: var(--muted); margin-top: 4px; }
/* sobre con plata separada que no está entrando (falta la fecha de arranque) */
.sob-card.ojo { border-left-color: var(--neg); background: #fceae8; }
.sob-card.ojo .sob-nota { color: var(--neg); font-weight: 800; }
.sob-alerta { margin: 8px 0 4px; padding: 11px 14px; border-radius: var(--r-sm); font-size: .82rem; font-weight: 700;
  background: #fceae8; border: 1px solid #f0bdb7; color: #a02a21; line-height: 1.5; }
.sob-alerta .sob-alerta-q { margin-top: 7px; font-weight: 600; }
.sob-alerta.suave { background: var(--surface-2); border-color: var(--line); color: var(--vino-soft); font-weight: 600; }
/* resalta la casilla de fecha que falta llenar */
.sob-arr.falta { background: #fceae8; border: 1px solid #f0bdb7; border-radius: var(--r-sm); padding: 8px 10px; }
.sob-arr.falta .sob-fecha { border-color: var(--neg); box-shadow: 0 0 0 3px rgba(207,59,51,.14); }
.sob-arr.falta .muted { color: #a02a21 !important; font-weight: 800; }

.sob-bloque { margin-top: 10px; }
.sob-h-saldo { color: var(--accent); }
.sob-arr, .sob-add, .sob-agui {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px;
  font-size: .85rem; font-weight: 700; color: var(--vino-soft); margin-bottom: 8px;
}
.sob-agui { background: #fff7e8; border-color: #f0d9ac; }
.sob-add { margin: 8px 0 0; }
input.sob-in {
  border: 1.5px solid var(--line); border-radius: 6px; padding: 6px 9px; font-size: .88rem;
  font-weight: 800; font-family: inherit; text-align: right; width: 120px; background: #fff; color: var(--ink);
}
input.sob-in.sob-fecha { width: 150px; text-align: left; font-weight: 700; }
input.sob-in.sob-motivo { width: 260px; text-align: left; font-weight: 700; }
input.sob-in.sob-dias { width: 56px; }
.sob-b { border-radius: 8px; padding: 7px 12px; font-weight: 800; }
.sob-b.pos { background: var(--ok, #1f9d57); border-color: var(--ok, #1f9d57); color: #fff; }
.sob-b.neg { background: #cf3b33; border-color: #cf3b33; color: #fff; }
.sob-prox { font-weight: 800; color: var(--muted); }
.sob-prox.toca { color: #cf3b33; }

table.sob-tabla { border-collapse: collapse; width: 100%; max-width: 760px; font-size: .86rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.sob-tabla th, table.sob-tabla td { border-bottom: 1px solid var(--line-soft); padding: 6px 10px; text-align: right; }
table.sob-tabla thead th { background: var(--surface-2); color: var(--vino-soft); font-weight: 800; font-size: .78rem; }
table.sob-tabla th:nth-child(2), table.sob-tabla td.sob-txt { text-align: left; }
.sob-f { white-space: nowrap; color: var(--muted); font-weight: 700; }
.sob-txt { font-weight: 700; }
.sob-det { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); }
.sob-m { font-weight: 900; white-space: nowrap; }
.sob-m.pos { color: #1f9d57; }
.sob-m.neg { color: #cf3b33; }
.sob-sal { font-weight: 800; white-space: nowrap; }
tr.sob-esauto .sob-txt { color: var(--vino-soft); }
.sob-rm { opacity: .6; }
.sob-rm:hover { opacity: 1; color: var(--neg); }

/* tabla estructura */
.ck-est-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--sh-sm); max-width: 760px; }
table.ck-est { border-collapse: collapse; width: 100%; font-size: .88rem; }
table.ck-est th, table.ck-est td { border-bottom: 1px solid var(--line-soft); padding: 6px 10px; text-align: right; }
table.ck-est thead th { background: var(--surface-2); color: var(--vino-soft); font-weight: 800; }
table.ck-est .ck-c0 { text-align: left; font-weight: 700; min-width: 190px; }
table.ck-est tr.ck-gh td { background: var(--accent-bg); color: var(--accent); font-weight: 900; text-transform: uppercase; font-size: .72rem; letter-spacing: .03em; text-align: left; }
table.ck-est input.ck-in { width: 120px; border: 1.5px solid var(--line); border-radius: 6px; text-align: right; font-weight: 800; padding: 5px 8px; font-size: .88rem; }
table.ck-est tfoot td { font-weight: 900; background: var(--surface-2); border-top: 2px solid var(--line); }
/* adelantos de sueldo: se suman solos al "Pagado" (vienen del Cierre, columna Extra).
   El detalle va en una fila aparte, a lo ancho: en la columna no entra. */
.ck-adel { margin-top: 3px; font-size: .74rem; font-weight: 800; color: var(--accent); text-align: right; white-space: nowrap; }
tr.ck-adelrow td { text-align: left; background: var(--accent-bg); padding: 7px 10px; }
.ck-adellbl { font-size: .72rem; font-weight: 900; color: var(--accent); text-transform: uppercase; letter-spacing: .03em; margin-right: 6px; }
.ck-adelchip {
  display: inline-block; background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; margin: 2px 5px 2px 0; font-size: .78rem; font-weight: 700; white-space: nowrap; color: var(--vino-soft);
}
.ck-adelchip b { color: var(--vino); }
.ck-adeltot { font-size: .82rem; font-weight: 900; color: var(--vino); white-space: nowrap; }
.ck-saldo { font-weight: 900; white-space: nowrap; }
.ck-saldo.pend { color: #cf3b33; }
.ck-saldo.ok { color: #1f9d57; }
.ck-saldo.extra { color: #2e86c1; }
.ck-rm { opacity: .4; }
.ck-rm:hover { opacity: 1; color: var(--neg); }
.ck-acum { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 10px 0 4px; font-size: .9rem; font-weight: 700; }
.ck-difacum { font-weight: 900; }
.ck-difacum.bad { color: #cf3b33; }
.ck-difacum.ok { color: #1f9d57; }

/* tabla semanal */
table.ck-tabla { border-collapse: collapse; width: 100%; font-size: .86rem; white-space: nowrap; }
table.ck-tabla th, table.ck-tabla td { border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); padding: 6px 10px; text-align: right; }
table.ck-tabla thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); color: var(--vino-soft); font-weight: 800; }
table.ck-tabla thead th.ck-c0 { z-index: 3; }
table.ck-tabla .ck-c0 { position: sticky; left: 0; z-index: 1; background: var(--surface); text-align: left; font-weight: 700; min-width: 220px; }
table.ck-tabla tr.ck-sec td { background: var(--vino); color: #fff; font-weight: 900; text-align: left; font-size: .78rem; letter-spacing: .03em; position: static; }
table.ck-tabla tr.ck-strong td { font-weight: 900; background: var(--gold-bg); }
table.ck-tabla tr.ck-strong .ck-c0 { background: var(--gold-bg); }
table.ck-tabla tr.ck-ref td { color: var(--muted); font-size: .8rem; }
table.ck-tabla .ck-selcol { background: var(--accent-bg); }
table.ck-tabla .ck-now { display: block; font-size: .62rem; color: var(--accent); font-weight: 900; text-transform: uppercase; }
table.ck-tabla input.ck-in { width: 110px; border: 1.5px solid var(--line); border-radius: 6px; text-align: right; font-weight: 800; padding: 4px 7px; font-size: .85rem; }
table.ck-tabla .ck-tot { font-weight: 900; background: var(--surface-2); }
table.ck-tabla .ck-cur { display: block; font-size: .62rem; color: var(--muted); font-weight: 800; text-transform: uppercase; }
/* celdas de los sobres: objetivo arriba, lo apartado + tilde abajo */
.ck-nota { display: block; font-size: .66rem; font-weight: 600; color: var(--muted); text-transform: none; }
td.ck-sobre { padding: 6px 8px; vertical-align: top; }
td.ck-sobre .ck-obj { font-weight: 900; font-size: .95rem; }
td.ck-sobre .ck-seprow { display: flex; align-items: center; gap: 5px; justify-content: flex-end; margin-top: 3px; }
table.ck-tabla td.ck-sobre input.ck-sepin { width: 96px; font-size: .78rem; padding: 3px 6px; font-weight: 700; }
.ck-chkwrap { display: inline-flex; align-items: center; cursor: pointer; }
.ck-chkwrap input { width: 19px; height: 19px; cursor: pointer; accent-color: #1f9d57; }
.ck-fa { font-size: .66rem; font-weight: 800; text-align: right; margin-top: 2px; min-height: 12px; }
.ck-fa.ok { color: #1f9d57; }
.ck-fa.parc { color: #e8842e; }
.ck-fa.extra { color: #2e86c1; }
td.ck-sobre.done { background: #e6f6ec; }
td.ck-sobre.done.ck-selcol { background: #d6f0e0; }
td.ck-sobre.parcial { background: #fdf0e2; }
td.ck-sobre.parcial.ck-selcol { background: #fbe6cf; }
tr.ck-sobrerow.ck-strong td.ck-sobre { background: var(--gold-bg); }
tr.ck-sobrerow.ck-strong td.ck-sobre.done { background: #e6f6ec; }
tr.ck-sobrerow.ck-strong td.ck-sobre.parcial { background: #fdf0e2; }
.ck-pyi { font-size: .68rem; font-weight: 800; margin-top: 2px; text-align: right; }
.ck-pyi.ok { color: #1f9d57; }
.ck-pyi.bad { color: #cf3b33; }
.ck-pyi.extra { color: #2e86c1; }
.ck-pyi.wait { color: var(--muted); }

/* resumen del mes */
.ck-resumen { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ck-r { flex: 1 1 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--sh-sm); }
.ck-r > span:first-child { font-size: .76rem; font-weight: 800; color: var(--vino-soft); }
.ck-r b { font-size: 1.25rem; font-weight: 900; color: var(--ink); }
.ck-r.ck-rgan { background: var(--gold-bg); }
.ck-r.ck-rgan b { font-size: 1.6rem; }
.ck-rmsg { color: #fff; font-weight: 800; border-radius: 12px; padding: 12px 16px; margin: 4px 0 14px; }

/* nombres de grupo/concepto y accioncitas que aparecen al pasar el mouse */
.gf-gnom, .gf-nom { border: none; background: none; padding: 0; text-align: left; cursor: pointer; font-family: inherit; font-size: .88rem; color: var(--ink); }
.gf-gnom { font-weight: 900; color: var(--accent); text-transform: uppercase; letter-spacing: .02em; font-size: .78rem; }
.gf-acc { float: right; }
.gf-mini { border: none; background: none; cursor: pointer; opacity: 0; font-size: .8rem; padding: 0 3px; }
.gf-c0:hover .gf-mini { opacity: .55; }
.gf-mini:hover { opacity: 1; }
.gf-xrow { margin-left: 6px; }

/* ---------- modal administrar producto ---------- */
.editp { border: none; background: none; cursor: pointer; font-size: 1.05rem; padding: 0 4px; flex: none; }
.modal-bg {
  position: fixed; inset: 0; z-index: 60; background: rgba(20,28,40,.55);
  display: flex; align-items: flex-start; justify-content: center; padding: 22px 12px; overflow-y: auto;
}
.modal {
  background: var(--surface); border-radius: 16px; padding: 20px; width: 100%; max-width: 520px;
  box-shadow: var(--sh-lg); margin: auto;
}
.modal h3 { margin: 0 0 14px; font-size: 1.15rem; }
.modal label { display: flex; flex-direction: column; font-size: .76rem; font-weight: 700; color: var(--muted); gap: 4px; margin-bottom: 12px; }
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mp-grid label { margin-bottom: 12px; }
.mp-chks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 2px 0 14px; }
.mp-chks .chk { flex-direction: row; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink); margin: 0; }
.mp-chks .chk input { width: auto; }
.mp-acciones { display: flex; gap: 10px; margin-top: 6px; align-items: stretch; }
.mp-acciones .btn { margin-top: 0; flex: 1; }
.mp-acciones .btn-ghost { flex: 0 0 auto; }

/* ---------- toast / demo ---------- */
#toast {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 12px;
  font-weight: 800; opacity: 0; pointer-events: none; transition: all .25s; z-index: 50;
  max-width: 90vw; text-align: center; box-shadow: var(--sh-lg);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.err { background: var(--neg); }
.badge-demo { position: fixed; bottom: 84px; left: 0; right: 0; background: var(--amar); color: #3a2c00; text-align: center; font-size: .72rem; font-weight: 700; padding: 4px; z-index: 9; }
.list { display: flex; flex-direction: column; }

/* Una sola columna hasta 900px. Antes el corte estaba en 680 y una tablet
   (768) caia justo en el hueco: quedaba con DOS columnas que no entraban, la
   pagina se iba de ancho y todo se veia corrido. En el monitor del local
   (1280) siguen las dos columnas de siempre. */
@media (max-width: 900px) {
  .cols { grid-template-columns: 1fr; }
  .view.vender { max-width: 820px; }
  /* con una sola columna ya no hace falta reservarles tanto ancho */
  .cols-costo .col, .cols-costo .col:has(.con-franq) { min-width: 0; }
}

/* ---------- top-split: la venta de ahora (izq) + vencidos (der) ----------
   La balanza del día salió de acá a propósito: sigue estando abajo de todo.
   Arriba va lo que se mira en CADA cliente. El bloque está pensado para NO
   crecer: la lista de productos se corta a dos líneas. */
.ts-vta {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: linear-gradient(120deg, var(--vino), var(--vino-d)); color: #fff;
  border-radius: var(--r-sm); padding: 9px 15px; box-shadow: var(--sh-sm); cursor: pointer;
}
.uv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.uv-lbl { color: #aebccd; font-weight: 700; font-size: .78rem; }
.uv-hace { font-size: .62rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  background: rgba(255,255,255,.16); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.uv-hace.uv-cerrada { background: rgba(255,255,255,.32); }
.uv-items { display: flex; flex-wrap: wrap; gap: 0 11px; font-size: .84rem; line-height: 1.42;
  opacity: .95; max-height: 2.9em; overflow: hidden; margin: 1px 0 2px; }
.uv-it b { font-weight: 900; }
.uv-mas { opacity: .68; font-style: italic; }
.uv-tot { display: flex; align-items: baseline; gap: 9px; }
.uv-tot b { font-size: 1.45rem; font-weight: 900; letter-spacing: .4px; }
.uv-n { color: #aebccd; font-size: .78rem; font-weight: 700; }
.uv-vacio { font-size: .85rem; opacity: .8; }
.ts-vta .fp-chip { color: #aebccd; }
.ts-vta .fp-chip.alerta { color: var(--amar); }

/* ---------- top-split: (histórico) vencidos + balanza del día ---------- */
.top-split { display: flex; gap: 12px; align-items: stretch; margin-bottom: 10px; }
.top-split > * { flex: 1 1 0; min-width: 0; }
.top-split .alerta-venc { margin-bottom: 0; height: 100%; }
.alerta-venc.sin-venc { display: flex; align-items: center; }
.ts-bal {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: linear-gradient(120deg, var(--vino), var(--vino-d)); color: #fff;
  border-radius: var(--r-sm); padding: 10px 16px; box-shadow: var(--sh-sm);
}
.ts-bal .muted { color: #aebccd; font-weight: 700; font-size: .8rem; }
.ts-bal .big { font-size: 1.7rem; font-weight: 900; letter-spacing: .5px; }
@media (max-width: 560px) { .top-split { flex-direction: column; } }

/* ---------- botón combinado Desperdicio / Me llevé ---------- */
.salida-pick { display: flex; gap: 8px; margin: -2px 0 10px; }
.salida-pick .seg-b { flex: 1; }

/* ---------- mayorista ---------- */
.mini { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 11px; font-size: .8rem; font-weight: 800; color: var(--ink); cursor: pointer; width: auto; font-family: inherit; }
.mini.danger { color: var(--neg); border-color: var(--neg); }
.cli-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 16px; margin-bottom: 8px; box-shadow: var(--sh-sm); cursor: pointer; }
.cli-card:hover { border-color: var(--accent); }
.cli-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cli-info b { font-size: 1.02rem; }
.cli-go { color: var(--muted); font-size: 1.4rem; font-weight: 800; }
.cli-head { display: flex; align-items: center; gap: 12px; }
.cli-head h2 { margin: 0; }
.rep-sub { margin: 16px 0 6px; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }

/* pedido del cliente (stock real + reparto fresco/congelado) */
.pm2-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 14px; margin-bottom: 8px; box-shadow: var(--sh-sm); }
.pm2-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pm2-top .pn { font-weight: 800; }
.pm2-stock { margin: 3px 0 8px; }
.pm2-stock b { color: var(--ink); }
.pm2-line { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pm2-pidel { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; font-weight: 700; color: var(--muted); }
/* casillero con botones − [n] + */
.pm2-qty { display: inline-flex; align-items: stretch; gap: 4px; }
.pm2-qty input { width: 62px; text-align: center; font-weight: 800; padding: 7px 4px; }
.pm2-inc { flex: 0 0 auto; width: 34px; border: 1.5px solid var(--line); background: var(--surface); border-radius: 7px; font-size: 1.15rem; font-weight: 800; color: var(--ink); cursor: pointer; line-height: 1; font-family: inherit; }
.pm2-inc:hover { border-color: var(--accent); }
.pm2-inc:active { transform: scale(.92); }
.pm2-eq { font-weight: 700; color: var(--muted); padding-bottom: 8px; }
.pm2-eq .pm2-our { color: var(--accent); font-size: 1.05rem; }
.pm2-sub { margin-left: auto; padding-bottom: 8px; }
.pm2-sub b { color: var(--ink); }
.pm2-split { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.pm2-split label { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: var(--muted); }
.pm2-split input { width: 64px; text-align: center; font-weight: 800; padding: 6px 4px; }
.pm2-chk { font-size: .8rem; font-weight: 800; }
.pm2-chk .ok { color: var(--ok); }
.pm2-chk .bad { color: var(--neg); }
.pedmay-total { text-align: right; font-size: 1.1rem; font-weight: 800; margin: 8px 2px 12px; }
.pedmay-total b { color: var(--accent); }

/* modal cliente: productos con precio + conversión por producto */
.mc-prods { max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px; margin-bottom: 14px; }
.mc-prod { padding: 7px 6px; border-bottom: 1px solid var(--line-soft); }
.mc-prod:last-child { border-bottom: none; }
.mc-prod .chk { flex-direction: row; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink); margin: 0; }
.mc-prod .chk input { width: auto; }
.mc-prod.on { background: var(--accent-bg); border-radius: 6px; }
.mc-fields { display: none; flex-direction: column; gap: 6px; margin: 8px 0 4px 26px; }
.mc-prod.on .mc-fields { display: flex; }
.mc-flabel { display: flex; flex-direction: column; gap: 3px; font-size: .74rem; font-weight: 700; color: var(--muted); margin: 0; }
.mc-precio { text-align: left; font-weight: 800; padding: 7px 8px; max-width: 220px; }
.mc-conv { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mc-conv-lbl { flex: 0 0 auto; }
.mc-conv input { padding: 6px 7px; font-size: .82rem; }
.mc-cn, .mc-ce { width: 52px; text-align: center; font-weight: 800; }
.mc-un, .mc-ue { width: 110px; }
.mc-conv-eq { font-weight: 900; color: var(--muted); }
.mc-conv-hint { margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════════════
   ADMINISTRACIÓN · FACTURACIÓN AFIP
   ═══════════════════════════════════════════════════════════════════════ */
.fac-top { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 14px; }
.fac-nav { display: flex; align-items: center; gap: 8px; }
.fac-vs { margin-left: auto; text-align: right; line-height: 1.3; }
.fac-vs b { display: block; font-size: 1.02rem; color: var(--vino); }

/* estado del motor de la PC del local */
.fac-motor { font-size: .82rem; font-weight: 800; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); }
.fac-motor.on { color: var(--ok); background: #eaf7f1; border-color: #bfe5d2; }
.fac-motor.off { color: var(--neg); background: #fdeeec; border-color: #f4c8c2; }

/* --- tarjetas de límite por persona --- */
.fac-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
@media (max-width: 720px) { .fac-cards { grid-template-columns: 1fr; } }
.fac-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sh-sm); border-top: 3px solid var(--celeste); }
.fac-card.fac-fede { border-top-color: var(--ok); }
.fac-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.fac-card-top h3 { font-size: 1.05rem; font-weight: 900; color: var(--vino); margin: 0; }
select.fac-cat { font-size: .8rem; font-weight: 700; padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); font-family: inherit; cursor: pointer; }
.fac-nums { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px; }
.fac-num { display: flex; flex-direction: column; gap: 1px; }
.fac-num b { font-size: 1.02rem; font-weight: 900; color: var(--vino); }
.fac-num-big b { font-size: 1.3rem; }
.fac-num-lbl { font-size: .7rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }

.fac-barra { position: relative; height: 20px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.fac-barra i { display: block; height: 100%; background: var(--ok); transition: width .3s; }
.fac-barra.ojo i { background: var(--amar); }
.fac-barra.mal i { background: var(--neg); }
.fac-barra span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 900; color: var(--vino); }
.fac-veredicto { margin: 8px 0 0; font-size: .85rem; color: var(--vino-soft); }
.fac-veredicto.ojo { color: var(--amar); }
.fac-veredicto.mal { color: var(--neg); font-weight: 700; }
.fac-mal { color: var(--neg); }

.fac-ayuda { margin: 0 0 12px; line-height: 1.5; }

/* --- botones de facturar --- */
.fac-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.btn-fac { border: none; border-radius: var(--r-sm); padding: 11px 18px; font-size: .9rem; font-weight: 800; color: #fff; cursor: pointer; font-family: inherit; box-shadow: var(--sh-sm); }
.btn-fac:hover { filter: brightness(1.07); }
/* monto total de lo marcado, adentro del botón (para saber cuánto se va a facturar) */
.btn-fac-tot { display: block; font-size: 1.02rem; font-weight: 900; margin-top: 2px; letter-spacing: .2px; }
.btn-fac:disabled { opacity: .45; cursor: default; filter: none; }
.btn-fac-eli { background: var(--celeste); }
.btn-fac-fede { background: var(--ok); }
.btn-fac-todo { background: var(--vino); }

/* --- tabla del mes --- */
table.fac-tabla { border-collapse: collapse; width: 100%; font-size: .88rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--sh-sm); }
table.fac-tabla th, table.fac-tabla td { border-bottom: 1px solid var(--line-soft); padding: 7px 10px; text-align: left; }
table.fac-tabla thead th { background: var(--surface-2); color: var(--vino-soft); font-weight: 800; font-size: .8rem; }
table.fac-tabla thead th.small { padding: 4px 10px; font-weight: 600; }
.fac-h-eli { color: var(--celeste) !important; background: var(--celeste-bg) !important; }
.fac-h-fede { color: var(--ok) !important; background: #eaf7f1 !important; }
table.fac-tabla tbody tr:hover td { background: var(--accent-bg); }
.fac-fecha { font-weight: 800; color: var(--vino); white-space: nowrap; width: 92px; }
.fac-badge { display: inline-block; margin-left: 5px; font-size: .66rem; font-weight: 900; color: var(--neg); background: #fdeeec; border-radius: 4px; padding: 1px 5px; }
.fac-row-vencido td { background: #fffaf6; }
.fac-td { width: 42%; }
.fac-td.fac-vencido { opacity: .78; }

.fac-pick { display: flex; align-items: center; gap: 8px; margin: 0; }
.fac-pick input.fac-chk { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; flex: none; }
input.fac-monto { width: 108px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); text-align: right; font-weight: 800; font-size: .88rem; font-family: inherit; color: var(--ink); background: var(--surface); }
input.fac-monto:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
input.fac-monto.editado { border-color: var(--amar); background: #fdf7e9; }
input.fac-monto:disabled { color: var(--muted); background: var(--surface-2); }

.fac-hecho { background: #f2faf6; }
.fac-ok { font-weight: 800; color: var(--ok); }
.fac-sub { font-size: .76rem; color: var(--muted); margin-top: 1px; }
.fac-cae { font-variant-numeric: tabular-nums; }
.fac-tag { font-size: .66rem; font-weight: 800; color: var(--amar); background: var(--gold-bg); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.fac-curso { background: #fdf7e9; }
.fac-espera { display: flex; align-items: center; gap: 7px; font-weight: 800; color: var(--amar); }
.fac-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amar); animation: facLatir 1s ease-in-out infinite; }
@keyframes facLatir { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.fac-err { font-size: .74rem; color: var(--neg); margin-top: 3px; }
.fac-todos { border: none; background: none; color: var(--accent); font-size: .74rem; font-weight: 700; cursor: pointer; padding: 0; font-family: inherit; text-decoration: underline; }

table.fac-tabla tfoot td { background: var(--surface-2); font-weight: 800; border-top: 2px solid var(--line); border-bottom: none; }
.fac-tot { text-align: right !important; font-variant-numeric: tabular-nums; }
.fac-tot.ok { color: var(--ok); }

/* --- ajustes a mano (facturas de papel) --- */
.fac-ajustes { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--sh-sm); }
input.fac-aj { width: 100%; min-width: 82px; border: none; background: transparent; text-align: right; padding: 7px 9px; font-weight: 700; font-size: .88rem; color: var(--ink); font-family: inherit; }
input.fac-aj:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: #fff; }
.fac-err.fac-revisar { color: var(--amar); font-weight: 700; }

/* dividir un día en varias facturas (×N) */
.fac-partes { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); flex: none; }
.fac-partes.on { border-color: var(--amar); background: #fdf7e9; }
.fac-partes b { font-size: .78rem; font-weight: 800; min-width: 22px; text-align: center; color: var(--vino); }
.fac-partes button { border: none; background: none; width: 20px; height: 24px; cursor: pointer; font-size: .9rem; font-weight: 800; color: var(--vino-soft); font-family: inherit; padding: 0; }
.fac-partes button:hover:not(:disabled) { color: var(--accent); }
.fac-partes button:disabled { opacity: .25; cursor: not-allowed; }
.fac-split { color: var(--amar); font-weight: 700; margin-top: 2px; }
.fac-otra { border: 1px dashed var(--line); background: none; color: var(--muted); font-size: .72rem; padding: 3px 8px; border-radius: var(--r-sm); cursor: pointer; font-family: inherit; margin-top: 3px; }
.fac-otra:hover { border-color: var(--accent); color: var(--accent); }
.fac-td .fac-ok { margin-bottom: 2px; }
.fac-td .fac-ok .fac-sub { display: inline; margin-left: 4px; }
.fac-incompleto { margin: 8px 0 0; padding: 7px 9px; background: #fdf7e9; border: 1px solid var(--gold-bd); border-radius: var(--r-sm); font-size: .76rem; line-height: 1.45; color: var(--amar); }


/* ¿me conviene recategorizar? */
.fac-recat { display: flex; gap: 9px; align-items: flex-start; margin-top: 9px; padding: 9px 11px; border-radius: var(--r-sm); font-size: .84rem; line-height: 1.45; }
.fr-bajar { background: #eaf7f1; border: 1px solid #bfe5d2; color: var(--ok); }
.fr-subir { background: var(--gold-bg); border: 1px solid var(--gold-bd); color: var(--amar); }
.fr-ok { background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); }
.fr-excluido { background: #fdeeec; border: 1px solid #f4c8c2; color: var(--neg); font-weight: 700; }
.fr-ico { flex: none; font-size: 1rem; }
.fr-txt b { font-weight: 900; }
.fr-por { display: block; font-size: .74rem; opacity: .8; font-weight: 600; margin-top: 2px; }

/* banner de época de recategorización */
.fac-epoca { margin-bottom: 14px; padding: 13px 16px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); border-left: 5px solid var(--muted); }
.fac-epoca.hay { background: var(--gold-bg); border-color: var(--gold-bd); border-left-color: var(--amar); }
.fe-top { font-size: .95rem; margin-bottom: 6px; }
.fe-lista { margin: 6px 0 8px 20px; font-size: .87rem; line-height: 1.6; }
.fe-ok { margin: 4px 0 8px; font-size: .87rem; color: var(--ok); font-weight: 700; }
.fe-pie { margin: 0; line-height: 1.45; }

/* parámetros del local */
.fac-params { margin: 4px 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; box-shadow: var(--sh-sm); }
.fac-params summary { cursor: pointer; font-weight: 800; color: var(--vino); font-size: .9rem; }
.fp-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 10px; }
@media (max-width: 720px) { .fp-campos { grid-template-columns: 1fr; } }
.fp-campo { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; font-weight: 700; color: var(--vino-soft); margin: 0; }
input.fac-param { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .95rem; font-weight: 800; font-family: inherit; color: var(--ink); text-align: right; }
input.fac-param:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.fp-campo small { font-weight: 500; font-size: .7rem; }

/* días que ya se cobraron dentro de otra factura */
.fac-cubierto { font-size: .82rem; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.fac-descubrir, .fac-yaesta { border: 1px dashed var(--line); background: none; color: var(--muted); font-size: .68rem; padding: 2px 7px; border-radius: var(--r-sm); cursor: pointer; font-family: inherit; }
.fac-yaesta { margin-top: 4px; }
.fac-descubrir:hover, .fac-yaesta:hover { border-color: var(--accent); color: var(--accent); }
table.fac-tabla tfoot .fac-todos { font-size: .68rem; font-weight: 600; margin-top: 3px; display: inline-block; }

/* separar la venta de un cliente y la del siguiente: cada venta en su cajita,
   con el total arriba (para chequear contra lo que se cobró) */
.mov-grupo { display: flex; flex-direction: column; gap: 6px; padding: 7px 8px 9px;
  border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--surface-2); }
.mov-gh { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 5px 1px; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .4px; }
.mov-gh > span { white-space: nowrap; }
.mov-gh-r { display: flex; align-items: center; gap: 7px; }
.mov-gh b { font-size: .98rem; font-weight: 900; color: var(--ink); letter-spacing: 0; }
.mov-gh-py { padding: 1px 7px; border-radius: 999px; background: #fceae8; border: 1px solid #f0bdb7;
  color: #a02a21; font-size: .7rem; font-weight: 800; }
.mov-mas { padding: 0 5px; color: var(--muted); font-size: .72rem; font-weight: 700; }
/* venta por PedidosYa: rojito suave, sin gritar */
.mov-item.py { border-color: #f0bdb7; background: #fdf4f3; }
.mov-grupo.py { border-color: #f4d3ce; background: #fdf1ef; }
/* lo que NO es una venta (desperdicio, me llevé, entró, ajuste): no es de
   ningún cliente, así que la cajita se ve distinta y sin plata */
.mov-grupo.no-venta { border-style: dashed; background: transparent; }

/* con qué posnet cobrar: chiquito, debajo de la balanza de arriba */
.fp-chip { margin-top: 4px; font-size: .78rem; font-weight: 700; color: var(--vino-soft); white-space: nowrap; }
.fp-chip b { font-size: .92rem; font-weight: 900; }
.fp-chip.alerta { color: var(--amar); }
.fp-eli { color: var(--celeste); }
.fp-fede { color: var(--ok); }
.fp-chip.alerta b { color: var(--amar); }

/* tijerita para separar la venta de un cliente y la del siguiente */
.btn-tijera { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); cursor: pointer; font-size: 1rem; line-height: 1; padding: 8px 11px; flex: none; }
.btn-tijera:hover { border-color: var(--accent); background: var(--accent-bg); }
.btn-tijera:active { transform: scale(.94); }

/* factura a nombre de un cliente */
.btn-fac-cli { background: var(--vino-soft); }
.fc-modal { max-width: 430px; }
.fc-modal h3 { margin: 0 0 4px; font-size: 1.1rem; color: var(--vino); }
.fc-campo { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; font-size: .78rem; font-weight: 700; color: var(--vino-soft); }
.fc-campo select, .fc-campo input { padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: 1rem; font-weight: 700; font-family: inherit; color: var(--ink); background: var(--surface); }
.fc-campo input:focus, .fc-campo select:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.fc-doc { display: flex; gap: 8px; }
.fc-doc select { flex: 0 0 92px; }
.fc-doc input { flex: 1; min-width: 0; }
.fc-acciones { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 18px; }
.fc-hoy { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 5px; }
.fc-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .84rem; }
.fc-est { margin-left: auto; font-size: .76rem; font-weight: 700; }
.fc-est.fc-ok { color: var(--ok); }
.fc-est.fc-error { color: var(--neg); }
.fc-est.fc-pendiente, .fc-est.fc-tomada { color: var(--amar); }
.fc-pdf { display: inline-flex; gap: 4px; }
.fc-pdf .mini { padding: 3px 8px; font-size: .8rem; }
.fac-pdfmini { border: none; background: none; cursor: pointer; font-size: .8rem; padding: 0 2px; opacity: .6; }
.fac-pdfmini:hover { opacity: 1; }
.fc-modo { display: flex; gap: 6px; margin-top: 14px; }
.fc-modo .seg-b { flex: 1; font-size: .82rem; padding: 8px 6px; }
.fcp-wrap { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: 10px; }
.fcp-row { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 8px; padding: 6px 9px; border-bottom: 1px solid var(--line-soft); font-size: .85rem; }
.fcp-row:last-child { border-bottom: none; }
.fcp-row.on { background: var(--accent-bg); }
.fcp-nom { font-weight: 700; color: var(--ink); }
.fcp-precio { font-size: .74rem; color: var(--muted); }
.fcp-cant { display: inline-flex; align-items: center; gap: 3px; }
.fcp-cant b { min-width: 26px; text-align: center; font-weight: 900; color: var(--accent); }
.fcp-b { width: 26px; height: 26px; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; cursor: pointer; font-weight: 800; font-size: .95rem; color: var(--vino); font-family: inherit; padding: 0; }
.fcp-b:hover { border-color: var(--accent); color: var(--accent); }
.fcp-sub { min-width: 72px; text-align: right; font-weight: 800; font-size: .82rem; color: var(--ok); }
.fcp-total { text-align: right; margin-top: 10px; font-size: .9rem; color: var(--muted); }
.fcp-total b { font-size: 1.25rem; color: var(--vino); margin-left: 6px; }
.fac-topes-viejos { margin-bottom: 14px; padding: 13px 16px; border-radius: var(--r); background: #fdeeec; border: 1px solid #f4c8c2; border-left: 5px solid var(--neg); font-size: .87rem; line-height: 1.5; color: var(--neg); }
.ftv-como { display: block; margin-top: 6px; font-size: .8rem; color: var(--vino-soft); }

/* ================= RECETAS, INSUMOS Y COSTOS ================= */
.ins-tabla input, .ins-tabla select { font-family: inherit; font-size: .9rem; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 5px 7px; background: var(--surface); color: var(--ink); width: 100%; }
.ins-tabla input.num { text-align: right; }
.ins-tabla .ins-nom { font-weight: 700; }
.ins-tabla tr.ins-bajo { background: #fdf3f2; }
.ins-alerta { color: #a02a21; font-weight: 800; font-size: .78rem; white-space: nowrap; }
.ins-aviso { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0;
  padding: 10px 14px; border: 1px solid #f0bdb7; background: #fceae8; border-radius: var(--r); color: #a02a21; }

/* banda de ganancia objetivo */
.mg-cfg { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 12px 0;
  padding: 12px 14px; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r); }
.mg-cfg-l { display: flex; align-items: center; gap: 8px; }
.mg-band { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; }
.mg-in { width: 58px; text-align: center; font-family: inherit; font-weight: 800; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px; background: var(--surface); color: var(--ink); }
.mg-alerta { margin: 10px 0; padding: 10px 14px; border: 1px solid #f0bdb7; background: #fceae8;
  border-radius: var(--r); color: #a02a21; display: flex; flex-direction: column; gap: 3px; }

.mg-tabla td { white-space: nowrap; }
.mg-tabla tr.mg-bajo { background: #fdf3f2; }
.mg-tabla tr.mg-alto { background: #eef5fb; }
.mg-tabla .mg-elegido { font-weight: 900; color: var(--ink); }
.mg-tabla .mg-sug { font-weight: 900; color: #a02a21; }
.mg-sinreceta { margin-top: 16px; }
.mg-sinreceta summary { cursor: pointer; font-weight: 800; color: var(--muted); font-size: .88rem; padding: 6px 0; }

/* modal de receta */
.modal-rec { max-width: 640px; }
.rec-rinde { margin: 6px 0 12px; font-weight: 700; font-size: .92rem; }
.rec-rinde input { width: 70px; text-align: center; font-family: inherit; font-weight: 800;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px; background: var(--surface); color: var(--ink); }
.rec-items { display: flex; flex-direction: column; gap: 6px; }
.rec-lin { display: grid; grid-template-columns: 1fr 80px auto auto; gap: 8px; align-items: center; }
.rec-lin select, .rec-lin input { font-family: inherit; font-size: .9rem; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 6px 8px; background: var(--surface); color: var(--ink); }
.rec-lin .rec-cant { text-align: right; font-weight: 700; }
.rec-total { display: flex; gap: 18px; flex-wrap: wrap; margin: 14px 0 10px; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); }
.rec-total > div { display: flex; flex-direction: column; }
.rec-total b { font-size: 1.05rem; font-weight: 900; }
.rec-total .gan-ok { color: var(--ok); }
.rec-total .neg { color: var(--neg); }
.rec-prod { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.rec-prod input { width: 64px; text-align: center; font-family: inherit; font-weight: 800;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px; background: var(--surface); color: var(--ink); }
/* platos de cocina (no tienen stock propio: se arman al vender) */
.prow.plato { background: linear-gradient(90deg, rgba(185,132,44,.07), transparent 55%); }
.prow.plato .plato-pc { display: inline-flex; align-items: center; gap: 6px; }
.prow.plato .plato-freno { margin-left: 8px; white-space: nowrap; }
.rec-plato { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px;
  padding: 8px 12px; border: 1px solid var(--gold-bd); background: var(--gold-bg);
  border-radius: var(--r-sm); font-weight: 700; font-size: .9rem; cursor: pointer; }
.rec-plato input { width: auto; }

/* rastro de los ajustes (aparece sólo en modo Ajuste) */
.aj-rastro { margin: 6px 2px 10px; padding: 9px 12px; border: 1px solid var(--line);
  border-left: 4px solid var(--amar); border-radius: var(--r); background: var(--surface-2); }
.aj-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.aj-hoy, .aj-mes { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 4px 0; font-size: .86rem; }
.aj-mes { border-top: 1px solid var(--line-soft); }
.aj-lbl { font-size: .66rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); min-width: 92px; }
.aj-it { white-space: nowrap; }
.aj-it.aj-menos b, .aj-neto.aj-menos b { color: var(--neg); }
.aj-it.aj-mas b { color: var(--ok); }
.aj-neto b { font-weight: 900; }

/* la parte del pedido que va a un proveedor de afuera (hay que mandarla a mano) */
.tr-card.tr-afuera-card { border-color: var(--amar); background: #fffdf2; }
.tr-afuera-bloque { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.tr-afuera-items { margin: 4px 0 8px; font-size: .86rem; line-height: 1.5; }
.tr-dequien.tr-esafuera { color: #8a6d1f; background: #fdf3d6; }

/* % propios de un local (vacío = hereda los del negocio) */
.mgl-box { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.mgl-box h4 { margin: 0 0 4px; font-size: .92rem; }
.mgl-in { width: 72px; text-align: center; font-family: inherit; font-weight: 700;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px; background: var(--surface); color: var(--ink); }
.mgl-in::placeholder { font-weight: 400; color: var(--muted); }
.mgl-tabla tr.mgl-propio .mgl-in { border-color: var(--accent); background: var(--accent-bg); }

/* alta de locales */
.loc-in { width: 100%; max-width: 220px; font-family: inherit; font-size: .9rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 8px; background: var(--surface); color: var(--ink); }
.loc-tabla code { font-size: .78rem; color: var(--muted); }

/* pedido armado y todavía sin mandar: se revisa antes de enviarlo */
.tr-card.tr-borrador { border-style: dashed; border-color: var(--accent); background: var(--surface-2); }
.tr-borr-items { margin: 4px 0 10px; font-size: .86rem; line-height: 1.5; }
.tr-borr-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.tr-borr-acc .danger { color: var(--neg); }

/* para qué días es el pedido (la ventana que tiene que cubrir) */
.tr-ventana { margin: 6px 0 10px; padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--celeste-bg); border: 1px solid var(--celeste-bd); color: var(--vino); font-size: .86rem; }
.tr-ventana.tr-ventana-ojo { background: var(--accent-bg); border-color: var(--accent); font-weight: 600; }

/* ---------- Producir (sin candado: la pantalla de quien amasa) ---------- */
.pr-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin: 10px 0 4px; }
.pr-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: baseline;
  text-align: left; padding: 10px 13px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink); font-family: inherit; cursor: pointer; }
.pr-item:hover { border-color: var(--accent); }
.pr-item.on { border-color: var(--accent); background: var(--accent-bg); }
.pr-nom { font-weight: 800; font-size: .95rem; }
.pr-hay { text-align: right; }
/* lo que normalmente fabrica el otro local: se puede hacer igual, pero se avisa */
.pr-item.pr-ajeno { background: var(--surface-2); }
.pr-dequien { font-size: .7rem; font-weight: 800; color: var(--muted); white-space: nowrap; }
.pr-salen { grid-column: 1 / -1; font-size: .78rem; font-weight: 800; color: var(--ok); }
.pr-salen.pr-nada { color: var(--neg); }
.pr-panel { margin-top: 14px; padding: 12px 15px; border: 1px solid var(--accent); border-radius: var(--r); background: var(--surface); }
.pr-panel-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pr-panel-h b { font-size: 1.02rem; }
.pr-panel-h .cie-x { margin-left: auto; }

/* calculadora de la receta: escalar y "¿cuántos me salen?" */
.rec-calc { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--line);
  background: var(--surface-2); border-radius: var(--r); }
.rec-calc-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-weight: 700; font-size: .92rem; }
.rec-calc-h input { width: 72px; text-align: center; font-family: inherit; font-weight: 800;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px; background: var(--surface); color: var(--ink); }
.rc-lin { display: grid; grid-template-columns: 1fr auto auto auto; gap: 10px; align-items: baseline;
  padding: 3px 0; border-bottom: 1px solid var(--line-soft); font-size: .88rem; }
.rc-lin b { font-weight: 800; }
.rc-lin.rc-falta { color: #a02a21; }
.rc-lin .rc-est { font-size: .78rem; font-weight: 800; text-align: right; min-width: 78px; }
.rc-resumen { margin-top: 9px; padding: 7px 10px; border-radius: var(--r-sm);
  background: var(--celeste-bg); border: 1px solid var(--celeste-bd); color: var(--vino); font-size: .9rem; }
.rc-resumen.rc-cero { background: #fceae8; border-color: #f0bdb7; color: #a02a21; }
/* selector de local (barra de arriba) — sólo aparece con más de un local */
.sel-local { font-family: inherit; font-weight: 800; font-size: .88rem; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.32);
  border-radius: 8px; padding: 6px 10px; margin-left: 14px;
  /* sin esto el select se estira a todo el ancho que sobre y empuja los
     botones a otro renglon: la barra pasaba de 50px de alto a 133 */
  flex: 0 0 auto; max-width: 190px; }
.sel-local:hover { background: rgba(255,255,255,.24); }
.sel-local option { color: #1f2935; }
/* Personal: empleados, locales habilitados y grilla semanal */
.sel-emp { margin-left: 8px; }
.pers-tabla input.pers-nom { font-family: inherit; font-weight: 700; font-size: .9rem; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 7px; background: var(--surface); color: var(--ink); }
.pers-tabla select.pers-dia { font-family: inherit; font-size: .82rem; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 4px 5px; background: var(--surface); color: var(--ink); }
.pers-locs { white-space: nowrap; }
.pers-chip { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 3px 8px;
  border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; font-weight: 700; cursor: pointer; }
.pers-chip.on { border-color: var(--celeste-bd); background: var(--celeste-bg); color: var(--celeste); }
.pers-chip input { width: auto; margin: 0; }
/* ================= TRASLADOS ENTRE LOCALES ================= */
.tr-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.tr-sec { margin: 18px 0 8px; font-size: 1rem; }
.tr-card { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--sh-sm); }
.tr-card.tr-recibir { border-color: var(--celeste-bd); background: var(--celeste-bg); }
.tr-card.tr-despachar { border-color: var(--gold-bd); background: var(--gold-bg); }
.tr-card.tr-nuevo { border-color: var(--accent); }
.tr-h { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 8px; }
.tr-h b { font-size: 1rem; }
.tr-lins { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.tr-scroll { max-height: 340px; overflow-y: auto; padding-right: 4px; }
.tr-lin { display: grid; grid-template-columns: 1fr auto 84px; gap: 10px; align-items: center;
  padding: 4px 0; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.tr-cant { text-align: right; font-family: inherit; font-weight: 800; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 7px;
  background: var(--surface); color: var(--ink); width: 100%; }
.tr-total { margin: 10px 0; padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; }
.tr-total b { font-size: 1.05rem; font-weight: 900; }
.sel-tr { font-family: inherit; font-weight: 800; font-size: .9rem; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 5px 9px; background: var(--surface); color: var(--ink); }
.tr-hist { display: flex; flex-direction: column; gap: 4px; }
.tr-row { display: grid; grid-template-columns: 1fr auto 2fr; gap: 12px; align-items: baseline;
  padding: 6px 10px; border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  background: var(--surface); font-size: .88rem; }
.tr-row.tr-condif { border-color: #f0bdb7; background: #fdf4f3; }
.tr-row .tr-est { text-align: right; font-weight: 700; font-size: .82rem; }
/* punto rojo en la pestaña cuando hay algo esperando */
.tab.con-aviso { position: relative; }
.tab.con-aviso::after { content: attr(data-aviso); position: absolute; top: 4px; right: 12px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--neg);
  color: #fff; font-size: .68rem; font-weight: 900; line-height: 17px; text-align: center; }
/* producto: en qué locales existe */
.mp-locales { margin: 8px 0 4px; }
.mp-loc-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
/* lo que se compra afuera y no lo tiene ningún local: se muestra en gris */
.tr-afuera { margin: 10px 0 0; padding: 8px 12px; border: 1px dashed var(--line);
  border-radius: 10px; background: var(--surface-2);
  font-size: .8rem; font-weight: 600; color: var(--muted); }

/* traslados: misma disposición que la pantalla de venta */
.tr-cols { margin: 10px 0; }
/* Va con FLEX y no con grid, a proposito. La fila cambia de forma segun el caso:
   en un pedido lleva el cartel de a quien se le pide, en una devolucion lleva el
   costo, y un producto con fresco Y freezer lleva DOS casillas. Con un grid de
   columnas fijas esas filas quedaban con un elemento de mas: se partian en dos
   renglones (se veia todo colapsado) y la casilla del fresco quedaba de 16px de
   ancho, imposible de tocar para escribir. Con flex nunca se parte y cada
   casilla conserva su ancho, salga la combinacion que salga. */
.prow.trmode { display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; }
.prow.trmode .grip { flex: 0 0 auto; }
.prow.trmode .pn { flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow.trmode .tr-dequien { flex: 0 0 auto; }
.prow.trmode .tr-hay { flex: 0 0 34px; font-weight: 800; font-size: .95rem; text-align: right; }
.prow.trmode .tr-hay.tr-hayc { flex: 0 0 auto; }
/* min-width:0 es imprescindible: un <input> arrastra un ancho minimo propio
   (unos 190px) que le gana al flex y desbordaba la fila. */
.prow.trmode .tr-cant { flex: 0 0 64px; width: 64px; min-width: 0; }
.prow.trmode .tr-hay.neg { color: var(--neg); }
.prow.trmode .tr-hay.low { color: inherit; }
.prow.trmode .tr-costo { font-size: .78rem; white-space: nowrap; }
/* Pedido de una FRANQUICIA a la casa: el stock de la fábrica no se muestra.
   El hueco se mantiene para que no se desarmen las columnas. */
/* Cuando el stock no se muestra (franquicia pidiendole a la fabrica) el hueco
   NO se reserva: sin numero adentro no aporta nada y le comia el ancho al
   nombre del producto. El del freezer si queda, porque lleva el copo que avisa
   cual de las dos casillas es la del congelado. */
.prow.trmode .tr-hay.tr-sinver { flex: 0 0 auto; color: var(--muted, #9aa3ab); font-weight: 600; opacity: .45; }
.prow.trmode.tr-cargado { background: var(--celeste-bg); border-color: var(--celeste-bd); }
.tr-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 10px;
  border-top: 1px solid var(--line-soft); }
.tr-pie .tr-total { font-weight: 700; }

/* ✏️ para renombrar grupos y columnas (sólo modo dueño) */
.ren-lapiz { border: none; background: none; cursor: pointer; font-size: .78rem; opacity: .35;
  padding: 0 4px; font-family: inherit; }
.ren-lapiz:hover { opacity: 1; }
/* el titulo de la columna se arrastra para moverla de lugar (orden por usuario) */
.col-h[draggable] { cursor: grab; }
.col-h .col-grip { float: right; opacity: .3; font-weight: 400; cursor: grab; }
.col-h:hover .col-grip { opacity: .8; }
.col-h.dragging { opacity: .4; }
.col-h.dragover { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: 6px; }
.col-h .ren-lapiz, .subh .ren-lapiz { vertical-align: middle; }
/* pedido: a qué local le va cada producto (se divide solo) */
.prow.trmode .tr-dequien { font-size: .7rem; font-weight: 800; color: var(--celeste);
  background: var(--celeste-bg); border: 1px solid var(--celeste-bd); border-radius: 999px;
  padding: 1px 7px; white-space: nowrap; }
.tr-auto { font-size: .8rem; font-weight: 800; color: var(--celeste);
  background: var(--celeste-bg); border: 1px solid var(--celeste-bd); border-radius: 999px; padding: 3px 10px; }
/* no lo tiene ningún local: se ve, pero apagado y sin poder pedirlo */
.prow.trmode.tr-sinstock { opacity: .5; }
.prow.trmode .tr-dequien.tr-nadie { color: var(--muted); background: var(--surface-2);
  border-color: var(--line); letter-spacing: .3px; }
.prow.trmode .tr-cant:disabled { background: var(--surface-2); color: var(--muted);
  border-style: dashed; cursor: not-allowed; }
/* cuenta corriente entre locales */
.cc-box { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--sh-sm); }
.cc-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cc-h b { font-size: 1.35rem; font-weight: 900; }
.cc-h b.cc-debe { color: var(--neg); }
.cc-h b.cc-favor { color: var(--ok); }
/* total consolidado de la empresa (Ramos + Haedo juntos) */
.cc-box.cc-total { border-color: var(--accent); background: var(--accent-bg); }
.cc-box.cc-total .cc-h b { font-size: 1.5rem; }
/* pantalla propia de Cuenta corriente: un bloque por franquicia y adentro
   una caja por cada local mio */
.cc-local { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.cc-local:first-of-type { border-top: none; }
.cc-local .cc-h b { font-size: 1.15rem; }
/* historial: cada pedido se abre para ver el detalle */
details.tr-hecho > summary { cursor: pointer; list-style: none; }
details.tr-hecho > summary::-webkit-details-marker { display: none; }
details.tr-hecho > summary::before { content: "▸ "; color: var(--muted); font-weight: 900; }
details.tr-hecho[open] > summary::before { content: "▾ "; }
details.tr-hecho .tr-hecho-det { padding: 2px 0 10px 18px; margin: 0 0 6px; }
details.tr-hecho.tr-condif > summary { color: var(--neg); }
.cc-tabla td.cc-debe b { color: var(--neg); }
.cc-tabla td { white-space: nowrap; }

/* ---- corte de mes ------------------------------------------------------
   El mes cierra el ÚLTIMO DOMINGO, no el 30 o el 31: el renglón lo dice. */
.cc-tabla tr.cc-mes td { background: var(--surface-2); border-top: 2px solid var(--line);
  font-weight: 900; font-size: .92rem; padding-top: 9px; padding-bottom: 7px; }
.cc-tabla tr.cc-mes em { font-style: normal; font-weight: 700; font-size: .72rem;
  color: var(--muted); margin-left: 8px; }
.cc-tabla tr.cc-mes td.cc-debe b { color: var(--neg); }

/* ---- la semana se toca y se abre --------------------------------------- */
.cc-tabla tr.cc-sem { cursor: pointer; }
.cc-tabla tr.cc-sem:hover td { background: var(--accent-bg); }
.cc-tabla tr.cc-sem.on td { background: var(--accent-bg); font-weight: 800; }
.cc-fl { font-style: normal; color: var(--muted); font-weight: 900; }
.cc-tabla tr.cc-det > td { white-space: normal; background: var(--surface-2); padding: 0; }
.cc-det-in { padding: 10px 12px 12px; }
/* El detalle vive DENTRO de la tabla, que en el celular se desliza al costado:
   sin esto medía lo que mide la tabla (545px en una pantalla de 375) y el
   botón de "separar por envío" quedaba afuera. Sticky para que se quede
   quieto a la izquierda mientras la tabla se desliza. */
@media (max-width: 760px) {
  .cc-det-in { position: sticky; left: 0; box-sizing: border-box;
    width: calc(100vw - 52px); max-width: 100%; min-width: 260px; }
}
.cc-det-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cc-det-top .mini { width: auto; }
.cc-det-bloque { margin-top: 10px; }
.cc-det-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.cc-det-h b { font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
/* los renglones de la semana, todos juntos */
.cc-items { width: 100%; border-collapse: collapse; font-size: .86rem; }
.cc-items td { padding: 3px 0; border-bottom: 1px dotted var(--line-soft); white-space: nowrap; }
.cc-items td:first-child { white-space: normal; width: 99%; }
.cc-i-c, .cc-i-p, .cc-i-t { text-align: right; padding-left: 14px !important; font-variant-numeric: tabular-nums; }
.cc-i-p { color: var(--muted); font-size: .8rem; }
/* separado por envío */
.cc-remito { margin-top: 8px; padding-left: 10px; border-left: 3px solid var(--line); }
.cc-remito-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: .82rem; font-weight: 800; padding-bottom: 2px; }
/* los pagos imputados a esa semana */
.cc-pago-f { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 4px 0; border-bottom: 1px dotted var(--line-soft); font-size: .86rem; }
.cc-pago-f > span:first-child { flex: 1 1 200px; }
.cc-pago-f .mini { width: auto; }

/* ---- ventana para repartir un pago entre semanas ----------------------- */
.ccr-lista { display: flex; flex-direction: column; gap: 2px; margin: 10px 0;
  max-height: 46vh; overflow-y: auto; }
.ccr-fila { display: grid; grid-template-columns: 1fr auto 96px; gap: 10px; align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--line-soft); }
.ccr-sem { font-size: .86rem; font-weight: 700; display: flex; flex-direction: column; }
.ccr-sem em { font-style: normal; font-size: .7rem; font-weight: 600; color: var(--muted); }
.ccr-in { text-align: right; font-family: inherit; font-weight: 800; font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 7px;
  background: var(--surface); color: var(--ink); width: 100%; }
.ccr-resto { margin: 4px 0 0; font-size: .86rem; font-weight: 800; color: var(--ok); }
.ccr-resto.cc-debe { color: var(--neg); }
@media (max-width: 560px) {
  .ccr-fila { grid-template-columns: 1fr 84px; }
  .ccr-debe { grid-column: 1; }
}
/* Detalle de un pedido guardado: en lista, no en un renglón corrido. Antes había
   que entrar a EDITAR para poder leer las cantidades — el modo edición se usaba
   como visor, que es justo lo que no tiene que pasar. */
.hp-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1px 18px; margin-top: 6px; }
.hp-it { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: .84rem; padding: 3px 0; border-bottom: 1px dotted var(--line-soft); min-width: 0; }
.hp-it > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-it b { font-weight: 900; font-size: .95rem; flex: 0 0 auto; }

/* Contador de vencimientos, abajo del total de la balanza. Un renglón en vez de
   media pantalla; el detalle se abre tocándolo. */
.vc-chip { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 5px; cursor: pointer;
  font-size: .78rem; font-weight: 700; color: #dfe7ef; white-space: nowrap; }
.vc-chip > span { opacity: .85; }
.vc-chip b { font-weight: 900; font-size: .86rem; }
.vc-chip.vc-ok { opacity: .75; }
.vc-modal .vc-sec { margin-bottom: 14px; }
.vc-modal .vc-h { font-weight: 900; font-size: .82rem; padding-bottom: 4px; margin-bottom: 4px;
  border-bottom: 2px solid var(--line); }
.vc-modal .vc-h.venc { color: var(--neg); border-color: var(--neg); }
.vc-modal .vc-h.prox { color: var(--amar); border-color: var(--amar); }
.vc-modal .vc-n { float: right; font-weight: 900; }
.vc-modal .vc-row { display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 2px; border-bottom: 1px solid var(--line-soft); font-weight: 700; font-size: .9rem; }
.vc-modal .vc-row b { font-weight: 900; white-space: nowrap; }

/* Fecha del freezer: misma casilla que la del fresco, pegada al número congelado. */
.pc.cong .fdate.congf { margin-top: 3px; }
.lote-lin.cong .fdate.congf { flex: 0 0 auto; }

/* ---------- Cierre trabado: no se pudo leer el día guardado ----------------
   Se muestra en vez de dejar el formulario vacío y editable. En La Avenida se
   perdió un cierre completo así (18/8/2026): la lectura falló, la pantalla salió
   en blanco y la primera casilla que se tocó guardó ceros arriba de todo. */
.cie-nocarga {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  margin-bottom: 16px; padding: 14px 16px; border-radius: var(--r);
  background: #fdeeec; border: 1px solid #f4c8c2; border-left: 5px solid var(--neg);
  color: var(--neg); font-size: .9rem; line-height: 1.5;
}
.cie-nocarga b { font-weight: 900; }
.cie-nocarga > b { font-size: 1rem; }
.cie-nocarga button { margin-top: 3px; }
.cie-trabado .cie-bal,
.cie-trabado .cie-grid,
.cie-trabado .cie-lins,
.cie-trabado .cie-add { opacity: .45; filter: grayscale(.6); }
.cie-trabado input:disabled,
.cie-trabado select:disabled { cursor: not-allowed; background: var(--line-soft); }

/* Mercadería despachada sin confirmar: no cuenta en el saldo todavía, pero se
   ve al lado, para que una devolución sin confirmar no se pierda de vista. */
.cc-pendientes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  padding: 6px 2px 2px; font-size: .82rem; }
.cc-pend { display: inline-flex; align-items: baseline; gap: 5px; font-weight: 700;
  border-radius: 999px; padding: 2px 10px; background: var(--line-soft); cursor: help; }
.cc-pend b { font-weight: 900; }

/* Traslado con dos lados: la casilla ❄️ al lado de la del fresco. Se distingue
   por color, no por posición: la persona tiene que ver de un vistazo cuál es
   cuál sin contar columnas. */
.tr-hayc { color: var(--frio, #3b7ea1); font-weight: 800; }
.tr-cant.tr-cantc { border-color: var(--frio, #3b7ea1); background: #f2f9fc; }
.prow.trmode .tr-cant.tr-cantc:focus { outline-color: var(--frio, #3b7ea1); }
.tr-lin.tr-lin-c { padding-left: 10px; border-left: 3px solid var(--frio, #3b7ea1); }
/* encabezado de grupo adentro de un pedido: la lista sale ordenada por tipo de
   pasta, como se produce y como se carga el changuito */
.tr-grupo { font-size: .68rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin: 8px 0 2px; padding-bottom: 2px; border-bottom: 1px solid var(--line-soft); }
.tr-grupo:first-child { margin-top: 0; }
/* pedido ya enviado, esperando que el otro local lo despache */
.tr-card.tr-encurso { border-left: 3px solid var(--amar, #d19b1d); }
/* rinde del conversor: de 1 fresca salen 2 congeladas (sorrentinos) */
.conv-rinde { font-weight: 900; font-size: .82rem; color: var(--frio, #3b7ea1);
  background: var(--celeste-bg, #eef6fb); border: 1px solid var(--celeste-bd, #cfe4f2);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap; cursor: help; }
/* casilla de lo que ENTRA al freezer: se calcula sola, pero se puede pisar */
.convin.convout { border-color: var(--frio, #3b7ea1); background: #f2f9fc; color: var(--frio, #3b7ea1); }
.tr-lin.tr-lin-ro { grid-template-columns: 1fr auto; }
/* renglon con selector de fecha: una columna mas */
.tr-lin.tr-lin-fecha { grid-template-columns: 1fr auto auto 84px; }
.sel-lote { font-family: inherit; font-size: .78rem; font-weight: 700; padding: 3px 5px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.sel-lote:focus { outline: none; border-color: var(--accent); }


/* ===== COCINA ===== */
/* Cocina vive adentro del Inventario, abajo de Pasteleria */
.col-h.cocina-h { margin-top: 18px; background: var(--gold-bg, #fdf6e3); border-color: var(--gold-bd, #e8d9a8); }
.coc-ayuda { margin: 4px 2px 8px; }
.subh.coc-sub { display: flex; align-items: baseline; gap: 8px; }
.coc-grupo { margin-bottom: 10px; }
.coc-grupo { margin-bottom: 14px; }
.coc-grupo .col-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.coc-precios { font-size: .82rem; font-weight: 700; color: var(--accent); }
.coc-precios.coc-falta { color: var(--neg); font-weight: 800; }
.coc-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }
.coc-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  cursor: pointer; font-family: inherit; text-align: left; }
.coc-item:hover { border-color: var(--accent); background: var(--accent-bg); }
.coc-item .coc-n { font-weight: 800; font-size: .92rem; color: var(--ink); }
.coc-item .coc-st { font-size: .8rem; font-weight: 700; color: var(--muted); }
.coc-item.coc-sin { opacity: .4; cursor: not-allowed; }

.coc-modal { max-width: 620px; }
.coc-paso { margin: 14px 0; }
.coc-lbl { display: block; font-weight: 800; font-size: .86rem; margin-bottom: 6px; }
.coc-lados { display: flex; gap: 10px; flex-wrap: wrap; }
.coc-lado { padding: 10px 16px; border: 2px solid var(--line); border-radius: 10px; background: var(--surface);
  font-family: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; color: var(--ink);
  display: flex; align-items: center; gap: 6px; }
.coc-lado.on { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.coc-lado.coc-nohay { opacity: .4; cursor: not-allowed; }
.coc-lado .coc-usa { font-size: .72rem; font-weight: 700; color: var(--muted); }
.coc-salsas-t { font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 8px 0 4px; }
.coc-salsas { display: flex; gap: 6px; flex-wrap: wrap; }
.coc-salsa { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-family: inherit; font-weight: 700; font-size: .84rem; cursor: pointer; color: var(--ink); }
.coc-salsa.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.coc-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px;
  padding-top: 12px; border-top: 1px solid var(--line); }
.coc-total { flex: 1; font-size: 1.15rem; }
.coc-total .coc-falta { color: var(--neg); font-size: .85rem; font-weight: 800; }

/* boton que ya se toco: se ve apagado hasta que termine la operacion */
.btn-ocupado { opacity: .5; pointer-events: none; cursor: wait; }

/* ── Mercadería: columnas plegables ───────────────────────────────────────
   El catálogo es UNO SOLO y se ve entero. Parado en Haedo, la columna de
   Ramos ocupa media pantalla y hay que scrollear para llegar a lo tuyo. Las
   que no son de este local arrancan plegadas: se abren tocando la flechita. */
.col-plegar {
  background: none; border: none; cursor: pointer; padding: 0 6px 0 0;
  color: inherit; font: inherit; width: auto;
}
.col-cuenta {
  font-size: .72rem; font-weight: 700; opacity: .55;
  border: 1px solid currentColor; border-radius: 10px; padding: 0 6px; margin-left: 2px;
}
.col.col-plegada .lhead,
.col.col-plegada .subh,
.col.col-plegada .prow { display: none; }
.col.col-plegada .col-h { opacity: .72; }

/* ── Inventario: ver todos los movimientos del día ───────────────────────── */
.mov-vermas { text-align: center; padding-bottom: 6px; }
.mov-vermas .link-mini { padding-top: 4px; }

/* ── Ventas del día: venta por venta ─────────────────────────────────────
   Los movimientos que NO son ventas (me llevé, desperdicio, ajustes) se
   distinguen a simple vista: es lo que se busca cuando algo no cierra. */
.vd-noventa { border-left: 3px solid var(--muted, #888); opacity: .92; }
.vd-modo {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; opacity: .7; margin-left: 5px;
  border: 1px solid currentColor; border-radius: 8px; padding: 0 5px;
}

/* ── Mercadería · Pedidos anteriores, por media semana ────────────────────
   La semana del negocio va partida: martes a jueves y viernes a domingo. Un
   pedido se completa en varios envíos, así que lo que se mira no es el remito
   suelto sino la cuenta de la media semana: pedí 30, llegaron 20, faltan 10. */
.ms-card { padding: 0; overflow: hidden; }
.ms-ahora { border-color: var(--accent, #1f9d57); }
.ms-cab {
  font-weight: 800; padding: 10px 14px;
  background: rgba(127, 127, 127, .1);
  border-bottom: 1px solid rgba(127, 127, 127, .18);
}
.ms-local { padding: 4px 0 10px; }
.ms-local + .ms-local { border-top: 1px solid rgba(127, 127, 127, .18); }
.ms-lh {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; padding: 10px 14px 4px; font-weight: 700;
}
.ms-head, .ms-row {
  display: grid; grid-template-columns: 1fr 3.2rem 3.2rem 3.2rem 7.5rem;
  gap: 6px; align-items: center; padding: 3px 14px;
}
.ms-head {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  opacity: .55; font-weight: 700;
}
.ms-head span:not(:first-child):not(:last-child),
.ms-num { text-align: right; font-variant-numeric: tabular-nums; }
.ms-row { border-top: 1px solid rgba(127, 127, 127, .1); }
.ms-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-est { text-align: right; font-size: .78rem; font-weight: 700; }
.ms-falta { color: #cf3b33; }
.ms-camino { color: #9a5a00; font-weight: 700; }
.ms-ok { opacity: .5; }
@media (max-width: 560px) {
  .ms-head, .ms-row { grid-template-columns: 1fr 2.6rem 2.6rem 2.6rem 5.6rem; font-size: .86rem; }
}

/* ── Mi local ─────────────────────────────────────────────────────────────
   Cada dueño apaga lo que en SU local no se usa. No borra nada. */
.ml-lista { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.ml-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid rgba(127,127,127,.18); border-radius: 8px;
  background: rgba(127,127,127,.05); cursor: pointer;
}
.ml-fila input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; }
.ml-lbl { display: flex; flex-direction: column; gap: 1px; font-weight: 700; flex: 1; }
.ml-lbl .muted { font-weight: 400; }
.ml-pct { cursor: default; }
.ml-in {
  width: 5rem; text-align: right; font-weight: 700; padding: 6px 8px;
  border: 1px solid rgba(127,127,127,.35); border-radius: 6px;
}

/* ── Descuento de amigos ─────────────────────────────────────────────────
   Se ve SIEMPRE en el detalle, con el importe original al lado: un descuento
   que no se ve es una forma de sacar plata. */
.mov-desc-b {
  background: none; border: 1px solid currentColor; border-radius: 10px;
  font: 700 .72rem/1.5 inherit; padding: 0 7px; cursor: pointer;
  color: var(--accent, #1f9d57); width: auto; margin-right: 6px;
}
.mov-gh-desc, .vd-desc {
  font-size: .68rem; font-weight: 700; margin-left: 6px;
  border: 1px solid currentColor; border-radius: 8px; padding: 0 5px;
  color: #9a5a00; text-transform: none; letter-spacing: 0;
}
.mov-gh-condesc { background: rgba(154, 90, 0, .09); }

/* ── Pedido: el nombre del grupo adelante de cada bloque ─────────────────
   Sin esto, del otro lado llega una lista de nombres sueltos y no se entiende
   qué es cada cosa. */
.ped-g {
  font-weight: 800; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .05em; opacity: .6; padding: 10px 0 2px;
}
.ped-bloque .ped-g:first-of-type { padding-top: 4px; }

/* ── Pedidos que se pasaron, dentro de cada media semana ─────────────────── */
.pg-ped { padding: 6px 14px; border-top: 1px solid rgba(127,127,127,.1); }
.pg-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pg-items { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 3px 0 2px; font-size: .88rem; }
.pg-it { white-space: nowrap; opacity: .85; }

/* el faltante que se completó en otra media semana */
.ms-luego { color: #1f6f6b; font-weight: 700; }
.ms-completa { color: #52666f; font-weight: 700; opacity: .85; }

/* ── Lo que alguien deshizo ──────────────────────────────────────────────
   No mueve ninguna cuenta (cantidad 0, importe 0): está para que se VEA.
   El dueño quiere poder mirar el día y darse cuenta si se cargó una venta y
   después se borró. */
.mov-anulado { opacity: .9; background: rgba(168, 30, 21, .07); }
.mov-anulado b { color: #a81e15; }
.mov-gh-anul { background: rgba(168, 30, 21, .1); }
.vd-anulado { background: rgba(168, 30, 21, .07); }
.vd-anulado .vd-nom { color: #a81e15; font-weight: 600; }

/* ── Cocina: que un plato se vea como un plato ────────────────────────────
   La marca `cocina` se guardaba en cada movimiento desde el primer día y no la
   leía nadie, así que el plato aparecía como una venta de la pasta cruda: media
   unidad de sorrentino con el precio del plato al lado. Ahora lleva el 🍽️ y con
   qué salsa salió. Es un tono aparte del rojito de PedidosYa, porque un plato
   puede salir por los dos lados. */
.mov-item.coc { border-color: #cfe0cd; background: #f5faf4; }
.mov-item.coc.py { border-color: #e2d3bd; background: #fcf8f1; }
.mov-salsa {
  font-size: .74rem; font-weight: 700; opacity: .72;
  margin-left: 6px; white-space: nowrap;
}

/* ── Arranque del sistema: un botón, un día, una vez ──────────────────────── */
.arr-btn { width: 100%; margin-top: 4px; font-size: 1rem; padding: 14px; }
.arr-modal { max-width: 460px; }
.arr-lbl { display: block; margin: 16px 0 6px; font-weight: 700; font-size: .92rem; }
.arr-in {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
  font-size: 1.35rem; font-weight: 800; text-align: right;
  border: 2px solid var(--accent); border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
}
.arr-que { margin-top: 16px; padding: 12px 14px; background: var(--bg); border-radius: var(--r-sm); font-size: .86rem; }
.arr-que ul { margin: 6px 0 8px; padding-left: 20px; }
.arr-que li { margin: 3px 0; }
.arr-pie { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.arr-paso { font-weight: 700; margin: 14px 0 10px; }
.arr-barra { height: 10px; background: var(--line); border-radius: 999px; overflow: hidden; }
.arr-relleno { height: 100%; background: var(--accent); transition: width .2s ease; }

/* Cuando se toca una celda de precio que no se edita (Jueves, PedidosYa), la
   pantalla baja hasta el % que sí se cambia y lo marca un momento. Sin esto el
   bloque queda al fondo de la lista y desde arriba no se sabe que existe. */
.resaltado {
  animation: latir 1.4s ease-out 2;
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm);
}
@keyframes latir {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  50%      { box-shadow: 0 0 0 8px rgba(0,0,0,.09); }
}
@media (prefers-reduced-motion: reduce) { .resaltado { animation: none; } }

/* Precio de jueves puesto a mano: se distingue del que sale del % para que se
   vea de un vistazo cuáles están fijados y cuáles siguen automáticos. */
.prcin.prc-fijo { border-color: var(--accent); font-weight: 800; }
.pa-jue { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.pa-fijar { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.pa-fijar select { padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); }

/* ── Lo que se esconde, se esconde de verdad ──────────────────────────────
   El código apaga pestañas con `b.hidden = true`, pero eso lo unico que hace
   es traer el `display:none` de la hoja del NAVEGADOR, y cualquier regla
   nuestra le gana. Como .tab declara `display:flex`, la pestaña apagada se
   seguía viendo — y encima quedaba muerta, porque al tocarla render() la
   detecta oculta y te devuelve a Vender. Desde el local se ve como un botón
   que no anda.
   Va sobre [hidden] a secas para que valga en cualquier elemento, no sólo en
   las pestañas: el mismo problema lo tendría cualquier otro que se apague así. */
[hidden] { display: none !important; }

/* ── Monitores anchos: usar la pantalla que hay ───────────────────────────
   El tope de 1180px se eligió para el monitor 1280×1024 del local, y en una
   pantalla más ancha deja media pantalla gris al costado mientras el nombre del
   producto se corta en "C..." o "R...".

   Lo que manda acá NO es meter más columnas, es que la COLUMNA sea ancha: un
   producto con 3 fechas de fresco y 2 de freezer necesita 876px para entrar en
   un solo renglón (medido en pantalla, no estimado). Si la columna no llega, la
   fila se parte y el producto queda desparramado en varias alturas.

   Por eso de 1500 para arriba se ensancha la vista pero se mantienen DOS
   columnas: a 1920 la columna queda en ~880px y ahí entra todo en línea. Una
   tercera recién a 2400. Abajo de 1500 no cambia nada: la tablet y el monitor
   del local siguen exactamente igual. */
@media (min-width: 1500px) {
  .view.vender { max-width: 1860px; }
  .pn { min-width: 150px; }

  /* PERO sólo se estira la grilla de productos. Todo lo que es configuración
     —los %, los precios de cocina, los vencimientos, la tabla por local— está
     pensado para leerse, y estirado a 1860px queda desparramado: la casilla de
     un tilde termina a medio metro de su texto. Se quedan en el ancho de antes. */
  .vence-cfg, .mgl-box, .pa-bloque, .top-split { max-width: 1180px; }
}
@media (min-width: 2400px) {
  .view.vender { max-width: 2360px; }
  .cols { grid-template-columns: repeat(3, 1fr); }
  .pn { min-width: 190px; }
}

/* ── Tildes: que la casilla quede al lado de su texto ─────────────────────
   Hay una regla global `input, select { width: 100% }` —pensada para los campos
   de texto— que también le pega a los checkbox: la casilla se estira a todo el
   ancho del renglón y termina a medio metro de la frase que la explica. En el
   monitor ancho eso se veía descuajeringado.
   Los tildes de otras pantallas ya lo corregían cada uno por su lado; esto lo
   arregla para .chk en general, así el próximo que se agregue ya nace bien. */
.chk { display: flex; align-items: center; gap: 8px; font-weight: 600; }

/* El selector de alcance y el botón de "Aplicar a todos" van uno al lado del
   otro y del ancho de su contenido, no ocupando el renglón entero. */
.pa-fijar select { width: auto; min-width: 190px; }
/* el flex:1 viene de .btn-ghost, no del width: sin apagarlo el boton se come
   todo el renglon que le quede libre */
.pa-fijar .btn { width: auto; flex: none; min-width: 170px; margin-top: 0; }

/* ── Costos: la lista completa, en el orden de siempre ────────────────────
   Antes esta pantalla partía los productos en "con receta" y "sin receta", y
   los segundos —que son casi todos— quedaban dentro de un desplegable cerrado:
   para ver un precio había que acordarse de abrir un cartel que decía "108
   productos sin receta". Ahora va todo junto, con los encabezados de columna y
   de grupo para no perderse en cien renglones. */
.mg-tabla tr.mg-cat td {
  background: var(--vino); color: #fff; font-weight: 900; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px;
  /* centrado: el titulo es de TODA la tabla, no de la primera columna. Pegado a
     la izquierda parecia el encabezado de "Producto" y no el de la seccion. */
  text-align: center;
}
.mg-tabla tr.mg-grupo td {
  background: var(--bg); font-weight: 800; font-size: .8rem; padding: 5px 10px 5px 18px;
}
.mg-franq-sel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
/* el último precio cobrado es de sólo lectura: sale de los pedidos ya recibidos */
.mg-tabla .mg-ult { white-space: nowrap; opacity: .85; }

/* ── Entró y Salida, cada uno con su color ────────────────────────────────
   Los modos de precio ya se reparten los colores: PedidosYa es rojo, Jueves y
   Efectivo verdes, Cocina dorado. Para que Entró y Salida se distingan de un
   vistazo —y entre sí, que es lo que importa: uno SUMA stock y el otro lo
   BAJA— van azul y violeta, que no chocan con ninguno.
   El azul de Entró es el mismo que ya usaba su cartel de aviso. */
/* Un punto mas oscuro que el azul de antes: el texto es blanco y ahora el
   fondo de la pantalla es claro, asi que el boton prendido es lo que tiene que
   destacar. Sube el contraste de 4,7 a 5,4. */
.seg-b.mot-entrada.on {
  background: linear-gradient(120deg, #1c6fa8, #10395c);
  border-color: #10395c; color: #fff;
}
.seg-b.mot-salida.on, .seg-b.mot-desperdicio.on, .seg-b.mot-consumo.on {
  background: linear-gradient(120deg, #8e44ad, #5b2c6f);
  border-color: #5b2c6f; color: #fff;
}
/* el cartel de arriba, del mismo color que su botón */
.aviso-motivo.m-desperdicio, .aviso-motivo.m-consumo { background: #7d3c98; }


/* La pantalla de Costos es una tabla de diez columnas. En los 820px de .view
   entraba de costado y había que arrastrarla para ver la ganancia. */
.view.view-ancha { max-width: 1180px; }
@media (min-width: 1500px) { .view.view-ancha { max-width: 1440px; } }

/* ── Costos: que la tabla se lea como una tabla ───────────────────────────
   Los números alineados a la derecha y con las cifras del mismo ancho, así
   las columnas de plata se comparan de un vistazo en vez de bailar. El
   nombre del producto es lo único que va a la izquierda. */
.mg-tabla th { text-align: center; font-weight: 800; }
.mg-tabla th.gf-c0 { text-align: left; }
.mg-tabla td { text-align: center; vertical-align: middle; }
.mg-tabla td.gf-c0 { text-align: left; }
.mg-tabla td, .mg-tabla th { font-variant-numeric: tabular-nums; }
.mg-tabla tr.mg-grupo td { text-align: left; }
/* las casillas editables, centradas en su celda y todas del mismo ancho */
.mg-tabla .prcin, .mg-tabla .mg-in { display: inline-block; width: 76px; }

/* Sobres · deshacer: la barra que aparece apenas tocaste algo, para volver
   atrás el error de tipeo del momento (sacar $570 donde iban $570.000). */
.sob-undo {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 8px 0 2px; padding: 8px 12px;
  background: #fff7e8; border: 1px solid #f0d9ac; border-radius: var(--r-sm);
  font-size: .84rem; font-weight: 700; color: var(--vino-soft);
}
.sob-undob { background: var(--vino); border-color: var(--vino); color: #fff; }

/* nombre editable del monotributista, en su tarjeta */
.fac-nom { font: inherit; font-size: 1.05rem; font-weight: 900; color: var(--ink);
  border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; background: transparent; width: 100%; max-width: 200px; }
.fac-nom:hover { border-color: var(--line); }
.fac-nom:focus { outline: none; border-color: var(--accent); background: #fff; }

/* Sello de versión en la barra de arriba. Chiquito y gris: no es para mirarlo
   todo el día, es para poder decir "estoy en la v tal" cuando algo no aparece. */
.ver-sello {
  background: none; border: 1px solid var(--bor, #d8d2c8); color: var(--muted, #8a8175);
  font-size: 11px; line-height: 1; padding: 3px 6px; border-radius: 6px;
  cursor: pointer; white-space: nowrap; opacity: .75;
}
.ver-sello:hover { opacity: 1; }

/* ---- de qué sobre salió un pago (Gastos fijos) --------------------------- */
/* El ✉️ va al lado del 💬. Sólo se dibuja en las casillas que tienen plata, así
   que no ensucia la planilla; y se ve SIEMPRE, no al pasar el mouse — en la
   tablet no hay mouse, y si estuviera apagado nadie sabría que existe. Con
   reparto cargado se marca un poco más. */
.gf-sob { opacity: .85; }
.gf-sob.con-sobre { opacity: 1; filter: none; background: rgba(46,125,50,.12); border-radius: 6px; }
.sp-modal { max-width: 470px; }
.sp-lista { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.sp-fila { display: flex; align-items: center; gap: 10px; }
.sp-nom { flex: 1; font-size: 14px; }
.sp-in {
  width: 110px; text-align: right; padding: 7px 9px; font-size: 15px;
  border: 1px solid var(--bor, #d8d2c8); border-radius: 8px; background: var(--card, #fff);
}
.sp-resto { font-size: 13px; margin: 8px 0 0; color: var(--muted, #8a8175); }
.sp-resto.sp-ok { color: #2e7d32; }
.sp-resto.sp-mal { color: #c62828; }

/* El ✉️ del reparto en el CHECK SEMANAL. En flujo normal, pegado al número:
   la clase gf-nota (la del 💬 de Costos fijos) es position:absolute contra su
   celda, y en esta tabla la celda no es relative — el botón se iba de la
   pantalla. Éste se ve siempre; con reparto cargado, marcado en verde. */
.ck-sob {
  position: static; display: inline-block; vertical-align: middle;
  margin-left: 6px; padding: 3px 5px; border: none; background: none;
  cursor: pointer; font-size: 1rem; line-height: 1; opacity: .85;
}
.ck-sob.con-sobre { opacity: 1; background: rgba(46,125,50,.14); border-radius: 6px; }
table.ck-tabla td:has(.ck-sob) { white-space: nowrap; }

/* ---- la ventana de pagos (lista + agregar) ---------------------------------- */
.pg-lista { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; max-height: 40vh; overflow-y: auto; }
.pg-fila { display: grid; grid-template-columns: 52px 1fr 1fr 28px; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px; background: var(--surface-2, #f4f1ec); font-size: 14px; }
.pg-fila.pg-sindet { background: transparent; border: 1px dashed var(--bor, #d8d2c8); }
.pg-f { font-size: 12px; color: var(--muted, #8a8175); }
.pg-m { text-align: right; }
.pg-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-x { border: none; background: none; cursor: pointer; color: #c62828; font-size: 14px; padding: 2px 6px; }
.pg-add { display: grid; grid-template-columns: 128px 1fr 1.6fr auto; gap: 6px; align-items: center; margin-top: 6px; }
.pg-add input, .pg-add select { padding: 8px; font-size: 14px; border: 1px solid var(--bor, #d8d2c8); border-radius: 8px; background: var(--card, #fff); min-width: 0; }
.pg-add .btn { padding: 8px 12px; white-space: nowrap; }
/* el chip "sin detalle" debajo de la fila del Check: apagado, es lo no anotado */
.ck-adelchip.pg-chip-sd { opacity: .7; border: 1px dashed var(--bor, #d8d2c8); background: transparent; }
@media (max-width: 600px) { .pg-add { grid-template-columns: 1fr 1fr; } .pg-add .btn { grid-column: 1 / -1; } }

/* ---- recepción de a partes ------------------------------------------------ */
.tr-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.tr-todo { border: 1px solid var(--bor, #d8d2c8); background: var(--card, #fff); border-radius: 8px;
  cursor: pointer; font-size: 15px; line-height: 1; padding: 6px 9px; color: #1f9d57; font-weight: 900; }
.tr-todo:hover { background: rgba(31,157,87,.1); }
.tr-ya { color: #1f9d57; }
/* renglón que ya llegó entero: sin casilla ni ✓, sólo lo que entró al stock.
   Que no haya casilla ES el candado contra sumarlo dos veces. */
.tr-lin.tr-lin-ok { background: rgba(31,157,87,.07); }
.tr-llego { color: #1f9d57; font-weight: 900; text-align: right; white-space: nowrap; }
/* te mandaron menos de lo que pediste: que salte a la vista */
.tr-menos { color: #a02a21; font-weight: 800; }

/* ── La fila del pedido en columnas angostas ─────────────────────────────────
   Con el stock propio a la vista, la fila lleva seis cosas de ancho fijo (grip,
   stock, casilla, ❄️ stock, casilla) y el nombre es lo único elástico. Con
   tres columnas abiertas, el nombre se aplastaba a CERO y la fila quedaba
   "5 [0] ❄️15 [0]" sin decir de qué producto era. Dos defensas:
     1) el nombre tiene un ancho mínimo y las casillas ceden un poco;
     2) si igual no entra, la fila se parte en dos renglones: el nombre arriba,
        las casillas abajo. Se parte por el ancho de la COLUMNA (container
        query), no de la pantalla: es la columna la que está angosta. */
.tr-cols .col { container-type: inline-size; }
.prow.trmode { gap: 6px; }
/* el nombre manda: antes de recortarlo con "…", ceden las casillas (hasta 44px) */
.prow.trmode .pn { min-width: 112px; }
.prow.trmode .tr-hay { flex: 0 0 auto; min-width: 22px; font-size: .9rem; }
.prow.trmode .tr-hay.tr-hayc { font-size: .84rem; white-space: nowrap; }
.prow.trmode .tr-cant { flex: 0 1 60px; width: 60px; min-width: 44px; }
@container (max-width: 300px) {
  .prow.trmode { flex-wrap: wrap; row-gap: 4px; }
  .prow.trmode .pn { flex: 1 1 calc(100% - 30px); min-width: 0; }
  .prow.trmode .tr-dequien { order: 1; }
  .prow.trmode .tr-hay, .prow.trmode .tr-cant { order: 2; }
  .prow.trmode .tr-hay:first-of-type { margin-left: 22px; }   /* alinea bajo el nombre, no bajo el ⠿ */
}

/* ── Pedir mercadería: que se lea como la grilla del inventario ─────────────── */
/* Dos columnas anchas siempre (Ramos | Haedo), aunque la pantalla sea enorme:
   con tres, cada columna quedaba angosta y la fila no entraba. Lo de afuera
   cae abajo, en su propio bloque. */
.cols.tr-cols { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .cols.tr-cols { grid-template-columns: 1fr; } }
/* la cabecera de columnas del pedido, con los mismos anchos que la fila */
.lhead.trhead { display: flex; gap: 6px; align-items: center; }
.lhead.trhead .grip { visibility: hidden; flex: 0 0 auto; }
.lhead.trhead .pn { flex: 1 1 auto; min-width: 112px; }
.lhead.trhead .tr-hay { flex: 0 0 auto; min-width: 22px; font-size: .68rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .03em; color: var(--muted); text-align: right; }
.lhead.trhead .tr-cant { flex: 0 1 60px; width: 60px; min-width: 44px; padding: 0; border: none; background: none;
  font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); text-align: center; }
/* la fila: anchos fijos parejos para que las columnas queden alineadas como tabla */
.prow.trmode .tr-hay { min-width: 34px; }
.prow.trmode .tr-hay.tr-hayc { min-width: 46px; }
/* la tira del clima en el pedido: el día que llega, y los que cubre */
.pron-d.pd-ventana { background: var(--celeste-bg, #eaf3fb); border-color: var(--celeste-bd, #b9d7ee); }
.pd-ent.pd-cubre { color: var(--celeste, #3b7ea1); }

/* la línea de la tarjeta de recepción con el ✓ al final: cuatro columnas, no
   tres — si no, el ✓ caía a un renglón aparte estirado a todo el ancho */
.tr-lin:has(> .tr-todo) { grid-template-columns: 1fr auto 84px 36px; }
.tr-lin > .tr-todo { width: 36px; justify-self: end; padding: 5px 0; text-align: center; }
.adm-dequien { font-size: .8rem; font-weight: 600; color: var(--muted); margin-left: 6px; }

/* ================= COMBOS (promos de un local) ================= */
/* La tira de combos arriba de las columnas de vender */
.combos-col { margin-bottom: 14px; }
.col-h.combos-h { background: linear-gradient(120deg, #b9842c, #2c3a4b); }
.col-h.combos-h .combos-modo { font-weight: 700; opacity: .8; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.prow.combo { background: linear-gradient(90deg, rgba(185,132,44,.09), transparent 55%); }
.prow.combo .combo-pn { white-space: normal; }
.prow.combo .combo-lleva { display: block; font-size: .74rem; font-weight: 500; color: var(--muted); }
.prow.combo .combo-precio { font-weight: 900; font-size: .98rem; white-space: nowrap; color: #8a6d0b; }
.prow.combo .plato-pc { display: inline-flex; align-items: center; gap: 6px; }
/* el botón 🎁 al lado de "+ Nuevo producto" */
.mp-btns-fila { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; }
/* el armador */
.modal-combo { max-width: 640px; }
.cb-bloque { margin: 4px 0 14px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.cb-h { display: block; font-size: .76rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.cb-items { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cb-lin { display: grid; grid-template-columns: 1fr auto 70px auto auto; gap: 8px; align-items: center; }
.cb-lin select, .cb-lin input { font-family: inherit; font-size: .9rem; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 6px 8px; background: var(--surface); color: var(--ink); min-width: 0; }
.cb-lin .cb-cant { text-align: right; font-weight: 700; }
.cb-lin .cb-unit { white-space: nowrap; min-width: 64px; text-align: right; }
/* (.modal label pone las etiquetas en columna: acá el tilde va al lado del texto) */
.modal .cb-mismo { flex-direction: row; align-items: center; gap: 8px; font-size: .85rem; color: var(--ink); margin: 0 0 10px; }
.modal .cb-mismo input { width: auto; }
.cb-precios label { margin-bottom: 6px; }
.cb-precios input { font-weight: 800; font-size: 1rem; }
.gan-ok { color: var(--ok); }
/* la lista */
.cb-lista { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 14px; }
.cb-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.cb-row-t { display: flex; flex-direction: column; min-width: 0; }
.cb-row-p { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.cb-chip { font-size: .74rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); white-space: nowrap; }
@media (max-width: 560px) {
  /* en el celu el renglón va en dos líneas: arriba el producto y la ✕, abajo
     fresco/❄️, la cantidad y lo que suma */
  .cb-lin { grid-template-columns: 1fr 70px auto; grid-template-areas: "sel sel x" "lado cant unit"; }
  .cb-lin .cb-sel { grid-area: sel; }
  .cb-lin .cb-lado { grid-area: lado; }
  .cb-lin .cb-cant { grid-area: cant; }
  .cb-lin .cb-unit { grid-area: unit; }
  .cb-lin [data-cbdel] { grid-area: x; }
  .cb-row { grid-template-columns: 1fr auto; }
  .cb-row-p { grid-column: 1 / -1; justify-content: flex-start; }
}

/* la ventana "¿qué gusto va?" al vender un combo con renglones a elegir */
.modal-cbe { max-width: 520px; }
.modal-cbe h3 .muted { font-weight: 600; margin-left: 6px; }
.cbe-fijo { padding: 6px 2px; border-bottom: 1px dashed var(--line-soft); }
.cbe-fijo span { opacity: .7; }
.cbe-bloque { margin: 10px 0 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.cbe-bloque.listo { border-color: var(--ok); }
.cbe-h { display: flex; align-items: baseline; gap: 8px; font-size: .8rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--vino); margin-bottom: 6px; }
.cbe-cuenta { margin-left: auto; font-size: .78rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--muted); }
.cbe-bloque.listo .cbe-cuenta { color: var(--ok); }
/* Los gustos, en grilla de botones grandes. Se vende de parado y con gente
   esperando: lo que importa es que el dedo acierte a la primera y que se vean
   TODOS los gustos juntos, sin scrollear. Antes era una lista de renglones
   finitos, uno abajo del otro. */
/* el padding de arriba es para el globito del contador, que sale por encima
   del borde del botón: sin él quedaba pegado a la cabecera del renglón */
.cbe-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px;
  padding: 12px 12px 0; }
.cbe-gusto { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 68px; padding: 8px 6px; border: 2px solid var(--gb, var(--line)); border-radius: 12px;
  background: var(--gf, var(--surface)); color: var(--ink); cursor: pointer; user-select: none; -webkit-user-select: none;
  font-family: inherit; text-align: center; width: 100%; transition: transform .06s; }
.cbe-gusto:active { transform: scale(.96); }
.cbe-nom { font-weight: 900; font-size: .84rem; line-height: 1.1; overflow-wrap: anywhere; }
.cbe-hay { font-size: .68rem; font-weight: 700; color: var(--muted); }
.cbe-hay.neg { color: var(--neg); }
/* elegido: se remarca y el número queda grande, que es lo que se mira de lejos */
.cbe-gusto.on { box-shadow: 0 0 0 3px var(--gb) inset; }
.cbe-n { position: absolute; top: -8px; right: -6px; min-width: 26px; height: 26px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; border-radius: 13px;
  background: var(--gb); color: #fff; font-size: .95rem; font-weight: 900;
  box-shadow: 0 2px 5px rgba(0,0,0,.25); }
/* El − tiene que ser fácil de acertar CON EL DEDO (la tablet es la que más se
   usa) y, sobre todo, errarle no puede sumar: el botón entero suma. Por eso
   sale fuera de la esquina y se le agranda el blanco con un ::after invisible
   de 44px, que es lo recomendado para el dedo. Antes medía 26 y estaba apoyado
   encima de la zona que suma. */
.cbe-menos { position: absolute; top: -11px; left: -11px; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center; border-radius: 17px;
  border: 2px solid var(--gb); background: var(--surface); color: var(--neg);
  font-weight: 900; font-size: 1.25rem; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.cbe-menos::after { content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%; }
.cbe-menos:active { background: var(--neg); color: #fff; }
/* el globito del número se corre al otro lado para que no se toquen */
.cbe-gusto { overflow: visible; }
/* el que ya no se puede tocar porque el renglón está completo */
.cbe-gusto.cbe-apagado { opacity: .4; }
/* Un color fijo por gusto, por su posición en el grupo: ayuda a reconocerlo de
   memoria. Es SOLO una ayuda — el nombre está siempre escrito, así que el que
   recién entra (o el que no distingue bien los colores) lo lee igual. */
.cbe-gusto.c0 { --gf: #eaf2fb; --gb: #4a86c8; }
.cbe-gusto.c1 { --gf: #eaf7ef; --gb: #3f9d6a; }
.cbe-gusto.c2 { --gf: #fdf0e8; --gb: #d97a3e; }
.cbe-gusto.c3 { --gf: #f4eefb; --gb: #8a5fc0; }
.cbe-gusto.c4 { --gf: #fdeef2; --gb: #c8506f; }
.cbe-gusto.c5 { --gf: #eef8f9; --gb: #3f95a0; }
.cbe-gusto.c6 { --gf: #fbf5e6; --gb: #b7902c; }
.cbe-gusto.c7 { --gf: #eff0f5; --gb: #5b6480; }
@media (max-width: 380px) { .cbe-grilla { grid-template-columns: repeat(3, 1fr); gap: 6px; } }
.mp-acciones .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Ticket de la balanza ─────────────────────────────────────────────── */
.modal-bascula { max-width: 480px; }
.basc-lineas { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.basc-fila { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.basc-fila.basc-error { border-color: var(--neg); background: #fdeeee; }
.basc-fila.basc-tocable { cursor: pointer; }
.basc-fila.basc-tocable:active { background: var(--line-soft); }
.basc-ajuste { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.basc-ajuste button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); font-size: 1.1rem; font-weight: 900; line-height: 1; }
.basc-ajuste button:active { background: var(--vino); color: #fff; }
.basc-total { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 1.05rem; margin: 10px 0; padding-top: 8px; border-top: 1px solid var(--line); }
.basc-warn { color: var(--neg); font-weight: 700; font-size: .85rem; margin: 0 0 8px; }
.basc-cola { position: fixed; right: 14px; bottom: 70px; background: var(--vino); color: #fff;
  font-weight: 900; font-size: .8rem; padding: 8px 14px; border-radius: 999px; z-index: 40; }

/* ── Administración → Balanza: mapeo de PLUs ─────────────────────────────── */
.basc-adm-toolbar { display: flex; gap: 10px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.basc-adm-toolbar input { flex: 1 1 220px; min-width: 0; }
.basc-adm-pegar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.basc-adm-pegar textarea { font-family: "Consolas", "Courier New", monospace; font-size: .8rem; }
.basc-adm-pegar code { background: var(--line-soft); padding: 1px 4px; border-radius: 4px; }
.basc-adm-cab, .basc-adm-fila {
  display: grid;
  grid-template-columns: 56px 1fr 130px 1fr 90px 46px 60px 110px;
  gap: 8px; align-items: center;
}
.basc-adm-cab { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: 0 2px 6px; border-bottom: 1px solid var(--line); }
.basc-adm-filas { display: flex; flex-direction: column; gap: 4px; overflow-x: auto; }
.basc-adm-fila { min-width: 780px; padding: 6px 2px; border-bottom: 1px solid var(--line-soft); font-size: .85rem; }
.basc-adm-fila.basc-adm-desact { background: #fff8e8; }
.basc-adm-plu { font-weight: 900; white-space: nowrap; }
.basc-adm-nombre { font-size: .82rem; padding: 4px 6px; }
.basc-adm-chk { display: flex; align-items: center; gap: 4px; font-size: .78rem; white-space: nowrap; }
.basc-adm-chk input { width: auto; }
.basc-adm-precio { text-align: right; white-space: nowrap; }
.basc-adm-desact-tag { color: var(--neg); }
@media (max-width: 700px) { .basc-adm-cab { display: none; } .basc-adm-fila { grid-template-columns: none;
  display: flex; flex-wrap: wrap; min-width: 0; gap: 6px 10px; padding: 10px 4px; } }

/* ── El pote que se cobra por kilo ────────────────────────────────────────
   En la lista de precios no lleva casilla editable: su precio sale del granel
   (0,350 × el kilo). Una casilla ahí sería mentira — se podría escribir un
   número que no se usa para nada. Se muestra la cuenta, que es lo que hay que
   poder chequear de un vistazo. */
.mg-franq-calc { text-align: center; line-height: 1.15; }
.mg-franq-calc b { font-weight: 900; display: block; }
.mg-franq-calc .small { font-size: .66rem; white-space: nowrap; }
/* el bloque de la ficha del producto donde se carga el peso y el granel */
.mp-porkilo { border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; margin: 10px 0; background: var(--surface-2); }
.mp-porkilo .mp-fecha-h { display: block; font-weight: 900; font-size: .84rem; margin-bottom: 2px; }
.mp-porkilo .mp-grid { margin-top: 8px; }

/* ── La marquita ƒ: "este número salió de una suma" ───────────────────────
   Va pegada al borde izquierdo, que es lugar libre: los números de estas
   casillas van alineados a la derecha. Es un fondo y no un elemento aparte
   porque un <input> no puede tener hijos ni ::after, y así funciona igual en
   las casillas sueltas del Cierre y en los renglones de proveedores/extras.
   Al tocar la casilla vuelve la suma para seguir editándola, como siempre;
   con el mouse, el globito la muestra sin tocar nada. */
.cie-in.cie-conf, .cie-monto.cie-conf {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='14'><text x='0' y='11' font-family='Georgia,serif' font-style='italic' font-size='13' fill='%231f7a8c'>f</text></svg>");
  background-repeat: no-repeat;
  background-position: 5px center;
  padding-left: 17px;
  border-color: #9ec9d4;
}
.cie-in.cie-conf:focus, .cie-monto.cie-conf:focus { background-image: none; padding-left: 7px; }

/* la ventana del pago de mercadería: el monto arriba y abajo los sobres */
.ccp-monto { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 10px 0 4px; }
.ccp-monto label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; font-weight: 800; }
.ccp-monto input { width: 150px; text-align: right; font-size: 1.15rem; font-weight: 900;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 6px 9px; background: var(--surface); color: var(--ink); }

/* ── Mercadería de la semana: lo que dice la Cuenta corriente ─────────────
   Debajo de la casilla a mano. Si no escribiste nada, ese es el número que
   vale ("de la cuenta"). Si escribiste y no coincide, sale en rojo con un
   "usar" para volver al automático. */
.ck-merca { font-size: .64rem; font-weight: 700; color: var(--muted); text-align: right; margin-top: 2px; line-height: 1.2; }
.ck-merca.auto { font-style: italic; opacity: .75; }
.ck-merca.dif { color: var(--neg); font-weight: 900; }
.ck-merca .link-mini { padding: 0 0 0 3px; font-size: .64rem; }

/* ── Conversor: de litros de granel a potes ───────────────────────────────
   Mismo renglón que el de congelar, pero con una casilla por tamaño de pote.
   En pantalla chica se apila en vez de apretarse. */
.conv-row.conv-potes { flex-wrap: wrap; }
.conv-lbl { display: flex; flex-direction: column; gap: 2px; font-size: .68rem;
  font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.conv-lbl .convin { width: 62px; }
.conv-lbl .convin.conv-fecha { width: 66px; text-align: center; }