/* Una pantalla de escritorio da 1920px y esto usaba 960: la mitad
   desperdiciada, con todo apretado en una columna angosta.
   El tope alto es para que en un monitor ancho las líneas de texto no
   queden de 2000px, que no se puede leer. */
.owner-page {
  max-width: 1600px;
  margin: 0 auto;
  padding: 28px clamp(20px, 3vw, 44px) 60px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.tab-panel { display: none; flex-direction: column; gap: 34px; }
.tab-panel.active { display: flex; }

/* La pestaña Vender (POS) rompe el max-width de .owner-page y usa TODO
   el ancho de la pantalla, igual que la terminal del Cajero. */
.owner-page > .tab-panel[data-panel="vender"] {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0 24px;
  box-sizing: border-box;
  gap: 8px;
}

/* Sidebar / drawer de navegación, toggled por el botón hamburguesa */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 40;
}
.sidebar-overlay.show { display: block; }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  /* Ajustado para que las doce funciones ENTREN sin barra de scroll en
     una pantalla normal. Antes el arranque era 84px y los ítems iban
     más sueltos: sumaban ~650px y aparecía la barra, que en un menú de
     doce cosas es puro estorbo. El scroll sigue existiendo por si la
     ventana es muy baja, pero ya no hace falta. */
  padding: 64px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform: translateX(-100%);
  transition: transform .18s ease;
  z-index: 41;
  overflow-y: auto;
}
.sidebar.show { transform: translateX(0); }

.sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-family: var(--sans);
  font-size: .86rem;
  font-weight: 500;
  color: var(--text-sub);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 8px 14px;
  min-height: 0;
  cursor: pointer;
}
.sb-item .sb-emoji { flex-shrink: 0; font-size: 1.05rem; line-height: 1; width: 1.35em; text-align: center; }
.sb-item:hover { background: var(--bg-hover); color: var(--text); }
.sb-item.active {
  background: var(--bg-card);
  border-color: var(--border-accent);
  color: var(--gold-text);
}

/* .tb-badge y .tb-icon-wrap se mudaron a app.css: el chat los usa en
   las TRES pantallas y el Cajero no carga este archivo -- el mismo bug
   de siempre (.forget-device, .token-input), cortado antes de nacer. */

.section h2 {
  font-family: var(--serif);
  font-size: 1.25rem;
  margin: 0 0 4px;
}
.section .sub { color: var(--text-sub); font-size: .82rem; margin-bottom: 16px; }

/* Grilla y no flex: con `flex` + `min-width` las cajas se quedaban del
   tamaño de su contenido y dejaban media pantalla vacía a la derecha en
   cualquier monitor de escritorio. Con `auto-fit` + `1fr` se estiran y
   reparten TODO el ancho disponible, y al achicar la ventana bajan de
   columnas solas, sin media query. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.stat-box {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-card), transparent);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 20px 16px 24px;
  min-width: 0;   /* si no, el contenido largo desborda la columna */
  box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.stat-box::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--gold);
}
.stat-box.accent-green::before { background: var(--green); }
.stat-box.accent-red::before { background: var(--error); }
.stat-box.accent-warning::before { background: var(--warning); }
.stat-box .stat-label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.stat-box .stat-value { font-family: var(--sans); font-weight: 700; font-size: 1.7rem; color: var(--gold-text); margin-top: 4px; }
.stat-box.accent-green .stat-value { color: var(--green-text); }
.stat-box.accent-red .stat-value { color: var(--error-text); }
.stat-box.accent-warning .stat-value { color: var(--warning-text); }

.medio-breakdown {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: .82rem;
  color: var(--text-sub);
}
.medio-breakdown span.amount { color: var(--gold-text); font-weight: 600; margin-left: 5px; }

.top-products { display: flex; flex-direction: column; gap: 8px; }
.top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: .85rem;
}
.top-row .rank {
  font-family: var(--serif);
  color: var(--gold-text);
  width: 20px;
}
.top-row .tp-name { flex: 1; }
.top-row .tp-qty { color: var(--text-sub); font-size: .78rem; }

.sales-list, .emp-list { display: flex; flex-direction: column; gap: 8px; }

.sale-row, .emp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  font-size: .85rem;
}

.sale-row .s-time { color: var(--text-muted); width: 60px; flex-shrink: 0; }
.sale-row .s-who { flex: 1; }
.sale-row .s-medio {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-sub);
  background: var(--bg-hover);
  padding: 3px 9px;
  border-radius: var(--r-full);
}
.sale-row .s-total { color: var(--gold-text); font-weight: 600; width: 80px; text-align: right; }

.emp-row .e-name { flex: 1; font-weight: 500; }
.emp-row .role-tag {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-sub); background: var(--bg-hover);
  padding: 3px 9px; border-radius: var(--r-full);
}
.emp-row .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.emp-row .status-dot.inactive { background: var(--text-muted); }
.emp-row .e-actions { display: flex; gap: 6px; }
.emp-row .e-actions button {
  font-size: .72rem;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-sub);
  cursor: pointer;
}
.emp-row .e-actions button:hover { background: var(--bg-hover); }

.new-emp-form {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  margin-top: 14px;
}
.new-emp-form .form-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 640px) { .new-emp-form .form-grid { grid-template-columns: 1fr; } }

.new-emp-form label {
  display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin-bottom: 6px;
}
.new-emp-form input, .new-emp-form select {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--sans);
  font-size: .9rem;
  outline: none;
}
.new-emp-form input:focus, .new-emp-form select:focus { border-color: var(--gold); }



.auth-groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 640px) { .auth-groups { grid-template-columns: 1fr; } }

.auth-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
}
.auth-group h3 {
  font-family: var(--serif);
  font-size: 1rem;
  margin: 0 0 10px;
  color: var(--gold-text);
}

.auth-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   PANEL DE ALERTAS
   Un solo lugar donde mirar si algo anda mal: facturación, caja
   sin cerrar y stock bajo. Antes eran dos carteles amarillos
   sueltos arriba y una sección más abajo.
   Cada fila es un botón que LLEVA a donde hay que ir.
   ══════════════════════════════════════════════════════════════ */
.alertas {
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  overflow: hidden;
}

.al-cab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.al-tit {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-sub);
}
.al-cuenta {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: var(--gold-dim, rgba(201, 169, 110, .18));
  border: 1px solid var(--border-accent);
  color: var(--gold-text);
  font-size: .68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.al-lista { list-style: none; margin: 0; padding: 0; }

.al-fila {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 14px;
  border-bottom: 1px solid var(--border);
}
.al-fila:last-child { border-bottom: 0; }

.al-ir {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 14px 4px 14px 18px;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .13s ease;
}
.al-ir:hover { background: var(--bg-hover); }
.al-ir:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* El ícono en su propia pastilla: sin fondo, un emoji suelto al
   lado del texto se lee como decoración y no como categoría. */
.al-ico {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: 9px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: .95rem;
}
.al-fila.grave .al-ico { border-color: rgba(196, 75, 75, .45); background: rgba(196, 75, 75, .12); }
.al-fila.aviso .al-ico { border-color: rgba(245, 158, 11, .40); background: rgba(245, 158, 11, .11); }

.al-txt {
  flex: 1;
  min-width: 0;
  font-size: .87rem;
  line-height: 1.4;
  color: var(--text-sub);
}
.al-txt b { color: var(--text); font-weight: 600; }

.al-flecha { flex: none; color: var(--text-muted); font-size: .95rem; transition: transform .13s ease, color .13s ease; }
.al-ir:hover .al-flecha { color: var(--gold-text); transform: translateX(3px); }

.al-listo {
  flex: none;
  padding: 5px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-sub);
  font-size: .68rem;
  cursor: pointer;
}
.al-listo:hover { border-color: var(--border-accent); color: var(--text); }

@media (max-width: 620px) {
  .al-ir { gap: 10px; padding-left: 14px; }
  .al-txt { font-size: .81rem; }
  .al-flecha { display: none; }
}

/* Adónde te llevó: sin el parpadeo, el salto no se entiende. */
.section.resaltado { animation: seccionResaltada 2.2s ease; }
@keyframes seccionResaltada {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  15%, 60% { box-shadow: 0 0 0 3px var(--warning); }
}

/* Botón de una acción que no se puede deshacer. */
.btn-peligro {
  background: var(--error) !important;
  border-color: var(--error) !important;
  color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
  .section.resaltado { animation: none; box-shadow: 0 0 0 3px var(--warning); }
  .al-ir, .al-flecha { transition: none; }
}

