:root {
  color-scheme: light;
  --bg: #f4f7f6;
  --panel: #ffffff;
  --ink: #10201d;
  --muted: #61706c;
  --line: #dbe5e2;
  --primary: #0f766e;
  --primary-dark: #115e59;
  --blue: #2563eb;
  --red: #dc2626;
  --amber: #b45309;
  --green: #16a34a;
  --green-soft: #dcfce7;
  --red-soft: #fee2e2;
  --amber-soft: #fef3c7;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  border-radius: 6px;
  background: var(--primary);
  color: white;
  font-weight: 700;
  min-height: 42px;
  padding: 0 14px;
}

button:active {
  transform: translateY(1px);
}

.hidden {
  display: none !important;
}

.shell {
  width: min(100%, 720px);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
}

.login-view {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  gap: 28px;
  padding: 24px;
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--primary);
  color: white;
  font-size: 32px;
  font-weight: 900;
}

.brand-block h1,
.topbar h1,
.visit-dialog h2 {
  margin: 0;
}

.brand-block p,
.eyebrow,
.sync-strip span,
.gps-box span {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.link-button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover {
  color: var(--ink);
}

.link-button.has-difference {
  color: #9a3412;
}

.login-form,
.app-view {
  display: grid;
  gap: 14px;
}

.login-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}

.api-server-group {
  display: grid;
  gap: 6px;
}

.api-server-group small {
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.35;
}

.login-form .offline-login-button {
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
}

.login-status {
  min-height: 20px;
  margin: 0;
  color: var(--red);
  font-size: 13px;
  font-weight: 800;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
  color: var(--ink);
  padding: 11px 12px;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

input:disabled {
  background: #eef3f2;
  color: var(--muted);
}

.app-view {
  padding: 12px;
}

.security-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  background: #fffbeb;
  color: #78350f;
}

.security-notice div {
  display: grid;
  gap: 3px;
}

.security-notice span {
  font-size: 13px;
}

.security-notice a {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 5px;
  background: #b45309;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.topbar,
.sync-strip,
.client-card,
.visit-dialog form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px;
}

.topbar > div {
  min-width: 0;
  flex: 1;
}

.team-banner {
  margin: 0 14px 10px;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.92rem;
}

.team-banner.tipo-fin-semana {
  background: #ede9fe;
  color: #5b21b6;
}

.team-banner.tipo-dupla {
  background: #ffedd5;
  color: #9a3412;
}

.calificacion-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.calificacion-badge.calificacion-buena {
  background: #dcfce7;
  color: #166534;
}

.calificacion-badge.calificacion-regular {
  background: #fef3c7;
  color: #92400e;
}

.calificacion-badge.calificacion-mala {
  background: #fee2e2;
  color: #991b1b;
}

.clasificacion-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #fef3c7;
  color: #92400e;
}

#warehousePendingBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fef3c7;
  color: #92400e;
}

#warehousePendingBanner button {
  flex: 0 0 auto;
  padding: 6px 12px;
  font-size: 0.85rem;
  min-height: 0;
}

.icon-button {
  background: #e8eeee;
  color: var(--ink);
}

.menu-button {
  flex: 0 0 auto;
  width: 46px;
  min-height: 46px;
  padding: 0;
  background: var(--primary);
  font-size: 22px;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  width: 100%;
  min-height: 100dvh;
  padding: 0;
  border-radius: 0;
  background: rgba(15, 23, 42, 0.46);
}

.side-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(86vw, 340px);
  min-height: 100dvh;
  padding: max(16px, env(safe-area-inset-top)) 16px 18px;
  overflow-y: auto;
  /* Algunos WebView de Android viejos no dejan hacer scroll con el dedo
     dentro de un position:fixed con overflow:auto sin esto -es el mismo
     telefono que no soportaba Array.prototype.at(). No afecta a navegadores
     modernos, que ya scrollean bien sin esta propiedad. */
  -webkit-overflow-scrolling: touch;
  background: var(--panel);
  border-right: 1px solid var(--line);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.22);
}

.side-drawer > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.side-drawer > header strong {
  font-size: 22px;
}

.drawer-section {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.drawer-section span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.drawer-section button,
.drawer-section a {
  display: block;
  min-height: 44px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--ink);
  font-weight: 800;
  text-align: left;
  text-decoration: none;
}

.device-permissions {
  gap: 10px;
}

.permission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.permission-row strong {
  font-size: 14px;
}

