/* ============================================================
   legacy.css — Pendiente de subdivisión (Fase 2)
   Extraído 1:1 desde styles.css líneas 460–3370, SIN reordenar
   nada internamente. Cubre: filtros, dashboard, login, sidebar de
   clientes, FAB, hoja de ruta, planes de acción, campañas, modales,
   notas, edición inline, pipeline de oportunidades, logística,
   reportes e impresión. Se subdividirá en archivos por feature en
   una sesión dedicada, verificando cascada/especificidad regla por
   regla — no se hizo hoy a propósito para no introducir riesgo
   visual no probado en una sola pasada.
   ============================================================ */

/* ── FILTER BAR ── */
#filterbar {
  background: var(--bg2); border-bottom: 1px solid var(--border);
  padding: 7px 12px; display: flex; gap: 6px; flex-shrink: 0; overflow-x: auto; align-items: center;
}
#filterbar::-webkit-scrollbar { display: none; }
.chip {
  padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 500;
  border: 1px solid var(--border2); background: transparent; color: var(--text2);
  cursor: pointer; white-space: nowrap; flex-shrink: 0; font-family: 'Inter', sans-serif;
  transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 5px;
}
.chip:hover { background: var(--bg3); }
.chip.active { color: white; border-color: transparent; }
.chip[data-f="todos"].active { background: var(--accent); }
.chip[data-f="cliente"].active { background: var(--c-cliente); color: #000; }
.chip[data-f="prospecto"].active { background: var(--c-prospecto); }
.chip[data-f="sin_interes"].active { background: #7e57c2; }
.chip[data-f="cerrada"].active { background: #000; }
.chip[data-f="en_pausa"].active { background: #ffc107; color: #000; }
.chip[data-f="sin_visitar"].active { background: #ccc; color: #000; }
.chip[data-f="visitado"].active { background: var(--c-visitado); color: #000; }
/* v8.7.3: puntos de color por estado en los chips — reemplazan los emoji de sistema */
.chip[data-f]:not([data-f="todos"])::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; flex-shrink: 0;
}
.chip[data-f="cliente"]::before    { background: var(--c-cliente); }
.chip[data-f="prospecto"]::before  { background: var(--c-prospecto); }
.chip[data-f="visitado"]::before   { background: var(--c-visitado); }
.chip[data-f="sin_interes"]::before{ background: #7e57c2; }
.chip[data-f="cerrada"]::before    { background: #555; }
.chip[data-f="en_pausa"]::before   { background: #ffc107; }
.chip[data-f="sin_visitar"]::before{ background: #aaa; }
/* puntos en chips activos: blanco/negro para contraste */
.chip[data-f="cliente"].active::before    { background: rgba(0,0,0,0.35); }
.chip[data-f="prospecto"].active::before  { background: rgba(255,255,255,0.5); }
.chip[data-f="visitado"].active::before   { background: rgba(0,0,0,0.35); }
.chip[data-f="sin_interes"].active::before{ background: rgba(255,255,255,0.5); }
.chip[data-f="cerrada"].active::before    { background: rgba(255,255,255,0.3); }
.chip[data-f="en_pausa"].active::before   { background: rgba(0,0,0,0.35); }
.chip[data-f="sin_visitar"].active::before{ background: rgba(0,0,0,0.35); }

/* v8.7.3: puntos de color en s-opt (selector de estado en edición) */
.s-opt-dot {
  display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 5px; flex-shrink: 0;
}
.s-opt[data-v="cliente"] .s-opt-dot    { background: var(--c-cliente); }
.s-opt[data-v="prospecto"] .s-opt-dot  { background: var(--c-prospecto); }
.s-opt[data-v="visitado"] .s-opt-dot   { background: var(--c-visitado); }
.s-opt[data-v="sin_interes"] .s-opt-dot{ background: #7e57c2; }
.s-opt[data-v="cerrada"] .s-opt-dot    { background: #555; }
.s-opt[data-v="sin_visitar"] .s-opt-dot{ background: #aaa; }

/* v8.7.3: ocultar toggle Estado/Vendedor para usuarios vendedor — es redundante,
   todos sus clientes son del mismo vendor color */
.role-vendedor .color-mode-toggle { display: none !important; }
/* También ocultar el filtro de vendedores del filterbar — ya están viendo solo los suyos */
.role-vendedor #vendor-filter { display: none !important; }

#vendor-filter {
  padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 500;
  border: 1px solid var(--border2); background: var(--bg3); color: var(--text);
  cursor: pointer; font-family: 'Inter', sans-serif; flex-shrink: 0;
}
.sep { width: 1px; height: 20px; background: var(--border2); flex-shrink: 0; }

/* ── MAIN ── */
#main { flex: 1; display: flex; overflow: hidden; position: relative; min-height: 0; }
#map { flex: 1; min-height: 0; min-width: 0; height: 100%; background: #ddd; }
.leaflet-container { background: #ddd !important; }

/* v8.6.5: anti-flash de topbar — ocultar hasta que JS confirme auth (ver bootApp/showDashboardShell) */
body:not(.app-ready) #topbar { visibility: hidden; }

/* ── FEATURE PANELS (v8.6.5): vistas full-page para features del drawer ───────────
   Patrón: igual que #logistics-view. Cada panel ocupa el 100% del main area,
   tiene su propio header con back button y su body scrollable.
   Erradicados en esta versión: Historial de visitas + Hoja de ruta.
   Pendientes (mismo patrón, en sesiones siguientes): Reportes, Vendedores, Importar, etc. */
#hist-view, #route-view, #reports-view, #file-library-view {
  display: none; flex: 1; flex-direction: column; overflow: hidden; min-height: 0;
  background: var(--bg);
}
#hist-view.active, #route-view.active, #reports-view.active, #file-library-view.active { display: flex; }

.fv-header {
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--shell-pad); height: 52px; flex-shrink: 0;
  background: var(--bg-glass-topbar);
  backdrop-filter: blur(20px) saturate(190%); -webkit-backdrop-filter: blur(20px) saturate(190%);
  border-bottom: 0.5px solid var(--border-retina);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06), var(--shadow-sm);
}
.fv-back { flex-shrink: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.fv-back svg { width: 15px; height: 15px; stroke-width: 2; }
.fv-title {
  flex: 1; display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fv-title svg { width: 17px; height: 17px; stroke-width: 1.75; color: var(--accent-primary); flex-shrink: 0; }
.fv-actions { display: flex; gap: 6px; flex-shrink: 0; }
.fv-action-btn { display: flex; align-items: center; gap: 5px; font-size: 12px; padding: 0 10px; height: 34px; }
.fv-action-btn svg { width: 14px; height: 14px; stroke-width: 2; }
.fv-action-label { display: none; }
@media (min-width: 640px) { .fv-action-label { display: inline; } }

.fv-body { flex: 1; overflow-y: auto; padding: 20px var(--shell-pad); box-sizing: border-box; }
/* v8.6.5: los feature panels usan el ancho completo disponible (con el padding lateral
   de --shell-pad para que el contenido respire igual que el resto de la app).
   Sin max-width — son "páginas" reales, no modales disfrazados. */
#hist-view .fv-body, #route-view .fv-body { width: 100%; }
#reports-view .fv-body { width: 100%; max-width: var(--shell-max); margin: 0 auto; }

/* Reportes: grid de gráficos responsiva */
.rep-charts-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 14px;
}
.rep-chart-card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 14px;
}
.rep-chart-title {
  font-size: 12px; color: var(--text2); margin-bottom: 10px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.rep-chart-title svg { width: 13px; height: 13px; stroke-width: 2; }
#rep-objetivo-bar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
  padding: 10px 14px; background: var(--bg3); border-radius: 10px; border: 1px solid var(--border);
  flex-wrap: wrap;
}
#rep-objetivo {
  width: 80px; padding: 5px 8px; border-radius: 7px; border: 1px solid var(--border2);
  background: var(--bg4); color: var(--text); font-size: 13px;
}

/* ── FILTROS DE LA VISTA LISTA (v8.6.5: restyling Apple Premium) ──────────────
   Los selects nativos (.list-filters-selects) usaban el estilo por defecto del OS.
   Ahora siguen el mismo lenguaje que el resto del sistema: appearance:none,
   border-radius redondeado, colores de las variables del Design System. */
.list-filters-selects {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.list-filters-selects select {
  appearance: none; -webkit-appearance: none;
  background: var(--bg-elevated); border: 1px solid var(--border-modifier);
  color: var(--text-secondary); font-size: 12px; font-weight: 500;
  padding: 6px 28px 6px 10px; border-radius: 8px; cursor: pointer;
  font-family: 'Inter', -apple-system, sans-serif;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238E8E93' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
  min-width: 120px; max-width: 180px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.list-filters-selects select:hover { background-color: var(--bg-modifier); border-color: var(--border-strong); color: var(--text-primary); }
.list-filters-selects select:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px var(--input-focus-ring); }
/* También los selects de hist-filters y rep-vendor/rep-range */
#rep-vendor, #rep-range {
  appearance: none; -webkit-appearance: none;
  background: var(--bg-elevated); border: 1px solid var(--border-modifier);
  color: var(--text-secondary); font-size: 13px; padding: 8px 28px 8px 12px;
  border-radius: 9px; cursor: pointer; font-family: 'Inter', -apple-system, sans-serif;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238E8E93' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
#rep-vendor:focus, #rep-range:focus { outline: none; border-color: var(--accent-primary); }

#hist-list { border-top: 1px solid var(--border); }
#vr-plan-panel    { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#vr-execute-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#hist-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
#hist-filters select, #hist-filters input[type="text"],
#hist-filters input[type="date"] {
  flex: 1; min-width: 140px; max-width: 240px;
  font-size: 13px; padding: 7px 10px; border-radius: 8px;
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text); appearance: none; -webkit-appearance: none;
}
#hist-custom-dates { display: none; gap: 6px; align-items: center; }
#hist-custom-dates.visible { display: flex; }



/* v8.6.5: ícono de cluster del mapa — diseño custom alineado con el Design System de la app */
.mc-cluster-wrap { background: none !important; border: none !important; }
.mc-cluster {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent, #007AFF);
  color: #fff; font-size: 12px; font-weight: 700;
  font-family: 'Inter', -apple-system, sans-serif;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255,255,255,0.25);
}

/* ── SEGMENTED CONTROL de vistas en topbar (v8.5.12: rediseño estilo iOS/macOS;
   v8.6.5: padding 3px→2px para reducir el espacio visible a la izquierda del primer tab activo) ── */
.view-toggle {
  display: flex; align-items: center; gap: 2px;
  background: var(--bg-modifier); border: 1px solid var(--border-modifier);
  border-radius: 12px; padding: 2px; flex-shrink: 0;
  position: relative;
}
.view-toggle button {
  background: transparent; border: none; color: var(--text-secondary);
  font-size: 12px; font-weight: 600; padding: 7px 13px;
  border-radius: 10px; cursor: pointer; font-family: 'Inter', sans-serif;
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease, transform 0.1s ease;
}
.view-toggle button svg { width: 15px; height: 15px; stroke-width: 2; flex-shrink: 0; }
.view-toggle button:not(.active):hover { background: var(--bg-modifier-strong); color: var(--text-primary); }
.view-toggle button.active { background: rgba(42,143,255,0.14); color: var(--accent-primary); }
.view-toggle button:active { transform: scale(0.96); }
@media (max-width: 900px) {
  .view-toggle button .vt-label { display: none; }
  .view-toggle button { padding: 7px 9px; }
}

/* ── v8.0.4a: TOGGLE de coloreo de pines (flotante en mapa) ── */
.color-mode-toggle {
  display: flex; align-items: center; gap: 4px;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 7px; padding: 3px 4px 3px 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  font-family: 'Inter', sans-serif;
}
.color-mode-toggle .cmt-label {
  font-size: 10px; color: var(--text2); font-weight: 500;
  margin-right: 2px; user-select: none;
}
.color-mode-toggle .cmt-btn {
  background: transparent; border: none; color: var(--text2);
  font-size: 11px; font-weight: 600; padding: 4px 9px;
  border-radius: 5px; cursor: pointer; font-family: inherit;
  transition: all 0.15s;
}
.color-mode-toggle .cmt-btn.active { background: var(--accent); color: #fff; }
.color-mode-toggle .cmt-btn:not(.active):hover { color: var(--text); }
@media (max-width: 540px) {
  .color-mode-toggle { padding: 3px; }
  .color-mode-toggle .cmt-label { display: none; }
  .color-mode-toggle .cmt-btn { padding: 4px 7px; font-size: 10px; }
}

/* ── VISTA LISTA (v7.10) ── */
#list-view { display: none; flex: 1; overflow: hidden; min-height: 0; }
#list-view.active { display: flex; }

/* v8.3.6: dashboard de entrada */
#dashboard-view { display: none; flex: 1; overflow-y: auto; min-height: 0; background: var(--bg); }
#dashboard-view.active { display: flex; flex-direction: column; }
body.mode-dashboard #map,
body.mode-dashboard #legend,
body.mode-dashboard #sidebar,
body.mode-dashboard #filterbar { display: none !important; }
.dash-wrap { max-width: var(--shell-max); width: 100%; margin: 0 auto; padding: 24px var(--shell-pad); }
.dash-greeting { margin-bottom: 20px; }
.dash-greeting h2 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
.dash-greeting .dash-sub { font-size: 13px; color: var(--text2); }
/* v8.5.15: FIX — "repeat(auto-fit, minmax(155px,1fr))" colapsaba la 6ta tarjeta a una
   segunda línea apenas el contenedor bajaba de ~990px (6×155 + 5 gaps), cortando además
   las etiquetas largas ("Visitas venci…") por el text-overflow:ellipsis que tenía el label.
   Ahora: 6 columnas explícitas, SIEMPRE en una sola fila (1fr no tiene piso mínimo propio
   acá porque no hay contenido sin-wrap forzado adentro — ver dk-label más abajo, que ahora
   permite wrap a 2 líneas en vez de truncar). El ancho por tarjeta lo definen las columnas,
   compactamos paddings/tipografía para que se sientan cómodas incluso angostas. */
.dash-kpis { display: grid; grid-template-columns: repeat(6, 1fr); width: 100%; gap: 10px; margin-bottom: 18px; }
.dash-kpi {
  position: relative; background: var(--glass-bg);
  border: 1px solid var(--border-subtle); border-radius: 16px;
  padding: 13px 12px; cursor: pointer; min-width: 0; /* min-width:0 = el grid SÍ puede achicar la tarjeta por debajo de su contenido si hace falta */
  backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: background 0.35s var(--ease-ios),
              border-color 0.35s var(--ease-ios),
              transform 0.35s var(--ease-ios);
}
.dash-kpi:hover { background: var(--glass-bg-hover); border-color: var(--border-strong); transform: translateY(-1px); }
.dash-kpi:active { transform: translateY(0) scale(0.99); }
.dash-kpi .dk-top { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 10px; }
.dash-kpi .dk-icon-chip {
  width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-elevated); color: var(--text-muted);
}
.dash-kpi .dk-icon-chip svg { width: 13px; height: 13px; stroke-width: 2; }
/* Sin truncar: el label puede partirse en 2 líneas en vez de cortarse con "…" */
.dash-kpi .dk-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.25; color: var(--text-secondary); overflow-wrap: break-word; padding-top: 2px; }
.dash-kpi .dk-val { font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -0.015em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.dash-kpi .dk-val.is-alert { color: var(--tone-danger); }
/* Tonos del chip de ícono — coordinados con los tokens definidos en :root */
.dash-kpi[data-tone="danger"]  .dk-icon-chip { background: var(--tone-danger-bg);  color: var(--tone-danger); }
.dash-kpi[data-tone="warn"]    .dk-icon-chip { background: var(--tone-warn-bg);    color: var(--tone-warn); }
.dash-kpi[data-tone="success"] .dk-icon-chip { background: var(--tone-success-bg); color: var(--tone-success); }
.dash-kpi[data-tone="info"]    .dk-icon-chip { background: var(--tone-info-bg);    color: var(--tone-info); }
.dash-kpi[data-tone="accent"]  .dk-icon-chip { background: rgba(42,143,255,0.12);  color: var(--accent-primary); }
/* En pantallas angostas, 6 columnas reales se vuelven ilegibles aunque no se corten —
   ahí preferimos 3×2 (tablet) o 2×3 (mobile) antes que comprimir cada tarjeta a ~60px. */
@media (max-width: 760px) {
  .dash-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 460px) {
  .dash-kpis { grid-template-columns: repeat(2, 1fr); }
}
/* ── v8.5.15: Paso 4 — "Gestiones del día" / "Por vendedor", estilo lista iOS ──
   Sin líneas divisorias entre filas (la separación la da el padding generoso, no un borde).
   Cada fila es su propia "píldora" de hover: padding + margin negativo para que el highlight
   llegue casi al borde de la tarjeta sin que el contenido pierda alineación con el título. */
.dash-section { background: var(--bg-sidebar); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 14px 16px 6px; margin-bottom: 12px; }
.dash-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin-bottom: 6px; padding: 0 2px; }
.dash-visit-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 10px; margin: 0 -10px; border-radius: 10px;
  transition: background 0.35s var(--ease-ios);
}
.dash-visit-row:hover { background: var(--overlay-hover); }
.dvr-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; width: 40px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.dvr-name { flex: 1; font-weight: 600; font-size: 12.5px; color: var(--text-primary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dvr-status { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.dvr-vendor { font-size: 10.5px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; }
.dash-vendor-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 10px; margin: 0 -10px; border-radius: 10px;
  transition: background 0.35s var(--ease-ios);
}
.dash-vendor-row:hover { background: var(--overlay-hover); }
.dash-vendor-name { font-weight: 600; font-size: 12.5px; color: var(--text-primary); min-width: 80px; flex-shrink: 0; }
.dash-empty { color: var(--text-muted); font-size: 12px; font-style: italic; padding: 10px 2px 14px; }

/* ── v8.5.15: status-pill — componente genérico de badge desaturado, reemplaza texto plano/emoji.
   Mismo lenguaje que los chips de ícono de las KPI: fondo del tono al 10-12% + texto fino del
   mismo color. Pensado para reusarse en cualquier lista futura, no solo en el dashboard. */
.status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 10.5px; font-weight: 500; white-space: nowrap;
  background: var(--bg-elevated); color: var(--text-secondary);
}
.status-pill svg { width: 12px; height: 12px; stroke-width: 2.25; flex-shrink: 0; }
.status-pill--icon { padding: 4px; } /* variante solo-ícono: chips compactos de "compró"/"cobró" */
.status-pill[data-tone="success"] { background: var(--tone-success-bg); color: var(--tone-success); }
.status-pill[data-tone="warn"]    { background: var(--tone-warn-bg);    color: var(--tone-warn); }
.status-pill[data-tone="danger"]  { background: var(--tone-danger-bg);  color: var(--tone-danger); }
.status-pill[data-tone="accent"]  { background: rgba(42,143,255,0.12);  color: var(--accent-primary); }
.status-pill[data-tone="neutral"] { background: var(--bg-elevated); color: var(--text-secondary); }

/* ── v8.5.14: carga en cascada del dashboard, solo en el instante posterior al login ──
   app.js agrega .dash-anim-in + un animation-delay progresivo SOLO la primera vez que se
   pinta el dashboard tras la transición de login (ver justTransitioned en loadDashboard()).
   En navegaciones normales (click en "Inicio" después) esta clase no se agrega — repetir
   la animación cada vez que el usuario vuelve a la pestaña sería ruido, no elegancia. */
@keyframes dashRiseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dash-anim-in { animation: dashRiseIn 0.6s var(--ease-ios) both; }

/* ── v8.5.14 / v8.6.5: LOGIN SCREEN + transición 3D ──────────────────────────
   Secuencia: flip (0.5s spring) → pausa 0.6s → texto fade out (.is-departing) → pantalla fade.
   El dashboard pre-cargado "se descubre" debajo. Sin scale, sin clones, sin parpadeos. */
#login-screen {
  position: fixed; inset: 0; z-index: 99999;
  background: linear-gradient(135deg, var(--bg-main) 0%, var(--bg-sidebar) 100%);
  display: none; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto; font-family: 'Inter', sans-serif;
  transition: opacity 0.55s var(--ease-ios); opacity: 1;
}
#login-screen.active { display: flex; }
#login-screen.is-expanding { opacity: 0; pointer-events: none; }
#login-flip-stage { width: 100%; max-width: 360px; perspective: 1100px; }
#login-flip-card {
  position: relative; width: 100%; transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-ios);
}
#login-flip-card.is-flipped { transform: rotateY(-180deg); }
.login-face { width: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.login-face-front { position: relative; }
.login-face-back { position: absolute; inset: 0; transform: rotateY(180deg); }
.login-face-back .login-card { height: 100%; display: flex; align-items: center; justify-content: center; }
.login-welcome-text {
  font-size: 22px; font-weight: 700; color: var(--text-primary);
  letter-spacing: -0.02em; text-align: center; opacity: 0;
  transition: opacity 0.5s ease 0.3s; /* sincronizado con el flip */
}
.login-welcome-text.is-visible { opacity: 1; }
/* v8.6.5: fade del texto ANTES de que desaparezca la pantalla → sensación de "se disuelve" */
.login-welcome-text.is-departing { opacity: 0 !important; transition: opacity 0.3s ease !important; }
.login-card {
  background: var(--bg-sidebar); border: 1px solid var(--border-subtle);
  border-radius: 16px; padding: 28px 24px; width: 100%; max-width: 360px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
}
.login-brand {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 13px; color: var(--text-secondary); text-align: center;
  letter-spacing: 0.5px; margin-bottom: 4px;
}
.login-brand svg { width: 13px; height: 13px; stroke-width: 2; }
.login-title {
  font-size: 20px; font-weight: 600; color: var(--text-primary);
  margin: 0 0 20px; text-align: center;
}
.login-field { margin-bottom: 14px; }
.login-field label {
  display: block; font-size: 12px; color: var(--text-secondary);
  margin-bottom: 6px; font-weight: 500;
}
.login-field input {
  width: 100%; box-sizing: border-box;
  background: var(--bg-elevated); border: 1px solid var(--border-strong); color: var(--text-primary);
  padding: 10px 12px; border-radius: 9px; font-size: 14px;
  font-family: inherit; transition: border-color 0.15s;
}
.login-field input:focus {
  outline: none; border-color: var(--accent-primary);
}
.login-error {
  background: var(--tone-danger-bg); border: 1px solid rgba(255,61,61,0.35);
  color: var(--tone-danger); font-size: 13px; padding: 9px 12px; border-radius: 8px;
  margin-bottom: 14px; text-align: center;
}
.login-submit {
  width: 100%; background: var(--accent-primary); color: #fff; border: none;
  padding: 11px; border-radius: 9px; font-weight: 600; font-size: 14px;
  cursor: pointer; font-family: inherit; position: relative; margin-top: 4px;
  transition: opacity 0.15s ease, transform 0.1s ease;
}
.login-submit:hover { opacity: 0.9; }
.login-submit:active:not(:disabled) { transform: scale(0.97); }
.login-submit:disabled { opacity: 0.55; cursor: not-allowed; }
/* v8.6.5: spinner en botón de login — texto invisible + rueda CSS pura (sin imagen) */
.login-submit.is-loading { color: transparent !important; pointer-events: none; }
.login-submit.is-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,0.3); border-top-color: #fff;
  border-radius: 50%; transform: translate(-50%, -50%);
  animation: loginSpinner 0.65s linear infinite;
}
@keyframes loginSpinner {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.login-forgot {
  display: block; margin: 14px auto 0; background: transparent;
  border: none; color: var(--text-secondary); font-size: 12px; cursor: pointer;
  text-decoration: underline; font-family: inherit;
}
.login-forgot:hover { color: var(--text-primary); }
/* v8.2.16: wrapper password + ojito toggle */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 40px; width: 100%; box-sizing: border-box; }
.pw-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--text3);
  padding: 4px; display: flex; align-items: center; line-height: 1;
  border-radius: 4px; transition: color 0.15s;
}
.pw-eye:hover { color: var(--text); }
.login-loading {
  margin-top: 12px; text-align: center; font-size: 12px; color: var(--text2);
}