/* ── Lo que compraste: una compra por renglón, no treinta sueltos ──
   Cada compra se despliega y muestra lo que trajo. Ocupa el ancho
   real de la pantalla en vez de una columna angosta. */
.filtros-barra {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.filtros-barra .filtro { display: flex; flex-direction: column; gap: 5px; }
.filtros-barra label {
  font-size: .64rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.filtros-barra select {
  min-width: 170px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: .84rem;
}
.filtro-resumen { margin-left: auto; font-size: .82rem; color: var(--text-sub); }
.filtro-resumen strong { color: var(--gold-text); }

.compras-list { display: flex; flex-direction: column; gap: 8px; }

.compra {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  overflow: hidden;
}
.compra[data-anulada] { opacity: .5; }
.compra[open] { border-color: var(--border-accent); }

.compra-cab {
  display: grid;
  /* La primera columna lleva la fecha Y su lapiz: con 58px --lo que medi
     antes de agregarlo-- el boton se salia de su celda. */
  grid-template-columns: 78px minmax(140px, 1.4fr) minmax(110px, 1fr) 110px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  cursor: pointer;
  list-style: none;
  font-size: .86rem;
}
.compra-cab::-webkit-details-marker { display: none; }
.compra-cab:hover { background: var(--bg-hover); }
.compra-fecha { font-weight: 700; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.compra-prov  { font-weight: 600; }
.compra-num   { color: var(--text-sub); font-size: .78rem; font-variant-numeric: tabular-nums; }
.compra-items { color: var(--text-muted); font-size: .78rem; }
.compra-total { color: var(--gold-text); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.compra-dev   { color: var(--warning-text); font-size: .72rem; }
.tenue        { color: var(--text-muted); font-style: italic; }

.compra-lineas { border-top: 1px solid var(--border); padding: 6px 16px 12px; }
.compra-linea {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) 150px 110px 130px auto;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  font-size: .82rem;
  border-bottom: 1px solid var(--border);
}
.compra-linea:last-of-type { border-bottom: none; }
.compra-linea.anulada { opacity: .55; text-decoration: line-through; }
.cl-prod  { font-weight: 500; }
.cl-cant, .cl-venta { color: var(--text-sub); font-size: .76rem; }
.cl-costo { color: var(--gold-text); font-variant-numeric: tabular-nums; }
.cl-acciones { display: flex; gap: 6px; justify-content: flex-end; }
.cl-anulado { color: var(--error-text); font-size: .7rem; text-decoration: none; }
.cl-acciones button {
  font-size: .68rem; padding: 4px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(245,158,11,.4); background: rgba(245,158,11,.1); color: var(--warning-text);
}
.cl-acciones .act-anular-ingreso {
  border-color: rgba(196,75,75,.35); background: rgba(196,75,75,.08); color: var(--error-text);
}
/* El descuento, pegado al total de la venta. Chico y en el color de aviso:
   no es un error --el Dueño lo autorizó-- pero es plata que no entró, y
   tiene que saltar a la vista al recorrer la lista. */
.s-desc {
  display: block; font-size: .68rem; font-weight: 600;
  color: var(--warning-text); font-variant-numeric: tabular-nums;
}

.compra-notas { margin-top: 8px; font-size: .76rem; color: var(--text-sub); font-style: italic; }
.compra-quien { margin-top: 6px; font-size: .7rem; color: var(--text-muted); }

@media (max-width: 900px) {
  .compra-cab, .compra-linea { grid-template-columns: 1fr auto; row-gap: 4px; }
  .compra-num, .compra-items, .cl-venta { display: none; }
}

/* ── Stock en tres columnas ────────────────────────────────────
   Doscientos renglones en una lista no dicen nada. Tres columnas
   sí: qué hay que comprar YA, qué se está por acabar, y qué está
   bien. Se lee de un vistazo, sin leer. */
.stock-columnas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.stock-col {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  overflow: hidden;
}
.stock-col > header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  border-top: 3px solid var(--border);
}
.stock-col.ya     > header { border-top-color: var(--error); }
.stock-col.pronto > header { border-top-color: var(--warning); }
.stock-col.bien   > header { border-top-color: var(--green); }

.sc-titulo { font-weight: 700; font-size: .9rem; }
.stock-col.ya     .sc-titulo { color: var(--error-text); }
.stock-col.pronto .sc-titulo { color: var(--warning-text); }
.stock-col.bien   .sc-titulo { color: var(--green-text); }
.sc-cuenta {
  font-size: 1.35rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; grid-row: span 2; align-self: center;
}
.sc-ayuda { font-size: .68rem; color: var(--text-muted); }

.sc-items { max-height: 460px; overflow-y: auto; }
.sc-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: .84rem;
}
.sc-item:last-child { border-bottom: none; }
.sc-item:hover { background: var(--bg-hover); }
.sc-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.stock-col.ya     .sc-num { color: var(--error-text); }
.stock-col.pronto .sc-num { color: var(--warning-text); }
.stock-col.bien   .sc-num { color: var(--green-text); }
.sc-min { font-size: .68rem; color: var(--text-muted); }
.sc-vacio { padding: 20px 14px; text-align: center; color: var(--text-muted); font-size: .78rem; }

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

/* ── Balance: tres titulares, gráficos, y el detalle escondido ──
   Antes eran once cajitas iguales en fila, todas del mismo tamaño,
   y había que leerlas una por una para entender si el mes fue bien
   o mal. Ahora lo importante es grande y el resto se despliega. */
.bal-titulares {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.bal-tit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  border-left: 4px solid var(--border);
}
.bal-tit.entro { border-left-color: var(--green); }
.bal-tit.salio { border-left-color: var(--warning); }
.bal-tit.queda.positivo { border-left-color: var(--green); background: rgba(34,197,94,.06); }
.bal-tit.queda.negativo { border-left-color: var(--error); background: rgba(196,75,75,.06); }

.bt-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted);
}
.bt-valor {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 700; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.bal-tit.entro .bt-valor { color: var(--green-text); }
.bal-tit.salio .bt-valor { color: var(--warning-text); }
.bal-tit.queda.positivo .bt-valor { color: var(--green-text); }
.bal-tit.queda.negativo .bt-valor { color: var(--error-text); }
.bt-ayuda { font-size: .74rem; color: var(--text-sub); }

/* Los gráficos: la curva ocupa todo el ancho, las dos de abajo se
   reparten. Una pantalla de escritorio da para eso. */
.bal-graficos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.graf-caja {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  padding: 18px 20px;
}
.graf-caja.ancha { grid-column: 1 / -1; }
.graf-caja h3 {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 700;
}
.graf-caja .sub { margin-bottom: 10px; }
.graf-lienzo { position: relative; height: 240px; margin-top: 12px; }
.graf-caja.ancha .graf-lienzo { height: 260px; }
.grafico-vacio {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: .82rem; text-align: center;
}

.bal-detalle {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-card);
  overflow: hidden;
}
.bal-detalle > summary {
  padding: 13px 18px;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-sub);
  list-style: none;
}
.bal-detalle > summary::-webkit-details-marker { display: none; }
.bal-detalle > summary::before { content: '▸ '; }
.bal-detalle[open] > summary::before { content: '▾ '; }
.bal-detalle > summary:hover { background: var(--bg-hover); }

.bal-lineas { padding: 6px 18px 14px; border-top: 1px solid var(--border); }
.bl {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0; font-size: .86rem;
  border-bottom: 1px solid var(--border);
}
.bl:last-child { border-bottom: none; }
.bl.sep { margin-top: 6px; border-top: 1px solid var(--border); }
.bl span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.bl .pos { color: var(--green-text); }
.bl .neg { color: var(--error-text); }
.bl.total { margin-top: 6px; padding-top: 12px; border-top: 2px solid var(--border-accent); font-size: 1rem; font-weight: 700; }

.bal-fiado {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  padding: 12px 18px; border-top: 1px solid var(--border);
  font-size: .78rem; color: var(--text-sub);
}
.bal-fiado .sub { width: 100%; font-size: .72rem; }

@media (max-width: 1000px) {
  .bal-titulares, .bal-graficos { grid-template-columns: 1fr; }
}

/* ── Secciones de a dos ────────────────────────────────────────
   Con 1600px de ancho, cuatro listas cortas una abajo de la otra
   dejan media pantalla vacía y obligan a scrollear de gusto. En
   pantalla ancha van de a dos; en angosta vuelven a apilarse. */
