/* ===========================================================
   autoventa-erp — estilos base. Minimalista, sin frameworks.
   Convención: variables CSS, prose legible, soporte oscuro/claro.
   =========================================================== */

:root {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --border: #e3e2dc;
  --text: #1a1a1a;
  --muted: #6b6b66;
  --primary: #2563eb;
  --primary-hover: #1d4ed8;
  --danger: #dc2626;
  --success: #059669;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Layout principal ---------- */

.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: #1f2937;
  color: #f3f4f6;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
}

.sidebar .brand {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 24px;
  color: white;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.sidebar nav a {
  color: #d1d5db;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
}

.sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
  text-decoration: none;
}

.sidebar nav a.active {
  background: rgba(255, 255, 255, 0.12);
  color: white;
}

/* Acordeón de módulos (D-102 reorg del menú). <details> nativo: el grupo de la
   página activa se abre por carga (server lo marca con `open`); el estado NO se
   persiste (sin localStorage). Coherente con los links del sidebar. */
.sidebar nav .nav-group {
  display: flex;
  flex-direction: column;
}
.sidebar nav summary.nav-group-hd {
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: #d1d5db;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sidebar nav summary.nav-group-hd::-webkit-details-marker { display: none; }
.sidebar nav summary.nav-group-hd:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}
.sidebar nav .nav-group[open] > summary.nav-group-hd { color: white; }
.sidebar nav .chev {
  font-size: 11px;
  color: #9ca3af;
  transition: transform 0.15s ease;
}
.sidebar nav .nav-group[open] > summary.nav-group-hd .chev { transform: rotate(90deg); }
.sidebar nav .nav-group-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}
.sidebar nav a.nav-sub {
  padding-left: 26px;
  font-size: 13.5px;
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-footer a {
  color: #9ca3af;
  font-size: 13px;
}

.content {
  padding: 24px 32px;
  max-width: 1400px;
  width: 100%;
}

/* ---------- Página ---------- */

.page-header h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 4px;
}

.page-header .muted {
  color: var(--muted);
  margin: 0 0 24px;
}

.muted { color: var(--muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

/* ---------- Filtros ---------- */

.filters {
  margin-bottom: 24px;
}

.filters .row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 16px;
}

.filters label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}

.filters label.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13px;
  color: var(--text);
}

.filters input, .filters select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  background: white;
  min-width: 140px;
}

.filters button {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}

.filters button:hover { background: var(--primary-hover); }

/* ---------- KPIs ---------- */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi {
  padding: 16px 20px;
}

.kpi-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kpi-extra {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- Tabla ---------- */

.table-section h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px;
}

.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table th, table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