/* ── v8.1.0-fase3b: drawer usuario + logout ── */
.drawer-divider {
  height: 1px; background: var(--border-subtle); margin: 10px 0 6px;
}
/* v8.5.14: selector de Apariencia — mismo patrón visual que el segmented control del topbar, a escala compacta */
.drawer-theme {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 14px 10px;
}
.drawer-theme .dt-label { font-size: 12px; color: var(--text-secondary); font-weight: 500; }
.theme-toggle {
  display: flex; align-items: center; gap: 2px;
  background: var(--input-bg); border: 1px solid var(--border-retina);
  border-radius: 10px; padding: 3px;
}
.theme-toggle .tt-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 8px; color: var(--text-secondary);
  cursor: pointer; transition: background 0.35s var(--ease-ios), color 0.25s ease;
}
.theme-toggle .tt-btn svg { width: 14px; height: 14px; stroke-width: 2; }
.theme-toggle .tt-btn:hover:not(.active) { background: var(--overlay-hover); color: var(--text-primary); }
.theme-toggle .tt-btn.active { background: rgba(42,143,255,0.14); color: var(--accent-primary); }
.drawer-user {
  padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 2px;
}
.du-name { font-size: 13px; color: var(--text-primary); font-weight: 500; }
.du-role { font-size: 11px; color: var(--text-secondary); }
.drawer-item-danger { color: var(--tone-danger); }
.drawer-item-danger:hover { background: rgba(255,61,61,0.1); }

/* ── v8.1.0-fase3d: visibilidad según rol del user ──
   Para vendedores, filtros y opciones que no aplican (solo ven lo suyo).
   v8.1.1: agregamos role-oficina (admin recortado): bloquea acciones de gestión de vendedores,
   zonas, reportes y configuración global. Mantiene CRUD de clientes/visitas/opps. */
body.role-vendedor #vendor-filter,
body.role-vendedor .filterbar-sep-vendor,
body.role-vendedor #list-filter-vendor,
body.role-vendedor #bulk-filter-vendor,
body.role-vendedor .drawer-item-admin,
body.role-oficina .drawer-item-admin {
  display: none !important;
}
/* v8.2.20: búsqueda solo en topbar en modo mapa; en lista se mueve al sidebar propio.
   v8.6.5: removido mode-pipeline de esta regla — en Oportunidades no hay búsqueda alternativa
   (el filterbar tiene dropdowns pero no input de texto), así que la topbar search debe mostrarse.
   Solo mode-list la ocultamos (tiene su propio #list-search-input en el panel izquierdo). */
body.mode-list #tb-search {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
/* En el modal de prospecto / oportunidad, el campo "Vendedor asignado" queda visible pero deshabilitado
   con un solo valor (su propio nombre). Lo dejamos visible para que sepa quién es el dueño. */
body.role-vendedor #f-vendor,
body.role-vendedor #opp-vendor {
  pointer-events: none;
  opacity: 0.7;
  background: var(--bg2) !important;
}

/* Cuando está en modo lista, ocultamos mapa, sidebar, leyenda y banner */
body.mode-list #map,
body.mode-list #legend,
body.mode-list #sidebar,
body.mode-list #filterbar { display: none !important; }

#list-pane-left {
  width: 380px; min-width: 280px; max-width: 50%;
  background: var(--bg2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.list-filters {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  display: flex; gap: 6px; flex-wrap: wrap; flex-direction: column;
}
/* v8.2.20: buscador inline en el sidebar de lista */
#list-search-wrap {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px;
  padding: 6px 10px;
}
#list-search-wrap:focus-within { border-color: var(--accent); background: var(--bg4); }
#list-search-icon { color: var(--text3); font-size: 13px; flex-shrink: 0; }
#list-search-input {
  flex: 1; background: transparent; border: none; color: var(--text);
  font-size: 13px; outline: none; font-family: inherit; min-width: 0;
}
#list-search-input::placeholder { color: var(--text3); }
#list-search-clear {
  background: var(--bg4); border: none; color: var(--text2); cursor: pointer;
  font-size: 11px; padding: 2px 5px; border-radius: 4px; flex-shrink: 0;
}
#list-search-clear:hover { color: var(--text); background: var(--bg2); }
.list-filters-selects { display: flex; gap: 6px; flex-wrap: wrap; }
.list-filters select {
  background: var(--bg3); border: 1px solid var(--border2); color: var(--text);
  padding: 5px 6px; border-radius: 5px; font-size: 11px; flex: 1; min-width: 110px;
  font-family: 'Inter', sans-serif;
}
.list-count {
  padding: 6px 12px; font-size: 10px; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  border-bottom: 1px solid var(--border);
}
#list-table-wrap { flex: 1; overflow-y: auto; }
#list-table-wrap::-webkit-scrollbar { width: 4px; }
#list-table-wrap::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

.list-row {
  padding: 9px 12px; border-bottom: 1px solid var(--border); cursor: pointer;
  border-left: 3px solid transparent;
  transition: background 0.1s;
  /* v8.6.5: virtual scroll — altura fija necesaria para calcular posiciones absolutas.
     54px = 9px pad-top + ~16px nombre + 3px margin + ~14px meta + 9px pad-bottom + 1px border.
     box-sizing:border-box garantiza que padding no se sume a height al usar position:absolute. */
  height: 54px; box-sizing: border-box; overflow: hidden;
}
.list-row:hover { background: var(--bg3); }
.list-row:focus {
  outline: 2px solid var(--accent); outline-offset: -2px;
  background: var(--bg3); border-radius: 0;
}
.list-row.selected {
  background: rgba(42,143,255,0.12); border-left-color: var(--accent);
}
.list-row.overdue::after {
  content: "●"; color: #ff6b6b; margin-left: 6px; font-size: 9px;
  text-shadow: 0 0 4px rgba(255,107,107,0.7);
}
.list-row-name { font-size: 12px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row-meta {
  font-size: 10px; color: var(--text3); display: flex; gap: 6px; align-items: center;
  /* v8.6.5: nowrap + overflow para que la meta nunca salte a segunda línea — requisito de
     altura fija del virtual scroll (si se permite wrap, la altura varía y el scroll se rompe) */
  flex-wrap: nowrap; overflow: hidden; white-space: nowrap;
}
.list-row-meta .meta-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.list-row-meta .meta-overdue { color: #ff6b6b; font-weight: 600; }

#list-pane-right {
  flex: 1; overflow-y: auto; padding: 16px; min-width: 0;
  background: var(--bg);
}
#list-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--text3); font-size: 13px; text-align: center; padding: 30px;
  gap: 10px;
}
#list-empty .le-icon { font-size: 36px; opacity: 0.4; }

.detail-header {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px;
  padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.detail-header .dh-info { flex: 1; min-width: 0; }
.detail-header h2 { font-size: 17px; font-weight: 600; margin-bottom: 4px; word-break: break-word; }
.detail-header .detail-addr { font-size: 12px; color: var(--text2); margin-bottom: 8px; }
.detail-header .detail-chips { display: flex; gap: 6px; flex-wrap: wrap; }
/* v8.7.19: fila unificada de acciones de la ficha en modo lista
   (Editar / Ver en mapa / Compartir / Carpeta) — mismo tamaño y estilo,
   solo "Editar" se distingue como acción principal (acento). */
.detail-header-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 6px; flex-shrink: 0;
}
.detail-action-btn {
  background: var(--bg3); border: 1px solid var(--border2); color: var(--text);
  padding: 7px 12px; font-size: 11px; border-radius: 6px; cursor: pointer;
  font-family: 'Inter', sans-serif; white-space: nowrap; flex-shrink: 0;
  font-weight: 600; display: inline-flex; align-items: center; gap: 4px;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.detail-action-btn:hover { background: var(--bg); border-color: var(--accent); }
.detail-action-btn.primary {
  background: rgba(42,143,255,0.12); border-color: rgba(42,143,255,0.35); color: var(--accent);
}
.detail-action-btn.primary:hover { background: rgba(42,143,255,0.2); }

.detail-quick-actions {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 16px;
}
.detail-quick-actions .cqa-btn { padding: 11px 4px; font-size: 11.5px; }

.detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.detail-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 11px 13px;
}
.detail-card-title {
  font-size: 10px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 9px;
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
.detail-card-soon-badge {
  font-size: 9px; background: rgba(255,193,7,0.18); color: #ffc107;
  padding: 2px 6px; border-radius: 8px; font-weight: 600; letter-spacing: 0.05em;
}
.detail-card-coming-soon {
  color: var(--text3); font-size: 12px; padding: 8px 0;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

.detail-visits { font-size: 11px; max-height: 200px; overflow-y: auto; }
.detail-visit-row {
  padding: 6px 0; border-bottom: 1px solid var(--border);
  display: flex; gap: 8px; align-items: flex-start;
}
.detail-visit-row:last-child { border-bottom: none; }
.detail-visit-row .dv-icon { font-size: 13px; flex-shrink: 0; }
.detail-visit-row .dv-body { flex: 1; min-width: 0; }
.detail-visit-row .dv-date { color: var(--text2); font-weight: 600; }
.detail-visit-row .dv-note { color: var(--text3); margin-top: 2px; font-size: 10px; }
.detail-empty-mini { color: var(--text3); font-size: 11px; padding: 4px 0; font-style: italic; }

.detail-notes { font-size: 12px; color: var(--text2); white-space: pre-wrap; word-break: break-word; line-height: 1.45; }

.detail-tags-list { display: flex; gap: 5px; flex-wrap: wrap; }
.detail-tags-list .utag { font-size: 11px; padding: 2px 8px; }

@media (max-width: 700px) {
  #list-pane-left { width: 100%; max-width: 100%; border-right: none; }
  #list-pane-right { display: none; }
  /* En mobile, click en fila abre el modal-prospect tradicional */
}
@media (max-width: 900px) and (min-width: 701px) {
  /* Tablet: panel detalle apretado, hacemos los cards 1 columna */
  .detail-grid { grid-template-columns: 1fr; }
}

/* ── LEGEND ── */
#legend {
  position: absolute; bottom: 24px; left: 10px; z-index: 600;
  background: rgba(10,22,40,0.92); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 10px 13px; backdrop-filter: blur(8px);
}
.leg-row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text2); margin-bottom: 5px; }
.leg-row:last-child { margin-bottom: 0; }
.leg-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; border: 2px solid rgba(255,255,255,0.3); }