.secciones-par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
@media (max-width: 1100px) { .secciones-par { grid-template-columns: minmax(0, 1fr); } }

/* ── Filas anchas, pero alineadas ──────────────────────────────
   Con la página a 1600px las filas quedan de ~1200px. En flex, el
   nombre se estiraba y quedaba un hueco enorme hasta el importe.
   En grid cada dato tiene su columna y el ojo baja derecho. */
.sale-row {
  display: grid;
  grid-template-columns: 72px minmax(160px, 1.6fr) 130px 120px auto;
  align-items: center;
  gap: 14px;
}
.sale-row .s-who { flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Las filas de AVISO reusan .sale-row pero tienen uno o dos hijos, no
   cinco. Y esta grilla es POSICIONAL (lo dice el comentario de abajo
   para .emp-row): el mensaje caia en la primera columna, que mide 72px
   fijos y esta pensada para la hora de una venta. Medido en la barra
   de alertas del Encargado: el texto "Agua sin gas 500ml - SIN STOCK
   (tenes 0, min 20)" entraba en 72px y se leia "Agua si..." -- con
   1265px de pantalla, no era cosa del celular. */
.sale-row.aviso { grid-template-columns: 1fr auto; }
/* Y un aviso se lee ENTERO: pasa a dos renglones en vez de cortarse con
   puntos suspensivos. En una fila de ventas elidir esta bien -- son
   datos en columnas y el largo importa menos que la alineacion. En una
   alerta no: "Agua sin gas 500ml - SIN ST..." esconde justo el numero
   por el que la alerta existe. */
.sale-row.aviso .s-who {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}
.sale-row .s-medio { justify-self: start; }
.sale-row .s-total { width: auto; font-variant-numeric: tabular-nums; }

/* OJO: esta grilla es POSICIONAL -- cada columna es para un hijo, en
   orden. La de acá abajo es la de EMPLEADOS: punto, nombre, rol y
   acciones. Cualquier fila que reuse .emp-row con otra cantidad de
   hijos cae corrida y hay que darle sus propias columnas, como la de
   clientes. */
.emp-row {
  display: grid;
  grid-template-columns: 14px minmax(140px, 1.4fr) 120px auto;
  align-items: center;
  gap: 14px;
}
.emp-row .e-name { flex: none; }

/* La ficha de fiado NO tiene las columnas de empleados: sin esto el
   nombre caía en la columna del puntito (14px) y se montaba encima de
   la píldora, que se llevaba todo el ancho del nombre.

   Son CUATRO datos desde el 26/08: nombre, cuántas compras, cuánto
   gastó y si debe. Antes eran tres y se mostraba sólo la deuda -- que
   en un kiosco donde todos pagan es una columna de ceros, y el Dueño
   lee "no funciona". El dato que hace útil la pantalla es cuánto le
   compra cada uno. */
.emp-row.cli-row {
  grid-template-columns: minmax(110px, 1.5fr) 96px auto auto;
}
.emp-row.cli-row .e-name { overflow: hidden; text-overflow: ellipsis; }
.emp-row .role-tag { justify-self: start; white-space: nowrap; }

/* En un telefono las cuatro columnas no entran, y el resultado no era
   "se ve apretado": era que el boton NO EXISTIA para el que miraba.
   Medido a 412 con la sonda de scroll:

       .act-toggle ("Desactivar")  ->  x = 432 a 508
       primer ancestro que recorta ->  html, overflow-x: hidden

   O sea que quedaba afuera Y recortado: no se alcanzaba ni scrolleando.
   El Dueño no podia desactivar un empleado desde el celular, y nada en
   la pantalla mostraba que faltara algo.

   La cuenta: 14 (punto) + 140 (nombre) + 120 (rol) + 157 (los botones)
   + 42 de gaps = 473 de minimo, contra 412 de pantalla.

   Los botones bajan a su propio renglon. Wrap ademas del salto, porque
   una fila puede tener tres (Blanquear PIN / Desactivar / Borrar) y en
   320 px tampoco entran los tres juntos. */
@media (max-width: 560px) {
  .emp-row { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .emp-row .e-actions { grid-column: 1 / -1; flex-wrap: wrap; }
}

/* Las listas que no son cronológicas se reparten en dos columnas:
   el orden entre una y otra no significa nada, así que partirlas no
   confunde y se ve el doble sin scrollear. */
@media (min-width: 1200px) {
  #clientesList, #gastosList, #sueldosList, #cierresList, #conversionesList {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    align-items: start;
  }
}

/* Cinturón: con tantas grillas, un solo contenido ancho (una tabla,
   un nombre largo sin espacios) hacía que la página se pudiera
   desplazar de costado en el celular. */
.owner-page, .tab-panel, .section { min-width: 0; }
.secciones-par > * { min-width: 0; }

/* ── Cómo le va a cada uno ─────────────────────────────────────
   Una fila por persona. El total dice quién vendió más; el promedio
   por venta dice quién vende mejor, que no es lo mismo y es la
   pregunta que el Dueño hace de verdad. */
.rend-tabla { display: flex; flex-direction: column; gap: 8px; }
.rend-cab, .rend-fila {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) 90px 130px 120px 120px minmax(120px, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  font-size: .84rem;
}
.rend-cab {
  padding-bottom: 6px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.rend-fila {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.rend-fila.primero { border-color: var(--border-accent); }
.rend-nombre { font-weight: 600; }
.rend-nombre .rol {
  display: block; font-size: .66rem; font-weight: 400;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em;
}
.rend-num { font-variant-numeric: tabular-nums; text-align: right; }
.rend-total { color: var(--gold-text); font-weight: 700; }
/* El mejor promedio por venta se marca: es el dato que se busca. */
.rend-mejor { color: var(--green-text); font-weight: 700; }
.rend-mejor::after { content: ' ★'; font-size: .7em; }
.rend-flojo { color: var(--text-sub); }
.rend-top { color: var(--text-sub); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rend-control { color: var(--warning-text); font-size: .74rem; }

@media (max-width: 900px) {
  .rend-cab { display: none; }
  .rend-fila { grid-template-columns: 1fr auto; row-gap: 4px; }
  .rend-top { display: none; }
}

/* ── El mejor del mes ──────────────────────────────────────────
   Queda asentado cuando el mes cierra y no se toca más. */
/* Flex y no grid: los premios son dos o tres según el mes, y las tarjetas
   tienen que estirarse para llenar el ancho en los dos casos.
   Con `grid auto-fit` no alcanzaba -- medido: en 1170px armaba CUATRO
   columnas de 288 y las tres tarjetas dejaban un hueco a la derecha. Las
   pistas vacías de auto-fit se colapsan sólo si no las cruza nadie, y acá
   el cartel de "Asentado" va de punta a punta, así que la cuarta nunca
   quedaba vacía. */
.mejor-mes { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.mm-premio {
  flex: 1 1 230px; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--border-accent);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(201,169,110,.10), transparent);
}
.mm-premio .mm-icono { font-size: 1.7rem; line-height: 1; }
.mm-premio .mm-que {
  font-size: .64rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.mm-premio .mm-quien { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; }
.mm-premio .mm-dato { font-size: .78rem; color: var(--text-sub); }

/* El que menos vendió: mismo lugar, otro peso. Sin el borde de acento ni
   el degradado dorado de los premios — si se viera igual, el podio se
   leería como una lista de escarmiento en vez de un dato. */
.mm-premio.mm-flojo { border-color: var(--border); background: var(--bg-card); }
.mm-premio.mm-flojo .mm-quien { font-weight: 600; color: var(--text-sub); }
.mm-estado {
  flex-basis: 100%; font-size: .74rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
}
.mm-estado.provisorio { color: var(--warning-text); }

.mejores-historial { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
.mejores-historial > summary {
  cursor: pointer; font-size: .8rem; color: var(--text-sub); list-style: none;
}
.mejores-historial > summary::-webkit-details-marker { display: none; }
.mejores-historial > summary::before { content: '▸ '; }
.mejores-historial[open] > summary::before { content: '▾ '; }
.mejores-lista { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.mm-fila {
  display: grid;
  grid-template-columns: 110px minmax(0,1fr) minmax(0,1fr);
  gap: 14px; align-items: baseline;
  padding: 8px 12px; font-size: .82rem;
  border-bottom: 1px solid var(--border);
}
.mm-fila:last-child { border-bottom: none; }
.mm-fila .mm-mes { color: var(--text-muted); font-size: .76rem; }
.mm-fila strong { color: var(--gold-text); }

@media (max-width: 900px) {
  .mejor-mes { grid-template-columns: 1fr; }
  .mm-fila { grid-template-columns: 1fr; row-gap: 2px; }
}

/* ── Calculadora de costos ─────────────────────────────────────── */
.calc-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin: 16px 0 4px; overflow-x: auto; }
.calc-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--text-sub); font: inherit; font-size: .88rem; font-weight: 600;
  padding: 10px 16px; cursor: pointer; white-space: nowrap; margin-bottom: -1px; text-align: left;
}
.calc-tab:hover { color: var(--text); }
.calc-tab.active { color: var(--gold-text); border-bottom-color: var(--gold); }
.calc-tab small { display: block; font-weight: 400; font-size: .7rem; color: var(--text-muted); margin-top: 1px; }
.calc-tab.active small { color: var(--text-sub); }
.calc-pane { display: none; }
.calc-pane.active { display: block; }

.calc-comun { margin-top: 14px; }
.calc-campo { display: block; max-width: 420px; }
.calc-campo > span { display: block; font-size: .72rem; color: var(--text-sub); font-weight: 600; margin-bottom: 4px; }
.calc-campo select { width: 100%; }

/* Renglones que se cargan a mano */
.calc-fila { display: grid; grid-template-columns: minmax(0,1fr) 130px 34px; gap: 8px; align-items: center; margin-bottom: 7px; }
.calc-fila4 { grid-template-columns: minmax(0,1fr) 120px 120px 34px; }
.calc-quitar { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 4px; }
.calc-quitar:hover { color: var(--error-text); }
.calc-total { margin-top: 10px; font-size: .8rem; color: var(--text-sub); }

/* Las salidas. No son <table> para que en el celular cada renglón
   pueda apilarse solo, sin scroll horizontal. */
.calc-tabla { margin-top: 10px; overflow-x: auto; }
.calc-r {
  display: grid; grid-template-columns: minmax(120px,2fr) repeat(5, minmax(74px,1fr));
  gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--border);
  font-size: .82rem; font-variant-numeric: tabular-nums; align-items: center;
}
.calc-t7 .calc-r, .calc-tabla.calc-t7 .calc-r { grid-template-columns: minmax(120px,2fr) repeat(6, minmax(74px,1fr)); }
.calc-r > span:not(:first-child) { text-align: right; }
.calc-r.calc-cab {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-sub); font-weight: 700; border-bottom-color: var(--border);
}
.calc-fila.calc-cab { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-sub); font-weight: 700; }
.calc-r:last-child { border-bottom: none; }
.calc-r.calc-rojo { background: rgba(196, 75, 75, .10); }