.permission-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
}

.permission-badge.granted {
  background: #dcfce7;
  color: #166534;
}

.permission-badge.denied {
  background: #fee2e2;
  color: #991b1b;
}

.permission-badge.prompt,
.permission-badge.unknown {
  background: #fef3c7;
  color: #92400e;
}

.device-permissions .accessibility-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: none;
}

.drawer-section button.active {
  border-color: var(--primary);
  background: var(--primary);
  color: white;
}

.accessibility-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.accessibility-toggle {
  border-color: #334155;
  background: #f8fafc;
  color: #0f172a;
}

.accessibility-toggle.active {
  border-color: #005f56;
  background: #005f56;
  color: #ffffff;
}

.app-version {
  margin: 4px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

html.accessibility-mode {
  color-scheme: light;
  --bg: #ffffff;
  --panel: #ffffff;
  --ink: #000000;
  --muted: #202020;
  --line: #111111;
  --primary: #005f56;
  --primary-dark: #00473f;
  --blue: #004fc4;
  --red: #b00020;
  --amber: #7a3d00;
  --green: #006b2d;
}

html.accessibility-mode body {
  font-size: 19px;
}

html.accessibility-mode h1 {
  font-size: 30px;
  line-height: 1.2;
}

html.accessibility-mode h2 {
  font-size: 25px;
  line-height: 1.25;
}

html.accessibility-mode h3 {
  font-size: 21px;
  line-height: 1.3;
}

html.accessibility-mode button,
html.accessibility-mode input,
html.accessibility-mode select,
html.accessibility-mode textarea,
html.accessibility-mode .drawer-section a {
  min-height: 56px;
  font-size: 18px;
  line-height: 1.3;
}

html.accessibility-mode button,
html.accessibility-mode input,
html.accessibility-mode select,
html.accessibility-mode textarea,
html.accessibility-mode .drawer-section a,
html.accessibility-mode .card,
html.accessibility-mode .panel {
  border-width: 2px;
}

html.accessibility-mode :is(p, label, small, td, th, .eyebrow, .sync-strip span, .gps-box span) {
  font-size: 16px;
  line-height: 1.45;
}

html.accessibility-mode .drawer-section span {
  color: #000000;
  font-size: 15px;
}

html.accessibility-mode .accessibility-note {
  font-size: 16px;
}

html.accessibility-mode .side-drawer {
  width: min(94vw, 420px);
}

html.accessibility-mode :focus-visible {
  outline: 4px solid #ffbf00;
  outline-offset: 3px;
}

.sync-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.sync-strip > div {
  display: grid;
  gap: 3px;
}

.date-field {
  min-width: 150px;
  gap: 4px;
}

.date-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.date-field input {
  min-height: 42px;
  padding: 8px 10px;
}

.sync-actions {
  display: flex !important;
  flex-direction: row;
  gap: 8px;
}

.sync-actions button:first-child {
  background: var(--blue);
}

.collection-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.collection-summary article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.collection-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.collection-summary strong {
  overflow-wrap: anywhere;
  color: var(--primary-dark);
  font-size: 18px;
}

.route-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.route-tabs button {
  flex: 0 0 auto;
  background: #e8eeee;
  color: var(--ink);
}

.route-tabs button.active {
  background: var(--primary);
  color: white;
}

.collection-list-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(160px, 210px);
  gap: 10px;
  align-items: end;
}

.collection-list-toolbar .route-tabs {
  min-width: 0;
}

.collection-list-toolbar label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.collection-list-toolbar select {
  min-height: 40px;
}

.warehouse-manifest-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 8px;
}

.warehouse-manifest-tabs button {
  flex: 1;
  background: #e8eeee;
  color: var(--ink);
  min-height: 40px;
}

.warehouse-manifest-tabs button.active {
  background: var(--primary);
  color: white;
}

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mode-tabs button {
  min-height: 40px;
  background: #e8eeee;
  color: var(--ink);
  padding: 0 8px;
}

.mode-tabs button.active {
  background: var(--primary);
  color: white;
}

.mode-tabs.supervisor-only {
  grid-template-columns: 1fr;
}