table th {
  font-weight: 500;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

table td.num, table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* ---------- Login ---------- */

.login-bg {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-card h1 {
  margin: 0;
  font-size: 20px;
}

.login-card .subtitle {
  margin: 0;
  color: var(--muted);
}

.login-card label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}

.login-card input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.login-card button {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
}

.login-card button:hover { background: var(--primary-hover); }

.login-card .error {
  background: #fef2f2;
  color: var(--danger);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid #fecaca;
}

.login-card .hint {
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  margin: 0;
}

/* ---------- Status (toast simple) ---------- */

.status {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.status.visible { opacity: 1; }
.status.error { color: var(--danger); border-color: #fecaca; }

/* ---------- Matriz de jornadas (D-065) ---------- */

.leyenda {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.leyenda-titulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.matriz-jornadas {
  border-collapse: collapse;
}

.matriz-jornadas th,
.matriz-jornadas td {
  border: 0.5px solid var(--border);
  vertical-align: top;
  padding: 8px 10px;
}

.matriz-jornadas td {
  min-width: 140px;
}

.matriz-jornadas .col-unidad {
  min-width: 160px;
}

.unidad-nombre {
  font-weight: 500;
}

.unidad-codigo {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.jornada {
  margin-bottom: 10px;
}

.jornada:last-child {
  margin-bottom: 0;
}

.jornada-titulo {
  font-weight: 500;
  margin-bottom: 4px;
}

.sectores-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sector-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.sector-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}

.patron-SEMANAL::before { background: #1D9E75; }
.patron-QUINCENAL_A::before { background: #EF9F27; }
.patron-QUINCENAL_B::before { background: #7F77DD; }

.celda-vacia {
  color: var(--muted);
}

.unidad-sin-jornadas,
.unidad-sin-jornadas .unidad-nombre {
  color: #9ca3af;
}

/* ---------- Importaciones (carga manual Ingefactura) ---------- */
/* Scope: clases con prefijo .imp- y selectores con #form-cargar /
   #resultado-card / #error-card. Reusa .card / .kpi / .kpis /
   .filters / .table-section del resto del ERP. Sin tocar CSS compartido. */

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Form de carga ---- */
/* Hereda el layout de .filters.card del dashboard (row flex con labels
   en columna). Solo agregamos lo que .filters no resuelve: secciones
   internas, tabs, panel de modo y la fila de acciones con spacer. */

#form-cargar { margin-bottom: 24px; gap: 20px; flex-direction: column; display: flex; }
#form-cargar .row { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; }
#form-cargar input[type="text"],
#form-cargar input[type="file"] {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 13px; font-family: inherit;
  background: white; min-width: 320px;
}
#form-cargar label.full { width: 100%; max-width: 520px; }
#form-cargar .value-fija {
  padding: 6px 10px; font-size: 13px; color: var(--text);
  background: #f3f4f6; border: 1px solid var(--border);
  border-radius: 6px; min-width: 220px;
}

.form-section {
  display: flex; flex-direction: column; gap: 8px;
  width: 100%;
}
.form-section-label {
  font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

.help-text {
  margin: 4px 0 0; font-size: 11px; color: var(--muted);
}
.help-text code {
  font-size: 11px; padding: 1px 4px; background: #f3f4f6;
  border-radius: 3px;
}

/* ---- Tabs reales (upload / ruta) ---- */
/* Los radios siguen presentes (el JS escucha su change), pero quedan
   ocultos visualmente; el <label> con su <span> hace de pestaña. */
.imp-tabs {
  display: inline-flex; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.imp-tab {
  position: relative;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  user-select: none;
}
.imp-tab:hover { color: var(--text); }
.imp-tab input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px;
}
.imp-tab:has(input:checked) {
  color: var(--text);
  font-weight: 500;
  border-bottom-color: var(--primary);
}
/* Foco accesible (cuando el operador navega por teclado). */
.imp-tab:focus-within {
  outline: 2px solid color-mix(in srgb, var(--primary) 30%, transparent);
  outline-offset: 2px; border-radius: 3px;
}

.modo-panel {
  padding-top: 4px;
  display: flex; flex-direction: column; gap: 4px;
}

/* ---- Acciones (botón + checkbox) ---- */
.form-actions { align-items: center; }
.form-actions .spacer { flex: 1; }
/* Anular el margin-top: 18px que .filters label.checkbox aplica para
   alinearse con labels en columna — acá la fila va con align-items:center. */
#form-cargar .form-actions label.checkbox { margin-top: 0; }
#form-cargar button {
  background: var(--primary); color: white; border: none;
  border-radius: 6px; padding: 8px 18px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s, opacity 0.15s;
}
#form-cargar button:hover:not(:disabled) { background: var(--primary-hover); }
#form-cargar button:disabled {
  opacity: 0.6; cursor: progress;
  background: var(--muted);
}

/* ---- Resultado: KPIs ---- */
.resumen-kpis { margin-bottom: 16px; }

/* Tonos suaves del semáforo. La carta de KPI base ya viene del .kpi.card. */
.kpi--ok   { border-color: rgba(5, 150, 105, 0.30); }
.kpi--ok   .kpi-value { color: var(--success); }
.kpi--ok   .kpi-label::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--success); margin-right: 6px;
  vertical-align: middle;
}

.kpi--warn { border-color: rgba(180, 83, 9, 0.30); }
.kpi--warn .kpi-value { color: #b45309; }
.kpi--warn .kpi-label::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: #b45309; margin-right: 6px;
  vertical-align: middle;
}

.kpi--err  { border-color: rgba(220, 38, 38, 0.30); }
.kpi--err  .kpi-value { color: var(--danger); }
.kpi--err  .kpi-label::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--danger); margin-right: 6px;
  vertical-align: middle;
}

.kpi-extra { word-break: break-word; }