.calc-nota {
  margin-top: 14px; padding: 11px 14px; font-size: .8rem; color: var(--text-sub);
  background: var(--bg-card); border-left: 3px solid var(--gold); border-radius: 0 9px 9px 0;
}
.calc-nota.mala { border-left-color: var(--error); }
.calc-nota b { color: var(--text); }

.calc-pill { display: inline-block; padding: 2px 9px; border-radius: 9999px; font-size: .7rem; font-weight: 700; }
.calc-pill.bien { color: var(--green-text); background: rgba(34,197,94,.12); }
.calc-pill.ojo  { color: var(--warning-text); background: rgba(245,158,11,.12); }

.calc-destacada { border-color: var(--gold); }
.calc-buena { border-color: var(--green); }
.calc-mala  { border-color: var(--error); }
.bien { color: var(--green-text); }
.ojo  { color: var(--warning-text); }
.mal  { color: var(--error-text); }

/* En el celular una tabla de siete columnas deja de ser una tabla: el
   renglon se parte en tres lineas y terminas leyendo "$213,16" sin
   ningun rotulo cerca, con la cabecera cien pixeles mas arriba.
   Cada producto pasa a ser una ficha, con el nombre de la columna al
   lado de cada numero. La cabecera se esconde: ya no hace falta. */
@media (max-width: 720px) {
  .calc-tabla { overflow-x: visible; }
  .calc-r {
    display: block; padding: 10px 12px; margin-bottom: 8px;
    border: 1px solid var(--border); border-radius: var(--r-md);
  }
  /* Va DESPUES y sin el selector de tres clases: si el que pone
     display:block se escribe como `.calc-tabla.calc-t7 .calc-r`, esas
     tres clases le ganan por especificidad a `.calc-r.calc-cab` y la
     cabecera no se esconde nunca. Con display:block ya no hace falta
     distinguir la tabla de siete columnas. */
  .calc-r.calc-cab { display: none; }
  .calc-r > span { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
  .calc-r > span:not(:first-child)::before {
    content: attr(data-col); color: var(--text-sub); font-weight: 600;
    font-size: .74rem; text-align: left; flex: 0 1 auto;
  }
  .calc-r > span:first-child {
    font-weight: 700; font-size: .9rem; margin-bottom: 4px;
    padding-bottom: 6px; border-bottom: 1px solid var(--border);
  }
  .calc-r > span:not(:first-child) { text-align: right; }
  .calc-fila4 { grid-template-columns: minmax(0,1fr) 90px 80px 30px; }
}

/* En un telefono chico las tres columnas de numeros se quedaban con todo
   --90+80+30 mas los gaps son 224px-- y a la del rotulo le sobraban 11.
   "Producto" necesita 68 y se salia 57px por el costado. Medido a 320.
   El `minmax(0,1fr)` evita que el GRID desborde, pero no impide que el
   TEXTO se salga de su celda: son dos cosas distintas y por eso no se
   veia en el scroll de la pagina, que daba 0.
   Se achican las fijas y el rotulo pasa a tener un minimo de verdad. */
@media (max-width: 400px) {
  .calc-fila  { gap: 6px; }
  /* La cuenta, con lo que hay de verdad: a 320 el contenedor mide 241.
     70 (el rotulo necesita 68) + 66 + 60 + 26 + 18 de gaps = 240. */
  .calc-fila4 { grid-template-columns: minmax(70px,1fr) 66px 60px 26px; }
  .calcpub-caja .calc-fila { gap: 6px; }
}

/* El ? de ayuda y su globo.
   Se abre AL TOCARLO, no al pasar el mouse: en un celular no hay
   mouse, y el que mira esto desde el telefono es justo el que mas
   necesita que le expliquen que le estan pidiendo. */
.calc-ayuda {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 5px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--bg-card); color: var(--text-sub);
  font-size: .62rem; font-weight: 700; line-height: 1; cursor: pointer;
  vertical-align: middle; flex: 0 0 auto;
}
.calc-ayuda:hover { border-color: var(--gold); color: var(--gold-text); }
.calc-ayuda:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.calc-globo {
  position: fixed; z-index: 3200; display: none;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--bg-surface); border: 1px solid var(--border-accent);
  box-shadow: 0 10px 30px rgba(0,0,0,.32);
  font-size: .8rem; line-height: 1.45; color: var(--text);
  font-weight: 400; text-transform: none; letter-spacing: normal;
}
.calc-globo.abierto { display: block; }


/* ── El borrador de la calculadora ─────────────────────────────
   Los datos se traen del kiosco una vez y de ahí en más son del
   dueño para tocar. La calculadora NUNCA escribe: las dos únicas
   funciones que llama son de lectura. Pero eso el dueño no lo
   puede saber mirando, así que se lo decimos. */
.calc-borrador {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px dashed var(--border-accent);
  border-radius: var(--r-md); padding: 11px 14px; margin-bottom: 14px; font-size: .82rem;
}
.calc-borrador b { color: var(--gold-text); }
.calc-borrador .sub { display: block; font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
.calc-r input {
  width: 100%; max-width: 92px; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--r-sm); padding: 3px 6px; font: inherit;
  font-size: .8rem; text-align: right; font-variant-numeric: tabular-nums;
}
.calc-r input:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: transparent; }
@media (max-width: 720px) { .calc-r input { max-width: 120px; } }

/* ── Proyectar ─────────────────────────────────────────────── */
.calc-atajos { display: flex; gap: 6px; flex-wrap: wrap; }
.calc-atajo {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-sub);
  border-radius: var(--r-full); padding: 5px 12px; font: inherit; font-size: .76rem; cursor: pointer;
}
.calc-atajo:hover { border-color: var(--gold); color: var(--gold-text); }