/* ── SIDEBAR ── */
#sidebar {
  width: clamp(360px, 40vw, 600px); /* v8.2.21: más amplio para leer la ficha cómodo */
  background: var(--bg2); border-right: 1px solid var(--border); /* v8.2.23: izquierda */
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform 0.25s ease;
  order: -1; /* v8.2.23: aparece antes del mapa → lado izquierdo */
}
@media (max-width: 700px) {
  #sidebar { position: absolute; left: 0; top: 0; bottom: 0; z-index: 500; transform: translateX(-100%); border-right: 1px solid var(--border); border-left: none; }
  #sidebar.open { transform: translateX(0); }
}
.sb-head { padding: 10px 13px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.sb-head h2 { font-size: 11px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: 0.07em; }
#sb-list { flex: 1; overflow-y: auto; }
#sb-list::-webkit-scrollbar { width: 3px; }
#sb-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.pi {
  padding: 10px 13px; border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background 0.1s;
}
.pi:hover { background: var(--bg3); }
.pi-name { font-size: 12px; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-sub { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pi-tags { display: flex; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.tag {
  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 8px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.tag-cliente { background: rgba(0,230,118,0.15); color: var(--c-cliente); }
.tag-prospecto { background: rgba(255,61,61,0.15); color: #ff6b6b; }
.tag-sin_interes { background: rgba(126,87,194,0.18); color: #b39ddb; }
.tag-cerrada { background: rgba(0,0,0,0.5); color: #e0e0e0; }
.tag-sin_visitar { background: rgba(255,255,255,0.1); color: #ccc; }
.tag-visitado { background: rgba(255,152,0,0.15); color: var(--c-visitado); }

/* Etiquetas libres (del usuario) — distintas del status */
.utag {
  font-size: 10px; font-weight: 500; padding: 1px 7px; border-radius: 8px;
  background: rgba(42,143,255,0.13); color: #b5d4f4;
  letter-spacing: 0.02em; white-space: nowrap;
}
.utag-more { background: rgba(255,255,255,0.06); color: var(--text2); }

/* Chip-input en la ficha del cliente */
.tag-input-wrap {
  position: relative;
  background: var(--bg3); border: 1px solid var(--border2); border-radius: 7px;
  padding: 5px 7px; min-height: 36px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  transition: border-color 0.1s;
}
.tag-input-wrap:focus-within { border-color: var(--accent); }
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg4); color: var(--text); font-size: 12px;
  padding: 3px 4px 3px 9px; border-radius: 5px;
}
.tag-chip .tc-x {
  cursor: pointer; color: var(--text2); font-size: 11px; padding: 0 4px;
  border-radius: 3px; transition: background 0.1s;
}
.tag-chip .tc-x:hover { background: rgba(255,255,255,0.1); color: #ff6b6b; }
.tag-input-wrap input {
  flex: 1; min-width: 100px; background: transparent; border: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 13px; padding: 4px 2px;
}
.tag-suggestions {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50;
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 7px;
  max-height: 200px; overflow-y: auto; display: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
}
.tag-suggestions.open { display: block; }
.ts-item {
  padding: 8px 11px; font-size: 13px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.ts-item:hover { background: var(--bg3); }
.ts-item.active { background: rgba(42,143,255,0.22); outline: 1px solid var(--accent); outline-offset: -1px; }
.ts-item .ts-name { color: var(--text); }
.ts-item .ts-count { font-size: 10px; color: var(--text3); }
.ts-item .ts-new-badge {
  font-size: 9px; color: var(--accent); padding: 1px 5px;
  background: rgba(42,143,255,0.15); border-radius: 3px;
}

/* Filtro de tags en el sidebar */
.tag-filter {
  padding: 8px 13px; border-bottom: 1px solid var(--border); background: var(--bg2);
}
.tag-filter-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 6px; font-weight: 600;
}
.tag-filter-clear {
  background: transparent; border: none; color: var(--accent); font-size: 10px;
  cursor: pointer; padding: 0; font-family: inherit;
}
.tag-filter-list {
  display: flex; flex-wrap: wrap; gap: 4px; max-height: 80px; overflow-y: auto;
}
.tag-pill {
  font-size: 11px; padding: 3px 8px; border-radius: 11px; cursor: pointer;
  background: rgba(42,143,255,0.08); color: var(--text2);
  border: 1px solid transparent; transition: all 0.1s; white-space: nowrap;
  user-select: none;
}
.tag-pill:hover { background: rgba(42,143,255,0.16); color: var(--text); }
.tag-pill.active {
  background: rgba(42,143,255,0.22); color: #cce4ff; border-color: var(--accent);
}
.tag-pill .tp-count { opacity: 0.5; margin-left: 4px; font-size: 9px; }
.tag-filter-empty { font-size: 11px; color: var(--text3); padding: 4px 0; }

/* Modal de bulk tags */
#modal-bulk-tags .modal { max-width: 580px; }
.bulk-section {
  margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.bulk-section:last-of-type { border-bottom: none; padding-bottom: 0; }
.bulk-label {
  font-size: 10px; color: var(--text2); text-transform: uppercase;
  letter-spacing: 0.07em; margin-bottom: 7px; font-weight: 600;
}
.bulk-mode-toggle {
  display: inline-flex; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 7px; overflow: hidden; height: 34px;
}
.bulk-mode-toggle button {
  background: transparent; border: none; color: var(--text2); padding: 0 13px;
  font-size: 12px; font-family: inherit; cursor: pointer; transition: all 0.1s;
}
.bulk-mode-toggle button.active { background: var(--accent); color: #fff; font-weight: 500; }
.bulk-row { display: flex; gap: 8px; align-items: stretch; }
.bulk-row > .tag-input-wrap { flex: 1; min-height: 34px; }
.bulk-filters-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 7px;
}
.bulk-list {
  max-height: 240px; overflow-y: auto;
  background: var(--bg3); border-radius: 7px; border: 1px solid var(--border);
}
.bulk-list::-webkit-scrollbar { width: 4px; }
.bulk-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.bulk-item {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px;
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background 0.1s;
}
.bulk-item:last-child { border-bottom: none; }
.bulk-item:hover { background: var(--bg4); }
.bulk-item-all {
  background: var(--bg4); font-size: 11px; color: var(--text2);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.bulk-check {
  width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--text3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all 0.1s;
}
.bulk-check.checked { background: var(--accent); border-color: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
.bulk-item-body { flex: 1; min-width: 0; }
.bulk-item-name { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-item-meta { font-size: 10px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-empty { padding: 24px; text-align: center; color: var(--text3); font-size: 12px; }
.bulk-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 14px; border-top: 1px solid var(--border); margin-top: 14px;
}
.bulk-counter { font-size: 12px; color: var(--text2); }
.bulk-counter strong { color: var(--accent); font-weight: 600; }
#sb-stats {
  padding: 8px 13px; border-top: 1px solid var(--border); background: var(--bg);
  display: flex; gap: 12px; flex-shrink: 0; flex-wrap: wrap;
}
.stat { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text2); font-family: 'IBM Plex Mono', monospace; }
.stat-dot { width: 6px; height: 6px; border-radius: 50%; }

/* ── FAB ──
   v8.5.16: invertido el patrón. Antes el FAB estaba visible por defecto y se
   ocultaba con reglas !important específicas para pipeline/logistics (lista
   blanca al revés: "visible salvo que..."). Ahora arranca oculto y cada modo
   que lo necesita lo activa explícitamente — más seguro: un modo nuevo que
   se agregue a futuro no hereda el FAB por accidente.
   En mapa es un círculo solo-ícono; en lista es una píldora con etiqueta
   "Nuevo Cliente" (mismo botón, mismo handler de click — solo cambia la forma).
   v8.5.17: sombra reformulada como "proyección profunda y difusa" — una capa
   larga y muy borrosa (40px de blur, -10px de spread) que simula la luz
   ambiental cayendo desde arriba, más una capa corta y sutil pegada al botón
   para que no "flote" de más sobre el mapa. El esférico en mapa usa
   border-radius:50% perfecto (ancho=alto=56px, sin padding) para no perder
   la geometría circular en ningún estado. */
#fab {
  display: none;
  position: absolute; bottom: 18px; right: 18px; z-index: 600;
  background: var(--accent);
  align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 22px 46px -10px rgba(42,143,255,0.55), 0 4px 14px rgba(0,0,0,0.3);
  cursor: pointer; border: none; color: white;
  font-size: 14px; font-weight: 600; font-family: 'Inter', sans-serif; white-space: nowrap;
  transition: transform 0.32s var(--ease-ios),
              box-shadow 0.32s var(--ease-ios),
              border-radius 0.32s var(--ease-ios),
              padding 0.32s var(--ease-ios);
}
#fab svg { width: 22px; height: 22px; stroke-width: 2; flex-shrink: 0; }
#fab:hover {
  transform: scale(1.05);
  box-shadow: 0 26px 54px -10px rgba(42,143,255,0.65), 0 6px 18px rgba(0,0,0,0.35);
}
#fab:active { transform: scale(0.97); }
.fab-label { display: none; }
body.mode-map #fab {
  display: flex; width: 56px; height: 56px; border-radius: 50%; padding: 0;
}
body.mode-list #fab {
  display: inline-flex; width: auto; height: 50px; border-radius: 25px; padding: 0 22px 0 18px;
}
body.mode-list #fab .fab-label { display: inline; }

/* ── DRAW TOOLBAR ── */
#draw-toolbar {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 700; background: rgba(10,22,40,0.95); border: 1px solid var(--border2);
  border-radius: 10px; padding: 8px 12px; display: none; gap: 8px; align-items: center;
  backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
#draw-toolbar.visible { display: flex; }
#draw-toolbar span { font-size: 12px; color: var(--text2); white-space: nowrap; }

#locate-banner {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 800; background: rgba(0,230,118,0.95); border: none;
  border-radius: 10px; padding: 10px 14px; gap: 10px; align-items: center;
  backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  max-width: 92vw;
}
#locate-banner span { font-size: 13px; color: #042; font-weight: 600; }
.btn-locate {
  width: 100%; padding: 9px; background: rgba(0,230,118,0.12); color: #00e676;
  border: 1px solid rgba(0,230,118,0.3); border-radius: 8px; font-size: 12px;
  font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif;
}
.btn-locate:hover { background: rgba(0,230,118,0.22); }

.search-item {
  padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover, .search-item:active { background: var(--bg3); }
.search-item .si-top { display: flex; align-items: center; gap: 7px; justify-content: space-between; }
.search-item .si-name { font-size: 13px; font-weight: 500; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item .si-meta { font-size: 11px; color: var(--text2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.search-item .si-vendor { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: var(--bg4); font-weight: 600; }
.search-item .si-nocoords { font-size: 9px; padding: 1px 5px; border-radius: 4px; background: rgba(255,193,7,0.15); color: #ffc107; font-weight: 600; text-transform: uppercase; }
.search-item .si-extra { display: flex; gap: 8px; align-items: center; margin-top: 1px; }
.search-item .si-cuit { font-size: 10px; color: var(--text3); font-variant-numeric: tabular-nums; }
.search-item .si-cuit-hit { font-size: 10px; color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 3px; }
.search-item .si-fant { font-size: 10px; color: var(--text3); font-style: italic; }
.search-empty { padding: 18px; text-align: center; color: var(--text3); font-size: 12px; }

/* Hoja de ruta */
.route-stat { flex: 1; background: var(--bg3); border-radius: 7px; padding: 8px 10px; text-align: center; }
.route-stat .label { font-size: 10px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.05em; }
.route-stat .value { font-size: 18px; font-weight: 600; color: var(--text); margin-top: 2px; }
.route-stat.danger .value { color: #ff6b6b; }

.route-group { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.route-group-header { padding: 9px 12px; background: var(--bg3); display: flex; align-items: center; justify-content: space-between; }
.route-group-header .loc-name { font-weight: 600; font-size: 13px; }
.route-group-header .loc-count { font-size: 11px; color: var(--text2); margin-left: 6px; }
.route-item { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; gap: 6px; align-items: stretch; }

/* v8.2.5: drag&drop estilo cola de Spotify */
.route-drag-handle {
  display: flex; align-items: center; justify-content: center;
  width: 22px; flex-shrink: 0; cursor: grab;
  color: var(--text3); font-size: 16px; line-height: 1;
  user-select: none; opacity: 0.5; transition: opacity 0.15s;
  touch-action: none; /* v8.2.6: evita que el browser secuestre el touch para scroll */
}
.route-item:hover .route-drag-handle { opacity: 1; }
.route-drag-handle:active { cursor: grabbing; }
/* v8.2.6: clases que aplica SortableJS */
.sortable-ghost {
  opacity: 0.35; background: var(--bg3);
}
.sortable-chosen {
  background: rgba(42,143,255,0.06);
}
.sortable-fallback {
  /* lo que se ve mientras arrastrás (clon del elemento) */
  opacity: 0.85; background: var(--bg2); box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  border-radius: var(--radius);
}
.route-custom-badge {
  display: inline-block; font-size: 9.5px; font-weight: 600;
  padding: 1px 7px; border-radius: 8px; margin-left: 6px;
  background: rgba(42,143,255,0.15); color: var(--accent);
  vertical-align: middle;
}

/* ── v8.2.7: impresión de hoja de ruta ───────────────────────────── */
.print-route-modal {
  max-width: 880px !important; max-height: 92vh; width: 96vw;
  display: flex; flex-direction: column;
}
.print-route-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.print-route-help { font-size: 11px; color: var(--text2); margin-bottom: 10px; }
.print-route-preview {
  flex: 1; overflow-y: auto;
  background: white; color: #111;
  padding: 18px 22px; border-radius: 6px;
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
}
.print-route-preview .pr-header {
  border-bottom: 2px solid #111; padding-bottom: 8px; margin-bottom: 10px;
}
.print-route-preview .pr-title { font-size: 15px; font-weight: 700; margin: 0 0 3px; }
.print-route-preview .pr-meta { font-size: 10px; color: #555; }
/* v8.2.19: pr-body en 2 columnas tanto en pantalla como en print */
.print-route-preview .pr-body {
  column-count: 2; column-gap: 8mm;
}
/* pr-loc como hijo directo de pr-body → puede usar column-span: all */
.print-route-preview .pr-loc {
  column-span: all;
  font-size: 11px; font-weight: 700; background: #eee;
  padding: 3px 7px; margin: 10px 0 2px; border-left: 3px solid #888;
  break-after: avoid;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.print-route-preview .pr-table {
  width: 100%; border-collapse: collapse; margin-bottom: 4px;
  font-size: 10px; table-layout: fixed;
  break-inside: auto;
}
.print-route-preview col.col-client { width: auto; }
.print-route-preview col.col-check { width: 54px; }
.print-route-preview th, .print-route-preview td {
  border: 1px solid #bbb; padding: 3px 5px; vertical-align: top;
}
.print-route-preview thead { break-inside: avoid; break-after: avoid; }
.print-route-preview th {
  background: #f0f0f0; font-weight: 700; text-align: left;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 5px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.print-route-preview td.pr-check {
  text-align: center; white-space: nowrap; font-size: 10px; vertical-align: middle;
}
/* v8.2.22: tabs en el modal de reportes */
.rep-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin: 0 0 12px; flex-shrink: 0; }
.rep-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 16px; font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; color: var(--text2); margin-bottom: -1px; transition: color 0.15s;
}
.rep-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.rep-tab:hover:not(.active) { color: var(--text); }
/* ── v8.4.0: PLANES DE ACCIÓN ─────────────────────────────────── */
#action-plans-view { display: none; flex: 1; overflow-y: auto; min-height: 0; background: var(--bg); }
#action-plans-view.active { display: flex; flex-direction: column; }
body.mode-action-plans #map, body.mode-action-plans #legend,
body.mode-action-plans #sidebar, body.mode-action-plans #filterbar { display: none !important; }
.ap-wrap { max-width: var(--shell-max); margin: 0 auto; padding: 20px var(--shell-pad); width: 100%; }
.ap-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 12px; }
.ap-header h2 { font-size: 18px; font-weight: 600; margin-bottom: 3px; }
.ap-sub { font-size: 12px; color: var(--text2); }
/* Tabs */
.ap-tabs { display: flex; gap: 5px; margin-bottom: 14px; flex-wrap: wrap; }
.ap-tab { background: none; border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; color: var(--text2); white-space: nowrap; }
.ap-tab.active { background: var(--accent); border-color: var(--accent); color: #071a2b; }
/* Cards */
.ap-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.ap-card.status-closed { opacity: .65; }
.ap-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.ap-vendor { font-size: 14px; font-weight: 600; }
.ap-period { font-size: 12px; color: var(--text2); margin-top: 2px; }
.ap-badges { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex-shrink: 0; }
.ap-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.ap-badge-active   { background: rgba(0,230,118,.13); color: #00c97a; }
.ap-badge-draft    { background: rgba(255,255,255,.07); color: var(--text3); border: 1px solid var(--border); }
.ap-badge-closed   { background: rgba(255,255,255,.07); color: var(--text3); border: 1px solid var(--border); }
/* Progress */
.ap-progress { height: 6px; border-radius: 3px; background: var(--border); margin: 8px 0 4px; overflow: hidden; }
.ap-progress-fill { height: 100%; border-radius: 3px; background: #00c97a; transition: width .3s; }
.ap-prog-label { display: flex; justify-content: space-between; font-size: 11px; color: var(--text2); margin-bottom: 10px; }
/* Items / checklist */
.ap-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.ap-item:last-child { border: none; padding-bottom: 0; }
.ap-chk { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--border2); background: var(--bg3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; cursor: pointer; }
.ap-chk.done { background: rgba(0,201,122,.15); border-color: #00c97a; }
.ap-item-text { flex: 1; }
.ap-item-text.done { text-decoration: line-through; color: var(--text3); }
/* Notes sections */
.ap-notes-section { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.ap-notes-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text2); margin-bottom: 5px; }
.ap-notes-text { font-size: 12px; color: var(--text2); line-height: 1.6; font-style: italic; background: var(--bg3); border-radius: 7px; padding: 8px 10px; }
/* Footer card */
.ap-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 8px; }
.ap-results { display: flex; gap: 14px; font-size: 12px; color: var(--text2); }
.ap-results span b { color: var(--text); }
.ap-actions { display: flex; gap: 5px; flex-shrink: 0; }
.ap-btn { background: none; border: 1px solid var(--border2); border-radius: 7px; padding: 4px 10px; font-size: 11px; color: var(--text2); cursor: pointer; font-family: inherit; }
.ap-btn:hover { border-color: var(--accent); color: var(--accent); }
.ap-btn.danger:hover { border-color: #ff6b6b; color: #ff6b6b; }
/* Form: dynamic items list */
.ap-form-item { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.ap-form-item input { flex: 1; }
.ap-form-item button { background: none; border: none; cursor: pointer; color: var(--text3); font-size: 16px; padding: 0 4px; }
.ap-form-item button:hover { color: #ff6b6b; }
.ap-add-item-btn { background: none; border: 1px dashed var(--border2); border-radius: 7px; padding: 5px 12px; font-size: 12px; color: var(--text2); cursor: pointer; font-family: inherit; width: 100%; margin-top: 4px; }
.ap-add-item-btn:hover { border-color: var(--accent); color: var(--accent); }
/* Vendedor: plan destacado en dashboard */
.dash-plan-card { background: var(--bg2); border: 1px solid var(--border); border-left: 3px solid #00c97a; border-radius: 0 12px 12px 0; padding: 12px 14px; margin-bottom: 12px; cursor: pointer; }
.dash-plan-card:hover { border-left-color: var(--accent); }
.ap-empty { text-align: center; padding: 40px 20px; color: var(--text3); font-size: 13px; font-style: italic; }
/* ── FIN CSS PLANES DE ACCIÓN ──────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   CAMPAÑAS — split panel v8.7.11
   ══════════════════════════════════════════════════════════════ */
#campaigns-view, #envios-view { display: none; flex: 1; overflow: hidden; min-height: 0; background: var(--bg); }
#campaigns-view.active, #envios-view.active { display: flex; flex-direction: column; }
body.mode-envios #map, body.mode-envios #legend,
body.mode-envios #sidebar, body.mode-envios #filterbar { display: none !important; }
.camps-split { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; flex: 1; overflow: hidden; height: 100%; }
.camps-sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--border); overflow: hidden; background: var(--bg); }
.camps-sidebar-hd { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 14px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 10px; }
.camps-sidebar-title { font-size: 17px; font-weight: 600; margin: 0 0 2px; color: var(--text); }
.camps-sub { font-size: 11px; color: var(--text3); }
.camps-new-btn { padding: 6px 12px; font-size: 12px; white-space: nowrap; flex-shrink: 0; }
.camps-tabs { display: flex; gap: 4px; padding: 8px 10px; flex-wrap: wrap; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.camp-tab { background: none; border: 1px solid var(--border); border-radius: 20px; padding: 4px 10px; font-size: 11px; font-weight: 500; cursor: pointer; font-family: inherit; color: var(--text2); white-space: nowrap; transition: background .12s, border-color .12s; }
.camp-tab.active { background: var(--accent); border-color: var(--accent); color: #071a2b; font-weight: 600; }
.camps-list-body { flex: 1; overflow-y: auto; padding: 8px; }
.camps-empty { text-align: center; padding: 40px 16px; color: var(--text3); font-size: 12px; font-style: italic; }
.camp-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 13px; margin-bottom: 8px; transition: border-color .15s, box-shadow .15s; cursor: pointer; }
.camp-card:hover { border-color: var(--border2); box-shadow: 0 2px 12px rgba(0,0,0,.18); }
.camp-card.status-draft { opacity: .75; }
.camp-card.status-finished { opacity: .55; }
.camp-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 5px; }
.camp-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; line-height: 1.35; }
.camp-offer { font-size: 11px; color: var(--text2); line-height: 1.45; }
.camp-badges { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; flex-shrink: 0; }
.cbadge { display: inline-block; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 20px; white-space: nowrap; letter-spacing: .02em; }
.cbadge-active   { background: rgba(0,230,118,.13); color: #00c97a; }
.cbadge-draft    { background: rgba(255,255,255,.07); color: var(--text3); border: 1px solid var(--border); }
.cbadge-paused   { background: rgba(255,193,7,.12); color: #ffc107; }
.cbadge-finished { background: rgba(255,107,107,.1); color: #ff6b6b; }
.cbadge-general  { background: rgba(42,143,255,.1); color: #4a9fd5; }
.cbadge-seasonal { background: rgba(180,125,224,.12); color: #b47de0; }
.camp-meta { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; }
.camp-chip { font-size: 10px; padding: 2px 7px; border-radius: 10px; background: var(--bg3); border: 1px solid var(--border); color: var(--text3); }
.camp-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); gap: 6px; flex-wrap: wrap; }
.camp-stats { display: flex; align-items: center; gap: 8px; min-width: 0; }
.camp-audience { font-size: 11px; color: var(--text3); white-space: nowrap; }
.camp-audience b { color: var(--text2); }
.camp-actions { display: flex; gap: 4px; flex-shrink: 0; flex-wrap: wrap; }
.camp-btn { background: none; border: 1px solid var(--border2); border-radius: 6px; padding: 3px 8px; font-size: 10px; color: var(--text2); cursor: pointer; font-family: inherit; white-space: nowrap; transition: border-color .12s, color .12s; }
.camp-btn:hover { border-color: var(--accent); color: var(--accent); }
.camp-btn.danger { color: #ff6b6b; border-color: rgba(255,107,107,.3); }
.camp-btn.danger:hover { background: rgba(255,107,107,.08); }
.camp-btn.camp-btn-email { border-color: #4a9fd5; color: #4a9fd5; }
.camp-btn.camp-btn-email:hover { background: rgba(74,159,213,.1); }
.camp-ncontacts { background: none; border: none; cursor: pointer; font-size: 11px; color: var(--text3); font-family: inherit; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.camp-ncontacts:hover { opacity: .7; }
.camps-editor { display: flex; flex-direction: column; overflow: hidden; background: var(--bg); height: 100%; }
.camps-editor-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--text3); text-align: center; line-height: 1.6; font-size: 13px; }
.ce-empty-icon { width: 48px; height: 48px; opacity: .1; }
.camps-editor-form { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.camps-ef-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg2); gap: 12px; }
.camps-ef-head h3 { font-size: 15px; font-weight: 600; margin: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.camps-ef-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.camps-ef-delete { padding: 6px 9px !important; }
.camps-ef-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.camp-type-pills { display: flex; gap: 8px; margin-bottom: 4px; }
.camp-type-pill { flex: 1; padding: 10px 8px; border: 1px solid var(--border2); border-radius: 9px; cursor: pointer; text-align: center; background: none; font-family: inherit; color: var(--text2); font-size: 12px; transition: border-color .15s, background .15s, color .15s; }
.camp-type-pill.active { border-color: var(--accent); color: var(--accent); background: rgba(0,230,118,.07); }
.camp-type-pill .ctp-icon { font-size: 18px; margin-bottom: 4px; display: flex; justify-content: center; }
.camp-type-pill .ctp-sub { font-size: 10px; color: var(--text3); margin-top: 2px; }
/* v8.7.12: Tipo de contenido (Campaña / Lista de precios) — accent celeste para diferenciar de Tipo de campaña */
.camp-content-pills { display: flex; gap: 8px; margin-bottom: 4px; }
.camp-content-pill { flex: 1; padding: 10px 8px; border: 1px solid var(--border2); border-radius: 9px; cursor: pointer; text-align: center; background: none; font-family: inherit; color: var(--text2); font-size: 12px; transition: border-color .15s, background .15s, color .15s; }
.camp-content-pill.active { border-color: #4a9fd5; color: #4a9fd5; background: rgba(74,159,213,.08); }
.camp-content-pill .ctp-icon { font-size: 18px; margin-bottom: 4px; display: flex; justify-content: center; }
.camp-content-pill .ctp-sub { font-size: 10px; color: var(--text3); margin-top: 2px; }
.cseg-wrap { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.cseg-chip { padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border2); font-size: 11px; cursor: pointer; font-family: inherit; color: var(--text2); background: none; transition: background .12s, border-color .12s; }
.cseg-chip.on { background: rgba(42,143,255,.1); border-color: #4a9fd5; color: #4a9fd5; }
.camp-preview { background: var(--bg3); border: 1px solid var(--border); border-radius: 9px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.camp-preview-num { font-size: 26px; font-weight: 700; }
.camp-bl-pills { display: flex; gap: 8px; margin-bottom: 6px; }
.camp-bl-pill { flex: 1; padding: 10px 8px; border: 1.5px solid var(--border2); border-radius: 9px; cursor: pointer; text-align: center; background: none; font-family: inherit; color: var(--text2); font-size: 12px; transition: border-color .15s, background .15s, color .15s; }
.camp-bl-pill.active { border-color: var(--accent); color: var(--accent); background: rgba(0,230,118,.07); }
.camp-bl-pill .ctp-icon { font-size: 20px; margin-bottom: 4px; display: flex; justify-content: center; }
.camp-bl-pill .ctp-sub { font-size: 10px; color: var(--text3); margin-top: 2px; }
.camp-sender-badge { display: block; font-size: 11px; color: var(--text2); background: var(--bg3); border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; margin-top: 6px; line-height: 1.5; }
.camp-sender-badge strong { color: var(--text); }
.camp-email-badge { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; flex-shrink: 0; }
.cem-ok  { font-size: 10px; padding: 2px 7px; border-radius: 10px; background: rgba(0,230,118,.12); color: var(--accent); border: 1px solid rgba(0,230,118,.25); white-space: nowrap; }
.cem-skip { font-size: 10px; padding: 2px 7px; border-radius: 10px; background: rgba(255,120,60,.1); color: #ff7842; border: 1px solid rgba(255,120,60,.25); white-space: nowrap; }
.camp-section-sep { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; padding: 10px 0 6px; border-top: 1px solid var(--border); margin-top: 6px; }
/* Quill editor dark-mode override */
.camp-quill-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg2); }
.camp-quill-wrap .ql-toolbar.ql-snow { border: none; border-bottom: 1px solid var(--border); background: var(--bg3); padding: 7px 10px; }
.camp-quill-wrap .ql-container.ql-snow { border: none; font-family: 'Inter',Arial,sans-serif; font-size: 14px; color: var(--text); background: var(--bg2); min-height: 180px; }
.camp-quill-wrap .ql-editor { min-height: 180px; padding: 13px 15px; color: var(--text); line-height: 1.65; }
.camp-quill-wrap .ql-editor.ql-blank::before { color: var(--text3); font-style: normal; font-size: 13px; }
.camp-quill-wrap .ql-toolbar .ql-stroke { stroke: var(--text2); }
.camp-quill-wrap .ql-toolbar .ql-fill  { fill:   var(--text2); }
.camp-quill-wrap .ql-toolbar .ql-picker-label { color: var(--text2); border-color: var(--border2); background: var(--bg3); }
.camp-quill-wrap .ql-toolbar button:hover .ql-stroke,
.camp-quill-wrap .ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent); }
.camp-quill-wrap .ql-toolbar button:hover .ql-fill,
.camp-quill-wrap .ql-toolbar button.ql-active .ql-fill  { fill:   var(--accent); }
.camp-quill-wrap .ql-picker-options { background: var(--bg2); border: 1px solid var(--border) !important; border-radius: 7px; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.camp-quill-wrap .ql-picker-item { color: var(--text2); }
.camp-quill-wrap .ql-picker-item:hover, .camp-quill-wrap .ql-picker-item.ql-selected { color: var(--text); }
.camp-quill-wrap .ql-tooltip { background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: 7px; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.camp-quill-wrap .ql-tooltip input[type=text] { background: var(--bg3); border: 1px solid var(--border2); color: var(--text); border-radius: 5px; }
.camp-quill-wrap .ql-editor blockquote { border-left: 3px solid var(--accent); padding-left: 12px; color: var(--text2); }
/* FIN CSS CAMPAÑAS v8.7.11 */

/* ══════════════════════════════════════════════════════════════
   ENVÍOS — wrapper con tabs (Campañas / Comunicados)  v8.7.13
   ══════════════════════════════════════════════════════════════ */
.env-tabs-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg);
}
.env-tabs-bar-side-btn {
  background: none; border: none; color: var(--text3); font-size: 12px; font-weight: 600;
  padding: 7px 10px; margin-bottom: 8px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; font-family: 'Inter', sans-serif;
  transition: background 0.15s, color 0.15s;
}
.env-tabs-bar-side-btn:hover { background: var(--bg3); color: var(--text); }
.env-tabs { display: flex; gap: 4px; }
/* v8.7.38: título único de la vista Envíos — reemplaza el switch Campañas/Comunicados
   (Etapa 2 de unificación: ahora es una sola lista, no hace falta elegir pestaña) */
.env-tabs-title {
  display: flex; align-items: center;
  font-size: 15px; font-weight: 700; color: var(--text);
  padding-bottom: 10px;
}

.supp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 4px; border-bottom: 1px solid var(--border);
}
.supp-row:last-child { border-bottom: none; }
.supp-row-info { min-width: 0; }
.supp-row-email { font-size: 13px; font-weight: 600; color: var(--text); word-break: break-all; }
.supp-row-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
.supp-row-empty { font-size: 12px; color: var(--text3); text-align: center; padding: 24px 0; }

/* ── Administrar Listas de correo (mailing_groups) — Fase A roadmap ── */
.mlists-split {
  display: grid; grid-template-columns: 220px 1fr; gap: 0;
  border: 1px solid var(--border2); border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  height: 60vh;
  min-height: 380px;
  max-height: 75vh;
}
.mlists-col { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.mlists-col-left { border-right: 1px solid var(--border2); background: var(--bg3); }
.mlists-col-right { background: var(--bg2); }
.mlists-col-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text3); border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
}
.mlists-add-btn, .mlists-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 7px; border: none; background: none;
  color: var(--text2); cursor: pointer; transition: background .15s var(--ease-ios), color .15s;
}
.mlists-add-btn:hover, .mlists-icon-btn:hover { background: var(--bg-surface-hover, var(--bg3)); color: var(--text); }
.mlists-icon-btn-danger:hover { color: #ff6b6b; background: rgba(255,107,107,.1); }
.mlists-list-body { flex: 1; overflow-y: auto; padding: 6px; }
.mlists-item {
  padding: 9px 10px; border-radius: 8px; cursor: pointer; font-size: 13px;
  color: var(--text2); transition: background .15s var(--ease-ios), color .15s;
  margin-bottom: 2px;
}
.mlists-item:hover { background: var(--bg3); color: var(--text); }
.mlists-item.active { background: rgba(42,143,255,.12); color: #4a9fd5; font-weight: 600; }
.mlists-item-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlists-empty {
  font-size: 11.5px; color: var(--text3); font-style: italic; text-align: center; padding: 18px 10px; line-height: 1.5;
}
.mlists-members-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; color: var(--text3); font-size: 12.5px; text-align: center; padding: 20px;
}
.mlists-members-empty p { margin: 0; }
.mlists-members-body { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; }
.mlists-members-count { 
  font-size: 11px; color: var(--text3); padding: 8px 12px 6px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.mlists-filter-btn {
  font-size: 10.5px; padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border2);
  background: transparent; color: var(--text3); cursor: pointer; transition: all .15s;
  font-family: inherit; white-space: nowrap;
}
.mlists-filter-btn:hover { border-color: var(--text2); color: var(--text2); }
.mlists-filter-btn.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.mlists-search-input {
  width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border2);
  border-radius: 7px; padding: 5px 9px; color: var(--text); font-size: 12px;
  font-family: inherit;
}
.mlists-search-input:focus { outline: none; border-color: var(--border-focus, #007AFF); }
.mlists-assign-result.active { background: rgba(42,143,255,.15); }
.modal-close-x {
  position: absolute; top: 10px; right: 12px; background: none; border: none;
  color: var(--text3); font-size: 22px; cursor: pointer; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  transition: background .12s;
}
.modal-close-x:hover { background: rgba(255,255,255,.08); color: var(--text); }
.mlists-section-hd {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text3); padding: 10px 12px 4px; flex-shrink: 0;
  border-top: 1px solid var(--border2); margin-top: 4px;
}
.mlists-members-list { flex: 1; overflow-y: auto; padding: 6px 12px 10px; }
/* v8.7.33 — panel de vinculación de suscriptores externos a fichas existentes */
.mlists-assign-panel {
  margin: 2px 12px 8px; padding: 10px; background: var(--bg3);
  border-radius: 8px; border: 1px solid var(--border2);
}
.mlists-assign-input {
  width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--border2);
  border-radius: 7px; padding: 6px 9px; color: var(--text); font-size: 12.5px;
  font-family: inherit; margin-bottom: 4px;
}
.mlists-assign-input:focus { outline: none; border-color: var(--border-focus, #007AFF); }
.mlists-assign-results { max-height: 140px; overflow-y: auto; }
.mlists-assign-result {
  padding: 7px 8px; border-radius: 6px; cursor: pointer; font-size: 12px;
  transition: background .12s;
}
.mlists-assign-result:hover { background: rgba(42,143,255,.1); }
.mlists-member-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 4px; border-bottom: 1px solid var(--border);
}
.mlists-member-row:last-child { border-bottom: none; }
.mlists-member-info { min-width: 0; }
.mlists-member-name { font-size: 12.5px; font-weight: 600; color: var(--text); }
.mlists-member-meta { font-size: 10.5px; color: var(--text3); margin-top: 1px; }
.mlists-ext-badge {
  display: inline-block; font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: #b47de0; background: rgba(180,125,224,.12);
  border-radius: 20px; padding: 1px 6px; margin-left: 5px; vertical-align: 1px;
}
.mlists-remove-btn {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; border: none;
  background: none; color: var(--text3); cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.mlists-remove-btn:hover { background: rgba(255,107,107,.12); color: #ff6b6b; }
.mlists-new-row { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--border2); flex-shrink: 0; }
.mlists-new-row input {
  flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--border2); border-radius: 7px;
  padding: 6px 9px; color: var(--text); font-size: 12.5px; font-family: inherit;
}
.mlists-new-row input:focus { outline: none; border-color: var(--border-focus, #007AFF); }
.mlists-inline-ok, .mlists-inline-cancel {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease-ios);
}
.mlists-inline-ok { background: rgba(0,230,118,.12); color: #00e676; }
.mlists-inline-ok:hover { background: rgba(0,230,118,.2); }
.mlists-inline-cancel { background: var(--bg3); color: var(--text3); }
.mlists-inline-cancel:hover { background: var(--bg-surface-hover, var(--bg3)); color: var(--text); }
@media (max-width: 640px) {
  .mlists-split { grid-template-columns: 1fr; max-height: none; }
  .mlists-col-left { border-right: none; border-bottom: 1px solid var(--border2); max-height: 180px; }
}
.env-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 10px 16px 11px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; color: var(--text3);
  transition: color .15s, border-color .15s;
  display: inline-flex; align-items: center;
  margin-bottom: -1px; /* solapa el border-bottom de la barra */
}
.env-tab:hover { color: var(--text2); }
.env-tab.active { color: var(--text); border-bottom-color: var(--accent); }

.env-pane { flex: 1; display: none; overflow: hidden; min-height: 0; }
.env-pane.active { display: flex; flex-direction: column; }
/* el #campaigns-view interno ahora vive dentro de un pane: forzar visible */
.env-pane.active .env-inner-view { display: flex !important; flex-direction: column; flex: 1; }

/* Pills de audiencia (Todos / Por rubro / Lista guardada) */
.comm-aud-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.comm-aud-pill {
  flex: 1; min-width: 110px;
  padding: 9px 12px; border: 1px solid var(--border2); border-radius: 9px;
  cursor: pointer; background: none; font-family: inherit;
  color: var(--text2); font-size: 12px; font-weight: 500;
  transition: border-color .15s, background .15s, color .15s;
  display: inline-flex; align-items: center; justify-content: center;
}
.comm-aud-pill.active { border-color: #4a9fd5; color: #4a9fd5; background: rgba(74,159,213,.08); }

/* Selector de archivo de biblioteca */
.comm-file-select {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius); color: var(--text); font-family: inherit; font-size: 13px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
}
.comm-file-select:focus { outline: none; border-color: var(--accent); }

/* Búsqueda manual + dropdown sugerencias */
.comm-manual-wrap { position: relative; }
.comm-manual-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 240px; overflow-y: auto;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4);
  z-index: 50;
}
.comm-manual-item {
  padding: 8px 12px; font-size: 12px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.comm-manual-item:last-child { border-bottom: none; }
.comm-manual-item:hover { background: var(--bg3); }
/* v8.7.15: resaltado por navegación de teclado (↑/↓) */
.comm-manual-item.cmi-highlight { background: var(--bg3); box-shadow: inset 2px 0 0 var(--accent); }
.comm-manual-item-name { color: var(--text); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-manual-item-email { color: var(--text3); font-size: 11px; flex-shrink: 0; }
.comm-manual-empty { padding: 12px; text-align: center; color: var(--text3); font-size: 11.5px; font-style: italic; }
/* v8.7.14: ítem especial "agregar email suelto" — destacado con acento */
.comm-manual-item-addemail { background: rgba(74,159,213,.06); }
.comm-manual-item-addemail:hover { background: rgba(74,159,213,.12); }

.comm-manual-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; min-height: 4px; }
.comm-manual-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(74,159,213,.1); color: #4a9fd5;
  border: 1px solid rgba(74,159,213,.3); border-radius: 16px;
  padding: 3px 4px 3px 10px; font-size: 11px; font-weight: 500;
}
/* v8.7.14: chip de email suelto (sin prospect) — tono violeta para diferenciar
   visualmente de los chips de clientes existentes (celestes) */
.comm-manual-chip-email {
  background: rgba(180,125,224,.1); color: #b47de0;
  border-color: rgba(180,125,224,.3);
}
.comm-manual-chip-x {
  background: none; border: none; cursor: pointer; color: inherit;
  padding: 0; width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; opacity: .85;
}
.comm-manual-chip-x:hover { background: rgba(255,255,255,.12); opacity: 1; }
/* v8.7.14: 4 pills de audiencia en vez de 3 — permitir wrap en pantallas angostas */
.comm-aud-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.comm-aud-pill { min-width: 130px; }
/* FIN CSS ENVÍOS v8.7.14 */
#btn-calc-objetivo {
  background: none; border: 1px solid var(--border2); border-radius: 6px;
  color: var(--text2); cursor: pointer; font-size: 11px; padding: 3px 8px;
  font-family: inherit; white-space: nowrap; flex-shrink: 0;
}
#btn-calc-objetivo:hover { border-color: var(--accent); color: var(--accent); }
#hist-route-banner {
  display: none; position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
  z-index: 1100; background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 10px; padding: 8px 14px; align-items: center; gap: 12px;
  font-size: 13px; box-shadow: 0 4px 20px rgba(0,0,0,.4); white-space: nowrap;
}
#hist-route-banner.active { display: flex; }
.hrb-stat { font-weight: 600; font-size: 12px; }
#btn-hist-exit { background: none; border: 1px solid var(--border2); border-radius: 6px; padding: 3px 10px; color: var(--text); cursor: pointer; font-size: 12px; font-family: inherit; }
#btn-hist-exit:hover { background: var(--bg3); }
#saved-views-bar {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  padding: 6px 10px; border-bottom: 1px solid var(--border); min-height: 34px;
}
#saved-views-bar:empty { display: none; }
.sv-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg3); border: 1px solid var(--border2); border-radius: 20px;
  padding: 3px 7px 3px 10px; font-size: 11px; color: var(--text2);
  cursor: pointer; font-family: inherit; transition: all .12s; white-space: nowrap;
}
.sv-chip:hover { border-color: var(--accent); color: var(--text); }
.sv-chip.sv-active { border-color: var(--accent); background: rgba(0,230,118,.1); color: var(--accent); }
.sv-del { font-size: 13px; line-height: 1; opacity: .5; margin-left: 2px; }
.sv-del:hover { opacity: 1; color: #ff6b6b; }
#btn-save-view {
  background: none; border: none; font-size: 15px; cursor: pointer;
  color: var(--text3); padding: 3px 6px; border-radius: 5px; margin-left: auto; flex-shrink: 0;
}
#btn-save-view:hover { color: var(--accent); background: var(--bg3); }
#list-detail { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.dp-tabs { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; overflow-x: auto; }
.dp-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 7px 13px; font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; color: var(--text2); margin-bottom: -1px; white-space: nowrap; transition: color .15s;
}
.dp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.dp-tab:hover:not(.active) { color: var(--text); }
.dp-tab-body { flex: 1; overflow-y: auto; min-height: 0; padding: 12px 14px 20px; }
.dp-pane { display: none; }
.dp-pane.active { display: block; }
.dp-info-row { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--text2); margin-bottom: 8px; }
.dp-info-icon { font-size: 13px; flex-shrink: 0; width: 18px; text-align: center; }
/* v8.3.2: badge de tipo de nota */
.note-type-badge { display: inline-block; font-size: 10px; font-weight: 600; border-radius: 4px; padding: 1px 6px; margin-right: 4px; vertical-align: middle; text-transform: uppercase; letter-spacing: .04em; }
.note-type-badge.com { background: rgba(76,175,80,.15); color: #4caf50; }
.note-type-badge.adm { background: rgba(42,143,255,.12); color: #2a8fff; }
.note-type-badge.gen { background: rgba(255,255,255,.07); color: var(--text3); }
.note-type-badge.ale { background: rgba(255,107,107,.15); color: #ff6b6b; }
.note-type-chips { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.ntchip { background: var(--bg4); border: 1px solid var(--border2); border-radius: 6px; padding: 5px 10px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--text2); transition: all .12s; }
.ntchip.active { border-color: var(--accent); color: var(--accent); background: rgba(0,230,118,.08); }
/* v8.3.1: tarjetas de notas en la tab Notas */
.note-card {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 12px; margin-bottom: 8px;
}
.note-card.note-pinned {
  border-color: var(--accent); background: rgba(0,230,118,0.04);
}
.note-card-text { font-size: 13px; color: var(--text); line-height: 1.6; margin-bottom: 7px; white-space: pre-wrap; word-break: break-word; }
.note-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.note-card-meta { font-size: 11px; color: var(--text3); white-space: nowrap; }
.note-card-actions { display: flex; gap: 2px; flex-shrink: 0; }
.note-btn { background: none; border: none; cursor: pointer; padding: 3px 6px; border-radius: 5px; font-size: 13px; opacity: 0.55; transition: opacity 0.12s; }
.note-btn:hover { opacity: 1; background: var(--bg4); }
/* Área de nueva nota */
#note-add-form textarea {
  width: 100%; background: transparent; border: none; color: var(--text);
  font-size: 13px; font-family: inherit; outline: none; resize: vertical; min-height: 72px;
}
#notes-pinned-header {
  font-size: 10px; color: var(--accent); font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 6px;
}
.sale-visit-option {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); margin-bottom: 6px; transition: background 0.12s;
}
.sale-visit-option:hover { background: var(--bg3); }
.sale-visit-option input[type=radio] { margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); }
.sale-visit-option.selected { border-color: var(--accent); background: rgba(0,230,118,0.06); }
/* ══ HELPERS DE IMPRESIÓN: siempre ocultos en pantalla ══ */
#hist-print-helper,
#reports-print-helper,
#route-print-helper { display: none; }

/* ══════════════════════════════════════════════════════════════
   @media print UNIFICADO — v8.6.8
   Patrón definitivo para los 3 escenarios de impresión:

   PROBLEMA ANTERIOR: visibility:hidden mantenía el espacio de layout de
   #app{height:100vh}. El helper (appendeado AL FINAL del body) quedaba
   empujado a la pág 2+, resultando en páginas negras o en blanco.

   SOLUCIÓN: display:none en TODOS los siblings del helper (elimina el
   espacio del layout), display:block !important solo en el helper.
   html + body con background:white garantizan fondo limpio.
   ══════════════════════════════════════════════════════════════ */
@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body { background: white !important; color: #111 !important; }

  /* ── HOJA DE RUTA ─────────────────────────────────────────── */
  body.printing-route > *:not(#route-print-helper) { display: none !important; }
  body.printing-route #route-print-helper {
    display: block !important; background: white !important;
    overflow: visible !important;
  }
  body.printing-route .print-route-preview {
    overflow: visible !important; border-radius: 0 !important;
    padding: 12mm 12mm 8mm !important;
    font-size: 8.5px !important; background: white !important;
    height: auto !important; flex: none !important;
  }
  body.printing-route .print-route-preview .pr-body { column-fill: auto; column-gap: 6mm; }
  body.printing-route .print-route-preview .pr-title { font-size: 13px !important; }
  body.printing-route .print-route-preview .pr-loc { font-size: 9.5px !important; margin: 6px 0 1px !important; }
  body.printing-route .print-route-preview .pr-table { font-size: 8px !important; }
  body.printing-route .print-route-preview th { font-size: 7.5px !important; }
  body.printing-route .print-route-preview th,
  body.printing-route .print-route-preview td { padding: 2px 4px !important; }
  body.printing-route .print-route-preview col.col-check { width: 44px !important; }
  body.printing-route .print-route-preview td.pr-check { font-size: 9px !important; }
  body.printing-route .print-route-preview .pr-row-name { font-size: 8px !important; }
  body.printing-route .print-route-preview .pr-row-addr,
  body.printing-route .print-route-preview .pr-row-contact { font-size: 7.5px !important; }
  body.printing-route .print-route-preview .pr-row-notes { height: 9px !important; }
  .print-route-toolbar, .print-route-help, .modal-handle { display: none !important; }

  /* ── HISTORIAL DE VISITAS ─────────────────────────────────── */
  body.printing-hist > *:not(#hist-print-helper) { display: none !important; }
  body.printing-hist #hist-print-helper {
    display: block !important; background: white !important; color: #111 !important;
    padding: 12mm; box-sizing: border-box; overflow: visible !important;
    font-family: 'Inter', system-ui, sans-serif;
  }
  body.printing-hist #hist-print-helper .fv-header,
  body.printing-hist #hist-print-helper #hist-filters { display: none !important; }
  body.printing-hist #hist-print-helper .fv-body {
    display: block !important; overflow: visible !important;
    height: auto !important; max-height: none !important;
    padding: 0 !important; background: white !important; color: #111 !important;
  }
  body.printing-hist #hist-print-helper #hist-list {
    overflow: visible !important; height: auto !important; max-height: none !important;
  }
  body.printing-hist #hist-print-helper #hist-stats { display: grid !important; }
  body.printing-hist .route-stat {
    background: #f4f4f4 !important; border: 1px solid #ddd !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.printing-hist .route-stat .label { color: #555 !important; }
  body.printing-hist .route-stat .value { color: #111 !important; }

  /* ── REPORTES ─────────────────────────────────────────────── */
  body.printing-reports > *:not(#reports-print-helper) { display: none !important; }
  body.printing-reports #reports-print-helper {
    display: block !important; background: white !important; color: #111 !important;
    padding: 14mm; box-sizing: border-box; overflow: visible !important;
    font-family: 'Inter', system-ui, sans-serif;
  }
  body.printing-reports #reports-print-helper .fv-header { display: none !important; }
  body.printing-reports #reports-print-helper .fv-body {
    display: block !important; overflow: visible !important;
    height: auto !important; max-height: none !important;
    padding: 0 !important; background: white !important; color: #111 !important;
  }
  body.printing-reports #reports-print-helper #rep-objetivo-bar,
  body.printing-reports #reports-print-helper select { display: none !important; }
  body.printing-reports #reports-print-helper .rep-charts-grid { display: block !important; }
  body.printing-reports #reports-print-helper .rep-chart-card {
    background: #f8f8f8 !important; border: 1px solid #ddd !important;
    color: #111 !important; margin-bottom: 12px !important; break-inside: avoid !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.printing-reports #reports-print-helper .rep-chart-title { color: #333 !important; }
  body.printing-reports .route-stat {
    background: #f4f4f4 !important; border: 1px solid #ddd !important; color: #111 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  body.printing-reports .route-stat .label { color: #555 !important; }
  body.printing-reports .route-stat .value { color: #111 !important; }
  body.printing-reports h3 { color: #111 !important; }
}
.route-item:first-child { border-top: none; }
.route-item.done { opacity: 0.5; }
.route-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.route-item-name { font-size: 13px; font-weight: 500; flex: 1; }
.route-item-addr { font-size: 11px; color: var(--text2); }
.route-item-badges { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.route-badge { font-size: 9px; padding: 2px 6px; border-radius: 5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.route-badge.overdue { background: rgba(255,107,107,0.15); color: #ff6b6b; }
.route-badge.due { background: rgba(255,193,7,0.15); color: #ffc107; }
.route-badge.freq { background: rgba(255,255,255,0.07); color: var(--text2); }
.route-actions { display: flex; gap: 6px; margin-top: 4px; }
.route-action { flex: 1; padding: 6px 4px; font-size: 11px; border-radius: 6px; border: 1px solid; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; background: transparent; }
.route-action.visit { color: #00e676; border-color: rgba(0,230,118,0.35); }
.route-action.visit:hover { background: rgba(0,230,118,0.12); }
.route-action.resched { color: #ffc107; border-color: rgba(255,193,7,0.35); }
.route-action.resched:hover { background: rgba(255,193,7,0.12); }
.route-action.no { color: #ff6b6b; border-color: rgba(255,107,107,0.35); }
.route-action.no:hover { background: rgba(255,107,107,0.12); }
.route-action.go { color: var(--accent); border-color: rgba(42,143,255,0.35); }
.route-action.go:hover { background: rgba(42,143,255,0.12); }
.route-empty { text-align: center; color: var(--text3); padding: 30px 20px; font-size: 13px; }

/* ── MODAL (Action Sheet) ──
   v8.5.16: antes el toggle era display:none↔flex, que no se puede animar (un
   elemento con display:none no participa del layout, así que no hay "desde
   dónde" transicionar). Ahora el overlay siempre es display:flex y el
   abrir/cerrar se hace con opacity+visibility+pointer-events — eso sí es
   animable, y permite el fade del scrim + el "emerge" del modal en un solo
   gesto. visibility tiene su propia transición con delay (0s al abrir,
   0.4s al cerrar) para que el modal no intercepte clicks mientras es
   invisible, sin necesidad de pointer-events en cascada manual.
   Toda la apertura/cierre en app.js ya se hace solo con classList.add/remove
   ('open') — nunca tocan `display` — así que este cambio no requiere tocar
   ninguna línea de JS. */
.modal-overlay {
  display: flex; position: fixed; inset: 0;
  background: var(--modal-scrim);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  z-index: 2000; align-items: flex-end; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s var(--ease-ios),
              visibility 0s linear 0.4s;
}
.modal-overlay.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 0.4s var(--ease-ios),
              visibility 0s linear 0s;
}
@media (min-width: 640px) { .modal-overlay { align-items: center; } }

/* v8.5.7: sistema de diálogos propio — siempre por encima de cualquier otro modal */
#modal-confirm, #modal-alert { z-index: 2100; }
.modal {
  position: relative;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%; max-height: 92vh; overflow-y: auto; padding: 20px 20px 30px;
  /* Mobile: "emerge" desde abajo */
  transform: translateY(28px) scale(0.97); opacity: 0;
  transition: transform 0.45s var(--ease-ios),
              opacity 0.35s var(--ease-ios);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); opacity: 1; }
@media (min-width: 640px) {
  .modal { border-radius: var(--radius-lg); max-width: 430px; max-height: 88vh; }
  /* Desktop: el modal está centrado, así que en vez de "subir desde abajo"
     directamente "crece desde el centro" — más natural cuando no hay un
     borde inferior de pantalla del que emerger */
  .modal { transform: scale(0.95); }
  .modal-overlay.open .modal { transform: scale(1); }
}

/* ── MODAL VISITÉ — captura comercial (v7.12) ── */
.visit-section { margin-bottom: 16px; }
.visit-section-label {
  display: block; font-size: 11px; color: var(--text2); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px;
}
.visit-tri {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px;
}
.vtri {
  padding: 11px 6px; font-size: 12px; font-weight: 600;
  border-radius: 8px; border: 1.5px solid; background: transparent;
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all 0.15s; user-select: none;
}
.vtri-yes { color: #00e676; border-color: rgba(0,230,118,0.35); }
.vtri-yes.selected { background: rgba(0,230,118,0.18); border-color: #00e676; box-shadow: 0 0 0 1px #00e676 inset; }
.vtri-yes:hover { background: rgba(0,230,118,0.08); }
.vtri-no { color: #ff6b6b; border-color: rgba(255,107,107,0.35); }
.vtri-no.selected { background: rgba(255,107,107,0.18); border-color: #ff6b6b; box-shadow: 0 0 0 1px #ff6b6b inset; }
.vtri-no:hover { background: rgba(255,107,107,0.08); }
.vtri-na { color: var(--text3); border-color: var(--border2); }
.vtri-na.selected { background: var(--bg4); border-color: var(--text2); color: var(--text); box-shadow: 0 0 0 1px var(--text2) inset; }
.vtri-na:hover { background: var(--bg4); }
.visit-reason-select {
  margin-top: 9px; width: 100%; padding: 8px 10px;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 7px; color: var(--text); font-size: 12px;
  font-family: 'Inter', sans-serif;
}

/* ── CANAL DE GESTIÓN (v8.0.2) ── */
.visit-channel {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 5px;
}
.vchan {
  padding: 9px 4px; font-size: 11px; font-weight: 600;
  border-radius: 7px; border: 1.5px solid var(--border2);
  background: transparent; color: var(--text2);
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all 0.15s; user-select: none;
  text-align: center; white-space: nowrap;
}
.vchan:hover { background: var(--bg4); color: var(--text); }
.vchan.selected {
  background: rgba(42,143,255,0.18);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
@media (max-width: 480px) {
  .visit-channel { grid-template-columns: 1fr 1fr; }
}

/* ── PRESETS DE RE-INTENTO en "no interesó" (v7.12.1) ── */
.retry-presets { display: flex; flex-wrap: wrap; gap: 5px; }
.retry-preset {
  padding: 7px 10px; font-size: 11px; font-weight: 600;
  border-radius: 7px; border: 1px solid var(--border2);
  background: var(--bg3); color: var(--text2);
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all 0.15s; user-select: none;
}
.retry-preset:hover { background: var(--bg4); color: var(--text); }
.retry-preset.selected {
  background: rgba(42,143,255,0.15);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── CONTACTOS MÚLTIPLES (v8.0) ── */
.contact-card {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 7px;
  cursor: pointer; transition: all 0.15s;
}
.contact-card:hover { background: var(--bg4); border-color: var(--border2); }
.contact-card.is-primary {
  border-left: 3px solid #ffc107;
  background: rgba(255,193,7,0.04);
}
.contact-card .cc-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg4); display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0; color: var(--text2);
}
.contact-card.is-primary .cc-avatar { background: rgba(255,193,7,0.2); color: #ffc107; }
.contact-card .cc-body { flex: 1; min-width: 0; }
.contact-card .cc-name { font-size: 12px; font-weight: 600; color: var(--text); }
.contact-card .cc-name .cc-star { color: #ffc107; margin-right: 3px; }
/* v8.7.15: badge de opt-in de marketing junto al nombre del contacto */
.contact-card .cc-name .cc-mkt-badge { margin-left: 5px; display: inline-flex; vertical-align: -1px; opacity: .85; }
.contact-card .cc-role { font-size: 10px; color: var(--text3); margin-top: 1px; }
.contact-card .cc-meta { font-size: 11px; color: var(--text2); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 8px; }
.contact-card .cc-meta a { color: var(--accent); text-decoration: none; }
.contact-card .cc-meta a:hover { text-decoration: underline; }
.contact-card .cc-edit-hint {
  font-size: 9px; color: var(--text3); text-transform: uppercase;
  letter-spacing: 0.05em; opacity: 0; transition: opacity 0.15s;
}
.contact-card:hover .cc-edit-hint { opacity: 1; }
/* v8.0.2.2: contactos pendientes (cliente nuevo todavía sin guardar) */
.contact-card-pending {
  border-left: 3px dashed var(--accent);
  background: rgba(42,143,255,0.05);
}
.contact-card-pending::after {
  content: 'sin guardar';
  font-size: 9px; color: var(--accent); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; background: rgba(42,143,255,0.12); border-radius: 4px;
  flex-shrink: 0;
}

/* ── NOTAS TIPIFICADAS (v7.13) ── */
.note-type-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px;
}
.ntype {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 11px 6px; border-radius: 8px;
  border: 1.5px solid; background: transparent;
  cursor: pointer; font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 12px; transition: all 0.15s;
  text-align: center;
}
.ntype-icon { font-size: 18px; line-height: 1; }
.ntype small {
  font-size: 9px; font-weight: 400; color: var(--text3);
  line-height: 1.2; margin-top: 2px;
}
.ntype-com { color: #00e676; border-color: rgba(0,230,118,0.35); }
.ntype-com:hover { background: rgba(0,230,118,0.06); }
.ntype-com.selected { background: rgba(0,230,118,0.18); border-color: #00e676; box-shadow: 0 0 0 1px #00e676 inset; }
.ntype-adm { color: #ffc107; border-color: rgba(255,193,7,0.35); }
.ntype-adm:hover { background: rgba(255,193,7,0.06); }
.ntype-adm.selected { background: rgba(255,193,7,0.18); border-color: #ffc107; box-shadow: 0 0 0 1px #ffc107 inset; }
.ntype-gen { color: var(--text2); border-color: var(--border2); }
.ntype-gen:hover { background: var(--bg4); }
.ntype-gen.selected { background: var(--bg4); border-color: var(--text); color: var(--text); box-shadow: 0 0 0 1px var(--text) inset; }

/* Render parseado de notas (panel detalle) */
.notes-rendered { display: flex; flex-direction: column; gap: 5px; }
.note-line {
  padding: 6px 9px; border-radius: 6px;
  border-left: 3px solid var(--border2);
  background: rgba(255,255,255,0.025);
  font-size: 12px; line-height: 1.4;
  color: var(--text);
}
.note-line.note-com { border-left-color: #00e676; }
.note-line.note-adm { border-left-color: #ffc107; }
.note-line.note-gen { border-left-color: #9aa5b1; }
.note-line.note-other { border-left-color: var(--border2); opacity: 0.85; }
.note-line .note-meta {
  font-size: 9px; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700; margin-bottom: 3px;
  display: flex; gap: 6px;
}
.note-line .note-meta .nm-type {
  padding: 1px 5px; border-radius: 4px;
}
.note-line.note-com .nm-type { background: rgba(0,230,118,0.15); color: #00e676; }
.note-line.note-adm .nm-type { background: rgba(255,193,7,0.15); color: #ffc107; }
.note-line.note-gen .nm-type { background: var(--bg4); color: var(--text2); }
.note-line .note-meta .nm-date,
.note-line .note-meta .nm-vendor { color: var(--text3); }

/* Botón "+ Nota" pequeño */
.btn-add-note {
  font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 5px;
  background: rgba(42,143,255,0.12); color: var(--accent);
  border: 1px solid rgba(42,143,255,0.35);
  cursor: pointer; font-family: 'Inter', sans-serif;
}
.btn-add-note:hover { background: rgba(42,143,255,0.22); }

/* ── EDICIÓN INLINE EN PANEL DETALLE (v7.11.2) ── */
.modal.inline-edit {
  position: static !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  opacity: 1 !important;
  transition: none !important;
  transform: none !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2) !important;
  box-shadow: none !important;
  padding: 16px 20px !important;
  overflow: visible !important;
}
.modal.inline-edit .modal-handle { display: none !important; }
.modal.inline-edit > h3 { margin-top: 0; }
.modal.inline-edit .btn-view-on-map { display: none !important; }
#inline-edit-host { display: block; }
#inline-edit-host.empty { display: none; }
/* Cuando hay edición inline, ocultar el detail y empty */
body.inline-editing #list-detail,
body.inline-editing #list-empty { display: none !important; }
/* v8.7.36: ocultar el FAB "+ Nuevo Cliente" mientras hay una ficha en edición
   inline — antes quedaba flotando encima y al clickearlo abría el modal-prospect
   overlay VACÍO (su contenido real ya estaba movido a #inline-edit-host), lo que
   se veía como una pantalla borrosa sin ningún formulario adentro. */
body.inline-editing #fab { display: none !important; }
/* Etiqueta visual en el panel izquierdo cuando se está editando */
body.inline-editing .list-row.selected::after {
  content: " ✏️";
  font-size: 11px;
  margin-left: 4px;
}

/* Botón "Ver en mapa" en ficha (v7.11) — visible solo en modo lista */
.btn-view-on-map {
  position: absolute; top: 14px; right: 50px;
  background: rgba(42,143,255,0.12); color: var(--accent);
  border: 1px solid rgba(42,143,255,0.35); border-radius: 7px;
  padding: 5px 10px; font-size: 11px; font-weight: 600; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: background 0.15s;
}
.btn-view-on-map:hover { background: rgba(42,143,255,0.22); }
@media (max-width: 700px) {
  .btn-view-on-map { top: 16px; right: 14px; }
}

/* Acciones rápidas dentro de la ficha del cliente ── v7.9 */
.card-quick-actions {
  margin: 0 -4px 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
}
.card-quick-actions .cqa-label {
  font-size: 9px; color: var(--text3); text-transform: uppercase;
  letter-spacing: 0.08em; font-weight: 600; margin-bottom: 7px;
}
.card-quick-actions .cqa-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px;
}
.card-quick-actions .cqa-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 9px 4px; font-size: 11px; font-weight: 600;
  border-radius: 7px; border: 1px solid; background: transparent;
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: background 0.15s;
}
.card-quick-actions .cqa-btn .cqa-icon { font-size: 16px; line-height: 1; display:flex; align-items:center; justify-content:center; width:100%; height:22px; }
.card-quick-actions .cqa-btn.visit { color: #00e676; border-color: rgba(0,230,118,0.35); }
.card-quick-actions .cqa-btn.visit:hover { background: rgba(0,230,118,0.12); }
.card-quick-actions .cqa-btn.resched { color: #ffc107; border-color: rgba(255,193,7,0.35); }
.card-quick-actions .cqa-btn.resched:hover { background: rgba(255,193,7,0.12); }
.card-quick-actions .cqa-btn.sale { color: #4caf50; border-color: rgba(76,175,80,0.4); }
.card-quick-actions .cqa-btn.sale:hover { background: rgba(76,175,80,0.12); }
.card-quick-actions .cqa-btn.no { color: #ff6b6b; border-color: rgba(255,107,107,0.35); }
.card-quick-actions .cqa-btn.no:hover { background: rgba(255,107,107,0.12); }
.card-quick-actions .cqa-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Modal-prospect como PANEL LATERAL en desktop ── v7.8 / v8.3.0 tabs */
@media (min-width: 700px) {
  #modal-prospect {
    align-items: stretch;
    justify-content: flex-end;
    background: rgba(0,0,0,0.22);
  }
  #modal-prospect .modal {
    max-width: 440px; width: 440px;
    max-height: 100vh; height: 100vh;
    margin: 0; border-radius: 0;
    border-top: none; border-right: none; border-bottom: none;
    border-left: 1px solid var(--border2);
    padding: 0; /* v8.3.0: padding gestionado internamente */
    box-shadow: -8px 0 24px rgba(0,0,0,0.35);
    transform: translateX(100%);
    transition: transform 0.25s var(--ease-ios);
    display: flex; flex-direction: column; /* v8.3.0 */
  }
  #modal-prospect.open .modal { transform: translateX(0); }
  #modal-prospect .modal-handle { display: none; }
}
/* v8.3.0: estructura interna del modal-prospect con tabs */
.mp-modal-head { padding: 14px 18px 0; flex-shrink: 0; }
.mp-modal-head h3 { margin-bottom: 6px; }
#mp-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  padding: 0 18px; flex-shrink: 0; overflow-x: auto;
}
.mp-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; font-size: 12px; font-weight: 600; font-family: inherit;
  cursor: pointer; color: var(--text2); margin-bottom: -1px; white-space: nowrap;
  transition: color 0.15s;
}
.mp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.mp-tab:hover:not(.active) { color: var(--text); }
.mp-tab-body { flex: 1; overflow-y: auto; min-height: 0; padding: 14px 18px; }
.mp-pane { display: none; }
.mp-pane.active { display: block; }
/* Stats de gestión */
.mp-gestion-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
#modal-prospect .modal-actions {
  flex-shrink: 0; border-top: 1px solid var(--border);
  padding: 10px 18px; margin: 0; background: var(--bg2);
}
.modal-handle {
  width: 36px; height: 3px; background: var(--border2); border-radius: 3px; margin: 0 auto 16px;
  position: relative; cursor: grab; touch-action: none;
}
.modal-handle:active { cursor: grabbing; }
/* v8.7.50 — Fase 2 HIG: área de toque real mucho más generosa que el
   elemento visual (36x3px es imposible de agarrar con precisión en mobile) —
   el ::before es invisible pero extiende el hitbox sin cambiar cómo se ve. */
.modal-handle::before {
  content: ''; position: absolute; top: -16px; bottom: -16px; left: -40px; right: -40px;
}
.modal h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.fg { margin-bottom: 13px; }
.fg label { display: block; font-size: 10px; color: var(--text2); margin-bottom: 4px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.fg input, .fg select, .fg textarea {
  width: 100%; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 9px 12px; color: var(--text);
  font-size: 13px; font-family: 'Inter', sans-serif;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { outline: none; border-color: var(--accent); }
.fg textarea { min-height: 68px; resize: vertical; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.s-opt {
  padding: 8px 9px; border-radius: var(--radius); border: 1.5px solid var(--border2);
  cursor: pointer; text-align: center; font-size: 11px; font-weight: 600; color: var(--text2);
  transition: all 0.15s;
}
.s-opt.sel { color: white; }
.s-opt[data-v="cliente"].sel { background: var(--c-cliente); border-color: var(--c-cliente); color: #000; }
.s-opt[data-v="prospecto"].sel { background: var(--c-prospecto); border-color: var(--c-prospecto); }
.s-opt[data-v="sin_interes"].sel { background: #7e57c2; border-color: #7e57c2; }
.s-opt[data-v="cerrada"].sel { background: #000; border-color: #000; }
.s-opt[data-v="sin_visitar"].sel { background: #9e9e9e; border-color: #9e9e9e; color: #000; }
.s-opt[data-v="visitado"].sel { background: var(--c-visitado); border-color: var(--c-visitado); color: #000; }
.modal-actions { display: flex; gap: 7px; margin-top: 18px; }

/* v8.7.20: diálogos de Confirmar/Aviso centrados — título, mensaje y la fila
   de botones (que antes quedaban pegados a la izquierda por el flex:0 que
   .btn-ghost/.btn-danger traen de otros contextos donde no se quiere que
   los botones se estiren). Acá sí queremos el estilo "alerta" de iOS: los
   dos botones dividen el ancho completo en partes iguales. */
#modal-confirm .modal h3,
#modal-alert   .modal h3,
#modal-confirm #confirm-message,
#modal-alert   #alert-message { text-align: center; }
#modal-confirm .modal-actions,
#modal-alert   .modal-actions { justify-content: center; }
#modal-confirm .modal-actions .btn,
#modal-alert   .modal-actions .btn { flex: 1; text-align: center; }
.btn { padding: 10px 16px; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; border: none; font-family: 'Inter', sans-serif; flex: 1; }
.btn-primary { background: var(--accent); color: white; }
.btn-primary:hover { background: var(--accent2); }
.btn-ghost { background: var(--bg3); color: var(--text2); border: 1px solid var(--border2); flex: 0; padding: 10px 13px; }
.btn-danger { background: rgba(255,61,61,0.12); color: #ff6b6b; border: 1px solid rgba(255,61,61,0.25); flex: 0; padding: 10px 13px; }

/* ── IMPORT DROP ── */
#drop-zone { border: 1.5px dashed var(--border2); border-radius: var(--radius); padding: 26px 18px; text-align: center; cursor: pointer; color: var(--text2); font-size: 13px; line-height: 1.6; transition: background 0.15s; }
#drop-zone:hover { background: var(--bg3); }
#file-input { display: none; }
#import-preview { font-size: 11px; color: var(--text2); margin-top: 8px; min-height: 16px; }

/* ── VENDOR MODAL ── */
/* v8.1.5: filas de historial con botones editar/eliminar */
.hist-row { display: flex; gap: 8px; padding: 5px 4px; border-bottom: 1px solid var(--border); align-items: flex-start; }
.hist-actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0.55; transition: opacity 0.15s; }
.hist-row:hover .hist-actions { opacity: 1; }
.hist-btn {
  background: transparent; border: 1px solid var(--border2); color: var(--text2);
  padding: 3px 6px; border-radius: 5px; cursor: pointer; font-size: 12px;
  line-height: 1; transition: all 0.15s;
}
.hist-btn:hover { color: var(--text); border-color: var(--border); background: var(--bg3); }
.hist-btn-del:hover { color: #ff6b6b; border-color: rgba(255,107,107,0.5); background: rgba(255,107,107,0.1); }

/* v8.2.0: tag de "Cargada por X" en historial cuando difiere del vendor */
.hist-recorded {
  font-size: 10px; color: var(--text3); margin-top: 3px; font-style: italic;
}
.dor-recorded {
  font-size: 10px; color: var(--text3); font-style: italic; margin-left: auto;
  white-space: nowrap;
}

/* v8.2.1: meta de la ficha del cliente — quién y cuándo lo cargó */
#modal-prospect-meta {
  font-size: 11px; color: var(--text3); margin: -8px 0 12px;
  padding-left: 2px;
}
#modal-prospect-meta b { color: var(--text2); font-weight: 600; }

/* v8.2.3: header de fechas en la tarjeta "Últimas visitas" */
.detail-visit-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 11px; color: var(--text3);
}
.detail-visit-meta b { color: var(--text2); font-weight: 600; }
.detail-visit-meta .dvm-label { opacity: 0.85; }

.vendor-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--bg3); border-radius: var(--radius); margin-bottom: 5px; }
/* v8.1.2: row de vendedor deshabilitado */
.vendor-row-inactive { opacity: 0.55; }
.vendor-row-inactive .vendor-name { text-decoration: line-through; }
.vendor-tag-role {
  display: inline-block; font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 1px 6px; border-radius: 8px; margin-left: 5px;
  background: rgba(42,143,255,0.15); color: var(--accent); vertical-align: middle;
}
/* v8.1.2: toggle activo/inactivo (switch estilo iOS) */
.vendor-toggle { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.vendor-toggle input { opacity: 0; width: 0; height: 0; }
.vendor-toggle-slider {
  position: absolute; cursor: pointer; inset: 0; background: #555;
  border-radius: 20px; transition: background 0.2s;
}
.vendor-toggle-slider::before {
  position: absolute; content: ""; height: 14px; width: 14px;
  left: 3px; bottom: 3px; background: white;
  border-radius: 50%; transition: transform 0.2s;
}
.vendor-toggle input:checked + .vendor-toggle-slider { background: #00c853; }
.vendor-toggle input:checked + .vendor-toggle-slider::before { transform: translateX(16px); }
.vendor-toggle input:disabled + .vendor-toggle-slider { opacity: 0.35; cursor: not-allowed; }
.vendor-color-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.vendor-name { flex: 1; font-size: 12px; }
.vendor-del { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 15px; padding: 2px 4px; }
.vendor-del:hover { color: #ff6b6b; }
.vendor-edit { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.vendor-edit:hover { color: var(--accent); }
.vendor-add-row { display: flex; gap: 7px; }
.vendor-add-row input { flex: 1; background: var(--bg3); border: 1px solid var(--border2); border-radius: var(--radius); padding: 8px 11px; color: var(--text); font-size: 12px; font-family: 'Inter', sans-serif; }
.vendor-add-row button { padding: 8px 14px; background: var(--accent); color: white; border: none; border-radius: var(--radius); font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }

/* ── USER MANAGEMENT PANEL v8.7.0 ── */
@media (min-width: 640px) {
  .modal-lg { max-width: 680px !important; }
}
.um-sub-overlay { z-index: 2060 !important; }
.um-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.um-header-text h3 { margin-bottom: 0 !important; }
.um-subtitle { font-size: 12px; color: var(--text2); margin: 3px 0 0; }
.um-btn-new { font-size: 12px !important; padding: 7px 14px !important; flex-shrink: 0; }
.um-list { max-height: 58vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.um-section-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text3); padding: 6px 4px 5px; margin-bottom: 4px; }
.um-loading { display: flex; align-items: center; gap: 10px; padding: 28px 12px; color: var(--text2); font-size: 13px; }
.um-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border2); border-top-color: var(--accent); animation: um-spin 0.7s linear infinite; flex-shrink: 0; }
@keyframes um-spin { to { transform: rotate(360deg); } }
.um-error { display: flex; align-items: center; gap: 8px; color: #ff6b6b; font-size: 13px; padding: 16px 8px; }
.um-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius); transition: background 0.12s; }
.um-row:hover { background: var(--overlay-hover); }
.um-row-inactive { opacity: 0.45; }
.um-row-inactive .um-name { text-decoration: line-through; }
.um-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; flex-shrink: 0; background: var(--accent); color: #fff; }
.um-avatar-ghost { background: var(--bg3); color: var(--text3); border: 1.5px dashed var(--border2); }
.um-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.um-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-email { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-no-auth { color: var(--text3); font-style: italic; }
.um-role-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; background: rgba(120,120,130,0.12); color: var(--text2); }
.um-role-admin  { background: rgba(42,143,255,0.13); color: #2a8fff; }
.um-role-vendor { background: rgba(0,230,118,0.12);  color: #00c853; }
.um-role-office { background: rgba(255,152,0,0.13);  color: #ff9800; }
.um-role-coord  { background: rgba(224,64,251,0.12); color: #e040fb; }
.um-last-access { font-size: 11px; color: var(--text3); flex-shrink: 0; min-width: 68px; text-align: right; }
.um-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.um-toggle { margin-right: 2px; }
.um-btn-icon { background: none; border: none; padding: 5px; border-radius: var(--radius); cursor: pointer; color: var(--text3); display: flex; align-items: center; transition: background 0.1s, color 0.1s; }
.um-btn-icon:hover { background: var(--overlay-hover); }
.um-btn-edit:hover  { color: var(--accent); }
.um-btn-lock:hover  { color: #ff9800; }
.um-btn-add:hover   { color: #00c853; }
.um-btn-del:hover   { color: #ff6b6b; }
.form-label-hint { font-size: 10px; color: var(--text3); font-weight: 400; }
.um-reset-info { font-size: 13px; color: var(--text2); margin: -6px 0 18px; line-height: 1.5; }
.btn-danger { background: #c0392b; color: #fff; border: none; padding: 10px 20px; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; transition: background 0.15s; }
.btn-danger:hover { background: #a93226; }
@media (max-width: 500px) { .um-last-access { display: none; } .um-role-badge { display: none; } }

/* ── ZONES MODAL ── */
.zone-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg3); border-radius: var(--radius); margin-bottom: 6px; cursor: pointer; transition: background 0.1s; }
.zone-row:hover { background: var(--bg4); }
.zone-color-swatch { width: 32px; height: 18px; border-radius: 4px; flex-shrink: 0; opacity: 0.7; }
.zone-vendor { flex: 1; font-size: 12px; font-weight: 500; }
.zone-pts { font-size: 10px; color: var(--text3); font-family: 'IBM Plex Mono', monospace; }
.zone-del { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 15px; padding: 2px 4px; }
.zone-del:hover { color: #ff6b6b; }

/* ── TOAST ── */
/* v8.7.36: sistema de notificaciones flotantes — estilo Dynamic Island.
   Reemplaza el #toast plano anterior (mensaje único, sin ícono, sin tono,
   fade+slide de 16px). Ahora: pastilla de cristal apilable, ícono coloreado
   por tono (patrón --tone-* ya usado en status-pill, no colores sueltos),
   entrada/salida con el spring real de iOS (var(--ease-ios)). */
#toast-stack {
  position: fixed;
  top: calc(var(--topbar-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 9500;
  pointer-events: none;
  width: min(380px, calc(100vw - 32px));
}
.toast-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 16px 10px 14px;
  border-radius: 999px;
  background: var(--bg-glass-drawer);
  backdrop-filter: var(--blur-premium);
  -webkit-backdrop-filter: var(--blur-premium);
  border: 1px solid var(--border-retina);
  box-shadow: var(--shadow-lg);
  color: var(--txt-main);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-14px) scale(0.9);
  transition: transform 0.5s var(--ease-ios), opacity 0.35s var(--ease-ios);
  pointer-events: auto;
  cursor: pointer;
}
.toast-pill.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-pill.leaving {
  opacity: 0;
  transform: translateY(-10px) scale(0.92);
  transition: transform 0.28s var(--ease-ios), opacity 0.2s ease;
}
.toast-pill-icon { flex-shrink: 0; display: flex; }
.toast-pill-text { flex: 1; word-break: break-word; }
.toast-pill[data-tone="success"] .toast-pill-icon { color: var(--tone-success); }
.toast-pill[data-tone="danger"]  .toast-pill-icon { color: var(--tone-danger); }
.toast-pill[data-tone="warning"] .toast-pill-icon { color: var(--tone-warn); }
.toast-pill[data-tone="info"]    .toast-pill-icon { color: var(--tone-info); }
@media (prefers-reduced-motion: reduce) {
  .toast-pill { transition: opacity 0.2s ease; transform: none; }
  .toast-pill.leaving { transform: none; }
}

/* ── MAP POPUPS ── */
.leaflet-popup-content-wrapper { background: var(--bg2) !important; border: 1px solid var(--border2) !important; border-radius: 10px !important; box-shadow: 0 6px 24px rgba(0,0,0,0.6) !important; color: var(--text) !important; }
.leaflet-popup-tip { background: var(--bg2) !important; }
.leaflet-popup-content { margin: 13px 15px !important; font-family: 'Inter', sans-serif !important; }
.pu-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.pu-addr { font-size: 11px; color: var(--text2); margin-bottom: 7px; }
.pu-row { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.pu-status { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 8px; text-transform: uppercase; }
.pu-vendor { font-size: 11px; }
.pu-notes { font-size: 11px; color: var(--text2); border-top: 1px solid var(--border); padding-top: 7px; margin-top: 5px; line-height: 1.5; }
.pu-edit { margin-top: 9px; width: 100%; padding: 6px; background: rgba(42,143,255,0.12); color: var(--accent); border: 1px solid rgba(42,143,255,0.25); border-radius: 7px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: 'Inter', sans-serif; }

/* v8.1.6: bloque de fechas (última + próxima) en una sola línea */
.pu-dates { font-size: 10px; color: var(--text3); margin-top: 4px; line-height: 1.4; }
.pu-dates b { color: var(--text2); font-weight: 600; }

/* v8.1.6: botones de acción rápida en popup (uso mobile) */
.pu-quick-actions {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 8px;
}
.pu-qa {
  padding: 6px 4px; border-radius: 6px; font-size: 10.5px; font-weight: 600;
  cursor: pointer; font-family: 'Inter', sans-serif;
  border: 1px solid; background: transparent; transition: background 0.12s;
  text-align: center; line-height: 1.2;
}
.pu-qa-visit { color: #00e676; border-color: rgba(0,230,118,0.35); }
.pu-qa-visit:hover { background: rgba(0,230,118,0.12); }
.pu-qa-resched { color: #ffc107; border-color: rgba(255,193,7,0.35); }
.pu-qa-resched:hover { background: rgba(255,193,7,0.12); }
.pu-qa-sale { color: #4caf50; border-color: rgba(76,175,80,0.4); }
.pu-qa-sale:hover { background: rgba(76,175,80,0.12); }
.pu-qa-no { color: #ff6b6b; border-color: rgba(255,107,107,0.35); }
.pu-qa-no:hover { background: rgba(255,107,107,0.12); }
.pu-edit:hover { background: rgba(42,143,255,0.22); }
.pu-directions { display: block; margin-top: 7px; padding: 6px; background: rgba(0,230,118,0.12); color: #00e676; border: 1px solid rgba(0,230,118,0.3); border-radius: 7px; font-size: 11px; font-weight: 600; text-decoration: none; text-align: center; font-family: 'Inter', sans-serif; }
.pu-directions:hover { background: rgba(0,230,118,0.22); }
.pu-action { display: block; margin-top: 5px; padding: 6px; border-radius: 7px; font-size: 11px; font-weight: 600; text-decoration: none; text-align: center; font-family: 'Inter', sans-serif; }
.pu-call { background: rgba(42,143,255,0.12); color: var(--accent); border: 1px solid rgba(42,143,255,0.3); }
.pu-call:hover { background: rgba(42,143,255,0.22); }
.pu-whatsapp { background: rgba(37,211,102,0.12); color: #25d366; border: 1px solid rgba(37,211,102,0.3); }
.pu-whatsapp:hover { background: rgba(37,211,102,0.22); }

/* ═══════════════════════════════════════════════════════════════ */
/* ── PIPELINE DE OPORTUNIDADES (v8.0.3) ── */
/* ═══════════════════════════════════════════════════════════════ */

#pipeline-view { display: none; flex: 1; overflow: hidden; min-height: 0; flex-direction: column; background: var(--bg); }
#pipeline-view.active { display: flex; }
body.mode-pipeline #map,
body.mode-pipeline #legend,
body.mode-pipeline #sidebar,
body.mode-pipeline #filterbar,
body.mode-pipeline #fab { display: none !important; }

/* v8.6.5: los feature panels (hist, route, reports) deben ocultar el mapa y sus elementos
   asociados — de lo contrario ambos quedan como flex siblings de #main y se muestran juntos */
body.mode-hist #map, body.mode-hist #legend, body.mode-hist #sidebar,
body.mode-hist #filterbar, body.mode-hist #fab { display: none !important; }
body.mode-route #map, body.mode-route #legend, body.mode-route #sidebar,
body.mode-route #filterbar, body.mode-route #fab { display: none !important; }
body.mode-reports #map, body.mode-reports #legend, body.mode-reports #sidebar,
body.mode-reports #filterbar, body.mode-reports #fab { display: none !important; }
/* v8.7.3: file-library también oculta el mapa */
body.mode-file-library #map, body.mode-file-library #legend, body.mode-file-library #sidebar,
body.mode-file-library #filterbar, body.mode-file-library #fab { display: none !important; }

.pipe-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.pipe-toolbar select {
  background: var(--bg3); color: var(--text); border: 1px solid var(--border2);
  border-radius: 7px; padding: 6px 10px; font-size: 12px;
  font-family: 'Inter', sans-serif;
}
.pipe-toolbar label.pipe-toggle {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; color: var(--text2);
}
.pipe-toolbar label.pipe-toggle input { width: 14px; height: 14px; cursor: pointer; }
.pipe-toolbar .pipe-spacer { flex: 1; }
.pipe-toolbar .pipe-new-btn {
  background: var(--accent); color: #fff; border: none; padding: 7px 14px;
  border-radius: 7px; font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: 'Inter', sans-serif; display: flex; align-items: center; gap: 5px;
}
.pipe-toolbar .pipe-new-btn:hover { background: var(--accent2); }
.pipe-toolbar .pipe-summary {
  font-size: 11px; color: var(--text3);
}

.pipe-board {
  flex: 1; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; padding: 12px; overflow: auto; min-height: 0;
}
.pipe-board.hide-closed { grid-template-columns: repeat(3, 1fr); }
.pipe-col {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden;
}
.pipe-col-header {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px; background: var(--bg2);
  flex-shrink: 0;
}
.pipe-col-header .pch-top {
  display: flex; justify-content: space-between; align-items: center;
}
.pipe-col-header .pch-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.pipe-col-header .pch-count {
  font-size: 11px; padding: 1px 8px; border-radius: 10px;
  background: var(--bg4); color: var(--text2); font-weight: 600;
}
.pipe-col-header .pch-total { font-size: 11px; color: var(--text3); }
.pipe-col-body {
  flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px;
  min-height: 60px;
}
.pipe-col.drag-over { background: rgba(42,143,255,0.06); }
.pipe-col.drag-over .pipe-col-body { background: rgba(42,143,255,0.04); }

.pipe-card {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 7px; padding: 9px 10px; cursor: pointer;
  transition: all 0.12s; position: relative;
}
.pipe-card:hover { background: var(--bg4); border-color: var(--accent); }
.pipe-card.dragging { opacity: 0.4; }
.pipe-card .pc-client {
  font-size: 12px; font-weight: 600; color: var(--text);
  margin-bottom: 2px; line-height: 1.3; padding-right: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pipe-card .pc-title {
  font-size: 11px; color: var(--text2); margin-bottom: 8px;
  line-height: 1.3; word-break: break-word;
}
.pipe-card .pc-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
.pipe-card .pc-value {
  font-size: 12px; font-weight: 600; color: var(--text);
}
.pipe-card .pc-value.empty { color: var(--text3); font-weight: 400; }
.pipe-card .pc-days {
  font-size: 10px; padding: 1px 7px; border-radius: 10px; font-weight: 600;
  white-space: nowrap;
}
.pc-days.d-gray { background: rgba(122,156,192,0.15); color: var(--text2); }
.pc-days.d-amber { background: rgba(255,193,7,0.18); color: #ffc107; }
.pc-days.d-red { background: rgba(255,61,61,0.18); color: #ff7a7a; }
.pipe-card .pc-menu-btn {
  position: absolute; top: 6px; right: 6px; background: transparent;
  border: none; color: var(--text3); font-size: 14px; cursor: pointer;
  padding: 2px 5px; border-radius: 4px; line-height: 1;
}
.pipe-card .pc-menu-btn:hover { background: var(--bg4); color: var(--text); }
.pipe-card.closed-won { border-left: 3px solid #00e676; }
.pipe-card.closed-lost { border-left: 3px solid #ff3d3d; }

.pipe-empty {
  font-size: 11px; color: var(--text3); font-style: italic;
  padding: 12px 8px; text-align: center;
}

/* Menú contextual (Mover/Editar/Cerrar) sobre la card */
.pipe-menu {
  position: fixed; z-index: 3000; background: var(--bg3);
  border: 1px solid var(--border2); border-radius: 7px;
  min-width: 170px; padding: 5px; box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.pipe-menu-item {
  display: block; width: 100%; text-align: left; background: transparent;
  border: none; color: var(--text); padding: 7px 10px; border-radius: 5px;
  cursor: pointer; font-size: 12px; font-family: 'Inter', sans-serif;
}
.pipe-menu-item:hover { background: var(--bg4); }
.pipe-menu-item.danger { color: #ff7a7a; }
.pipe-menu-sep { height: 1px; background: var(--border); margin: 4px 2px; }
.pipe-menu-section {
  font-size: 9px; color: var(--text3); text-transform: uppercase;
  letter-spacing: 0.08em; padding: 6px 10px 2px; font-weight: 600;
}

/* ── MODAL OPORTUNIDAD (v8.0.3) ── */
#modal-opportunity .modal { max-width: 480px; }
.opp-client-chip {
  display: flex; align-items: center; gap: 8px; padding: 8px 11px;
  background: rgba(42,143,255,0.12); border: 1px solid rgba(42,143,255,0.3);
  border-radius: 7px; color: var(--accent); font-size: 13px; font-weight: 500;
}
.opp-client-chip .occ-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opp-client-chip .occ-change {
  background: transparent; border: none; color: var(--accent); font-size: 11px;
  cursor: pointer; padding: 2px 6px; border-radius: 4px;
  font-family: 'Inter', sans-serif;
}
.opp-client-chip .occ-change:hover { background: rgba(42,143,255,0.18); }
.opp-client-search-wrap { position: relative; }
.opp-client-search-results {
  position: absolute; top: 100%; left: 0; right: 0; max-height: 220px;
  overflow-y: auto; background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 7px; margin-top: 3px; z-index: 100; display: none;
}
.opp-client-search-results.open { display: block; }
.opp-csr-item {
  padding: 8px 11px; cursor: pointer; border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--text);
}
.opp-csr-item:last-child { border-bottom: none; }
.opp-csr-item:hover { background: var(--bg4); }
.opp-csr-item.active { background: rgba(42,143,255,0.22); outline: 1px solid var(--accent); outline-offset: -1px; }
.opp-csr-item .ocsri-meta { font-size: 10px; color: var(--text3); margin-top: 2px; }
.opp-csr-empty { padding: 12px; text-align: center; color: var(--text3); font-size: 11px; }

#modal-opp-close .modal { max-width: 440px; }
.opp-close-result {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.opp-close-result button {
  background: var(--bg3); border: 1px solid var(--border2); color: var(--text2);
  padding: 12px 8px; border-radius: 7px; cursor: pointer; font-size: 13px;
  font-weight: 600; font-family: 'Inter', sans-serif;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.12s;
}
.opp-close-result button:hover { background: var(--bg4); }
.opp-close-result button.sel-won {
  background: rgba(0,230,118,0.15); border-color: rgba(0,230,118,0.45); color: #00e676;
}
.opp-close-result button.sel-lost {
  background: rgba(255,61,61,0.15); border-color: rgba(255,61,61,0.45); color: #ff7a7a;
}

/* ── Tarjeta de oportunidades en panel detalle ── */
.detail-opps-list { display: flex; flex-direction: column; gap: 5px; }
.detail-opp-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer; font-size: 12px;
}
.detail-opp-row:hover { background: var(--bg4); border-color: var(--accent); }
.detail-opp-row .dor-stage {
  font-size: 9px; padding: 2px 6px; border-radius: 8px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0;
}
.dor-stage.s-activa { background: rgba(42,143,255,0.18); color: var(--accent); }
.dor-stage.s-cotizada { background: rgba(255,193,7,0.18); color: #ffc107; }
.dor-stage.s-pedido { background: rgba(0,230,118,0.18); color: #00e676; }
.dor-stage.s-cerrada { background: rgba(122,156,192,0.18); color: var(--text2); }
.detail-opp-row .dor-title {
  flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.detail-opp-row .dor-value { font-weight: 600; color: var(--text2); flex-shrink: 0; }

/* ── Sección de oportunidades en modal-prospect ── */
#f-opps-list { display: flex; flex-direction: column; gap: 5px; }

/* Responsive del kanban */
@media (max-width: 900px) {
  .pipe-board { grid-template-columns: 1fr; padding: 8px; gap: 8px; }
  .pipe-board.hide-closed { grid-template-columns: 1fr; }
  .pipe-col-body { max-height: 280px; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .pipe-board { grid-template-columns: repeat(2, 1fr); }
  .pipe-board.hide-closed { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════
   v8.5.0 — LOGÍSTICA / RUTAS DE REPARTO
   ═══════════════════════════════════════════════════════════ */

/* ─── Lista de rutas ─── */
.lr-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 7px;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.lr-card:hover { background: var(--bg3); border-color: var(--accent); }
.lr-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.lr-card-title { flex: 1; font-size: 13px; font-weight: 600; color: var(--text); }
.lr-card-meta { font-size: 11px; color: var(--text2); }

/* Status badges */
.lr-status {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 7px; border-radius: 8px; flex-shrink: 0;
}
.lr-st-draft     { background: rgba(122,156,192,.18); color: var(--text2); }
.lr-st-active    { background: rgba(42,143,255,.18);  color: var(--accent); }
.lr-st-done      { background: rgba(0,230,118,.15);   color: #00e676; }
.lr-st-cancelled { background: rgba(255,61,61,.15);   color: #ff7a7a; }

/* ─── Detalle: paradas ─── */
.lr-stop-row {
  display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 7px; margin-bottom: 5px;
  transition: all .12s;
}
.lr-stop-row.lr-stop-done   { opacity: .55; border-color: rgba(0,230,118,.25); }
.lr-stop-row.lr-stop-failed { opacity: .55; border-color: rgba(255,107,107,.25); }
.lr-stop-num  { font-size: 11px; color: var(--text3); min-width: 20px; padding-top: 2px; }
.lr-stop-info { flex: 1; min-width: 0; }
.lr-stop-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.lr-stop-meta { font-size: 11px; color: var(--text2); }
.lr-stop-status { font-size: 16px; padding-top: 2px; }

.lr-type-badge {
  font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 4px;
  margin-left: 5px; vertical-align: middle;
}
.lr-type-del  { background: rgba(0,230,118,.15);  color: #00e676; }
.lr-type-both { background: rgba(255,193,7,.15);  color: #ffc107; }
.lr-type-cob  { background: rgba(42,143,255,.15); color: var(--accent); }

/* ─── Formulario: paradas ─── */
.lrf-stop-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 9px; margin-bottom: 7px;
}
.lrf-stop-pos { font-size: 12px; color: var(--text3); min-width: 20px; padding-top: 4px; }
.lrf-stop-body { flex: 1; min-width: 0; }
.lrf-stop-name { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.lrf-stop-detail { font-size: 11px; color: var(--text2); margin-bottom: 5px; }
.lrf-stop-controls {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.lrf-stop-controls select, .lrf-stop-controls input {
  background: var(--bg3); border: 1px solid var(--border2); color: var(--text);
  padding: 6px 9px; border-radius: 7px; font-size: 12px;
  font-family: 'Inter', sans-serif; outline: none;
}
.lrf-type-sel { flex: 1.5; min-width: 140px; }
.lrf-amount-inp { flex: 1; min-width: 90px; max-width: 130px; }
.lrf-stop-btns { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.lrf-icon-btn {
  background: transparent; border: 1px solid var(--border2);
  color: var(--text2); border-radius: 5px; cursor: pointer;
  font-size: 11px; padding: 3px 7px; font-family: inherit;
  transition: all .1s;
}
.lrf-icon-btn:hover { background: var(--bg3); color: var(--text); }
.lrf-icon-btn.danger:hover { background: rgba(255,61,61,.15); color: #ff7a7a; border-color: rgba(255,61,61,.4); }
.lrf-sym { color: #ffc107; font-weight: 700; }
.lrf-override-badge { font-size: 10px; font-weight: 500; color: #ffc107; background: rgba(255,193,7,0.12); border-radius: 4px; padding: 1px 5px; vertical-align: middle; }

/* Buscador de clientes en el form */
.lrf-search-dropdown {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 7px; margin-top: 3px; z-index: 200;
  max-height: 200px; overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.lrf-sr-item {
  padding: 8px 11px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.lrf-sr-item:last-child { border-bottom: none; }
.lrf-sr-item:hover { background: var(--bg4); }

/* ─── Vista de ejecución (repartidor) ─── */
.lr-exec-header {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0;
}

/* Cada parada en la vista de ejecución */
.exec-stop {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px;
  transition: all .15s;
}
.exec-stop-delivered { opacity: .5; border-color: rgba(0,230,118,.3); }
.exec-stop-failed    { opacity: .5; border-color: rgba(255,107,107,.3); }
.exec-stop-done-wrap { padding: 8px 14px; border-radius: 8px; }
.exec-stop-summary {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
}
.exec-stop-header {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px;
}
.exec-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg3); display: flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 600;
  color: var(--text2); flex-shrink: 0;
}
.exec-name  { font-size: 14px; font-weight: 600; color: var(--text); }
.exec-addr  { font-size: 11px; color: var(--text2); margin-top: 2px; }
.exec-amounts { font-size: 11px; color: var(--text3); margin-top: 3px; }
.exec-amounts b { color: var(--text2); }
.exec-notes {
  font-size: 11px; color: #ffc107; background: rgba(255,193,7,.08);
  border-left: 2px solid #ffc107; padding: 4px 8px;
  border-radius: 3px; margin-bottom: 8px;
}
.exec-done-tag {
  font-size: 11px; color: var(--text2);
  background: var(--bg3); padding: 2px 7px; border-radius: 5px;
}
.exec-time { font-size: 11px; color: var(--text3); margin-left: auto; }

/* Botones de acción — grandes para uso en campo */
.exec-btn-row {
  display: flex; gap: 6px; margin-bottom: 8px;
}
.exec-btn {
  flex: 1; padding: 12px 8px; border-radius: 8px; border: 1px solid var(--border2);
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all .12s; -webkit-tap-highlight-color: transparent;
}
.exec-btn-ok   {
  background: rgba(0,230,118,.12); color: #00e676;
  border-color: rgba(0,230,118,.35);
}
.exec-btn-ok:active { background: rgba(0,230,118,.25); transform: scale(.97); }
.exec-btn-fail {
  background: rgba(255,107,107,.12); color: #ff7a7a;
  border-color: rgba(255,107,107,.35);
}
.exec-btn-fail:active { background: rgba(255,107,107,.25); transform: scale(.97); }

/* Botón cobró — aparece solo si hay cobranza */
.exec-btn-col {
  flex: 1.2; padding: 12px 8px; border-radius: 8px;
  border: 1px solid var(--border2); background: var(--bg3);
  color: var(--text2); font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .12s;
}
.exec-btn-col-yes { background: rgba(255,193,7,.18); color: #ffc107; border-color: rgba(255,193,7,.45); }
.exec-btn-col-no  { background: rgba(122,156,192,.18); color: var(--text3); border-color: var(--border2); }
.exec-btn-col:active { transform: scale(.97); }

/* Campo de obs en ejecución */
.exec-obs-input {
  width: 100%; background: var(--bg3); border: 1px solid var(--border);
  color: var(--text); padding: 7px 10px; border-radius: 7px;
  font-size: 12px; font-family: inherit; outline: none;
}
.exec-obs-input:focus { border-color: var(--accent); }
.exec-obs-input::placeholder { color: var(--text3); }
.exec-stop-info { flex: 1; min-width: 0; }

/* ─── IMPRESIÓN A4 — Hoja logística (v8.5.8: tipografía/márgenes/estilo
   recalibrados según el Excel de referencia del usuario — fuente única,
   sin capas de override; ver auditoría de performance en PROGRESS) ─── */
#logistics-print-content { font-family: Arial, sans-serif; font-size: 9px; }

.lp-sheet { padding: 5mm; background: white; color: #111; min-height: 280mm; }

/* Header: nota | datos de ruta (meta) | cuadre de caja */
.lp-header {
  display: grid; grid-template-columns: 64px 1fr 150px;
  border: 1px solid #999; margin-bottom: 0;
}
.lp-nota { border-right: 1px solid #999; padding: 7px 8px; font-size: 9.5px; }
.lp-nota-title { font-weight: 700; font-size: 10px; margin-bottom: 4px; }
.lp-center { padding: 6px 10px; }
.lp-main-title {
  text-align: center; font-size: 15px; font-weight: 700;
  margin-bottom: 9px; letter-spacing: .03em;
}
.lp-meta-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: auto; }
.lp-meta-table tr { height: 34px; }
.lp-meta-table td { padding: 6px 6px; vertical-align: middle; }
.lp-meta-lbl { color: #444; font-weight: 700; white-space: nowrap; font-size: 11px; padding-right: 3px; }
.lp-meta-val { border-bottom: 1px solid #888; min-width: 60px; font-size: 13px; font-weight: 500; padding-bottom: 3px; }
.lp-blank::after { content: ' '; display: inline-block; min-width: 40px; }

/* Cuadre de caja (derecha) — columna de etiqueta achicada, importe con más
   peso visual (v8.5.9: pedido del usuario — el importe es lo que se lee rápido) */
.lp-cuadre { border-left: 1px solid #999; padding: 0; }
.lp-cuadre-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.lp-cuadre-table tr { border-bottom: 0.5px solid #ccc; }
.lp-cuadre-table td { padding: 5px 6px; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }
.lp-cuadre-lbl { white-space: nowrap; color: #333; font-size: 8.5px; }
.lp-cuadre-val {
  text-align: left; border-left: 0.5px solid #bbb;
  font-weight: 700; color: #111; font-size: 11px;
  padding-left: 7px;
}
.lp-cuadre-val.lp-total { font-size: 12.5px; font-weight: 700; border-top: 1px solid #999; }

/* Barra roja separadora */
.lp-red-bar { background: #c0392b; height: 4px; margin: 0; }

/* Tabla de paradas */
.lp-table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
}
.lp-table th, .lp-table td {
  border: 0.5px solid #bbb;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-table thead { background: #eee; }
.lp-table th { font-size: 9.5px; font-weight: 700; text-align: center; padding: 4px 3px; }
.lp-table td { font-size: 10.5px; padding: 4px 4px; }
.lp-table tbody tr { height: 23px; }
.lp-table tbody tr:nth-child(even) { background: #fafafa; }

/* Nota: los anchos reales de columna los define el <colgroup> inline
   generado en JS (openPrintLogistics) — ver app.js. table-layout:fixed
   ignora cualquier width puesto acá, así que no se declara para no mentir. */
.lp-n      { text-align: center; }
.lp-client { text-align: left; font-weight: 600; }
.lp-bultos { text-align: center; }
.lp-money  { text-align: right; }
.lp-check  { text-align: center; }
.lp-obs    { text-align: left; }
.lp-sym    { font-weight: 700; color: #c0392b; }

/* Totales */
.lp-totals-row td, .lp-grand-row td {
  background: #e4e4e4; font-weight: 700; font-size: 9.5px; padding: 5px 4px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.lp-grand-row td { background: #d4e5f7; font-size: 10px; }
.lp-total-label { text-align: center; }
.lp-grand-val  { text-align: right; font-size: 11px; }

/* Footer — v8.5.9: Referencias va primero (pegado a la tabla), Controló/Fecha
   más abajo, con aire para completar a mano al firmar */
.lp-legend { font-size: 9px; color: #555; padding-top: 5px; border-top: 0.5px solid #bbb; margin-top: 3px; }
.lp-signoff {
  display: flex; justify-content: flex-end; gap: 40px;
  padding-top: 8px; font-size: 10px; margin-top: 7mm;
}

/* @media print — hoja logística A4 portrait */
@media print {
  body.printing-logistics * { visibility: hidden; }
  body.printing-logistics #modal-print-logistics,
  body.printing-logistics #modal-print-logistics * { visibility: visible; }
  body.printing-logistics #modal-print-logistics {
    position: absolute; left: 0; top: 0; width: 100%;
    background: white !important; display: block !important;
  }
  body.printing-logistics #modal-print-logistics .modal {
    box-shadow: none !important; border-radius: 0 !important;
    max-width: 100% !important; width: 100% !important;
    max-height: none !important; height: auto !important;
    padding: 0 !important; margin: 0 !important;
    overflow: visible !important; background: white !important;
  }
  body.printing-logistics .modal-handle,
  body.printing-logistics h3,
  body.printing-logistics #btn-print-logistics-go,
  body.printing-logistics #btn-print-logistics-cancel,
  body.printing-logistics p { display: none !important; }
  body.printing-logistics #logistics-print-content {
    overflow: visible !important; max-height: none !important;
    background: white !important;
  }
  body.printing-logistics .lp-sheet { padding: 4mm !important; }
  @page { size: A4 portrait; margin: 0; }
}

/* ── v8.5.1: Logística — mejoras UX ── */

/* Tabla histórico de rutas */
.lr-hist-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.lr-hist-table th {
  padding: 6px 10px; text-align: left; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text3);
  border-bottom: 1px solid var(--border2); white-space: nowrap;
}
.lr-hist-row {
  cursor: pointer; border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.lr-hist-row:last-child { border-bottom: none; }
.lr-hist-row:hover { background: var(--bg3); }
.lr-hist-row td { padding: 9px 10px; vertical-align: middle; }
.lr-hist-date { font-weight: 500; white-space: nowrap; }
.lr-hist-action { text-align: center; width: 64px; }

.lr-action-btn {
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text2); padding: 4px 10px; border-radius: 5px;
  font-size: 11px; cursor: pointer; font-family: inherit;
  transition: all .1s; white-space: nowrap;
}
.lr-action-btn:hover { background: var(--bg4); color: var(--text); }
.lr-action-del:hover { background: rgba(255,61,61,.15); color: #ff7a7a; border-color: rgba(255,61,61,.35); }

/* Buscador de agregar parada — v8.5.10: rediseñado a imagen del buscador
   global (#tb-search): caja real con icono, no más texto-emoji en el
   placeholder de un input sin estilo. */
.lrf-search-section {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 12px; padding: 16px 20px; margin-bottom: 14px;
  text-align: center;
}
.lrf-search-label {
  font-size: 11px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px;
}
.lrf-search-box {
  position: relative; max-width: 640px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg3); border: 1px solid var(--border2); border-radius: 12px;
  padding: 0 16px; height: 48px;
  transition: border-color .15s, background .15s;
}
.lrf-search-box:focus-within { border-color: var(--accent); background: var(--bg4); }
.lrf-search-icon { color: var(--text3); font-size: 16px; flex-shrink: 0; }
.lrf-search-input {
  flex: 1; min-width: 0; background: transparent; border: none; color: var(--text);
  font-size: 15px; text-align: left; outline: none; font-family: inherit; padding: 0;
}
.lrf-search-input::placeholder { color: var(--text3); font-size: 14px; }
.lrf-search-hint { font-size: 10px; color: var(--text3); white-space: nowrap; flex-shrink: 0; }

/* Item de resultado de búsqueda activo (keyboard nav) */
.lrf-sr-active {
  background: rgba(42,143,255,.18) !important;
  outline: 1px solid var(--accent); outline-offset: -1px;
}

/* Drag handle en cada parada del form */
.lrf-drag-handle {
  color: var(--text3); cursor: grab; font-size: 16px;
  padding: 0 4px; flex-shrink: 0; user-select: none;
  -webkit-user-select: none;
}
.lrf-drag-handle:active { cursor: grabbing; }

/* Estados drag & drop de paradas */
.lrf-stop-item {
  /* ya existía — extender: */
  transition: opacity .15s, border-color .15s;
}
.lrf-dragging { opacity: .4 !important; }
.lrf-drag-over {
  border-color: var(--accent) !important;
  background: rgba(42,143,255,.08) !important;
  box-shadow: 0 0 0 1px var(--accent);
}

/* ── v8.5.1: Vista logística pantalla completa ── */
#logistics-view {
  display: none; flex: 1; overflow: hidden; min-height: 0;
  flex-direction: column; background: var(--bg);
}
#logistics-view.active { display: flex; }
body.mode-logistics #map, body.mode-logistics #legend,
body.mode-logistics #sidebar, body.mode-logistics #filterbar,
body.mode-logistics #fab { display: none !important; }

/* v8.5.10: pensado para uso en PC — antes tope en 900px hacía que toda la
   vista (lista/detalle/form/ejecución) se viera como una ventanita angosta
   flotando en medio de la pantalla. Ahora aprovecha el ancho real. */
.lv-wrap { display: flex; flex-direction: column; height: 100%; max-width: 1400px; margin: 0 auto; width: 100%; }

/* Header de cada panel */
.lv-header {
  display: flex; align-items: center; gap: 12px; padding: 16px 28px 12px;
  border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
}
.lv-header h2 { margin: 0; font-size: 17px; font-weight: 600; }
.lv-header-main { flex: 1; min-width: 0; }
.lv-header-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.lv-title { font-size: 16px; font-weight: 600; }
.lv-sub { font-size: 12px; color: var(--text2); margin-top: 2px; }
.lv-back-btn { flex-shrink: 0; }

/* Cuerpo scrollable */
.lv-body { overflow-y: auto; flex: 1; padding: 14px 28px; }
.lv-form-body { overflow-y: auto; flex: 1; padding: 20px 28px 0; }

/* Panel (sub-vista) */
.lv-panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* v8.5.10: campos del form — antes .form-input/.form-label/.form-group NO
   tenían NINGUNA regla CSS en todo el archivo (bug de fondo real: los inputs
   se veían con el estilo nativo del navegador —blanco/gris, sin radio, sin
   foco— porque nunca se llegaron a estilar). Esto es lo que hacía que el
   form se viera "como una ventanita nativa incrustada": no era un problema
   de tamaños o posiciones, era CSS que directamente no existía. */
.form-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.form-label {
  font-size: 11px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: .04em;
}
.form-input {
  background: var(--bg3); border: 1px solid var(--border2); color: var(--text);
  padding: 10px 13px; border-radius: var(--radius); font-size: 14px;
  font-family: 'Inter', sans-serif; outline: none;
  width: 100%; box-sizing: border-box;
  /* v8.5.16: el "color-scheme: dark" hardcodeado de v8.5.10 quedó mal desde
     que v8.5.14 agregó el modo claro — forzaba selectores nativos (fecha,
     etc.) oscuros incluso en light mode. Ahora color-scheme se define una
     sola vez de forma theme-aware en :root / [data-theme="light"]. */
  transition: border-color .15s, background .15s;
}
.form-input:focus { border-color: var(--accent); background: var(--bg4); }
.form-input::placeholder { color: var(--text3); }
select.form-input { cursor: pointer; }

/* Secciones del form — agrupan campos relacionados en una tarjeta con
   título, para que se lea como filas claras en vez de una grilla suelta */
.lrf-form-wrap { display: flex; flex-direction: column; gap: 16px; padding-bottom: 18px; }
.lrf-section {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 20px;
}
.lrf-section-title {
  font-size: 11px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px;
}
.lrf-section-grid { display: grid; gap: 14px 18px; }
.lrf-section-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.lrf-section-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.lv-stops-header {
  display: flex; align-items: center; gap: 8px; padding: 4px 0 8px;
  font-size: 11px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: .06em; flex-shrink: 0;
}

/* Lista de paradas del form */
#lrf-stop-list { padding: 0 0 20px; }

/* Ejecución: footer con Finalizar */
.lv-execute-panel { background: var(--bg); }
.lv-exec-footer {
  padding: 12px 14px; border-top: 1px solid var(--border); flex-shrink: 0;
}
#btn-exec-finalizar {
  background: rgba(0,230,118,.12); color: #00e676;
  border: 1px solid rgba(0,230,118,.35);
  width: 100%; padding: 14px; font-size: 14px; font-weight: 600;
  border-radius: 8px; cursor: pointer; font-family: inherit;
  transition: all .12s;
}
#btn-exec-finalizar:active { background: rgba(0,230,118,.22); transform: scale(.98); }

/* Print hint hidden in print */
.lp-no-print {}
@media print {
  .lp-no-print { display: none !important; }
  body.printing-logistics .lp-no-print { display: none !important; }
}

/* ── v8.5.2: Mapa de paradas y modo ejecutar ── */

/* Mapa de paradas */
#lv-map-container { min-height: 300px; }
#lv-map-container .leaflet-container { height: 100%; }

/* Horario en vista ejecución */
.exec-horario { font-size: 11px; color: #ffc107; margin-top: 2px; }

/* Botón Cómo llegar (brújula) junto al nombre del cliente */
.exec-maps-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(42,143,255,.15); color: var(--accent);
  font-size: 18px; text-decoration: none; flex-shrink: 0;
  transition: background .12s;
}
.exec-maps-btn:hover { background: rgba(42,143,255,.28); }

/* ═══════════════════════════════════════════════════════════════
   v8.5.2 — HOJA DE RUTA: MODO EJECUTAR
═══════════════════════════════════════════════════════════════ */
#vr-plan-panel    { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#vr-execute-panel { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.vr-exec-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg2); flex-shrink: 0;
}
#vr-exec-progress-bar { height: 100%; background: #00c97a; transition: width .35s; width: 0%; }

/* Parada actual */
.vr-curr-stop {
  background: var(--bg2); border: 1px solid rgba(0,201,122,0.3);
  border-radius: 12px; padding: 14px; margin-bottom: 10px;
}
.vr-stop-badge {
  display: inline-block; font-size: 10px; font-weight: 600;
  background: rgba(0,201,122,0.15); color: #00c97a;
  border-radius: 4px; padding: 2px 8px; margin-bottom: 10px;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.vr-stop-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(0,201,122,0.15); color: #00c97a;
  font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vr-num-sm {
  width: 22px; height: 22px; font-size: 11px;
  background: var(--bg3); color: var(--text3);
}
.vr-stop-name { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.vr-stop-addr { font-size: 12px; color: var(--text3); margin-bottom: 2px; }
.vr-stop-meta { font-size: 11px; color: var(--text3); margin-top: 2px; }
.vr-maps-btn {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--bg3); border: 1px solid var(--border2);
  color: var(--text2); font-size: 16px; text-decoration: none;
  flex-shrink: 0; align-self: flex-start;
}
.vr-maps-btn:hover { background: var(--bg4); }

/* Nota ALE en recorrido */
.vr-ale-note {
  font-size: 11px; color: #ff6b6b; background: rgba(255,107,107,0.12);
  border-radius: 5px; padding: 4px 8px; margin-top: 6px;
  border-left: 2px solid #ff6b6b;
}

/* Botones de acción del recorrido */
.vr-btn-row { display: flex; gap: 6px; margin-top: 12px; }
.vr-btn {
  flex: 1; padding: 9px 6px; border-radius: 8px; font-size: 12px;
  font-weight: 600; cursor: pointer; border: 1px solid transparent;
  text-align: center; transition: opacity .15s;
}
.vr-btn:active { opacity: 0.75; }
.vr-btn-ok    { background: rgba(0,230,118,0.15); color: #00e676; border-color: rgba(0,230,118,0.35); }
.vr-btn-warn  { background: rgba(255,193,7,0.15);  color: #ffc107; border-color: rgba(255,193,7,0.35); }
.vr-btn-danger{ background: rgba(255,107,107,0.15);color: #ff6b6b; border-color: rgba(255,107,107,0.35); }

/* Formulario inline (Visitada / Reagendar) */
.vr-inline-form {
  margin-top: 12px; padding: 12px;
  background: var(--bg); border: 1px solid var(--border2);
  border-radius: 9px;
}
.vr-form-label { font-size: 11px; font-weight: 600; color: var(--text3); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.04em; }
.vr-yn-row { display: flex; gap: 6px; }
.vr-yn-btn {
  flex: 1; padding: 7px; border-radius: 7px; font-size: 12px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border2); background: var(--bg3); color: var(--text2);
}
.vr-yn-btn.active-yes { background: rgba(0,230,118,0.18); color: #00e676; border-color: rgba(0,230,118,0.4); }
.vr-yn-btn.active-no  { background: rgba(255,107,107,0.15); color: #ff6b6b; border-color: rgba(255,107,107,0.3); }
.vr-inline-note {
  width: 100%; padding: 8px 10px; margin-top: 10px;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 7px; color: var(--text); font-size: 12px;
  font-family: inherit; box-sizing: border-box;
}
.vr-inline-note:focus { outline: none; border-color: var(--accent); }

/* Paradas pendientes (condensadas) */
.vr-upcoming-title {
  font-size: 10px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin: 10px 0 6px;
}
.vr-upcoming-stop {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 4px; border-bottom: 1px solid var(--border);
}
.vr-stop-name-sm  { font-size: 13px; color: var(--text); font-weight: 500; }
.vr-stop-meta-sm  { font-size: 11px; color: var(--text3); margin-top: 1px; }

/* ═══════════════════════════════════════════════════════════════
   v8.5.2 — LOGÍSTICA: ALE nota, order_ref, fallo inline
═══════════════════════════════════════════════════════════════ */
.exec-ale-note {
  font-size: 11px; color: #ff9800; background: rgba(255,152,0,0.12);
  border-radius: 5px; padding: 4px 8px; margin-top: 6px;
  border-left: 2px solid #ff9800;
}
.lr-order-ref {
  display: inline-block; font-size: 10px; font-weight: 600;
  background: rgba(42,143,255,0.12); color: #4a9fd5;
  border-radius: 4px; padding: 2px 7px; margin-left: 6px;
  vertical-align: middle;
}
.exec-order-ref {
  font-size: 11px; color: #4a9fd5; margin-top: 3px;
}
.lrf-order-ref-inp {
  padding: 4px 7px; font-size: 11px; background: var(--bg3);
  border: 1px solid var(--border2); color: var(--text);
  border-radius: 5px; width: 110px; font-family: inherit;
}
.lrf-order-ref-inp::placeholder { color: var(--text3); }
.lrf-order-ref-inp:focus { outline: none; border-color: var(--accent); }

/* Diálogo de fallo inline (logística) */
.exec-fail-dialog {
  margin-top: 10px; padding: 12px 14px;
  background: rgba(255,152,0,0.08); border: 1px solid rgba(255,152,0,0.35);
  border-radius: 9px;
}
.exec-fail-title {
  font-size: 12px; font-weight: 600; color: #ff9800;
  margin-bottom: 9px; display: flex; align-items: center; gap: 5px;
}
.exec-fail-note {
  width: 100%; padding: 7px 9px; margin-bottom: 9px; resize: none; height: 50px;
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 6px; color: var(--text); font-size: 12px;
  font-family: inherit; box-sizing: border-box;
}
.exec-fail-note:focus { outline: none; border-color: #ff9800; }
.exec-fail-btns { display: flex; gap: 6px; }
.exec-fail-btns .exec-btn { flex: 1; font-size: 11px; }
.exec-btn-reorder { background: rgba(42,143,255,0.15); color: #4a9fd5; border-color: rgba(42,143,255,0.35); }
.exec-btn-last    { background: var(--bg3); color: var(--text2); border-color: var(--border2); }
.exec-btn-cancel-fail { background: transparent; color: var(--text3); border-color: var(--border); flex: 0; padding: 6px 10px !important; }

/* ═══════════════════════════════════════════════════════════════
   v8.5.3 — Paradas canceladas (skipped) + starting point
═══════════════════════════════════════════════════════════════ */

/* Logística: parada tachada (skipped = no reintenta) */
.exec-stop-skipped { opacity: 0.6; }
.exec-name-skip {
  text-decoration: line-through;
  color: var(--text3);
}

/* Logística: estado skip en el detalle */
.lr-stop-row.lr-stop-skipped { opacity: 0.5; text-decoration: line-through; }

/* Diálogo de fallo — paso 1 (¿Reintenta?) */
.exec-fail-btns .exec-btn-ok     { background: rgba(0,230,118,0.15); color: #00e676; border-color: rgba(0,230,118,0.35); }
.exec-fail-btns .exec-btn-danger { background: rgba(255,107,107,0.15); color: #ff6b6b; border-color: rgba(255,107,107,0.35); }

/* Punto de partida — hint debajo del selector logística */
#lrf-start-status, #vr-start-status {
  font-size: 10px;
  color: var(--text3);
  margin-top: 3px;
  min-height: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   v8.5.4 — CAMPAÑAS: tracking, timeline unificado, stats
═══════════════════════════════════════════════════════════════ */

/* Quick register button */
.mp-reg-btn {
  width: 100%; padding: 9px; font-size: 12px; font-weight: 500;
  cursor: pointer; border-radius: 8px;
  border: 0.5px solid var(--border2); background: var(--bg3);
  color: var(--text); display: flex; align-items: center;
  justify-content: center; gap: 6px;
}
.mp-reg-btn:hover { background: var(--bg4); }
.mp-reg-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; }
.mp-reg-opt {
  padding: 8px 4px; font-size: 12px; cursor: pointer; border-radius: 7px;
  border: 0.5px solid var(--border2); background: var(--bg);
  color: var(--text); text-align: center;
}
.mp-reg-opt:hover { background: var(--bg3); }

/* Campaigns active section */
#mp-camp-section { padding: 10px 0; border-top: 0.5px solid var(--border); margin-top: 6px; }
.camp-section-lbl {
  font-size: 10px; font-weight: 500; color: var(--text3);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px;
  display: flex; align-items: center; gap: 5px;
}

/* One-click response buttons (in ficha + timeline) */
.cam-resp-star {
  width: 100%; padding: 10px; font-size: 13px; font-weight: 500;
  cursor: pointer; border-radius: 8px; margin-bottom: 5px;
  border: 2px solid var(--success, #00c97a);
  color: var(--text-success, #00c97a);
  background: rgba(0, 201, 122, 0.1);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.cam-resp-star:hover { background: rgba(0, 201, 122, 0.18); }
.cam-resp-btn {
  padding: 7px 4px; font-size: 11px; font-weight: 500;
  cursor: pointer; border-radius: 7px; border: 0.5px solid;
  text-align: center; display: flex; align-items: center;
  justify-content: center; gap: 4px;
}
.cam-rb-int  { border-color: #5DCAA5; color: #085041; background: #E1F5EE; }
.cam-rb-info { border-color: var(--accent); color: var(--accent); background: rgba(0,201,122,0.07); }
.cam-rb-no   { border-color: var(--danger, #E24B4A); color: var(--danger, #E24B4A); background: rgba(226,75,74,0.08); }
.cam-rb-late { border-color: var(--border2); color: var(--text2); background: var(--bg3); }
.cam-resp-star:active, .cam-resp-btn:active { opacity: .8; }

/* Outcome badges */
.camp-outcome-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 500; border-radius: 4px; padding: 2px 7px;
}
.cob-bought { background: rgba(0,201,122,0.15); color: #00c97a; }
.cob-other  { background: #EEEDFE; color: #3C3489; }
.cob-no     { background: rgba(226,75,74,0.1); color: #E24B4A; }
.cob-pend   { background: var(--bg3); color: var(--text3); }

/* Timeline: history filters */
.hist-filter {
  font-size: 11px; padding: 4px 10px; border-radius: 20px;
  border: 0.5px solid var(--border2); background: transparent;
  color: var(--text2); cursor: pointer;
}
.hist-filter.active {
  background: var(--bg3); border-color: var(--border);
  color: var(--text); font-weight: 500;
}

/* CAM entry in timeline */
.hist-row-cam { border-left: 2px solid #EEEDFE; padding-left: 6px; }

/* Campaign card: stats */
.camp-prog-bar {
  display: flex; border-radius: 3px; overflow: hidden; height: 6px;
  gap: 1px; margin: 8px 0 4px;
}
.camp-prog-labels {
  display: flex; gap: 10px; font-size: 10px; color: var(--text2);
  margin-bottom: 8px; flex-wrap: wrap;
}
.camp-metrics {
  display: flex; gap: 8px; margin-bottom: 8px;
}
.camp-metric {
  flex: 1; text-align: center; padding: 6px 4px;
  background: var(--bg3); border-radius: var(--brad-md, 6px);
}
.camp-metric-val { font-size: 16px; font-weight: 500; line-height: 1.1; }
.camp-metric-lbl { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* Engagement left border on client header */
.mp-engage-hot  { border-left: 3px solid #D85A30; padding-left: 8px; }
.mp-engage-warm { border-left: 3px solid #E6A817; padding-left: 8px; }
.mp-engage-cold { border-left: 3px solid #4A9FD5; padding-left: 8px; }
#mp-engage-label { font-size: 10px; margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   v8.5.17 — MAQUETACIÓN: MÓDULO CALENDARIO PREMIUM (Fase futura)
   ───────────────────────────────────────────────────────────────
   Reglas estructurales para el futuro módulo de Calendario full-screen
   (visitas/gestiones agendadas, estilo Apple Calendar macOS/iOS). Hoy no
   hay vista activa que consuma estas clases — se dejan preparadas para que
   cuando se implemente la lógica en app.js (próxima fase), el contenedor
   ya tenga la geometría, tipografía y curvas correctas desde el día 1, sin
   necesidad de retocar este archivo en paralelo.
   Convenciones: reutiliza los tokens existentes (--shell-max/--shell-pad
   para el ancho del carril, --border-subtle para las líneas ultra-finas de
   baja opacidad, --bg-sidebar/--bg-elevated para las superficies, la curva
   var(--ease-ios) para toda transición) — cero tokens nuevos,
   cero deuda de mantenimiento extra para el sistema de theming claro/oscuro.
═══════════════════════════════════════════════════════════════ */

/* Contenedor raíz: ocupa todo #main como una vista más (mismo patrón que
   #dashboard-view, #list-view, etc. — display:none por defecto, .active lo
   muestra vía JS). flex-column para apilar header de navegación + grilla. */
#calendar-view {
  display: none; flex-direction: column; flex: 1; min-height: 0;
  background: var(--bg-main);
}
#calendar-view.active { display: flex; }

/* Header de navegación: mes/semana actual + flechas prev/next + selector
   Mes/Semana/Día. Mismo alto que #filterbar (debajo del topbar) para que la
   transición entre vistas no produzca un salto de layout vertical. */
.cal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--shell-pad); flex-shrink: 0;
  border-bottom: 1px solid var(--border-subtle);
}
.cal-header-left { display: flex; align-items: center; gap: 14px; }
.cal-title {
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-primary); min-width: 160px;
}
.cal-nav { display: flex; align-items: center; gap: 2px; }
.cal-nav-btn {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 9px; color: var(--text-secondary);
  cursor: pointer; transition: background 0.3s var(--ease-ios), color 0.25s ease;
}
.cal-nav-btn svg { width: 16px; height: 16px; stroke-width: 2; }
.cal-nav-btn:hover { background: var(--overlay-hover); color: var(--text-primary); }
.cal-today-btn {
  height: 30px; padding: 0 13px; border-radius: 9px; font-size: 12px; font-weight: 600;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-secondary);
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: background 0.3s var(--ease-ios), color 0.25s ease;
}
.cal-today-btn:hover { background: var(--bg-elevated-2); color: var(--text-primary); }

/* Selector Mes/Semana/Día — mismo lenguaje visual que .view-toggle del topbar
   (segmented control), reutilizando los tokens --bg-modifier/--border-modifier
   ya endurecidos para dark mode más arriba en este archivo. */
.cal-range-toggle {
  display: flex; align-items: center; gap: 2px;
  background: var(--bg-modifier); border: 1px solid var(--border-modifier);
  border-radius: 11px; padding: 3px;
}
.cal-range-toggle button {
  background: transparent; border: none; color: var(--text-secondary);
  font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 8px;
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: background 0.35s var(--ease-ios), color 0.25s ease;
}
.cal-range-toggle button:not(.active):hover { background: var(--bg-modifier-strong); color: var(--text-primary); }
.cal-range-toggle button.active { background: rgba(42,143,255,0.14); color: var(--accent-primary); }

/* Grilla mensual: 7 columnas (Dom–Sáb) × N filas. Líneas divisorias
   ultra-finas (0.5px lógico, 1px físico con baja opacidad) en vez de bordes
   gruesos — el "aire" entre celdas es lo que estructura, no el trazo. */
.cal-grid-month {
  flex: 1; min-height: 0; display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;
  overflow: hidden;
}
.cal-weekday-row {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding: 0 var(--shell-pad); flex-shrink: 0;
}
.cal-weekday-label {
  text-align: center; padding: 8px 0; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted);
}
.cal-day-cell {
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 8px; min-height: 0; display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; transition: background 0.3s var(--ease-ios);
}
.cal-day-cell:nth-child(7n) { border-right: none; }
.cal-day-cell:hover { background: var(--overlay-hover); }
.cal-day-cell.is-today { background: rgba(42,143,255,0.06); }
.cal-day-cell.is-outside { opacity: 0.35; }
.cal-day-number {
  font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0;
}
.cal-day-cell.is-today .cal-day-number { background: var(--accent-primary); color: #fff; }

/* Eventos dentro de una celda: píldoras de baja opacidad (mismo lenguaje
   que .status-pill / los tonos --tone-*), nunca círculos de color sólido. */
.cal-event-pill {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--tone-info-bg); color: var(--tone-info);
  transition: background 0.25s var(--ease-ios);
}
.cal-event-pill:hover { background: var(--bg-elevated-2); }
.cal-event-pill.cal-event-success { background: var(--tone-success-bg); color: var(--tone-success); }
.cal-event-pill.cal-event-warn { background: var(--tone-warn-bg); color: var(--tone-warn); }
.cal-event-pill.cal-event-danger { background: var(--tone-danger-bg); color: var(--tone-danger); }
.cal-event-more {
  font-size: 10px; color: var(--text-muted); padding: 2px 7px; cursor: pointer;
}

/* Vista semanal/diaria: columna de horas a la izquierda + carriles de
   eventos, con líneas horizontales ultra-finas marcando cada hora. */
.cal-grid-week {
  flex: 1; min-height: 0; display: flex; overflow-y: auto;
}
.cal-hour-rail {
  width: 56px; flex-shrink: 0; display: flex; flex-direction: column;
}
.cal-hour-slot {
  height: 52px; border-top: 1px solid var(--border-subtle);
  font-size: 10px; color: var(--text-muted); padding: 4px 8px 0 0;
  text-align: right; flex-shrink: 0;
}
.cal-week-columns { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.cal-week-day-col {
  border-left: 1px solid var(--border-subtle); position: relative;
}
.cal-week-event {
  position: absolute; left: 4px; right: 4px; border-radius: 7px;
  padding: 4px 7px; font-size: 10.5px; font-weight: 500; overflow: hidden;
  background: var(--tone-info-bg); color: var(--tone-info);
  border-left: 2.5px solid var(--tone-info);
  transition: filter 0.25s var(--ease-ios);
}
.cal-week-event:hover { filter: brightness(1.15); }

@media (max-width: 760px) {
  .cal-title { font-size: 16px; min-width: 0; }
  .cal-day-number { width: 19px; height: 19px; font-size: 11px; }
  .cal-event-pill { font-size: 9.5px; padding: 2px 5px; }
}

/* ── v8.6.14: Campaign card — stats bar (contactos + estimado) ── */
.camp-stats {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.camp-audience { font-size: 12px; color: var(--text2); }
.camp-ncontacts {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: var(--accent); font-weight: 500;
  font-family: 'Inter', sans-serif; padding: 0; line-height: 1;
  transition: opacity 0.15s;
}
.camp-ncontacts:hover { opacity: .7; }
.camp-ncontacts b { font-weight: 700; }

/* ── FIDEL VINCULAR PANEL ── */
.fidel-link-header {
  font-size:13px; font-weight:600; color:var(--text);
  display:flex; flex-direction:column; gap:3px; margin-bottom:12px;
}
.fidel-link-sub { font-size:11px; color:var(--text2); font-weight:400; }
.fidel-link-search-row { display:flex; gap:6px; margin-bottom:10px; }
.fidel-search-input { flex:1; font-size:12px !important; padding:7px 10px !important; }
.fidel-search-btn { font-size:12px !important; padding:7px 12px !important; flex-shrink:0; }
.fidel-search-loading { display:flex; align-items:center; gap:8px; padding:12px 4px; color:var(--text2); font-size:12px; }
.fidel-search-empty { font-size:12px; color:var(--text3); padding:12px 4px; text-align:center; }
.fidel-customer-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border:1px solid var(--border);
  border-radius:8px; margin-bottom:6px; gap:10px;
  transition: background 0.1s;
}
.fidel-customer-row:hover { background:var(--overlay-hover); }
.fidel-customer-info { flex:1; min-width:0; }
.fidel-customer-name { font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fidel-customer-meta { font-size:10px; color:var(--text3); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fidel-link-btn { font-size:11px !important; padding:5px 10px !important; flex-shrink:0; display:flex; align-items:center; gap:4px; }

/* ── FIDEL STALE-WHILE-REVALIDATE BANNER v8.7.2 ── */
.fidel-stale-banner {
  display:flex; align-items:center; gap:8px;
  padding:8px 12px; margin-bottom:10px;
  border-radius:8px; font-size:11px;
  background:rgba(42,143,255,.08); color:var(--accent);
  border:1px solid rgba(42,143,255,.15);
  animation: fidel-banner-in 0.25s var(--ease-ios);
}
.fidel-stale-banner.fidel-stale-old {
  background:rgba(255,159,10,.08); color:#FF9F0A;
  border-color:rgba(255,159,10,.18);
}
@keyframes fidel-banner-in {
  from { opacity:0; transform:translateY(-4px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── BIBLIOTECA DE ARCHIVOS v8.7.3 ── */
#file-library-view {
  display: none; flex-direction: column; flex: 1; overflow: hidden; min-height: 0;
  background: var(--bg);
}
#file-library-view.active { display: flex; }

/* v8.7.4: Tabs upload vs URL en modal de archivo */
.fl-source-tabs {
  display: flex; gap: 4px; margin-bottom: 8px;
  background: var(--bg3); border-radius: 8px; padding: 3px;
}
.fl-src-tab {
  flex: 1; padding: 6px 10px; font-size: 11px; font-weight: 600;
  border: none; border-radius: 6px; cursor: pointer;
  font-family: 'Inter', sans-serif; color: var(--text2);
  background: transparent; transition: all 0.2s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.fl-src-tab.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.fl-src-tab:hover:not(.active) { color: var(--text); }

/* Dropzone de subida */
.fl-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 22px 16px; border: 1.5px dashed var(--border2);
  border-radius: 10px; cursor: pointer; text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
  background: var(--bg3);
}
.fl-dropzone:hover, .fl-dropzone.drag-over {
  border-color: var(--accent); background: rgba(42,143,255,0.06);
}
.fl-dz-icon { color: var(--text3); }
.fl-dz-text { font-size: 12px; font-weight: 600; color: var(--text2); }
.fl-dz-sub  { font-size: 10px; color: var(--text3); }

/* v8.7.5: Selector de visibilidad en modal de archivo */
/* v8.7.21: BUG RAÍZ encontrado — estos labels viven dentro de un <div class="fg">
   (el wrapper estándar de campos de formulario), que trae la regla global
   ".fg label { display:block }" con más especificidad (0,1,1) que un simple
   ".fl-vis-radio"/".fl-vis-vendor-item" (0,1,0). Esa regla le ganaba a
   nuestro display:flex y aplastaba el cuadrado del checkbox a una línea
   finita (el borde sin ancho real, por eso se veía como un palito).
   Se sube la especificidad calificando el selector con su contenedor. */
.fl-vis-wrap {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.fl-vis-wrap .fl-vis-radio {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  cursor: pointer; transition: background 0.15s ease;
}
.fl-vis-wrap .fl-vis-radio:hover { background: var(--overlay-hover); }
.fl-vis-wrap .fl-vis-radio input[type="radio"] { display: none; }
.fl-vis-wrap .fl-vis-check {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  border: 2px solid var(--border2); background: var(--bg2);
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.fl-vis-wrap .fl-vis-check::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--accent); opacity: 0; transition: opacity 0.15s;
}
.fl-vis-wrap .fl-vis-radio:has(input:checked) .fl-vis-check { border-color: var(--accent); }
.fl-vis-wrap .fl-vis-radio:has(input:checked) .fl-vis-check::after { opacity: 1; }
.fl-vis-wrap .fl-vis-label-text { display: flex; flex-direction: column; gap: 1px; }
.fl-vis-wrap .fl-vis-label-text strong { font-size: 12px; font-weight: 600; color: var(--text); }
.fl-vis-wrap .fl-vis-label-text span { font-size: 10.5px; color: var(--text3); }
.fl-vis-vendor-list {
  padding: 8px 12px 12px 38px; display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.08);
}
.fl-vis-vendor-list .fl-vis-vendor-item {
  display: flex; align-items: center; cursor: pointer;
  padding: 5px 8px; border-radius: 7px; transition: background 0.15s;
}
.fl-vis-vendor-list .fl-vis-vendor-item:hover { background: var(--overlay-hover); }
/* v8.7.20: ocultado "a prueba de balas" — más robusto que display:none puro
   en navegadores/webviews viejos, y saca el checkbox nativo del flujo sin
   depender de que el motor de render lo respete al 100%. */
.fl-vis-vendor-list .fl-vis-vendor-item input[type="checkbox"] {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0; overflow: hidden;
}
.fl-vis-vendor-list .fl-vis-vcheck {
  width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--border2);
  background: var(--bg2); flex-shrink: 0; position: relative;
  margin-right: 8px;
  transition: background 0.15s, border-color 0.15s;
}
/* v8.7.20: antes usaba :has(input:checked) — se reemplaza por una clase
   .checked que el JS togglea, para no depender de soporte de :has(). */
.fl-vis-vendor-list .fl-vis-vendor-item.checked .fl-vis-vcheck {
  background: var(--accent); border-color: var(--accent);
}
.fl-vis-vendor-list .fl-vis-vendor-item.checked .fl-vis-vcheck::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 5px; height: 8px; border: 2px solid white; border-top: none; border-left: none;
  transform: rotate(45deg);
}
.fl-vis-vendor-list .fl-vis-vdot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  margin-right: 8px;
}
.fl-vis-vendor-list .fl-vis-vname { font-size: 12px; color: var(--text); font-weight: 500; }

/* Badge de visibilidad en cards de archivo */
.fl-vis-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 600; padding: 2px 7px; border-radius: 20px;
  background: rgba(42,143,255,0.1); color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.fl-vis-badge.restricted {
  background: rgba(255,193,7,0.12); color: #ffc107;
}

.fl-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: var(--bg2); flex-shrink: 0;
}
.fl-header-title {
  flex: 1; font-size: 15px; font-weight: 600; color: var(--text);
  display: flex; align-items: center;
}
.fl-add-btn { flex-shrink: 0; }

.fl-body {
  flex: 1; overflow-y: auto; padding: 16px;
}
.fl-desc {
  font-size: 12px; color: var(--text3); margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.fl-list { display: flex; flex-direction: column; gap: 10px; }
.fl-loading {
  display: flex; justify-content: center; padding: 40px 0; color: var(--text3);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Tarjeta de archivo */
.fl-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
  display: flex; align-items: flex-start; gap: 12px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fl-card:hover { border-color: var(--border2); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.fl-card-icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(42,143,255,0.1); color: var(--accent);
}
.fl-card-icon.cat-lista_precios  { background: rgba(0,230,118,0.1); color: var(--c-cliente); }
.fl-card-icon.cat-catalogo        { background: rgba(255,152,0,0.1);  color: var(--c-visitado); }
.fl-card-icon.cat-promo           { background: rgba(255,61,61,0.1);   color: var(--c-prospecto); }
.fl-card-icon.cat-general         { background: rgba(42,143,255,0.1);  color: var(--accent); }

.fl-card-body { flex: 1; min-width: 0; }
.fl-card-title {
  font-size: 13px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fl-card-meta {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
}
.fl-cat-pill {
  font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 20px;
  background: rgba(42,143,255,0.1); color: var(--accent);
  white-space: nowrap; text-transform: uppercase; letter-spacing: 0.03em;
}
.fl-cat-pill.cat-lista_precios  { background: rgba(0,230,118,0.1); color: var(--c-cliente); }
.fl-cat-pill.cat-catalogo        { background: rgba(255,152,0,0.1);  color: var(--c-visitado); }
.fl-cat-pill.cat-promo           { background: rgba(255,61,61,0.1);  color: #ff8a80; }

.fl-card-desc {
  font-size: 11px; color: var(--text3); margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-card-url {
  font-size: 10px; color: var(--text3); margin-top: 3px; font-family: monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-card-actions {
  display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
.fl-action-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500; padding: 5px 10px;
  border-radius: 7px; border: 1px solid var(--border2);
  background: transparent; color: var(--text2); cursor: pointer;
  transition: all 0.15s; white-space: nowrap; font-family: 'Inter', sans-serif;
}
.fl-action-btn:hover { background: var(--bg3); color: var(--text); }
.fl-action-btn.primary { background: rgba(42,143,255,0.1); color: var(--accent); border-color: rgba(42,143,255,0.2); }
.fl-action-btn.primary:hover { background: rgba(42,143,255,0.18); }
.fl-action-btn.whatsapp { background: rgba(37,211,102,0.08); color: #25d366; border-color: rgba(37,211,102,0.2); }
.fl-action-btn.whatsapp:hover { background: rgba(37,211,102,0.15); }
.fl-action-btn.danger { color: var(--c-prospecto); border-color: rgba(255,61,61,0.2); }
.fl-action-btn.danger:hover { background: rgba(255,61,61,0.08); }

/* Card vacía */
.fl-empty {
  text-align: center; padding: 48px 20px; color: var(--text3);
}
.fl-empty-icon { opacity: 0.2; margin-bottom: 12px; }
.fl-empty h4 { font-size: 14px; font-weight: 600; color: var(--text2); margin: 0 0 4px; }
.fl-empty p  { font-size: 12px; margin: 0; }

/* Share row en modal compartir */
.fl-share-row {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 9px; padding: 11px 13px;
  display: flex; align-items: center; gap: 10px;
}
.fl-share-row-info { flex: 1; min-width: 0; }
.fl-share-row-title { font-size: 12px; font-weight: 600; color: var(--text); }
.fl-share-row-url   { font-size: 10px; color: var(--text3); margin-top: 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fl-share-row-btns  { display: flex; gap: 5px; flex-shrink: 0; }
.fl-share-row-btns .fl-action-btn {
  padding: 7px; min-width: 30px; height: 30px;
  justify-content: center;
}

/* fp-back-btn: botón volver estándar para feature panels (v8.7.3) */
.fp-back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 1px solid var(--border2);
  color: var(--text2); font-size: 12px; font-weight: 500;
  padding: 5px 10px; border-radius: 7px; cursor: pointer;
  font-family: 'Inter', sans-serif; transition: all 0.15s;
  flex-shrink: 0; white-space: nowrap;
}
.fp-back-btn:hover { background: var(--bg3); color: var(--text); }

/* ── v8.7.9 — PARADAS LIBRES EN RUTA LOGÍSTICA ────────────────────────────── */

/* Botón "+ Parada libre" en el header de stops */
.lrf-free-stop-btn {
  font-size: 11px; font-weight: 600; color: var(--accent);
  background: rgba(var(--accent-rgb, 0,122,255), 0.08);
  border: 1px solid rgba(var(--accent-rgb, 0,122,255), 0.25);
  border-radius: 5px; padding: 2px 9px; cursor: pointer;
  transition: background 0.15s;
  display: inline-flex; align-items: center;
}
.lrf-free-stop-btn:hover { background: rgba(var(--accent-rgb, 0,122,255), 0.14); }

/* Badge "Parada libre" — reutilizado en form y exec view */
.lrf-free-badge {
  display: inline-block;
  font-size: 10px; font-weight: 600; letter-spacing: .03em;
  color: #7c6f00; background: rgba(255,220,0,0.15);
  border: 1px solid rgba(255,200,0,0.35);
  border-radius: 4px; padding: 1px 6px; margin-left: 5px;
  vertical-align: middle;
}

/* Stop item en el form — fondo tenue diferenciado */
.lrf-stop-item.lrf-free-stop {
  background: rgba(255,220,0,0.05);
  border-left: 3px solid rgba(255,200,0,0.4);
}

/* Línea de dirección/notas en parada libre */
.lrf-stop-addr-line {
  font-size: 11px; color: var(--text2);
  margin-top: 3px; padding-left: 2px;
}

/* Stop en ejecución — parada libre */
.exec-stop.exec-free-stop {
  border-left: 3px solid rgba(255,200,0,0.5);
  background: rgba(255,220,0,0.04);
}

/* ── v8.7.9 — CLIENTES MANUALES EN HOJA DE RUTA ───────────────────────────── */

/* Sección de clientes manuales en el plan */
.vr-manual-section {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.vr-manual-header {
  font-size: 10px; font-weight: 600; color: var(--text2);
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 6px; padding: 0 2px;
}

/* Badge "Manual" en el nombre del cliente */
.vr-manual-badge {
  display: inline-block; font-size: 9px; font-weight: 700;
  color: #6b46c1; background: rgba(107,70,193,0.12);
  border: 1px solid rgba(107,70,193,0.3);
  border-radius: 4px; padding: 1px 5px; margin-left: 5px;
  vertical-align: middle; letter-spacing: .03em;
}

/* Fondo sutil para filas de clientes manuales */
.vr-manual-item {
  background: rgba(107,70,193,0.04);
  border-left: 3px solid rgba(107,70,193,0.3);
  border-radius: 0 6px 6px 0;
}

/* Sección de búsqueda para agregar manuales */
.vr-manual-add {
  margin-top: 14px;
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}
.vr-manual-add-label {
  font-size: 10px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 6px;
}

/* ── v8.7.9 — FICHA RÁPIDA EN EJECUCIÓN VR ────────────────────────────────── */

/* Botón toggle — sutil, debajo de los datos de la parada */
.vr-ficha-toggle {
  display: flex; align-items: center; gap: 5px;
  width: 100%; margin-top: 10px; padding: 7px 10px;
  font-size: 11px; font-weight: 600; color: var(--text2);
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 7px; cursor: pointer; text-align: left;
  transition: background 0.15s;
}
.vr-ficha-toggle:hover { background: var(--bg4, var(--border)); }

/* Preview de última nota (visible cuando está colapsado) */
.vr-ficha-preview {
  flex: 1; font-weight: 400; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-left: 4px;
}

/* Cuerpo expandido */
.vr-ficha-body {
  margin-top: 8px; padding: 10px 12px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; display: flex; flex-direction: column; gap: 8px;
}

/* Fila de dato */
.vr-ficha-row {
  display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
}
.vr-ficha-label {
  font-size: 10px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .05em;
  min-width: 64px; flex-shrink: 0; padding-top: 2px;
}

/* Chip de tag / frecuencia */
.vr-ficha-chip {
  font-size: 10px; font-weight: 600; color: var(--text2);
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 4px; padding: 1px 6px;
}

/* Bloque de última nota */
.vr-ficha-note { flex-direction: column; gap: 3px; }
.vr-ficha-note-text {
  font-size: 12px; color: var(--text); line-height: 1.45;
  padding-left: 72px; /* alineado con los valores */
}
.vr-ficha-note-date {
  font-size: 10px; color: var(--text3); padding-left: 72px;
}

/* ── v8.7.9 — BUSCADOR MANUAL MEJORADO (estilo logística) ─────────────────── */
.vr-manual-add {
  margin-bottom: 12px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 12px;
}
.vr-manual-add-label {
  font-size: 10px; font-weight: 700; color: var(--text2);
  text-transform: uppercase; letter-spacing: .06em;
  display: flex; align-items: center; gap: 5px;
  margin-bottom: 8px;
}
/* Wrap con ícono de lupa */
.vr-manual-search-wrap {
  position: relative; display: flex; align-items: center;
}
.vr-manual-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text3); pointer-events: none; display: flex;
}
.vr-manual-search-input {
  width: 100%; padding: 8px 10px 8px 34px;
  font-size: 13px; color: var(--text);
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 8px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.vr-manual-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 0,122,255), 0.15);
}
.vr-manual-search-input::placeholder { color: var(--text3); }

/* ── v8.7.9 — D&D LOCALIDADES + CLIENTES SIN ACTIVIDAD ────────────────────── */

/* Handle de drag para localidades */
.route-loc-drag-handle {
  cursor: grab; color: var(--text3); font-size: 14px;
  padding: 0 6px 0 0; user-select: none; flex-shrink: 0;
}
.route-loc-drag-handle:active { cursor: grabbing; }
.route-group-header { display: flex; align-items: center; }

/* Tabla de clientes sin actividad */
.ri-table { width: 100%; border-collapse: collapse; }
.ri-head {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 8px; padding: 6px 10px;
  font-size: 10px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.ri-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border);
  align-items: center; font-size: 12px;
  transition: background 0.1s;
}
.ri-row:hover { background: var(--bg3); }
.ri-row:last-child { border-bottom: none; }
.ri-name { font-weight: 600; color: var(--text); }
.ri-vendor { color: var(--text2); }
.ri-date { color: var(--text3); font-size: 11px; }

/* Badges de inactividad */
.ri-badge { display: inline-block; border-radius: 5px; padding: 2px 7px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.ri-never   { background: rgba(120,120,130,.12); color: var(--text3); }
.ri-medium  { background: rgba(255,159,10,.12);  color: #FF9F0A; }
.ri-high    { background: rgba(255,69,58,.12);   color: #FF453A; }
.ri-critical{ background: rgba(175,0,0,.15);     color: #c62828; }

.ri-open-btn {
  font-size: 11px; color: var(--accent); background: none;
  border: 1px solid rgba(var(--accent-rgb,0,122,255),.3);
  border-radius: 5px; padding: 2px 8px; cursor: pointer;
  display: flex; align-items: center; gap: 3px; white-space: nowrap;
}
.ri-open-btn:hover { background: rgba(var(--accent-rgb,0,122,255),.08); }

/* Wrap de la sección */
.rep-inactivos-wrap {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
}

/* ── v8.7.9 — COMPARATIVO DE VENDEDORES ───────────────────────────────────── */
.rep-comparativo-wrap {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
}
.rc-head, .rc-row {
  display: grid;
  grid-template-columns: 2fr 60px 1fr 80px 80px 70px 70px 80px;
  gap: 8px; align-items: center; padding: 6px 8px;
}
.rc-head {
  font-size: 9.5px; font-weight: 700; color: var(--text3);
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border); padding-bottom: 8px;
}
.rc-row {
  border-bottom: 1px solid var(--border);
  font-size: 12px; transition: background 0.1s;
}
.rc-row:hover { background: var(--bg3); }
.rc-row:last-child { border-bottom: none; }
.rc-vendor { font-weight: 600; color: var(--text); }
.rc-num { text-align: right; }
.rc-muted { color: var(--text2); }
.rc-bar-label { font-size: 9.5px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; }
.rc-bar-cell { display: flex; align-items: center; gap: 8px; }
.rc-bar-bg {
  flex: 1; height: 8px; background: var(--bg3);
  border-radius: 4px; overflow: hidden;
}
.rc-bar-fill {
  display: block; height: 100%;
  background: var(--accent); border-radius: 4px;
  transition: width 0.4s var(--ease-ios);
}
.rc-bar-val { font-size: 11px; font-weight: 700; color: var(--text); min-width: 22px; text-align: right; }

/* ── v8.7.10 — CARPETA DEL DÍA: MODAL DE PREFERENCIAS ─────────────────────── */
.cp-radio, .cp-check {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; cursor: pointer;
  font-size: 13px; color: var(--text);
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 7px; transition: background .15s, border-color .15s;
}
.cp-radio:hover, .cp-check:hover { background: var(--bg4, var(--border)); border-color: var(--border2); }
.cp-radio input, .cp-check input { accent-color: var(--accent); flex-shrink: 0; }

/* ── v8.7.10 — TAB PLANES en ficha de cliente ─────────────────────────────── */
.pp-plan-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.pp-plan-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.pp-plan-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 3px; }
.pp-plan-meta { font-size: 11px; color: var(--text3); }
.pp-status {
  display: inline-block; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 5px;
  border: 1px solid; flex-shrink: 0;
  text-transform: uppercase; letter-spacing: .04em;
}
.pp-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.pp-stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 4px; background: var(--bg3); border-radius: 6px;
}
.pp-stat-num { font-size: 16px; font-weight: 700; color: var(--text); }
.pp-stat-lbl { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }

/* ── v8.7.10 — PLANTILLAS DE CAMPAÑA ──────────────────────────────────────── */
.camp-tpl-btn {
  font-size: 11px; font-weight: 600; color: var(--text2);
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 5px; padding: 3px 9px; cursor: pointer;
  display: inline-flex; align-items: center;
  transition: background .15s, border-color .15s, color .15s;
}
.camp-tpl-btn:hover {
  background: var(--bg4, var(--border));
  border-color: var(--accent);
  color: var(--accent);
}

/* ── v8.7.10 — FIXES DE UI ─────────────────────────────────────────────────── */

/* fl-share siempre sobre modal-prospect (dom order issue + split-screen) */
#modal-fl-share { z-index: 2200 !important; }

/* Botones de acción en ruta (plan) — solo Ir y Ficha, sin redundancia */
.route-actions { gap: 5px; }

/* ── v8.7.10 — PANEL COMPACTO DE CLIENTE EN REPORTES ──────────────────────── */

/* Split: layout horizontal solo cuando el panel está abierto */
@media (min-width: 700px) {
  #reports-view.rcp-open {
    display: flex; flex-direction: row; height: 100%; overflow: hidden;
  }
  #reports-view.rcp-open > .fv-header { display: none; }
  #reports-view.rcp-open > .fv-body  { flex: 1; min-width: 0; overflow-y: auto; }
}

/* Panel lateral compacto */
#rcp-panel {
  display: none; flex-direction: column;
  width: 340px; flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--bg2);
  overflow-y: auto;
  animation: slideInRight .25s var(--ease-ios);
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@media (max-width: 699px) {
  #rcp-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(360px, 100vw); z-index: 1800;
    box-shadow: -4px 0 24px rgba(0,0,0,.4);
  }
}

.rcp-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 8px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.rcp-title { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcp-close-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text3); padding: 4px; border-radius: 5px;
  display: flex; align-items: center;
}
.rcp-close-btn:hover { background: var(--bg3); color: var(--text); }

.rcp-section { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.rcp-section-title { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.rcp-status { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.rcp-meta { font-size: 12px; color: var(--text2); display: flex; align-items: center; gap: 5px; margin-bottom: 4px; }
.rcp-ale { background: rgba(255,69,58,.08); border-left: 2px solid #FF453A; padding: 4px 8px; border-radius: 0 4px 4px 0; font-size: 11px; color: var(--text); margin-bottom: 4px; }
.rcp-note-text { font-size: 12px; color: var(--text); line-height: 1.5; }
.rcp-footer { padding: 12px 14px; margin-top: auto; }

/* ── v8.7.10 — SPLIT-SCREEN EN REPORTES (ficha 50% derecha) ───────────────── */
@media (min-width: 640px) {
  body.mode-reports.prospect-split #modal-prospect {
    left: 50%;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    pointer-events: none;
  }
  body.mode-reports.prospect-split #modal-prospect .modal {
    pointer-events: auto;
    max-width: 100% !important;
    width: 100% !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0;
    border-top: none; border-right: none; border-bottom: none;
    border-left: 1px solid var(--border2);
    box-shadow: -10px 0 40px rgba(0,0,0,0.45);
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-ios);
  }
  body.mode-reports.prospect-split #modal-prospect.open .modal {
    transform: translateX(0);
  }
  /* El panel de reportes se estrecha al 50% solo cuando hay split activo con modal */
  body.mode-reports.prospect-split #reports-view .fv-body {
    overflow-y: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v8.7.52 — Fase 2 HIG: componente de select propio (reemplaza <select>
   nativos). Los <select> nativos no se pueden restylear cuando están
   abiertos — la lista de opciones la dibuja el navegador/SO, no nuestro CSS.
   Por eso se superponían con el resto de la página y tenían esquinas
   cuadradas pese al resto del diseño. Este bloque estiliza el trigger propio
   + el panel propio; el <select> real sigue vivo en el DOM (ver core JS).
   ═══════════════════════════════════════════════════════════════════════════ */
.csel-wrap { position: relative; display: inline-block; width: 100%; }
.csel-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; margin: 0;
}
.csel-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--input-bg, rgba(255,255,255,0.06)); border: 1px solid var(--border-retina, var(--border2));
  border-radius: var(--radius, 8px); padding: 9px 12px; font-size: 13px; line-height: 1.3;
  color: var(--txt-main, var(--text)); font-family: 'Inter', sans-serif; cursor: pointer; text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.csel-trigger:hover { border-color: var(--accent, var(--accent-blue)); }
.csel-wrap.open .csel-trigger { border-color: var(--accent, var(--accent-blue)); box-shadow: 0 0 0 3px var(--accent-bg, var(--accent-blue-trans)); }
.csel-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
.csel-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.csel-trigger .csel-chevron { flex-shrink: 0; display: flex; color: var(--text3, var(--txt-muted)); transition: transform 0.25s var(--ease-ios); }
.csel-wrap.open .csel-chevron { transform: rotate(180deg); }

.csel-panel {
  position: fixed; z-index: 9600; min-width: 160px; max-height: 280px; overflow-y: auto;
  /* v8.7.53 FIX: el token "glass" (drawer) tiene transparencia a propósito
     para SU contexto (flota sobre contenido, se ve bien que se filtre algo).
     Un panel de opciones es un menú funcional — necesita ser prácticamente
     opaco para leerse bien, si no el texto de atrás "fantasmea" encima de
     las opciones. Fondo sólido, sin blur (no tiene sentido blurear algo que
     ya tapa del todo lo de atrás). */
  background: var(--bg-surface, var(--bg2)); opacity: 0;
  border: 1px solid var(--border-retina, var(--border2)); border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 12px 30px rgba(0,0,0,0.45)); padding: 6px;
  transform: translateY(-6px) scale(0.97); transform-origin: top center;
  pointer-events: none; transition: opacity 0.18s var(--ease-ios), transform 0.22s var(--ease-ios);
}
.csel-panel.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.csel-option {
  padding: 8px 10px; border-radius: 7px; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  color: var(--txt-main, var(--text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.1s;
}
.csel-option:hover, .csel-option.csel-highlight { background: var(--overlay-hover, rgba(255,255,255,0.06)); }
.csel-option.csel-selected { font-weight: 600; color: var(--accent, var(--accent-blue)); }
.csel-option[disabled] { opacity: 0.35; pointer-events: none; }
.csel-panel-empty { padding: 10px; font-size: 12px; color: var(--text3, var(--txt-muted)); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .csel-panel { transition: opacity 0.15s ease; transform: none; }
}