/* ---- Resultado: tabla detalle ---- */
.resumen-detalle-card { margin-bottom: 24px; }
table.resumen-detalle { width: 100%; }
table.resumen-detalle th {
  width: 320px; vertical-align: top;
  font-weight: 500; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em; font-size: 11px;
  white-space: nowrap;
}
table.resumen-detalle td { font-variant-numeric: tabular-nums; }
table.resumen-detalle td.num { text-align: left; }

/* ---- Badges (estado, contadores con tono) ---- */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.badge--ok {
  color: var(--success);
  border-color: rgba(5, 150, 105, 0.35);
  background: rgba(5, 150, 105, 0.08);
}
.badge--warn {
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.35);
  background: rgba(180, 83, 9, 0.08);
}
.badge--err {
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.08);
}

/* ---- Hash (copiable, truncado visualmente) ---- */
.hash {
  display: inline-block;
  max-width: 380px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 4px;
  user-select: all;     /* doble-click selecciona todo, hash completo */
  cursor: text;
}

/* ---- Card de error ---- */
.error-card {
  border-color: rgba(220, 38, 38, 0.30);
  background: linear-gradient(0deg, rgba(220, 38, 38, 0.02), rgba(220, 38, 38, 0.02)), var(--surface);
}
.error-card .page-header h2 { margin: 0; font-size: 18px; color: var(--danger); }
.error-card #error-mensaje { margin: 8px 0 12px; }
.error-card details { margin-top: 8px; }
.error-card summary {
  cursor: pointer; font-size: 12px; color: var(--muted);
  padding: 4px 0;
}
.error-card pre {
  background: #f3f4f6;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 11px; line-height: 1.45;
  max-height: 260px; overflow: auto;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

/* ---------- Aviso "ir a Pendientes" en /importaciones ---------- */
/* Scope: solo el card de aviso que el JS inyecta tras una carga OK. */
.pendientes-aviso {
  border-color: rgba(180, 83, 9, 0.30);
  background: linear-gradient(0deg, rgba(180, 83, 9, 0.04), rgba(180, 83, 9, 0.04)), var(--surface);
  margin-bottom: 24px;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.pendientes-aviso .titulo {
  font-weight: 500; color: #b45309;
}
.pendientes-aviso .detalle {
  color: var(--muted); font-size: 13px;
}
.pendientes-aviso .spacer { flex: 1; }
.pendientes-aviso a.boton {
  background: var(--primary); color: white;
  border-radius: 6px; padding: 6px 14px;
  font-size: 13px; font-weight: 500;
  text-decoration: none;
}
.pendientes-aviso a.boton:hover { background: var(--primary-hover); }
.pendientes-aviso .boton-secundario {
  background: white; color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit;
}
.pendientes-aviso .boton-secundario:hover { background: #f3f4f6; }

/* D-088: variante "ciclo cerrado" (sin pendientes) — verde, no ámbar. */
.pendientes-aviso--ok {
  border-color: rgba(5, 150, 105, 0.30);
  background: linear-gradient(0deg, rgba(5, 150, 105, 0.05), rgba(5, 150, 105, 0.05)), var(--surface);
}
.pendientes-aviso--ok .titulo { color: var(--success); }

/* ---------- Pendientes (bandeja global) ---------- */
/* Scope: clases con prefijo .pendientes- y selectores con #tabla-vendedores /
   #tabla-productos / #tabla-sucursales / #dlg-vendedor / #form-resolver-vendedor.
   Reusa .card / .filters / .table-section / .badge / .badge--warn del resto
   del ERP. */

/* Banner "venís de cerrar una importación" */
.contexto-banner {
  border-color: rgba(37, 99, 235, 0.30);
  background: linear-gradient(0deg, rgba(37, 99, 235, 0.04), rgba(37, 99, 235, 0.04)), var(--surface);
  margin-bottom: 16px;
  padding: 12px 16px;
}
.contexto-banner .titulo { font-weight: 500; color: var(--primary); margin-bottom: 4px; }
.contexto-banner .detalle { color: var(--muted); font-size: 13px; }
.contexto-banner code {
  background: rgba(0, 0, 0, 0.05); padding: 1px 6px;
  border-radius: 3px; font-size: 12px;
}

.pendientes-card { margin-bottom: 20px; }

.pendientes-head { margin-bottom: 12px; }
.pendientes-head h2 {
  margin: 0 0 4px;
  font-size: 16px; font-weight: 600;
  display: flex; align-items: center; gap: 10px;
}
.pendientes-head h2 .badge {
  font-size: 12px; font-weight: 500;
  background: #f3f4f6; color: var(--muted);
  padding: 1px 10px; border-radius: 999px; border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.pendientes-head .small { margin: 0; }

/* Cabecera de tabla clickeable (sort client-side). El indicador va al final
   del texto. Cabecera inactiva muestra un ↕ tenue; al hacer hover se
   resalta. Activa muestra ↑ o ↓ en color primario. */
.pendientes-card th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color 0.15s;
}
.pendientes-card th.sortable:hover { color: var(--text); }
.pendientes-card th.sortable::after {
  content: "↕";
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  opacity: 0.35;
  vertical-align: middle;
}
.pendientes-card th.sortable.sort-asc::after  { content: "↑"; opacity: 1; color: var(--primary); }
.pendientes-card th.sortable.sort-desc::after { content: "↓"; opacity: 1; color: var(--primary); }

/* Jerarquía por peso, no por color: headers en minúscula (no MAYÚSCULA pesada),
   12px, color secundario. El primario (nombre cliente / dirección) va en
   --text por default; RUT y vendedor en .muted .small. */
.pendientes-card th {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
}

/* Indicador "✓ Sin pendientes" junto al título cuando la bandeja colapsa. */
.bandeja-ok {
  font-size: 13px; font-weight: 500;
  color: var(--success);
}

/* Marca discreta para sucursales PENDIENTE_VALIDACION (el endpoint lista todo
   <> COMPLETA). No es una columna: un tag chico junto al cliente. */
.tag-validar {
  display: inline-block;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: #b45309;
  background: rgba(180, 83, 9, 0.10);
  border: 1px solid rgba(180, 83, 9, 0.30);
  border-radius: 4px;
  padding: 0 5px;
  vertical-align: middle;
}

/* Botón "Resolver" dentro de la tabla — más chico que el primary general. */
.btn-resolver {
  background: white; color: var(--primary);
  border: 1px solid var(--primary); border-radius: 6px;
  padding: 4px 12px; font-size: 12px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s;
}
.btn-resolver:hover { background: rgba(37, 99, 235, 0.08); }

/* ---------- Dialog: resolver vendedor ---------- */
.dialog-resolver {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  max-width: 600px;
  width: 90vw;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.dialog-resolver::backdrop {
  background: rgba(15, 23, 42, 0.45);
}
.dialog-resolver .page-header h2 {
  font-size: 17px; margin: 0 0 4px;
}
.dialog-resolver .row {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-bottom: 14px;
}
.dialog-resolver label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--muted);
  flex: 1;
  min-width: 200px;
}
.dialog-resolver label.full { flex: 1 1 100%; }
.dialog-resolver input[type="text"] {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 13px; font-family: inherit;
  background: white;
}
.dialog-resolver input[disabled] {
  background: #f3f4f6; color: var(--text); cursor: not-allowed;
}
.dialog-resolver em.req { color: var(--danger); font-style: normal; }
.dialog-resolver em.muted { color: var(--muted); font-style: normal; font-size: 11px; }

.dialog-resolver .form-actions {
  margin-top: 4px;
  display: flex; align-items: center; gap: 8px;
}
.dialog-resolver .form-actions .spacer { flex: 1; }
.dialog-resolver button {
  border-radius: 6px; padding: 7px 14px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  border: 1px solid var(--border);
  background: white; color: var(--text);
}
.dialog-resolver button:hover:not(:disabled) { background: #f3f4f6; }
.dialog-resolver button.btn-primary {
  background: var(--primary); color: white; border-color: var(--primary);
}
.dialog-resolver button.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.dialog-resolver button:disabled { opacity: 0.6; cursor: progress; }

/* Aviso dentro del diálogo (conflicto 409, error genérico). */
.dialog-resolver .aviso {
  padding: 8px 12px; border-radius: 6px;
  font-size: 12px; line-height: 1.5;
  margin-bottom: 10px; border: 1px solid var(--border);
}
.dialog-resolver .aviso--warn {
  color: #b45309;
  border-color: rgba(180, 83, 9, 0.35);
  background: rgba(180, 83, 9, 0.08);
}
.dialog-resolver .aviso--err {
  color: var(--danger);
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.08);
}
.dialog-resolver .aviso code {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 4px; border-radius: 3px;
  font-size: 11px;
}

/* Inputs numéricos (Capa 3, lat/long con paso fino) */
.dialog-resolver input[type="number"] {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 13px; font-family: inherit;
  background: white;
}

/* D-076: modo "Decidir sucursal" del modal de geolocalizar.
   Se activa cuando el endpoint /promover devuelve 409 proximidad: el modal
   conmuta de modo edicion a modo decidir, mostrando una comparacion lado
   a lado entre la sucursal nueva y la candidata mas cercana. */

.dlg-decidir-coords {
  background: #f3f4f6; border: 1px solid var(--border);
  border-radius: 6px; padding: 10px 12px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.dlg-decidir-coords .coords-fijas {
  display: flex; gap: 18px; flex: 1;
}
.dlg-decidir-coords .coords-fijas > div {
  display: flex; flex-direction: column; gap: 2px;
}
.dlg-decidir-coords .coords-fijas code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px; color: var(--text);
  background: transparent; padding: 0;
}
.dlg-decidir-coords .link-back {
  background: transparent; border: none; padding: 0;
  font-size: 12px; color: var(--primary);
  cursor: pointer; font-family: inherit;
}
.dlg-decidir-coords .link-back:hover { text-decoration: underline; }

.dlg-decidir-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 12px;
}
.dlg-decidir-grid .card-comparar {
  padding: 10px 12px; border-radius: 6px;
  border: 1px solid var(--border);
}
.dlg-decidir-grid .card-comparar--nueva {
  background: #f9fafb;
}
.dlg-decidir-grid .card-comparar--candidata {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.35);
}
.dlg-decidir-grid .eyebrow {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
.dlg-decidir-grid .card-comparar--candidata .eyebrow {
  color: var(--primary);
}
.dlg-decidir-grid .card-comparar__titulo {
  font-size: 14px; font-weight: 500; color: var(--text);
  margin-bottom: 2px;
}
.dlg-decidir-grid .card-comparar__sub {
  font-size: 13px; color: var(--muted);
}

.dlg-decidir-maps {
  display: block; font-size: 12px;
  color: var(--primary); margin-bottom: 16px;
}
.dlg-decidir-maps:hover { text-decoration: underline; }

.dlg-decidir-decision { margin-bottom: 10px; }
.dlg-decidir-decision-q {
  font-size: 13px; color: var(--muted); margin-bottom: 8px;
}

.dialog-resolver .btn-decision {
  width: 100%; display: flex; align-items: flex-start; gap: 12px;
  text-align: left; padding: 12px 14px;
  border-radius: 6px; cursor: pointer; font-family: inherit;
  margin-bottom: 8px;
}
.dialog-resolver .btn-decision:last-child { margin-bottom: 0; }
.dialog-resolver .btn-decision__icono {
  font-size: 18px; line-height: 1.2; flex-shrink: 0;
}
.dialog-resolver .btn-decision__txt {
  display: flex; flex-direction: column; gap: 2px; flex: 1;
}
.dialog-resolver .btn-decision__titulo {
  font-size: 13px; font-weight: 500;
}
.dialog-resolver .btn-decision__subtitulo {
  font-size: 12px; opacity: 0.85;
}

.dialog-resolver .btn-decision--primary {
  background: var(--primary); color: white;
  border: 1px solid var(--primary);
}
.dialog-resolver .btn-decision--primary:hover:not(:disabled) {
  background: var(--primary-hover);
}
.dialog-resolver .btn-decision--secundario {
  background: white; color: var(--text);
  border: 1px solid var(--border);
}
.dialog-resolver .btn-decision--secundario:hover:not(:disabled) {
  background: #f3f4f6;
}

/* Filtro client-side de la tabla de sucursales (Capa 3) */
.filtro-row {
  margin-top: 6px;
}
.filtro-row input[type="text"] {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 6px 10px; font-size: 13px; font-family: inherit;
  background: white; min-width: 280px;
}

/* Link "abrir en Maps" dentro del diálogo */
#dlg-suc-maps {
  display: inline-block; padding-top: 4px;
  text-decoration: none;
}
#dlg-suc-maps:hover { text-decoration: underline; }