.palancas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 12px; }
.palanca {
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 15px 16px; background: var(--bg-card);
}
.palanca.puede { border-color: rgba(34,197,94,.4); }
.palanca.no-puede { border-color: rgba(196,75,75,.4); background: rgba(196,75,75,.06); }
.palanca .que { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-sub); }
.palanca .cuanto { font-size: 1.75rem; font-weight: 800; line-height: 1.1; margin: 6px 0 2px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.palanca.puede .cuanto { color: var(--green-text); }
.palanca.no-puede .cuanto { color: var(--error-text); font-size: 1.1rem; }
.palanca .detalle { font-size: .78rem; color: var(--text-sub); line-height: 1.45; }

/* ── Elegir cómo se ve el catálogo público ─────────────────────
   Cada modelo es un lugar distinto, así que la tarjeta muestra el
   lugar en chico: la luz y el material se reconocen de un vistazo.
   Un desplegable con cinco nombres no dice nada -- "La trastienda"
   no significa nada hasta que ves que es oscuro y de madera. */
.cq-modelos { margin: 4px 0 16px; }
.cq-modelos-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px;
  /* Todas del mismo alto aunque una tenga la descripción más corta:
     si no, la fila queda escalonada. */
  grid-auto-rows: 1fr;
}
.cq-modelo {
  display: block; text-align: left; padding: 0 0 10px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-card); color: var(--text);
  font: inherit; cursor: pointer; overflow: hidden;
  transition: border-color .14s ease, transform .1s ease;
}
.cq-modelo:hover { border-color: var(--border-accent); }
.cq-modelo:active { transform: scale(.985); }
.cq-modelo.elegido {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.cq-mnom {
  display: block; padding: 9px 11px 2px; font-size: .84rem; font-weight: 700;
}
.cq-modelo.elegido .cq-mnom::after {
  content: ' ✓'; color: var(--gold-text);
}
.cq-mtxt {
  display: block; padding: 0 11px; font-size: .68rem; line-height: 1.35; color: var(--text-sub);
}

/* El mundo en miniatura: LA MISMA FOTO que usa el modelo de verdad,
   así lo que elige es lo que después ve.
   Antes eran degradados pintados a mano acá, y quedaron mintiendo en
   cuanto cambiaron las fotos: el toldo ya no es una vereda, la ruta
   ya no es un desierto y la trastienda ya no es un depósito. Dos
   listas de lo mismo siempre terminan distintas. */
.cq-mini {
  display: block; height: 62px; position: relative;
  background: #1a1a1a center 45% / cover no-repeat;
}
.cq-mini::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 -18px 22px -18px #000;
}
.cq-mini[data-m="vitrina"]    { background-image: url('../assets/escena/vitrina.jpg'); }
.cq-mini[data-m="heladera"]   { background-image: url('../assets/escena/heladera.jpg'); }
.cq-mini[data-m="toldo"]      { background-image: url('../assets/escena/toldo.jpg'); }
.cq-mini[data-m="ruta"]       { background-image: url('../assets/escena/ruta.jpg'); }
.cq-mini[data-m="trastienda"] { background-image: url('../assets/escena/parque.jpg'); }
.cq-mini[data-m="playa"]      { background-image: url('../assets/escena/playa.jpg'); }
.cq-mini[data-m="esquina"]    { background-image: url('../assets/escena/esquina.jpg'); }
.cq-mini[data-m="poligono"]   { background-image: url('../assets/escena/poligono.jpg'); }
/* "El mío" no tiene foto fija: la pone el dueño. Se muestra el marco
   vacío con el ícono de cámara, que es justo lo que significa. */
.cq-mini[data-m="propio"] {
  background: linear-gradient(#22262b, #14171a);
}
.cq-mini[data-m="propio"]::before {
  content: '📷'; position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center; font-size: 1.5rem; opacity: .55;
}

/* Los campos de las filas de la calculadora y el selector de reparto
   estaban con el estilo por defecto del navegador: medidos, 21px y
   19px de alto. Es la pantalla que también es la calculadora pública
   de la web, donde la abre gente desde el teléfono -- con 21px no se
   toca. Va acá y no en la página pública para que las dos queden
   iguales: es la misma pantalla. */
.calc-fila input,
.calc-campo select {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: var(--sans);
  font-size: .9rem;
  outline: none;
}
.calc-fila input:focus,
.calc-campo select:focus { border-color: var(--gold); }

/* "Ver cómo queda" es un ANCLA, no un botón: un window.open que el
   navegador bloquea no abre nada y tampoco avisa, y el Dueño se queda
   tocando un botón muerto. Un link de verdad no lo frena nadie. Acá
   sólo se lo viste igual que a los botones de al lado. */
.cq-vinculo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 9px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: .82rem;
  text-decoration: none;
  cursor: pointer;
}
.cq-vinculo:hover { background: var(--bg-hover); border-color: var(--border-accent); }

/* ── Cómo se abre el catálogo ("el mío") ───────────────────────
   Mismo lenguaje que las tarjetas de modelo de arriba: se elige
   tocando, y el elegido queda con el borde dorado. La flecha dice
   para dónde va antes de leer la palabra. */
.cq-entrada {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 8px; min-height: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-card); color: var(--text);
  font: inherit; cursor: pointer;
  transition: border-color .14s ease, transform .1s ease;
}
.cq-entrada:hover { border-color: var(--border-accent); }
.cq-entrada:active { transform: scale(.985); }
.cq-entrada.elegido { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.cq-entrada .cq-eflecha { font-size: 1.25rem; line-height: 1; color: var(--gold-text); }
.cq-entrada .cq-enom { font-size: .74rem; text-align: center; color: var(--text-sub); }
.cq-entrada.elegido .cq-enom { color: var(--text); }

/* El porcentaje de variación de cada escenario de la calculadora. */
.calc-var { font-size: .66rem; font-weight: 700; color: var(--gold-text); opacity: .85; }

/* ── Reseñas ───────────────────────────────────────────────────
   Las de 3 o menos van marcadas en las dos vistas -- el número de
   arriba y la fila de abajo -- porque son las únicas sobre las que el
   dueño puede hacer algo. Un promedio de 4,6 con cinco clientes
   enojados adentro no es una buena noticia, y si no se destacan
   quedan enterradas entre las buenas. */
.stat-box.alerta {
  border-color: rgba(196, 75, 75, .45);
  background: rgba(196, 75, 75, .1);
}
.stat-box.alerta .stat-value { color: var(--error-text); }

.emp-row.baja {
  border-left: 3px solid var(--error);
  padding-left: 9px;
}

/* Los dos ✎ que corrigen el papel de una compra: el número y el día. Van
   pegados a lo que corrigen, chicos y tenues -- son correcciones
   ocasionales, no acciones principales. Comparten estilo porque son lo
   mismo: si cada uno tuviera el suyo, en dos meses se ven distinto. */
.act-editar-remito,
.act-editar-fecha {
  background: none; border: 0; cursor: pointer; padding: 0 0 0 6px;
  color: var(--text-muted); font-size: .8rem; line-height: 1;
}
.act-editar-remito:hover,
.act-editar-fecha:hover { color: var(--gold-text); }

/* Un renglón de gasto adentro de una compra: no es mercadería, y tiene
   que verse distinto para que nadie lo busque en el stock. */
.compra-linea.es-gasto .cl-prod { color: var(--text-sub); }
.cl-chip-gasto {
  font-size: .58rem; font-weight: 800; letter-spacing: .08em;
  padding: 2px 6px; border-radius: 999px; margin-left: 6px;
  color: var(--warning-text);
  background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.35);
}

/* El detalle de un gasto, abajo del renglón. Chico y tenue: es el
   respaldo de por qué ese número es ese número, no el número. */
.gasto-detalle {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px;
}
.gasto-detalle span {
  font-size: .7rem; color: var(--text-muted);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: 2px 8px;
}

/* "Esto todavía no entró al stock". Va donde están los ítems, no en una
   ayuda al costado: el que carga y se va no lee las ayudas. */
.remito-pendiente {
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.4);
  border-radius: var(--r-md);
  padding: 10px 13px;
  margin-bottom: 10px;
  font-size: .85rem;
  color: var(--warning-text);
}

/* ── Renglones del detalle de un gasto ──────────────────────────
   La misma grilla para los rótulos y para cada renglón, así las
   columnas quedan alineadas. Los campos van adentro de .form-field
   (donde vive el estilo de los inputs): sueltos salían como el
   rectángulo blanco por defecto del navegador. */