.mode-tabs.warehouse-only {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-view .mode-tabs {
  display: none;
}

.quick-detail,
.local-history,
.detail-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.client-change-form {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.resumen-dia-datos {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.resumen-dia-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.resumen-dia-actions a {
  font-weight: 800;
  color: var(--primary);
}

#resumenDiaPreview {
  display: block;
  width: 100%;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

#resumenDiaCanvas {
  display: none;
}

.local-history > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.history-entry,
.detail-field {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.history-entry:first-child,
.detail-field:first-child {
  border-top: 0;
}

.history-entry span,
.detail-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.history-entry strong,
.detail-field strong {
  overflow-wrap: anywhere;
}

.history-entry small {
  color: var(--muted);
}

.detail-field-alert {
  background: rgba(220, 38, 38, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  border-top: 0;
}

.detail-field-alert span {
  color: #b91c1c;
}

.history-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.history-actions button {
  min-height: 38px;
  flex: 1 1 0;
}

.price-catalog-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.price-catalog-toolbar label:last-child {
  grid-column: 1 / -1;
}

.price-catalog-list {
  display: grid;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.price-catalog-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.price-catalog-row:first-child {
  border-top: 0;
}

.price-catalog-row div {
  display: grid;
  min-width: 0;
}

.price-catalog-row span {
  color: var(--muted);
  font-size: 12px;
}

.warehouse-header,
.warehouse-capture,
.warehouse-manifest,
.warehouse-day-list {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.warehouse-header {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
}

.warehouse-work-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
}

.warehouse-work-toggle input {
  width: 20px;
  height: 20px;
}

.warehouse-state {
  align-self: center;
  margin: 0;
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

.warehouse-state.closed {
  color: var(--muted);
}

#btnWarehouseCopyPrevious {
  grid-column: 1 / -1;
}

.warehouse-manifest-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.warehouse-progress {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.warehouse-progress.all-done {
  color: var(--primary);
}

.warehouse-scan-row,
.warehouse-actions,
.warehouse-manifest > header,
.warehouse-item > header,
.warehouse-day-list button,
.warehouse-product-results button {
  display: flex;
  align-items: center;
  gap: 10px;
}

.warehouse-scan-row input {
  min-width: 0;
}

.warehouse-product-results {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.warehouse-product-group {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 4px 6px;
  background: var(--panel);
  color: var(--primary);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.warehouse-product-results button,
.warehouse-day-list button {
  justify-content: space-between;
  width: 100%;
  min-height: 50px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  text-align: left;
}

.warehouse-journey-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.warehouse-journey-row button[data-collector] {
  flex: 1;
}

.warehouse-journey-row button[data-recibo] {
  flex: 0 0 auto;
  width: auto;
  min-height: auto;
}

.warehouse-product-results button span,
.warehouse-day-list button span,
.warehouse-item header div,
.warehouse-manifest > header > div {
  display: grid;
  gap: 3px;
}

.warehouse-product-results button small,
.warehouse-day-list button small,
.warehouse-item header span,
.warehouse-manifest header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.warehouse-stock-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Antes la existencia se veia igual de chica y gris que cualquier otro dato
   secundario -facil de pasar por alto. Ahora resalta con color segun que
   tan bajo esta, para que la capturista lo note de un vistazo. */
.stock-badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
}

.stock-badge--ok {
  color: var(--green);
  background: var(--green-soft);
}

.stock-badge--mid {
  color: var(--amber);
  background: var(--amber-soft);
}

.stock-badge--low,
.stock-badge--agotado {
  color: var(--red);
  background: var(--red-soft);
}

.warehouse-manifest > header,
.warehouse-item > header {
  justify-content: space-between;
}

#warehouseItemsSearch {
  margin: 10px 0 8px;
}

.warehouse-items {
  display: grid;
  gap: 8px;
}

.warehouse-item {
  display: grid;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}

/* Estas 3 clases solo las usa la lista de "Mercancía de la jornada" (cuadre
   surtido/regreso). Otras vistas reutilizan .warehouse-item para tarjetas sin
   nada que cuadrar (p.ej. devoluciones pendientes) y no deben heredar color. */
.warehouse-item.is-balanced,
.warehouse-item.is-missing,
.warehouse-item.is-extra {
  border-left: 4px solid var(--green);
  padding-left: 9px;
}

.warehouse-item.is-missing {
  border-left-color: var(--red);
  background: var(--red-soft);
}

.warehouse-item.is-extra {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.warehouse-item.is-prepedido {
  border-left: 4px solid var(--amber);
  background: var(--amber-soft);
  padding-left: 9px;
}

.warehouse-item.is-pending {
  border-left: 4px solid var(--muted);
  padding-left: 9px;
}

.warehouse-remove {
  width: 38px;
  min-height: 38px;
  padding: 0;
  background: var(--red-soft);
  color: var(--red);
  font-size: 22px;
}

/* Antes estos 5 datos (surtido, vendido, pendiente, debe volver, conteo)
   iban en una sola fila de 5 columnas, ilegible en pantalla de celular. Ahora
   se separan en dos grupos: los 3 de solo lectura arriba en una fila compacta
   (.warehouse-stats-row), y los 2 campos editables abajo con mas espacio
   (.warehouse-figures), que es lo que de verdad hay que leer/tocar. */
.warehouse-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.warehouse-stats-row span {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.warehouse-stats-row strong {
  min-height: 34px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-size: 13px;
}

.warehouse-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.warehouse-figures label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.warehouse-figures input {
  min-height: 46px;
  padding: 10px;
  font-size: 16px;
  font-weight: 900;
}

.warehouse-difference {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.warehouse-item.is-balanced .warehouse-difference {
  color: var(--green);
  font-weight: 700;
}

.warehouse-item.is-missing .warehouse-difference {
  color: var(--red);
  font-weight: 700;
}

.warehouse-item.is-extra .warehouse-difference {
  color: var(--amber);
  font-weight: 700;
}

.warehouse-item.is-pending .warehouse-difference {
  color: var(--muted);
  font-weight: 700;
}

.warehouse-actions button {
  flex: 1;
}

.scan-confirm-overlay {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(92vw, 380px);
  pointer-events: none;
}

.scan-confirm-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 6px solid var(--primary);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(16, 32, 29, 0.18);
  animation: scan-confirm-in 0.15s ease-out, scan-confirm-out 0.25s ease-in 1.6s forwards;
}

.scan-confirm-card strong {
  display: block;
  font-size: 15px;
  color: var(--ink);
}

.scan-confirm-card span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
}

.scan-confirm-card.is-complete {
  border-left-color: var(--green);
}

.scan-confirm-card.is-error {
  border-left-color: var(--red);
  background: var(--red-soft);
  animation: scan-confirm-in 0.15s ease-out, scan-confirm-out 0.25s ease-in 2.9s forwards;
}

.scan-confirm-card.is-error span {
  color: var(--red);
  font-weight: 700;
}

.scan-confirm-card.is-complete span {
  color: var(--green);
  font-weight: 700;
}

@keyframes scan-confirm-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scan-confirm-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.secondary-button {
  background: #e8eeee;
  color: var(--ink);
}

.danger-button {
  background: var(--red);
}

.warehouse-day-list > div {
  display: grid;
  gap: 7px;
}

.count-header,
.count-area-start,
.count-capture,
.count-team {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.count-header,
.count-capture > header,
.count-scan-row,
.count-item,
.count-area-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.count-header > div,
.count-capture > header > div,
.count-item > div,
.count-area-row > div {
  display: grid;
  gap: 3px;
}

.count-area-start {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.count-area-start button {
  min-height: 46px;
}

.count-area-start label:last-of-type {
  grid-column: 1 / -1;
}

.count-scan-row input {
  min-width: 0;
}

.count-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.count-totals article {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
}

.count-totals span,
.count-item span,
.count-area-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.count-totals strong {
  font-size: 21px;
}

.count-items,
.count-team > div {
  display: grid;
  gap: 7px;
}

.count-item,
.count-area-row {
  min-height: 58px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.count-item.pending {
  padding-inline: 9px;
  border-left: 4px solid var(--orange);
  background: #fffaf0;
}

.count-item.counted {
  padding-inline: 9px;
  border-left: 4px solid var(--green);
  background: #f1fbf7;
}

.count-item-actions {
  display: grid !important;
  grid-template-columns: 46px 46px 46px minmax(82px, 108px);
  align-items: end;
  gap: 6px !important;
}

.count-item-actions button {
  min-width: 0;
  min-height: 42px;
  padding: 8px 4px;
}

.count-item-actions label {
  min-width: 0;
  font-size: 11px;
}

.count-item-actions input {
  min-width: 0;
  text-align: center;
}

.count-progress {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border-radius: 5px;
  background: #e5e7eb;
}

.count-progress > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--green);
  transition: width 180ms ease;
}

.count-last-scan {
  margin: 0;
  padding: 9px 10px;
  border-left: 4px solid var(--blue);
  background: #eff6ff;
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 600px) {
  .count-item {
    align-items: stretch;
    flex-direction: column;
  }

  .count-item-actions {
    grid-template-columns: repeat(3, 1fr) minmax(86px, 1.4fr);
    width: 100%;
  }
}

.count-task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 58px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  color: var(--ink);
  text-align: left;
}

.count-task span {
  display: grid;
  gap: 3px;
}

.count-task-products {
  grid-column: 1 / -1;
  display: grid;
  gap: 4px;
  margin: 2px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.count-task-products li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.count-task-products li span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.count-task-products li strong {
  color: var(--ink);
}

.count-task-products.empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.count-task small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.count-task.libre {
  border-left: 4px solid var(--green);
}

.count-task.abierta {
  border-left: 4px solid var(--blue);
  background: #eff6ff;
}

.count-task.cerrada {
  border-left: 4px solid var(--muted);
  background: #f1f5f9;
}

.count-task:disabled {
  color: var(--ink);
  opacity: 0.75;
}

.count-item label {
  display: grid;
  gap: 3px;
  width: 105px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.count-item input {
  min-height: 40px;
  padding: 7px;
  font-size: 16px;
  font-weight: 900;
  text-align: right;
}

.count-area-row > div:last-child {
  text-align: right;
}

.count-area-row.closed {
  border-left: 4px solid var(--green);
  padding-left: 9px;
}

.scanner-dialog {
  width: min(94vw, 560px);
  padding: 0;
  border: 0;
  border-radius: 8px;
}

.scanner-dialog::backdrop {
  background: rgba(0, 0, 0, 0.75);
}

.scanner-dialog > section {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: white;
}

.scanner-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scanner-dialog video {
  width: 100%;
  min-height: 280px;
  max-height: 65vh;
  object-fit: cover;
  background: #111;
}

.scanner-dialog p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.mode-panel {
  display: grid;
  gap: 12px;
}

.search-row {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.sale-scan-row {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.sale-scan-row button {
  width: auto;
  min-width: 132px;
  padding-inline: 14px;
}

.client-list {
  display: grid;
  gap: 10px;
  padding-bottom: 24px;
}

.map-toolbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.map-toolbar button:nth-child(2) {
  background: var(--blue);
}

.map-toolbar button:nth-child(3) {
  background: var(--amber);
}

.route-map-box {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #e8efed;
}

#routeMapCanvas {
  display: block;
  width: 100%;
  height: 390px;
  background:
    linear-gradient(#d6e3df 1px, transparent 1px),
    linear-gradient(90deg, #d6e3df 1px, transparent 1px),
    #eef4f2;
  background-size: 32px 32px;
}

.map-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 12px;
  background: white;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.map-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.map-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-home { background: #dc2626; }
.dot-capture { background: #16a34a; }
.dot-current { background: #2563eb; }

.route-summary {
  display: grid;
  gap: 3px;
  padding: 11px;
  border-left: 4px solid var(--primary);
  background: white;
}

.route-summary span {
  color: var(--muted);
  font-size: 12px;
}

.route-order-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0 0 20px 34px;
}

.route-order-list li {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: white;
}

.product-list,
.cart-list {
  display: grid;
  gap: 10px;
}

.client-card {
  display: grid;
  gap: 10px;
  padding: 13px;
}

.client-card.visited {
  border-left: 4px solid var(--primary);
}

/* Aptitud para vender MUEBLE (2026-08-23): verde = el cliente califica sin
   nada mas que hacer; rojo = necesita autorizacion de un segundo
   cobrador/supervisor antes de vender un mueble (ver leyenda en pantalla). */
.client-card.mueble-apto {
  border: 2px solid var(--green);
}

.client-card.mueble-no-apto {
  border: 2px solid var(--red);
}

/* Panel de "visitas urgentes" (2026-08-26): cuentas nuevas sin abonar en un
   mes y clientes morosos -casi obligatorios de visitar. "Urgentes" es un
   filtro más junto a Pendientes/Visitados hoy (no un panel aparte), y cada
   tarjeta urgente se distingue con borde rojo + una etiqueta con el motivo,
   la esté mostrando el filtro que sea. */
.client-card.urgent {
  border: 2px solid var(--red);
  background: white;
}

.urgent-reason-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 800;
  background: #fef2f2;
  color: var(--red);
}

.mueble-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 8px 13px;
  font-size: 12px;
  color: var(--muted);
}

.mueble-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mueble-legend .swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.mueble-legend .swatch.apto {
  background: var(--green);
}

.mueble-legend .swatch.no-apto {
  background: var(--red);
}

.badge.done {
  background: #dbeafe;
  color: #1d4ed8;
}

.expense-form,
.expense-summary,
.visit-location-box {
  display: grid;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.expense-summary > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.expense-summary > div:first-child strong {
  color: var(--red);
  font-size: 22px;
}

.expense-list {
  display: grid;
  gap: 8px;
}

.expense-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fbfa;
}

.expense-item div {
  display: flex;
  gap: 8px;
}

.expense-item div span,
.expense-item small {
  color: var(--muted);
}

.expense-item p,
.expense-item small {
  grid-column: 1 / -1;
  margin: 0;
}

.expense-item.pending {
  border-left: 4px solid var(--amber);
}

.expense-item.synced {
  border-left: 4px solid var(--primary);
}

.visit-location-box {
  padding: 10px;
  background: #f8fbfa;
}

.visit-location-box details {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.visit-location-box summary {
  cursor: pointer;
  font-weight: 800;
}

#detailsDescuento {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfa;
}

#detailsDescuento summary {
  cursor: pointer;
  font-weight: 800;
}

#detailsDescuento[open] summary {
  margin-bottom: 4px;
}

.alternate-location-fields {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.product-card,
.cart-box,
.cart-row,
.new-client-form {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.product-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  color: var(--ink);
}

.product-card div,
.cart-row div {
  display: grid;
  gap: 3px;
}

.product-card span,
.cart-row span,
.empty-note {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.product-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.product-thumb {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: cover;
  background: var(--line);
}

.product-thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.product-qty {
  width: 52px;
  min-height: 38px;
  padding: 6px;
  text-align: center;
  font-weight: 900;
}

.sale-header,
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.field-note {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 0.85rem;
}

.ine-scan-section {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.ine-scan-section legend {
  padding: 0 6px;
  color: var(--ink);
  font-weight: 900;
}

.ine-scan-help,
.ine-scan-note {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.ine-scan-note {
  margin: 10px 0 0;
}

.ine-scan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ine-scan-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8fbfa;
}

.ine-preview-box {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1.58 / 1;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  background: #e8eeee;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ine-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #111827;
}

.camera-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.ine-scan-button {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 9px 10px;
  border-radius: 6px;
  background: var(--primary);
  color: #ffffff;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
}

.ine-scan-card .secondary-button {
  min-height: 38px;
}

.discount-box {
  display: grid;
  grid-template-columns: minmax(150px, 0.45fr) minmax(220px, 1fr);
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.sale-total {
  display: grid;
  gap: 2px;
}

.sale-total span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.cart-discount-preview {
  color: #9a3412 !important;
}

.cart-box {
  /* Antes era "position: sticky; bottom: 8px" -con la lista de productos,
     el carrito y los campos de descuento adentro, esta tarjeta es bastante
     alta, y quedaba "enganchando" a media pantalla al hacer scroll (se
     activa/desactiva el sticky al cruzar el punto donde deberia fijarse),
     lo que en campo se sentia como que la tarjeta se movia sola. Se deja
     como un bloque normal del flujo: siempre visible al final, sin saltos
     raros mientras se hace scroll arriba/abajo.
  */
  display: grid;
  gap: 10px;
  padding: 12px;
  box-shadow: 0 -8px 22px rgba(16, 32, 29, 0.08);
}

.cart-box header,
.cart-box footer,
.cart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cart-row {
  padding: 10px;
}

.cart-row label {
  width: 86px;
}

.cart-row input {
  min-height: 38px;
  padding: 7px 8px;
}

.price-warning {
  flex-basis: 100%;
  color: #9a3412;
  font-weight: 800;
  font-size: 12px;
}

.price-warning:empty {
  display: none;
}

.cart-box footer strong {
  font-size: 22px;
  color: var(--primary-dark);
}

.new-client-form {
  display: grid;
  gap: 12px;
  padding: 13px;
}

.client-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.client-card h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
}

.collection-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 12px;
  font-weight: 900;
}

.client-meta {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}

.saldo {
  white-space: nowrap;
  font-weight: 900;
  color: var(--red);
}

.client-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.mini-action {
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  border-radius: 6px;
  padding: 0 12px;
  background: #e8eeee;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.mini-action.primary {
  background: var(--primary);
  color: #fff;
}

.badge {
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--green-soft);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
}

.supervisor-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.supervisor-kpis article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.supervisor-kpis span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.supervisor-kpis strong {
  overflow-wrap: anywhere;
  color: var(--primary-dark);
  font-size: 19px;
}

.supervisor-filters {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.supervisor-days {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.supervisor-quick {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.supervisor-quick button {
  min-height: 38px;
  padding: 0 6px;
  background: #e8eeee;
  color: var(--ink);
}

.supervisor-client {
  border-left: 5px solid var(--primary);
}

.supervisor-client.warning {
  border-left-color: #d97706;
}

.supervisor-client.critical {
  border-left-color: var(--red);
}

.mora-badge {
  border-radius: 999px;
  padding: 6px 10px;
  background: #eef3f2;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.supervisor-client.warning .mora-badge {
  background: #fef3c7;
  color: #92400e;
}

.supervisor-client.critical .mora-badge {
  background: var(--red-soft);
  color: #991b1b;
}

.sales-history-dialog {
  width: min(calc(100% - 20px), 700px);
  max-height: calc(100dvh - 20px);
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: var(--panel);
  color: var(--ink);
}

.sales-history-dialog::backdrop {
  background: rgba(0, 0, 0, 0.48);
}

.sales-history-dialog > section {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  max-height: calc(100dvh - 20px);
}

.sales-history-dialog > section > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-bottom: 1px solid var(--line);
}

.sales-history-dialog h2 {
  margin: 2px 0 0;
  font-size: 19px;
}

.sales-history-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.sales-history-summary article,
.sales-history-summary:not(:has(article)) {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  background: #eef3f2;
  border-radius: 6px;
}

.sales-history-summary span,
.history-sale small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.sales-history-summary strong {
  overflow-wrap: anywhere;
  font-size: 16px;
}

.sales-history-list {
  display: grid;
  gap: 9px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
}

.clasificacion-dialog > section {
  grid-template-rows: auto minmax(0, 1fr);
}

.clasificacion-list {
  display: grid;
  gap: 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  align-content: start;
}

.clasificacion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
}

.clasificacion-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.clasificacion-item span {
  font-size: 14px;
}

.clasificacion-item strong {
  font-weight: 700;
}

.clasificacion-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.history-sale {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: 7px;
}

.history-sale.pending {
  border-left-color: var(--red);
}

.history-sale header,
.history-sale footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.history-products {
  margin: 0;
  line-height: 1.45;
}

.history-status {
  border-radius: 999px;
  padding: 5px 8px;
  background: var(--green-soft);
  color: var(--primary-dark);
  font-size: 11px;
  font-weight: 900;
}

.history-sale.pending .history-status {
  background: var(--red-soft);
  color: #991b1b;
}

.history-error {
  margin: 0;
  padding: 12px;
  border-radius: 6px;
  background: var(--red-soft);
  color: #991b1b;
  font-weight: 800;
}

.visit-dialog {
  width: min(calc(100% - 24px), 620px);
  border: 0;
  border-radius: 8px;
  padding: 0;
  background: transparent;
}

.visit-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.visit-dialog form {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.visit-dialog header,
.gps-box,
.visit-dialog menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

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

.segmented label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  background: #f8fbfa;
}

.segmented input {
  width: auto;
}

.money-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.payment-fields {
  display: grid;
  gap: 12px;
}

.payment-methods {
  grid-template-columns: repeat(2, 1fr);
}

.balance-preview {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fbfa;
  color: var(--muted);
}

.balance-preview span {
  text-align: right;
}

.balance-preview strong {
  color: var(--ink);
}

.voice-payment-assistant {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 2px solid #9bd8cf;
  border-radius: 6px;
  background: #f0fdfa;
}

.voice-payment-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.voice-payment-heading > div {
  min-width: 0;
}

.voice-payment-heading strong {
  color: var(--primary-dark);
  font-size: 17px;
}

.voice-payment-heading p,
.voice-payment-status,
.voice-payment-confirmation p {
  margin: 3px 0 0;
}

.voice-mic-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 112px;
  background: var(--primary);
}

.voice-mic-button.listening {
  background: #b91c1c;
  box-shadow: 0 0 0 4px #fecaca;
}

.voice-payment-status {
  color: var(--muted);
  font-weight: 700;
}

.voice-payment-status.success {
  color: #047857;
}

.voice-payment-status.error {
  color: #b91c1c;
}

.voice-payment-confirmation {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #5eead4;
  border-radius: 6px;
  background: #fff;
}

.voice-payment-confirmation dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.voice-payment-confirmation dl div {
  min-width: 0;
  padding: 8px;
  border-left: 3px solid var(--primary);
  background: #f8fafc;
}

.voice-payment-confirmation dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.voice-payment-confirmation dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-weight: 900;
}

.voice-payment-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
}

.voice-payment-actions .secondary {
  background: #475569;
}

.client-active-documents {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.client-active-documents > strong {
  color: var(--primary-dark);
}

.warning-inline {
  margin: 0;
  padding: 8px;
  border-radius: 6px;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 800;
}

.mini-list {
  display: grid;
  gap: 6px;
}

.mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fafc;
  color: var(--ink);
  text-align: left;
}

.mini-row strong {
  white-space: nowrap;
}

.mini-row-alerta {
  background: #fff7ed;
  border-color: #fdba74;
}

.mini-row small {
  color: var(--muted);
  font-weight: 400;
}

.count-product-dialog {
  max-width: 480px;
  background: var(--panel);
  color: var(--ink);
}

.count-product-dialog > section {
  padding: 14px;
}

.count-renglon-list {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

.count-renglon-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.count-renglon-row input {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 15px;
}

.count-renglon-borrar {
  color: var(--red, #dc2626);
}

.count-renglon-cantidad-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.count-renglon-cantidad-group .count-renglon-cantidad {
  flex: 1;
  min-width: 0;
}

.count-renglon-quick-btn {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f8fbfa;
  color: var(--ink);
  font-weight: 700;
}

.count-renglon-quick-btn:active {
  background: var(--green-soft, #dcfce7);
}

.count-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--panel);
  font-size: 18px;
}

.count-contados-details {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.count-contados-details summary {
  padding: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.count-contados-details summary::-webkit-details-marker {
  display: none;
}

.count-contados-details summary::before {
  content: "▸ ";
}

.count-contados-details[open] summary::before {
  content: "▾ ";
}

.count-contados-list {
  display: grid;
  gap: 6px;
  padding: 0 12px 12px;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.count-contado-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.count-contado-row .eyebrow {
  color: var(--muted);
}

.count-contado-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gps-box {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
  background: #f8fbfa;
}

.gps-box div {
  display: grid;
  gap: 3px;
}

.gps-box button {
  background: var(--amber);
}

.gps-privacy-note {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.visit-dialog menu {
  margin: 0;
  padding: 0;
}

.visit-dialog menu button {
  width: 100%;
}

@media (max-width: 520px) {
  .security-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .security-notice a {
    text-align: center;
  }

  .collection-list-toolbar {
    grid-template-columns: 1fr;
  }

  .sync-strip,
  .client-card header,
  .client-card footer,
  .product-card,
  .cart-box footer,
  .cart-row {
    align-items: stretch;
    flex-direction: column;
  }

  .sale-header,
  .discount-box {
    grid-template-columns: 1fr;
  }

  .sync-actions button,
  .client-card footer button {
    flex: 1;
  }

  .date-field {
    min-width: 0;
  }

  .card-actions {
    justify-content: stretch;
  }

  .mini-action {
    flex: 1;
  }

  .money-grid {
    grid-template-columns: 1fr;
  }

  .supervisor-kpis {
    grid-template-columns: 1fr;
  }

  .collection-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sales-history-summary {
    grid-template-columns: 1fr;
  }

  .balance-preview {
    align-items: flex-start;
    flex-direction: column;
  }

  .balance-preview span {
    text-align: left;
  }

  .voice-payment-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .voice-mic-button {
    width: 100%;
  }

  .supervisor-quick {
    grid-template-columns: repeat(3, 1fr);
  }

  .sale-header,
  .form-grid,
  .ine-scan-grid {
    grid-template-columns: 1fr;
  }

  .mode-tabs {
    grid-template-columns: repeat(2, 1fr);
  }

  .warehouse-header {
    grid-template-columns: 1fr 1fr;
  }

  .warehouse-scan-row,
  .warehouse-actions,
  .warehouse-manifest > header {
    align-items: stretch;
    flex-direction: column;
  }

  .count-area-start {
    grid-template-columns: 1fr;
  }

  .count-header,
  .count-capture > header,
  .count-scan-row {
    align-items: stretch;
    flex-direction: column;
  }

  .map-toolbar {
    grid-template-columns: 1fr;
  }

  #routeMapCanvas {
    height: 330px;
  }

  .cart-row label {
    width: 100%;
  }
}