/* ---------- Geolocalizar desde archivos (D-087) ---------- */
/* Barra delimitada: gris suave que CONTRASTA con la tarjeta blanca (--surface).
   var(--bg) (#f7f7f5) quedaba casi igual al blanco y el recuadro no se leía;
   #f3f4f6 es el "secondary surface" ya usado en el ERP (inputs disabled,
   hovers) y se distingue claro del fondo de la card. */
.geo-cruce {
  margin: 12px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #f3f4f6;
}
.geo-cruce__controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.geo-cruce__controls .spacer { flex: 1; }
.geo-cruce__count { font-size: 12px; color: var(--muted); }
/* Una sola línea de ayuda corta, terciaria. */
.geo-cruce__help {
  margin-top: 8px;
  font-size: 12px; color: var(--muted);
}
.geo-cruce__help code {
  background: rgba(0, 0, 0, 0.05); padding: 0 5px;
  border-radius: 3px; font-size: 11px;
}
.geo-cruce__controls button {
  border-radius: 6px; padding: 7px 14px;
  font-size: 13px; font-weight: 500;
  cursor: pointer; font-family: inherit;
  border: 1px solid var(--border);
  background: white; color: var(--text);
}
.geo-cruce__controls button:hover:not(:disabled) { background: #f3f4f6; }
.geo-cruce__controls button.btn-primary {
  background: var(--primary); color: white; border-color: var(--primary);
}
.geo-cruce__controls button.btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.geo-cruce__controls button:disabled { opacity: 0.6; cursor: progress; }

/* Panel de resultado del dry-run / apply */
.geo-panel {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
}
.geo-panel--ok { border-color: rgba(22, 163, 74, 0.35); }
.geo-panel--err { border-color: rgba(180, 83, 9, 0.40); }
.geo-panel__titulo { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.geo-panel__meta { margin-bottom: 10px; }
.geo-panel__detalle { margin-top: 8px; }
.geo-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.geo-chip {
  display: flex; flex-direction: column; align-items: center;
  min-width: 92px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: #f9fafb;
}
.geo-chip__n { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.geo-chip__l { font-size: 11px; color: var(--muted); margin-top: 2px; }
.geo-chip--ok   { background: rgba(22, 163, 74, 0.07); border-color: rgba(22, 163, 74, 0.30); }
.geo-chip--ok   .geo-chip__n { color: #15803d; }
.geo-chip--warn { background: rgba(180, 83, 9, 0.07); border-color: rgba(180, 83, 9, 0.30); }
.geo-chip--warn .geo-chip__n { color: #b45309; }

/* ---------- Metas — wizard de dictado (D-133 Fase 2) ---------- */

/* Paso B: las tres varas de universo. Las deshabilitadas se ven, pero se ven
   apagadas: el usuario tiene que saber que existen y que todavía no están. */
.uni-opcion {
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}
.uni-opcion:hover:not(:disabled) { border-color: var(--primary); }
.uni-opcion.activa {
  border-color: var(--primary);
  background: rgba(37, 99, 235, 0.07);
  font-weight: 600;
}
.uni-opcion:disabled { opacity: 0.55; cursor: not-allowed; }

/* Paso E: selector de nodos. Listado vertical con filtro, no checkboxes
   corridos en línea: a nivel producto son 64 items y en línea son ilegibles.
   La misma forma para los cuatro niveles con selección — en marca (2 items) el
   filtro sobra, pero una pantalla que cambia de forma según el nivel obliga al
   operador a reaprenderla cada vez. */
.nodos-filtro { position: relative; margin: 10px 0 8px; }
.nodos-filtro input {
  width: 100%;
  padding-left: 32px;   /* deja el hueco de la lupa */
}
.nodos-filtro .lupa {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;   /* la lupa es un cartel, no un botón */
  display: flex;
}

/* Línea de estado: cuántos se ven, cuántos van. */
.nodos-estado {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.nodos-estado .cuenta-sel { color: var(--primary); font-weight: 600; }
.nodos-estado .btn-limpiar {
  margin-left: auto;
  background: none;
  border: none;
  padding: 2px 4px;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}
.nodos-estado .btn-limpiar:hover { color: var(--text); }

/* Scroll interno y no crecer sin fin: si la lista empujara la página, el botón
   "Cargar tabla" se iría de pantalla justo cuando hay más para elegir. */
.nodos-lista {
  max-height: 210px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.nodo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
}
.nodo-item:last-child { border-bottom: none; }
.nodo-item:hover { background: rgba(37, 99, 235, 0.05); }
/* Ancho fijo y tabular: los códigos alineados se barren con la vista. Vacío en
   los niveles que no traen código (marca, categoría, familia) — la columna
   queda igual para no descuadrar la glosa entre un nivel y otro. */
.nodo-cod {
  flex: 0 0 76px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.nodo-glosa { flex: 1; min-width: 0; }
.nodos-vacio { padding: 10px; font-size: 13px; }

/* Banner de tramo: el estado del período, con el color del semáforo que
   corresponde. Verde = se puede dictar; ámbar = sólo corregir; gris = historia. */
.banner {
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 14px;
  font-size: 14px;
}
.banner-ok      { background: rgba(5, 150, 105, 0.07);  border-color: rgba(5, 150, 105, 0.30);  color: #047857; }
.banner-aviso   { background: rgba(180, 83, 9, 0.07);   border-color: rgba(180, 83, 9, 0.30);   color: #b45309; }
.banner-cerrado { background: rgba(107, 107, 102, 0.09); border-color: var(--border);           color: var(--muted); }

.celda-meta { width: 100%; max-width: 180px; text-align: right; }
.celda-meta:disabled { background: var(--bg); color: var(--muted); }

.total-grande { font-size: 18px; font-weight: 700; text-align: right; }
#total-iva { text-align: right; font-size: 13px; }

/* Columnas que todavia no se dictan (Promocion, Gestion): visibles para que el
   operador vea la tabla entera que viene, pero apagadas y sin input. */
.col-futura { background: repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(0,0,0,0.02) 6px, rgba(0,0,0,0.02) 12px); color: var(--muted); }
.metas-tabla th, .metas-tabla td { vertical-align: middle; }
.metas-tabla tfoot th, .metas-tabla tfoot td { border-top: 2px solid var(--border); }
.col-iva { text-align: right; font-size: 13px; }

/* Reporte — venta diaria necesaria (D-147). Es la parte ACCIONABLE de la celda
   ("¿qué tengo que hacer para llegar?"), asi que se separa del bloque de cifras
   de arriba con una linea y se destaca. Es ademas la UNICA cifra en BRUTO del
   reporte: el rotulo "con IVA" viaja pegado al numero, nunca en una leyenda
   aparte, para que no pueda leerse como una columna neta mas. */
.cel-diaria {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
  font-weight: 600;
}
.cel-diaria .muted { font-weight: 400; }
.cel-cumplida { color: #047857; font-weight: 600; }

/* Venta total + escalera de monto (D-147). Es una columna de OTRA naturaleza que
   las de meta —no se mide contra un dictado, se ubica en un escalon—, asi que se
   separa con un borde izquierdo en vez de parecer una marca mas. */
.reporte-tabla td.col-escalera, .reporte-tabla th.col-escalera {
  border-left: 2px solid var(--border);
  background: rgba(0, 0, 0, 0.015);
}
/* Un escalón por línea, el más cercano arriba. Desde D-152 la misma clase sirve
   a los UMBRALES POR VARA (80% / 90% / meta): son la misma clase de dato —un
   objetivo con su cifra por jornada— y darles dos estilos distintos haría pensar
   que se leen distinto. */
.cel-paso { white-space: nowrap; }
.cel-paso + .cel-paso { margin-top: 2px; }
/* El umbral cumplido NO se atenúa: hereda el verde de `.cel-cumplida`. Que el
   80% ya esté dentro es la mejor noticia de la columna. */
/* El ESCALÓN ALCANZADO (D-153): lo que rinde el ritmo actual. Comparte el verde
   porque es la misma clase de noticia —plata que ya está en camino—, pero lleva
   clase propia y no `.cel-cumplida`: nada se cumplió todavía. Es una proyección, y
   el mes puede terminar en otro escalón. */
.cel-alcanzado { color: #047857; font-weight: 600; }

/* Subtítulo de columna: el universo que eligió el gerente cuando la política deja
   el eje abierto. Más chico que el nombre declarado, que es el que manda. */
.reporte-tabla th .col-sub {
  font-size: 11px;
  font-weight: 400;
  margin-top: 2px;
}