.gasto-item-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 120px auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.gasto-item-rotulos {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.gasto-item-row .form-field { margin: 0; }
@media (max-width: 620px) {
  /* En el celular los rótulos de columna no sirven: cada renglón pasa
     a una sola columna y el campo se explica solo con su placeholder. */
  .gasto-item-rotulos { display: none; }
  .gasto-item-row { grid-template-columns: minmax(0, 1fr) 84px; }
  .gasto-item-row .form-field:first-child { grid-column: 1 / -1; }
  .gasto-item-row .gi-quitar { justify-self: end; }
}

/* ── Precios que viste: campos anchos ───────────────────────────
   Con columnas de 140px la fila de abajo (fecha, nota, guardar)
   ocupaba un tercio del ancho y el resto quedaba vacío: la sección
   se veía apretada en una pantalla grande. Columnas más anchas
   llenan el lugar sin cambiar nada en el celular. */
#preciosVistosSection .form-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* ── La ayuda de Ofertas ─────────────────────────────────────────
   Plegada por default: el que ya sabe no la ve, y el que no sabe la
   encuentra donde le hace falta. Una función que existe y nadie
   encuentra es una función que no existe. */
.of-ayuda {
  margin: 10px 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-card);
}
.of-ayuda summary {
  padding: 11px 14px;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 700;
  color: var(--gold-text);
  list-style: none;
}
.of-ayuda summary::-webkit-details-marker { display: none; }
.of-ayuda summary::before { content: '▸ '; }
.of-ayuda[open] summary::before { content: '▾ '; }
.of-ayuda-cuerpo {
  padding: 0 14px 14px;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--text-sub);
}
.of-ayuda-cuerpo p { margin: 0 0 10px; }
.of-ayuda-cuerpo b { color: var(--text); }
.of-ayuda-cuerpo ol { margin: 0 0 10px; padding-left: 1.2rem; }
.of-ayuda-cuerpo li { margin-bottom: 6px; }
.of-ayuda-ojo {
  padding: 9px 11px;
  border-left: 3px solid var(--warning);
  background: rgba(245, 158, 11, .08);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* ── La lista de reposición se lee como lista, no como tabla ─────
   A 1188px de ancho el nombre quedaba pegado a la izquierda y el
   casillero de "cuántos comprar" al otro extremo, con un metro de
   nada en el medio: eso es el "mucho aire entre columnas" que marcó
   Canu. Se topa acá y no en .product-list, que la comparten el
   catálogo y el stock del Encargado -- ésos sí quieren todo el ancho
   porque muestran foto, precio y estado. */
#reposicionList { max-width: 720px; }

/* Lista de aparatos vinculados, plegada: son muchos y casi nunca hace
   falta mirarlos. Mismo tratamiento que .mejores-historial y
   .fiado-ultimos, que ya usan <details> en el resto de la app. */
.aparatos-plegable { margin-top: 10px; }
.aparatos-plegable > summary {
  cursor: pointer; font-size: .8rem; color: var(--text-sub); list-style: none;
  padding: 6px 0;
}
.aparatos-plegable > summary::-webkit-details-marker { display: none; }
.aparatos-plegable > summary::before { content: '▸ '; }
.aparatos-plegable[open] > summary::before { content: '▾ '; }
.aparatos-plegable > summary:hover { color: var(--text); }
.aparatos-plegable .product-list { margin-top: 8px; }

/* ── Las tarjetas del resumen llevan a donde estan los datos ──────
   Son <button>, asi que hay que apagarle al navegador su tipografia,
   su borde y su alineado -- si no, el numero grande sale con la fuente
   del sistema y centrado. `.stat-box` ya trae fondo y borde propios. */
button.stat-box {
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: border-color .12s ease, transform .08s ease, box-shadow .12s ease;
}
button.stat-box:hover { border-color: var(--border-accent); box-shadow: 0 4px 16px rgba(0,0,0,.16); }
button.stat-box:active { transform: scale(.985); }
button.stat-box:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* El "→" aparece al pasar o al enfocar con el teclado: en reposo la
   tarjeta se lee igual que antes, sin ruido. Ocupa su lugar SIEMPRE
   (opacity, no display) para que la fila no salte de alto al pasar. */
.stat-ir {
  margin-top: 6px;
  font-size: .66rem;
  letter-spacing: .04em;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity .12s ease;
}
button.stat-box:hover .stat-ir,
button.stat-box:focus-visible .stat-ir { opacity: 1; }
/* Con el dedo no hay "pasar por encima", asi que ahi se muestra siempre. */
@media (hover: none) { .stat-ir { opacity: 1; } }

/* Al llegar, un destello en lo que se fue a ver: sin esto la pantalla
   cambia y no queda claro que hay que mirar. */
@keyframes kfbLlegue {
  0%   { box-shadow: 0 0 0 0 rgba(201,169,110,.55); }
  100% { box-shadow: 0 0 0 14px rgba(201,169,110,0); }
}
.kfb-llegue { animation: kfbLlegue 1.1s ease-out 2; border-radius: var(--r-lg); }
@media (prefers-reduced-motion: reduce) {
  .kfb-llegue { animation: none; outline: 2px solid var(--gold); outline-offset: 3px; }
}

/* Chat y Empleados viven en el menú lateral, siempre (js/brand.js).
   En la barra eran un ícono redondo de 28px con `aria-label`; acá son un
   renglón con su palabra, porque en una lista un ícono suelto no se
   entiende. */
.sb-extras {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidebar .sb-extra {
  /* `justify-content: flex-start` explicito: `.tb-icon` (la clase que traen
     de la barra) lo pone en `center`, y en el menu eso dejaba el emoji y la
     palabra en el medio del renglon, desalineados con Dashboard/Vender/etc.
     Canu: "se ve empleado y chat interno al medio... esta como roto". */
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  width: auto; min-height: 48px; padding: 0 12px;
  border: none; border-radius: 10px;
  background: transparent; color: var(--text-sub);
  cursor: pointer; height: auto; box-shadow: none;
}
.sidebar .sb-extra:hover { background: var(--bg-card); color: var(--text); }
.sidebar .sb-extra .sb-extra-txt {
  font-family: var(--sans); font-size: .84rem; white-space: nowrap;
}
.sidebar .sb-extra[aria-label]::after,
.sidebar .sb-extra[aria-label]::before { display: none; }

/* Empleados viaja DENTRO de su envoltorio (el que lleva el contador), así
   que `.sb-extra` cae en el envoltorio y el botón de adentro conservaría
   su forma de la barra: un círculo de 28px con el texto adentro, que se
   desborda. Acá el renglón es el BOTÓN; el envoltorio queda de ancla del
   contador. */
.sidebar .sb-extra.tb-icon-wrap { display: block; padding: 0; min-height: 0; }
.sidebar .sb-extra.tb-icon-wrap > button {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  width: 100%; min-height: 48px; height: auto;
  padding: 0 12px; border: none; border-radius: 10px;
  background: transparent; color: inherit; box-shadow: none;
}
/* El contador de empleados, cuando se muda al renglon que YA existe en
   el menu (ver `moverAlMenu` en js/brand.js). El renglon es `position:
   relative` por el `.sb-item` de arriba, asi que alcanza con anclarlo a
   la derecha; NO va arriba como en la barra, porque aca no se superpone
   a un icono redondo sino que acompaña a una palabra. */
.sidebar .sb-item-con-contador { position: relative; padding-right: 34px; }
.sidebar .sb-item-con-contador .tb-badge {
  top: 50%; right: 12px; transform: translateY(-50%);
}

.sidebar .sb-extra.tb-icon-wrap .tb-badge {
  top: 50%; right: 12px; transform: translateY(-50%);
}


/* ── Los filtros de "Ventas de hoy" ──────────────────────────────
   Un dia entero de mostrador son decenas de renglones. Estos dos
   desplegables contestan las dos preguntas que se hace el Dueno mirando
   esa lista: cuanto hizo cada cajero, y cuanto entro de cada forma. */
.ventas-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 10px 0 14px;
}
.vf-campo { display: flex; flex-direction: column; gap: 4px; }
.vf-campo > span {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}
.vf-campo select {
  min-height: 38px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text);
  font-size: .82rem;
}
/* El total de lo filtrado, al lado y no abajo: se lee de un vistazo junto
   a los desplegables que lo produjeron. */
.vf-resumen {
  margin-left: auto;
  font-size: .82rem;
  color: var(--gold-text);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .vf-campo { flex: 1 1 140px; }
  .vf-campo select { width: 100%; }
  .vf-resumen { margin-left: 0; flex-basis: 100%; }
}

/* ── Reponer stock: el panel del Encargado ──────────────────────────
   Antes era una caja armada con estilos inline que reusaba `.sale-row`
   --la fila de una TABLA de ventas-- para mostrar avisos. De ahí venía
   el bug del texto en la columna de la hora, y de ahí venía que se
   viera como una lista de depuración: ocho renglones idénticos, cada
   uno con su botón gris, el texto pegado al borde amarillo.

   Acá el amarillo es la piel del panel, no una línea alrededor: el
   marco respira 26px antes de que empiece nada, y cada producto es una
   tarjeta propia sobre esa piel, no un renglón de tabla.

   Todo sale de tokens: el panel vive en los tres temas. */
.rep-panel {
  border-radius: var(--r-xl);
  border: 1px solid color-mix(in srgb, var(--warning) 34%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--warning) 13%, transparent),
      color-mix(in srgb, var(--warning) 7%, transparent));
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* El encabezado: la pastilla del ícono lo vuelve categoría en vez de
   un emoji suelto de adorno -- mismo criterio que `.al-ico`. */
/* El encabezado.

   La pastilla de la izquierda llevaba un 📦. Se veía como un cuadrado
   beige sobre fondo beige: a ese tamaño el emoji de caja no se lee como
   caja, se lee como una imagen rota. Ahora lleva EL NÚMERO, que es
   información y no adorno -- y de paso deja de estar repetido en una
   segunda pastilla a la derecha diciendo lo mismo.

   A la derecha va lo que uno hace con este aviso: armar la lista de
   compra. Un aviso sin salida obliga a acordarse de adónde ir. */
.rep-cab { display: flex; align-items: center; gap: 15px; }
.rep-num {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border-radius: 14px;
  font-size: 1.35rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--warning-text);
  border: 1px solid color-mix(in srgb, var(--warning) 42%, transparent);
  background: color-mix(in srgb, var(--warning) 15%, transparent);
}
.rep-titulo {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .01em;
}
.rep-sub { font-size: .81rem; color: var(--text-sub); margin-top: 3px; }

.rep-ir {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 500;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-accent);
  background: transparent;
  color: var(--gold-text);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.rep-ir:hover { background: var(--bg-hover); border-color: var(--gold); }
.rep-ir:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rep-ir span { transition: transform .14s ease; }
.rep-ir:hover span { transform: translateX(3px); }

.rep-lista { display: flex; flex-direction: column; gap: 9px; }

/* Cada producto, una tarjeta. La franja de la izquierda dice la
   gravedad SIN leer: se acabó (rojo) o va quedando poco (ámbar).
   El color es semántico, no decorativo. */
.rep-item {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 16px 15px 18px;
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 3px solid color-mix(in srgb, var(--warning) 62%, transparent);
  transition: border-color .14s ease, transform .14s ease;
}
.rep-item.sin-stock { border-left-color: color-mix(in srgb, var(--error) 72%, transparent); }
.rep-item:hover { transform: translateX(2px); border-color: var(--border-accent); }

.rep-nombre {
  flex: 1; min-width: 0;
  font-size: .95rem; font-weight: 600; color: var(--text);
  line-height: 1.35;
}
.rep-estado {
  display: block;
  font-size: .76rem; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: 4px;
  color: var(--warning-text);
}
.rep-item.sin-stock .rep-estado { color: var(--error-text); }

/* Los números en columna: alineados y con cifras de ancho fijo, para
   poder barrer los ocho de un vistazo en vez de leerlos de a uno. */
.rep-nums {
  flex: none; text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: .8rem; color: var(--text-sub); line-height: 1.5;
}
.rep-nums b { color: var(--text); font-weight: 600; }

.rep-listo {
  flex: none;
  font-size: .78rem; font-weight: 500;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-sub);
  cursor: pointer;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.rep-listo:hover { border-color: var(--gold); color: var(--gold-text); background: var(--bg-hover); }
.rep-listo:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 640px) {
  .rep-panel { padding: 20px 18px 22px; border-radius: var(--r-lg); }
  /* En el mostrador la tarjeta se apila: el nombre entero arriba y los
     números abajo. Mantenerla en una fila deja el nombre en 90px. */
  .rep-item { flex-wrap: wrap; gap: 10px 14px; }
  /* En el mostrador esto se toca con el pulgar. Medido antes de poner
     esto: "Listo" salia de 34px de alto y "Armar la compra" de 37 --
     los dos por debajo del minimo de 44 que ya costo una vez en este
     proyecto (el boton de enviar de la calculadora media 21px). */
  .rep-listo, .rep-ir { min-height: 46px; padding-left: 20px; padding-right: 20px; }
  .rep-nombre { flex: 1 1 100%; }
  .rep-nums { text-align: left; }
  .rep-listo { margin-left: auto; }
}

/* ── Historial de quién tocó el stock ───────────────────────────────
   NO reusa `.sale-row`. Esa grilla es POSICIONAL de 5 pistas y acá hay
   3 hijos: la fecha caería en la columna de 72px pensada para la hora
   de una venta, que es exactamente el bug que ya mordió en la barra de
   alertas del Encargado ("Agua si…").

   Tres pistas para tres datos, y la del medio es la que cede. */
.hist-fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-card);
  margin-bottom: 5px;
  font-size: .82rem;
}
.hist-fecha { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hist-quien { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-dato  { color: var(--text-sub); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* El salto es el dato por el que uno abre esto: se lee sin contar.
   Bajar stock a mano es lo que tapa un faltante, asi que va en rojo. */
.hist-dato b { margin-left: 6px; font-weight: 700; }
.hist-baja { color: var(--error-text); }
.hist-sube { color: var(--green-text); }

/* En el mostrador la fila no entra en una linea: medido en 360px, la
   columna del medio se aplastaba a 22px y el NOMBRE --que es el dato
   por el que uno abre este panel-- quedaba en dos renglones cortados.
   `minmax(0,1fr)` deja que ceda hasta desaparecer porque las dos de los
   costados son `auto` y se llevan lo que necesitan.

   Asi que se apila: fecha y numeros arriba, el nombre entero abajo. */
@media (max-width: 620px) {
  .hist-fila { grid-template-columns: auto 1fr; row-gap: 5px; }
  .hist-fecha { grid-column: 1; grid-row: 1; }
  .hist-dato  { grid-column: 2; grid-row: 1; justify-self: end; }
  .hist-quien { grid-column: 1 / -1; grid-row: 2; white-space: normal; overflow: visible; }
}

/* Una conversión deshecha NO desaparece: se ve tachada con su motivo.
   Mismo criterio que el resto -- nunca se borra nada, y el Dueño tiene
   que poder ver que alguien deshizo algo. */
.product-row.fila-deshecha { opacity: .55; }
.product-row.fila-deshecha .name,
.product-row.fila-deshecha .s-total { text-decoration: line-through; }

/* Un arqueo firmado cuyo turno se movió después. No es un error del
   cajero: es que alguien anuló algo de ese turno más tarde. Va amarillo
   —hay que mirarlo— y no rojo, que en esta pantalla significa faltante. */
.cierre-movido {
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--warning);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  color: var(--warning-text);
  font-size: .78rem;
  line-height: 1.45;
}
.act-corregir-cierre {
  align-self: center;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-accent);
  background: transparent;
  color: var(--gold-text);
  font-size: .78rem;
  cursor: pointer;
}
.act-corregir-cierre:hover { background: var(--bg-hover); }
@media (max-width: 620px) {
  /* En el teléfono el botón se toca con el pulgar. */
  .act-corregir-cierre { min-height: 44px; padding: 10px 16px; }
}

/* ══════════════════════════════════════════════════════════════
   EL TILDE DE LA LISTA DE COMPRAS

   Canu, 26/08: «cuando genero la orden de compra no puedo ir
   tildando en comprado o no comprado».

   Medido: el tilde SÍ andaba y SÍ se guardaba. Lo que pasaba es
   que la fila mide 62px de alto y sólo respondían 16×16 --
   tocar el nombre del producto no hacía nada. Con el dedo, en un
   mostrador, eso es indistinguible de que no funcione.

   La fila entera es ahora un <label>, así que tocar cualquier
   parte marca el ítem. Es nativo del navegador: no hay JS que
   pueda desincronizarse ni doble disparo cuando se toca el
   cuadradito en vez del nombre.

   Y el cuadradito pasa a 22px con 44 de zona de toque, que es lo
   mínimo para un dedo.
   ══════════════════════════════════════════════════════════════ */
.chk-fila {
  display: flex; align-items: center; gap: 12px;
  cursor: pointer; user-select: none;
  min-height: 56px;
}
.chk-fila input[type="checkbox"] {
  width: 22px; height: 22px;
  accent-color: var(--gold);
  cursor: pointer; flex-shrink: 0;
  /* La zona que responde al dedo es mayor que el dibujo. Sin esto
     hay que apuntar a 22px, y el que compra lo hace parado en un
     depósito con el celular en una mano. */
  margin: 11px;
}
.chk-fila:active { background: var(--bg-hover); }

/* Editar el nombre de un empleado, en la propia fila.
   Canu, 26/08: «no puedo cambiarle el nombre a los empleados».
   `update_employee` aceptaba nombre y rol desde siempre; la única
   pantalla que la llamaba era el botón de activar/desactivar, que le
   pasaba el nombre que YA tenía. La función estaba, la pantalla no. */
.emp-edit {
  /* `.emp-row` es una GRILLA de 4 columnas, no flex: acá `flex-basis`
     no hace nada y la caja caería adentro de una columna. */
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--border);
}
.emp-edit .ee-nombre { flex: 1 1 180px; min-width: 0; }
.emp-edit .ee-rol    { flex: 0 1 150px; }
.emp-edit .ee-status { flex-basis: 100%; }

/* Un permiso que existe pero que ninguna pantalla usa todavía (199).
   Se muestra apagado y con el motivo al lado: esconderlo tampoco sirve
   -- el Dueño se preguntaría dónde está el permiso del que le hablaron. */
.auth-row.auth-sin-pantalla { color: var(--text-muted); cursor: default; }
.auth-row .auth-nota {
  display: block; font-style: normal; font-size: .72rem;
  color: var(--warning-text); margin-top: 2px;
}

/* El lápiz para corregir el nombre de un cliente. Discreto hasta que se
   pasa por encima: la acción normal de la fila es abrir su cuenta. */
.cli-editar {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-muted);
  width: 32px; min-height: 32px;      /* se toca con el dedo */
  font-size: .9rem; line-height: 1;
  cursor: pointer;
  padding: 0;
}
.cli-editar:hover, .cli-editar:focus {
  color: var(--gold-text);
  border-color: var(--border-accent);
}

/* Que se vendio, abajo de quien vendio. En renglon aparte y mas
   chico: es el dato que se lee DESPUES de encontrar la venta, no
   el que sirve para encontrarla. */
.s-detalle {
  display: block;
  font-size: .72rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   Control de stock (arqueo) — Dueño y Encargado, misma pantalla.
   Se cuenta parado en el mostrador, con el dedo y una tablet: por
   eso la fila entera es un <label> clickeable de 52px y el campo
   del número es grande. Un renglón de 28px no se toca sin errarle.
   ══════════════════════════════════════════════════════════════ */
.arq-cat {
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
  padding: 1.1rem .25rem .35rem; border-bottom: 1px solid var(--border);
  margin-bottom: .25rem; position: sticky; top: 0; background: var(--bg);
}
.arq-fila {
  display: flex; align-items: center; gap: .75rem;
  min-height: 52px; padding: .3rem .5rem; border-radius: var(--r-md);
  cursor: pointer; transition: background .12s;
}
.arq-fila:hover { background: var(--bg-hover); }
/* Contado = una línea dorada al costado. Sin color de fondo: con 200
   productos, la mitad pintada de verde es un semáforo ilegible. */
.arq-fila-ok { border-left: 3px solid var(--gold); background: var(--bg-card); }
.arq-nombre { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.arq-grupo { font-size: .68rem; color: var(--text-muted); }
.arq-input {
  width: 92px; min-height: 44px; text-align: center;
  font-size: 1.05rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--bg-surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.arq-input:focus { outline: none; border-color: var(--gold); }
/* El navegador pone flechitas que en una tablet roban la mitad del
   campo y no sirven para nada cuando se escribe un número de dos
   dígitos. */
.arq-input::-webkit-outer-spin-button,
.arq-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.arq-input[type=number] { -moz-appearance: textfield; }

/* El pie queda pegado abajo: contar es desplazarse mucho, y el botón
   de finalizar no puede estar al final de doscientas filas. */
.arq-pie {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1rem; margin-top: .5rem;
  background: var(--bg-surface); border-top: 1px solid var(--border);
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.arq-pie:empty { display: none; }
.arq-progreso { font-size: .9rem; color: var(--text-sub); }
.arq-progreso strong { color: var(--text); font-size: 1.15rem; }
.arq-sub { display: block; font-size: .72rem; color: var(--text-muted); }
.arq-lista { max-height: 62vh; overflow-y: auto; }

.arq-res-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem;
}
.arq-nota { font-size: .82rem; color: var(--text-sub); margin-top: .9rem; line-height: 1.55; }
.arq-det-titulo { font-size: .9rem; margin: 1.2rem 0 .5rem; color: var(--text-sub); }
.arq-tabla td { font-variant-numeric: tabular-nums; }
.arq-falta td { color: var(--error-text); }
.arq-sobra td { color: var(--blue-text); }
.arq-notas-fila td {
  font-size: .8rem; color: var(--text-muted); font-style: italic;
  padding-top: 0; border-top: 0;
}
.stat-mal .stat-value { color: var(--error-text); }
.stat-sub { display: block; font-size: .68rem; color: var(--text-muted); }
.txt-error { color: var(--error-text); }

@media (max-width: 640px) {
  .arq-input { width: 76px; }
  .arq-pie { flex-direction: column; align-items: stretch; }
  .arq-pie .btn-primary { width: 100%; min-height: 46px; }
}

/* El aviso de "quedó un conteo a medio hacer". Va adentro del panel y
   no en la barra de alertas de arriba: la barra es del Dueño, y esta
   pantalla también la usa el Encargado. */
.banner-aviso {
  padding: .7rem .9rem; margin: .75rem 0;
  border: 1px solid var(--border-accent); border-radius: var(--r-md);
  background: var(--bg-card); color: var(--text-sub); font-size: .85rem;
}
.banner-aviso[hidden] { display: none; }

/* El cobro del faltante. Va debajo del resumen, no en un modal: la
   conversación de "esto lo pagás vos" se tiene mirando la lista de lo
   que faltó, no una ventana que la tapa. */
.arq-cobro {
  margin-top: 1.4rem; padding: 1rem;
  border: 1px solid var(--border-accent); border-radius: var(--r-lg);
  background: var(--bg-card);
}
.arq-cobro h4 { margin: 0 0 .5rem; font-size: 1rem; }
.arq-tilde {
  display: flex; align-items: center; gap: .6rem;
  min-height: 44px; margin: .6rem 0; cursor: pointer;
  font-size: .88rem; color: var(--text-sub);
}
.arq-tilde input { width: 20px; height: 20px; accent-color: var(--gold); }
/* Deshecho: tachado y apagado, pero SIEMPRE visible. Un cobro que se
   borra es una acusación sin rastro. */
.arq-deshecho td { text-decoration: line-through; color: var(--text-muted); }

/* `.form-row` estaba en el marcado de Arqueo (Dueno y Encargado) y no
   existia en ninguna hoja. Lo trajo la sesion de Tienda: una clase que el
   marcado usa y que nadie escribio. Alla eran botones principales saliendo
   con el gris del navegador; aca, medido, es mucho menos.

   MEDIDO en un iframe de 1100px, antes y despues. Y el "antes" NO estaba
   roto: el boton y el buscador ya quedaban en la misma fila --los dos son
   inline-block-- y ya quedaban centrados, porque la diferencia de 8px entre
   sus alturas cae igual con la linea base que con `align-items:center`.

   Lo que cambia es que el espacio entre los dos deja de ser el caracter en
   blanco que hay entre las etiquetas (~5px, y desaparece si alguien junta
   las lineas) y pasa a ser un `gap` de 8px que esta escrito. Mas el
   `flex-wrap`, para que en un telefono envuelva a proposito y no por
   casualidad.

   Se anota el tamanio real del arreglo para no exagerarlo: la primera
   version de este comentario decia "desalineados 8px" y era falso -- ese 8
   es la mitad de la diferencia de alturas, o sea el centrado funcionando. */
.form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }