/*
 * CIMA · Ventas — Panel de Ventas
 * Archivo: app/style/app.css
 * Estilo CRM profesional. Fondo sólido (blanco en claro, casi-negro en oscuro),
 * automático por prefers-color-scheme. Acento de marca: aguamarina #00afc2.
 */

/* ═══════════════════ CRM2 OLA3 TEMA: tokens (claro/oscuro/auto) ═══════════════
   Reorganizado: TODOS los tokens de color viven aquí arriba ahora (antes
   --violet/--blue/--amber vivían sueltos cerca del final, en el bloque CRM2
   OLA2) — un solo lugar para auditar el tema completo. Decisión documentada
   en el informe de la ola 3.

   Mecánica de 3 estados, sin depender de JS para que 'auto' funcione:
     - :root (bloque de abajo)                    → tema claro, DEFAULT.
     - @media(prefers-color-scheme:dark){:root}    → 'auto' cuando el SO
       prefiere oscuro (nada de JS: es la cascada normal del navegador).
     - :root[data-theme="light"] / [data-theme="dark"] → override MANUAL.
       Ambos son selectores CON atributo (más específicos que un :root a
       secas) y NO están detrás de ningún @media, así que ganan sin importar
       la preferencia del SO, en cualquiera de las dos direcciones. JS (ver
       index.html, vwThemeApply) les pone/quita el atributo según
       localStorage('vw_theme'); en 'auto' JS no toca el atributo — por eso
       'auto' sigue funcionando incluso si algo falla en el JS. */
:root {
  color-scheme: light dark;

  --accent: #00afc2;
  --accent-rgb: 0, 175, 194;
  --accent-ink: #ffffff;
  --accent-hover: #0098a9;
  --navy: #04346c;
  --avatar-ink: #ffffff;

  /* ---- Tema claro (DEFAULT) ---- */
  --bg: color-mix(in srgb, var(--navy) 3%, #ffffff);
  --surface: #ffffff;
  --surface-2: color-mix(in srgb, var(--navy) 6%, #ffffff);
  --surface-hover: color-mix(in srgb, var(--navy) 10%, #ffffff);
  --border: color-mix(in srgb, var(--navy) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--navy) 22%, transparent);
  --text: var(--navy);
  --text-muted: color-mix(in srgb, var(--text) 62%, var(--bg));
  --text-faint: color-mix(in srgb, var(--text) 40%, var(--bg));
  --shadow: 0 1px 2px color-mix(in srgb, var(--navy) 6%, transparent), 0 10px 28px color-mix(in srgb, var(--navy) 8%, transparent);
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.08);
  --danger-border: rgba(220, 38, 38, 0.24);
  --success: #16a34a;
  --success-bg: rgba(22, 163, 74, 0.10);
  --success-border: rgba(22, 163, 74, 0.26);
  --logo-navy: var(--navy);
  --scrim: rgba(15, 23, 42, 0.45);
  --scrim-soft: rgba(15, 23, 42, 0.35);
  --violet: #7c5cff;
  --blue: #2563eb;
  --amber: #d97706;

  --radius: 14px;
  --radius-sm: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0d13;
    --surface: #11151d;
    --surface-2: #0d1017;
    --surface-hover: #191f2a;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.16);
    --text: #eef3fb;
    --text-muted: rgba(238, 243, 251, 0.62);
    --text-faint: rgba(238, 243, 251, 0.38);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 34px rgba(0, 0, 0, 0.45);
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.12);
    --danger-border: rgba(248, 113, 113, 0.30);
    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.14);
    --success-border: rgba(74, 222, 128, 0.32);
    --logo-navy: #eef3fb;
    --scrim: rgba(0, 0, 0, 0.6);
    --scrim-soft: rgba(0, 0, 0, 0.55);
    --violet: #a78bfa;
    --blue: #60a5fa;
    --amber: #fbbf24;
  }
}

/* Override manual — gana SIEMPRE, sin @media, por especificidad (atributo
   sobre :root). Mismos valores que el bloque @media de arriba, para que
   "oscuro" se vea igual la haya elegido el SO o el usuario a mano. */
:root[data-theme="dark"] {
  --bg: #0a0d13;
  --surface: #11151d;
  --surface-2: #0d1017;
  --surface-hover: #191f2a;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #eef3fb;
  --text-muted: rgba(238, 243, 251, 0.62);
  --text-faint: rgba(238, 243, 251, 0.38);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 34px rgba(0, 0, 0, 0.45);
  --danger: #f87171;
  --danger-bg: rgba(248, 113, 113, 0.12);
  --danger-border: rgba(248, 113, 113, 0.30);
  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.14);
  --success-border: rgba(74, 222, 128, 0.32);
  --logo-navy: #eef3fb;
  --scrim: rgba(0, 0, 0, 0.6);
  --scrim-soft: rgba(0, 0, 0, 0.55);
  --violet: #a78bfa;
  --blue: #60a5fa;
  --amber: #fbbf24;
}

/* Override manual "claro" — hace falta como bloque EXPLÍCITO (no basta con
   heredar el :root de arriba) para el caso SO=oscuro + usuario elige claro:
   ahí el @media(dark) de arriba SÍ matchea el SO, y sin este bloque de mayor
   especificidad el override perdería. */
:root[data-theme="light"] {
  --bg: color-mix(in srgb, var(--navy) 3%, #ffffff);
  --surface: #ffffff;
  --surface-2: color-mix(in srgb, var(--navy) 6%, #ffffff);
  --surface-hover: color-mix(in srgb, var(--navy) 10%, #ffffff);
  --border: color-mix(in srgb, var(--navy) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--navy) 22%, transparent);
  --text: var(--navy);
  --text-muted: color-mix(in srgb, var(--text) 62%, var(--bg));
  --text-faint: color-mix(in srgb, var(--text) 40%, var(--bg));
  --shadow: 0 1px 2px color-mix(in srgb, var(--navy) 6%, transparent), 0 10px 28px color-mix(in srgb, var(--navy) 8%, transparent);
  --danger: #dc2626;
  --danger-bg: rgba(220, 38, 38, 0.08);
  --danger-border: rgba(220, 38, 38, 0.24);
  --success: #16a34a;
  --success-bg: rgba(22, 163, 74, 0.10);
  --success-border: rgba(22, 163, 74, 0.26);
  --logo-navy: var(--navy);
  --scrim: rgba(15, 23, 42, 0.45);
  --scrim-soft: rgba(15, 23, 42, 0.35);
  --violet: #7c5cff;
  --blue: #2563eb;
  --amber: #d97706;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* CRM2 OLA5 (Tarea 3): remata el lockdown de gestos del navegador (el resto
   vive en app/api/client.js ~L210-267) — mata el swipe de dos dedos
   atrás/adelante del historial en Chrome/Edge macOS y el pull-to-refresh
   móvil. No cubre Cmd/Ctrl +/- (zoom) ni gestos del propio SO (ver informe). */
html, body { height: 100%; overscroll-behavior: none; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

button, input { font-family: inherit; }

/* ───────────────────── Marca: colores del SVG inlineado ───────────────────── */
.cima-c-accent { fill: var(--accent); }
.cima-c-navy { fill: var(--logo-navy); transition: fill 0.15s ease; }

/* ───────────────────── SPA: vistas login/app (controladas por JS) ─────────────────────
   #vw-view-login y #vw-view-app se alternan con el atributo `hidden`. Ambas reglas de
   abajo (.vw-login-page, .vw-shell) fijan `display:flex` con la MISMA especificidad que
   `[hidden]`, así que sin esto el hidden queda sin efecto visual. Selector por id: gana
   la cascada sin necesitar !important. */
#vw-view-login[hidden],
#vw-view-app[hidden] {
  display: none;
}

/* ───────────────────── Login ───────────────────── */
.vw-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}

.vw-login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px 32px 32px;
}

.vw-login-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.vw-login-brand svg {
  width: 168px;
  height: auto;
}

.vw-login-tag {
  text-align: center;
  margin-bottom: 30px;
  font-size: 12.5px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vw-field {
  margin-bottom: 16px;
}

.vw-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.vw-field input,
.vw-field select,
.vw-field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.vw-field select {
  appearance: auto;
}

.vw-field textarea {
  resize: vertical;
  min-height: 72px;
}

.vw-field input::placeholder,
.vw-field textarea::placeholder {
  color: var(--text-faint);
}

.vw-field input:focus,
.vw-field select:focus,
.vw-field textarea:focus {
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}

.vw-submit {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.vw-submit:hover { background: var(--accent-hover); }
.vw-submit:active { transform: translateY(1px); }
.vw-submit:disabled { opacity: 0.6; cursor: default; }

.vw-error {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  font-size: 13px;
  display: none;
}

.vw-error.is-visible { display: block; }

/* ───────────────────── Shell del panel (sidebar + contenido) ───────────────────── */
.vw-shell {
  min-height: 100vh;
  display: flex;
}

.vw-sidebar {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.vw-sidebar-brand {
  /* CRM2 OLA4 (Tarea 1): pasó de <div> a <button> (toggle de tema) — reset
     de los estilos de botón nativo para que siga viéndose igual que antes,
     más el affordance de que ahora se puede clickear. */
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 20px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.vw-sidebar-brand:hover { background: var(--surface-hover); }

.vw-sidebar-brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.vw-sidebar-brand-mark {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.vw-sidebar-brand svg {
  width: 26px;
  height: auto;
  flex-shrink: 0;
}

/* CRM2 OLA5 (Corrección 1): el mini-indicador sol/luna que vivía pegado a la
   esquina del isotipo (.vw-theme-indicator) se ELIMINÓ — Miguel no lo
   quiere. El logo sigue ciclando el tema al click; el tooltip dinámico
   ("Tema: X — click para cambiar", en index.html) es la única affordance. */

.vw-sidebar-brand-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.15;
}

.vw-sidebar-brand-text em {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vw-sidebar-nav {
  flex: 1;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.vw-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.vw-nav-item:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.vw-nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.vw-nav-item.is-active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}

.vw-nav-item .vw-nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
}

.vw-nav-item.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.vw-nav-badge {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
}

/* Contador de no leídos (chat de Soporte): variante llamativa sobre el fondo neutro. */
.vw-nav-badge.is-unread {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
  min-width: 18px;
  text-align: center;
}

.vw-sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vw-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vw-logout-btn {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.vw-logout-btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

/* ───────────────────── Contenido principal ───────────────────── */
.vw-main {
  flex: 1;
  min-width: 0;
  padding: 32px 36px 48px;
  max-width: 1160px;
}

.vw-header {
  margin-bottom: 26px;
}

.vw-header h1 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

.vw-header p {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 640px;
}

/* KPIs */
.vw-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.vw-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vw-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vw-kpi-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vw-kpi-icon svg { width: 16px; height: 16px; }

.vw-kpi-soon {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 7px;
}

.vw-kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.vw-kpi-label {
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Paneles de contenido / tabs */
.vw-tab-panel { display: block; }
.vw-tab-panel[hidden] { display: none; }

.vw-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.vw-panel-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vw-panel-head h2 {
  font-size: 15px;
  font-weight: 700;
}

.vw-panel-head p {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

.vw-panel-body {
  padding: 22px;
}

/* Siguientes pasos (Inicio) */
.vw-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.vw-step {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  background: var(--surface-2);
}

.vw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 10px;
}

.vw-step h3 {
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 4px;
}

.vw-step p {
  font-size: 12.5px;
  color: var(--text-muted);
}

.vw-step-action {
  margin-top: 10px;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.vw-step-action:hover { text-decoration: underline; }

/* Tabla placeholder */
.vw-table-wrap { overflow-x: auto; }

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

.vw-table th {
  text-align: left;
  padding: 10px 22px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.vw-table td {
  padding: 28px 22px;
  color: var(--text-muted);
  text-align: center;
}

/* Tabla con datos reales (p.ej. Mis solicitudes): filas compactas, alineadas
   a la izquierda, a diferencia de la fila-placeholder centrada de arriba. */
.vw-table-data td.vw-td-left {
  padding: 12px 22px;
  text-align: left;
  color: var(--text);
}

/* Badge de estado (solicitudes de aprovisionamiento) */
.vw-badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.vw-badge-pending {
  color: var(--text-muted);
  background: var(--surface-2);
  border-color: var(--border);
}

.vw-badge-approved {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success-border);
}

.vw-badge-rejected {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

/* Badge "en curso"/informativo (p.ej. comisión por pagar) */
.vw-badge-info {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.3);
}

/* Resumen de comisiones (F5.4): reusa la grilla/tarjeta de KPIs pero sin
   el badge "Próximamente" ni el hueco de icono. */
.vw-comm-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}

.vw-comm-summary-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vw-comm-summary-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.vw-comm-summary-value.is-negative { color: var(--danger); }

.vw-comm-summary-label {
  font-size: 12px;
  color: var(--text-muted);
}

.vw-amount-negative { color: var(--danger); }

.vw-preq-note {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Estado vacío genérico */
.vw-empty {
  padding: 8px 4px 4px;
  color: var(--text-muted);
  font-size: 13.5px;
}

/* ───────────────────── Formularios (Perfil / Nuevo cliente) ───────────────────── */
.vw-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2px 20px;
}

/* Agrupa campos bajo un subtítulo (p.ej. Identidad / Contacto / Cuenta). */
.vw-form-section {
  margin-bottom: 24px;
}

.vw-form-section:last-of-type {
  margin-bottom: 0;
}

.vw-form-subtitle {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* Variante "ficha" (estilo Mi Perfil de CIMA): cada .vw-form-section se
   convierte en una tarjeta propia (fondo + borde + radio), en vez de un grupo
   plano separado solo por un subtítulo. Solo afecta a quien lleve .vw-card. */
.vw-form-section.vw-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 18px;
}

.vw-form-section.vw-card:last-of-type {
  margin-bottom: 0;
}

/* Encabezado de sección con icono, dentro de una tarjeta .vw-card. */
.vw-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 16px;
}

.vw-section-title-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vw-section-title-icon svg { width: 15px; height: 15px; }

.vw-field-hint {
  font-size: 11.5px;
  color: var(--text-faint);
  margin-top: 4px;
}

.vw-form-submit {
  width: auto;
  margin-top: 8px;
  padding: 10px 22px;
}

@media (max-width: 640px) {
  .vw-form-submit { width: 100%; }
}

/* Atestación de Términos y Condiciones (alta de "Nuevo cliente"). */
.vw-terms-attest {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.vw-checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.45;
  cursor: pointer;
  flex: 1 1 320px;
}

.vw-checkbox-field input[type="checkbox"] {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.vw-terms-view-btn {
  flex-shrink: 0;
}

.vw-terms-view-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vw-terms-doc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text);
  max-height: 60vh;
  overflow-y: auto;
}

.vw-terms-doc p { margin: 0 0 12px; }
.vw-terms-doc h1, .vw-terms-doc h2, .vw-terms-doc h3 { margin: 18px 0 10px; color: var(--text); }
.vw-terms-doc ul, .vw-terms-doc ol { margin: 0 0 12px 20px; }

/* ───────────────────── Ventana flotante embebida (Demo) ─────────────────────
   Patrón inspirado en el emulador de SIMA (sima/modules/support.js): barra de
   título arrastrable + minimizar/maximizar/cerrar + iframe. */
.vw-float-win {
  position: fixed;
  z-index: 400;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32), var(--shadow);
  overflow: hidden;
}

.vw-float-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  cursor: move;
  user-select: none;
  flex-shrink: 0;
}

.vw-float-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Herramientas (recargar / dispositivo / estilo / tema): siempre pegadas al
   grupo de 3 controles (min/max/cerrar), a un lado u otro según el estilo. */
.vw-float-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.vw-float-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-left: 6px;
  margin-left: 2px;
  border-left: 1px solid var(--border);
}

.vw-float-btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.vw-float-btn svg { width: 13px; height: 13px; }

.vw-float-btn:hover { background: var(--surface-hover); color: var(--text); }

.vw-float-btn.vw-float-close:hover { background: var(--danger-bg); color: var(--danger); }

/* ── Estilo de marco "Apple": semáforo de 3 puntitos a la IZQUIERDA de la
   barra (orden mac: cerrar/minimizar/maximizar = rojo/amarillo/verde), título
   centrado, herramientas pegadas a la derecha del semáforo. SOLO estética del
   marco/barra (parent-side) — nunca toca nada dentro del iframe de CIMA. ── */
.vw-float-bar[data-style="apple"] .vw-float-controls { order: -1; }
.vw-float-bar[data-style="apple"] .vw-float-tools { order: 0; }
.vw-float-bar[data-style="apple"] .vw-float-title { order: 1; text-align: center; }

.vw-float-bar[data-style="apple"] .vw-float-controls {
  gap: 8px;
  border-left: none;
  border-right: 1px solid var(--border);
  padding-left: 0;
  padding-right: 6px;
  margin-left: 0;
  margin-right: 2px;
}

.vw-float-bar[data-style="apple"] .vw-float-controls .vw-float-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  color: rgba(0, 0, 0, 0.55);
}

.vw-float-bar[data-style="apple"] .vw-float-controls .vw-float-btn svg { width: 7px; height: 7px; }

.vw-float-bar[data-style="apple"] .vw-float-btn.vw-float-close { background: #ff5f57; order: 1; }
.vw-float-bar[data-style="apple"] .vw-float-btn.vw-float-min { background: #febc2e; order: 2; }
.vw-float-bar[data-style="apple"] .vw-float-btn.vw-float-max { background: #28c840; order: 3; }

.vw-float-bar[data-style="apple"] .vw-float-btn.vw-float-close:hover { background: #ff5f57; color: rgba(0, 0, 0, 0.55); }
.vw-float-bar[data-style="apple"] .vw-float-btn.vw-float-min:hover { background: #febc2e; color: rgba(0, 0, 0, 0.55); }
.vw-float-bar[data-style="apple"] .vw-float-btn.vw-float-max:hover { background: #28c840; color: rgba(0, 0, 0, 0.55); }

.vw-float-body {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  overflow: hidden;
}

/* ───────────────────── Bisel de dispositivo ─────────────────────
   Dibujado 100% en CSS (sin imágenes externas — CSP estricto). El tamaño real
   en píxeles de .vw-device lo fija JS (VentasEmulator: layoutDevice) leyendo
   el espacio disponible del body, así que SIEMPRE mantiene la proporción del
   dispositivo elegido ("letterbox") sin importar cómo se redimensione la
   ventana. Cambiar de dispositivo/estilo/tema solo cambia atributos data-* —
   el iframe (dentro de .vw-device-screen) nunca se recrea ni recarga. */
.vw-device {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  --dev-bezel: #1b1c1f;
  --dev-detail: #3a3b40;
  --dev-notch: #000000;
}

.vw-device[data-theme="light"] {
  --dev-bezel: #e7e9ec;
  --dev-detail: #b9bec6;
  --dev-notch: #11131a;
}

.vw-device-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  background: var(--dev-bezel);
  transition: background 0.2s ease, border-radius 0.2s ease;
}

.vw-device-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0b0f13;
}

.vw-device-notch,
.vw-device-cam,
.vw-device-key,
.vw-device-base {
  display: none;
}

/* Teléfono (default): retrato, esquinas muy redondeadas, isla dinámica arriba,
   botones laterales sutiles.
   Nota (2026-07-23, fix de solape): el padding-top del marco se amplía para
   alojar la isla dinámica DENTRO del bisel, fuera de .vw-device-screen — así
   el iframe de CIMA nunca arranca detrás de la isla (en un teléfono real el
   contenido respeta el área segura bajo la isla; aquí el iframe no tiene forma
   de saber que existe un bisel superpuesto, así que hay que reservarle espacio
   de verdad en vez de solaparla). */
.vw-device[data-device="phone"] .vw-device-frame {
  border-radius: 46px;
  padding: 44px 15px 15px;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.4), 0 26px 54px rgba(0, 0, 0, 0.38);
}
.vw-device[data-device="phone"] .vw-device-screen { border-radius: 26px; }
.vw-device[data-device="phone"] .vw-device-notch {
  display: block;
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  max-width: 108px;
  height: 22px;
  border-radius: 12px;
  background: var(--dev-notch);
  z-index: 3;
}
.vw-device[data-device="phone"] .vw-device-key {
  display: block;
  position: absolute;
  border-radius: 2px;
  background: var(--dev-detail);
}
.vw-device[data-device="phone"] .vw-device-key-power { right: -2px; top: 26%; width: 3px; height: 9%; }
.vw-device[data-device="phone"] .vw-device-key-vol1 { left: -2px; top: 18%; width: 3px; height: 6%; }
.vw-device[data-device="phone"] .vw-device-key-vol2 { left: -2px; top: 27%; width: 3px; height: 6%; }

/* Tableta: retrato, bisel fino uniforme, puntito de cámara. */
.vw-device[data-device="tablet"] .vw-device-frame {
  border-radius: 30px;
  padding: 22px;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.35), 0 26px 54px rgba(0, 0, 0, 0.32);
}
.vw-device[data-device="tablet"] .vw-device-screen { border-radius: 10px; }
.vw-device[data-device="tablet"] .vw-device-cam {
  display: block;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--dev-notch);
  z-index: 3;
}

/* Escritorio: apaisado, marco de laptop (pantalla + base/bisagra fina abajo). */
.vw-device[data-device="desktop"] { flex-direction: column; }
.vw-device[data-device="desktop"] .vw-device-frame {
  border-radius: 12px 12px 3px 3px;
  padding: 12px 12px 9px;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.35), 0 26px 54px rgba(0, 0, 0, 0.3);
}
.vw-device[data-device="desktop"] .vw-device-screen { border-radius: 3px; }
.vw-device[data-device="desktop"] .vw-device-cam {
  display: block;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dev-notch);
  z-index: 3;
}
.vw-device[data-device="desktop"] .vw-device-base {
  display: block;
  flex-shrink: 0;
  width: 108%;
  margin-left: -4%;
  height: 12px;
  background: var(--dev-bezel);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28);
}
/* Escritorio + Apple: base tipo MacBook (bisagra sutil, más redondeada). */
.vw-device[data-device="desktop"][data-style="apple"] .vw-device-base {
  height: 15px;
  border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, var(--dev-bezel), var(--dev-detail));
}
/* Escritorio + Windows: base tipo laptop PC (recta y más delgada). */
.vw-device[data-device="desktop"][data-style="windows"] .vw-device-base {
  height: 9px;
  border-radius: 0 0 2px 2px;
}

.vw-float-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #0b0f13;
}

.vw-float-iframe[hidden] { display: none; }

.vw-float-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}

.vw-float-loading.is-error { color: var(--danger); }

.vw-float-loading .vw-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2.5px solid var(--border-strong);
  border-top-color: var(--accent);
  animation: vw-spin 0.8s linear infinite;
}

.vw-float-loading.is-error .vw-spinner { display: none; }

@keyframes vw-spin { to { transform: rotate(360deg); } }

.vw-float-resize {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  z-index: 2;
}

.vw-float-resize::after {
  content: '';
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong);
  border-radius: 0 0 2px 0;
}

/* Minimizada: la ventana se OCULTA por completo (el iframe sigue vivo en el
   DOM, nunca se destruye — restaurar no recarga). El indicador visual es el
   chip anclado sobre "Demo" en el sidebar (.vw-demo-min-chip), NO un chip
   flotante suelto. */
.vw-float-win.is-minimized { display: none; }

/* Maximizada: ocupa casi toda la ventana del panel; el bisel escala dentro
   (layoutDevice) manteniendo su proporción. */
.vw-float-win.is-maximized {
  left: 16px !important;
  top: 16px !important;
  width: calc(100vw - 32px) !important;
  height: calc(100vh - 32px) !important;
}

.vw-float-win.is-maximized .vw-float-bar { cursor: default; }

.vw-float-win.is-maximized .vw-float-resize { display: none; }

/* ───────────────────── Chip "ventana minimizada" ─────────────────────
   Anclado justo encima (o debajo, si no hay espacio) del ítem del sidebar
   correspondiente (#vw-demo-nav para la Demo, #vw-soporte-nav para Soporte).
   Único rastro visible de cada ventana flotante mientras está minimizada —
   ambas variantes comparten el mismo estilo. */
.vw-demo-min-chip,
.vw-chat-min-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  box-shadow: var(--shadow);
  cursor: pointer;
  animation: vw-chip-in 0.15s ease;
}

.vw-demo-min-chip svg,
.vw-chat-min-chip svg { width: 13px; height: 13px; flex-shrink: 0; }

.vw-demo-min-chip:hover,
.vw-chat-min-chip:hover { background: var(--surface-hover); }

.vw-demo-min-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--success-bg);
}

@keyframes vw-chip-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ───────────────────── Chat de Soporte (ventana flotante) ─────────────────────
   VentasChat (app/ui/chat.js) construye la ventana con las mismas clases
   .vw-float-* del emulador de la Demo (barra/controles/resize/min/max). Dentro,
   dos paneles: lista de conversaciones a la izquierda + hilo activo a la derecha
   (burbujas + compositor), calcado del chat de soporte de SIMA. */
.vw-chat-float-body {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.vw-chat-float-layout {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* ── Panel izquierdo: lista de conversaciones ──
   Hoy solo existe "Soporte CIMA", pero se renderiza desde un array (VentasChat:
   `conversations`) para que sumar conversaciones con clientes, a futuro, sea
   solo cuestión de datos. */
.vw-chat-convlist {
  width: 216px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.vw-chat-convlist-head {
  flex-shrink: 0;
  padding: 14px 14px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.vw-chat-convlist-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 8px 10px;
}

.vw-chat-conv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.vw-chat-conv-item:hover { background: var(--surface-hover); }

.vw-chat-conv-item.is-active { background: rgba(var(--accent-rgb), 0.14); }

.vw-chat-conv-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vw-chat-conv-avatar svg { width: 16px; height: 16px; }

.vw-chat-conv-info { min-width: 0; flex: 1; }

.vw-chat-conv-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vw-chat-conv-sub {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vw-chat-conv-badge {
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Panel derecho: hilo activo ── */
.vw-chat-thread {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.vw-chat-thread-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}

/* Botón "Volver" del hilo: solo tiene sentido en la vista lista↔hilo de móvil
   (ver breakpoint 760px más abajo) — en escritorio, con los dos paneles lado a
   lado, se mantiene oculto. */
.vw-chat-back-btn {
  display: none;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  margin: -6px 0 -6px -6px;
  padding: 6px 8px 6px 6px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.vw-chat-back-btn svg { width: 14px; height: 14px; }

.vw-chat-back-btn:hover { background: var(--surface-hover); color: var(--text); }

.vw-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vw-chat-row {
  display: flex;
  justify-content: flex-start;
}

.vw-chat-row.is-mine {
  justify-content: flex-end;
}

.vw-chat-bubble {
  max-width: 74%;
  padding: 9px 13px;
  border-radius: 14px;
}

.vw-chat-bubble-support {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}

.vw-chat-bubble-mine {
  background: rgba(var(--accent-rgb), 0.16);
  border: 1px solid rgba(var(--accent-rgb), 0.32);
  border-bottom-right-radius: 4px;
}

.vw-chat-bubble-text {
  font-size: 13.5px;
  line-height: 1.48;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Hora + botón de acciones ("···"), en una fila bajo el texto del mensaje. */
.vw-chat-bubble-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.vw-chat-row.is-mine .vw-chat-bubble-foot {
  justify-content: flex-end;
}

.vw-chat-time {
  font-size: 10.5px;
  color: var(--text-faint);
}

/* Botón "···" de acciones por mensaje: oculto hasta pasar el mouse por la fila
   (o mientras su menú está abierto); siempre presente/clickeable en el DOM. En
   dispositivos sin hover (táctiles) queda tenue pero visible todo el tiempo. */
.vw-chat-msg-more {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.vw-chat-msg-more svg { width: 11px; height: 11px; }

.vw-chat-row:hover .vw-chat-msg-more,
.vw-chat-msg-more.is-open {
  opacity: 1;
}

.vw-chat-msg-more:hover {
  background: var(--surface-hover);
  color: var(--text);
}

@media (hover: none) {
  .vw-chat-msg-more { opacity: 0.55; }
}

/* ── Menú de acciones (Copiar / Responder / Borrar) ──
   Popover independiente (fixed, en <body>), fondo SÓLIDO — nunca translúcido —
   para que se lea bien flotando sobre la ventana del chat. */
.vw-chat-menu {
  position: fixed;
  min-width: 168px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 6px;
}

.vw-chat-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.vw-chat-menu-item:hover { background: var(--surface-hover); }

.vw-chat-menu-item svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }

.vw-chat-menu-item.is-danger { color: var(--danger); }

.vw-chat-menu-item.is-danger svg { color: var(--danger); }

/* ── Barra de "Respondiendo a…" sobre el composer ── */
.vw-chat-reply-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-top: 1px solid var(--border);
  background: rgba(var(--accent-rgb), 0.08);
  flex-shrink: 0;
}

.vw-chat-reply-bar[hidden] { display: none; }

.vw-chat-reply-bar-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--accent);
}

.vw-chat-reply-bar-icon svg { width: 14px; height: 14px; }

.vw-chat-reply-bar-body { min-width: 0; flex: 1; }

.vw-chat-reply-bar-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}

.vw-chat-reply-bar-snip {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vw-chat-reply-bar-close {
  flex-shrink: 0;
  display: flex;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}

.vw-chat-reply-bar-close svg { width: 12px; height: 12px; }

.vw-chat-reply-bar-close:hover { color: var(--text); }

.vw-chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  flex-shrink: 0;
}

.vw-chat-input {
  flex: 1;
  resize: none;
  min-height: 40px;
  max-height: 120px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.4;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vw-chat-input::placeholder {
  color: var(--text-faint);
}

.vw-chat-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}

.vw-chat-send-btn {
  width: auto;
  margin-top: 0;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}

.vw-chat-send-btn svg {
  width: 15px;
  height: 15px;
}

@media (max-width: 640px) {
  .vw-chat-send-btn span { display: none; }
  .vw-chat-convlist { width: 168px; }
}

/* ───────────────────── Botones genéricos (CRM / modales) ───────────────────── */
.vw-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}

.vw-btn:hover { background: var(--surface-hover); }
.vw-btn:active { transform: translateY(1px); }
.vw-btn:disabled { opacity: 0.6; cursor: default; }

.vw-btn-primary {
  border-color: transparent;
  background: var(--accent);
  color: var(--accent-ink);
}

.vw-btn-primary:hover { background: var(--accent-hover); }

.vw-btn-danger {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
}

.vw-btn-danger:hover { background: rgba(220, 38, 38, 0.16); }

/* ───────────────────── Modal genérico (reemplaza alert/confirm nativos) ───────────────────── */
.vw-modal-overlay {
  position: fixed;
  inset: 0;
  /* CRM2 OLA3 TEMA: era un rgba() fijo + override @media(dark) suelto (no
     tokens) — no reaccionaba al override manual de tema. Ahora usa --scrim. */
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 2147483000;
}

.vw-modal {
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.vw-modal-head {
  position: sticky;
  top: 0;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vw-modal-head h2 {
  font-size: 15px;
  font-weight: 700;
}

.vw-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
}

.vw-modal-close svg { width: 13px; height: 13px; }
.vw-modal-close:hover { background: var(--surface-hover); color: var(--text); }

.vw-modal-body { padding: 22px; }

.vw-modal-wide { max-width: 720px; }

.vw-modal-actions {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.vw-modal-confirm-text {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
}

.vw-modal-confirm-text strong { color: var(--text); }

/* ───────────────────── CRM: embudo de ventas (tablero por etapa) ───────────────────── */
.vw-crm-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
}

.vw-crm-col {
  flex: 0 0 240px;
  width: 240px;
  display: flex;
  flex-direction: column;
  max-height: 68vh;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.vw-crm-col-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.vw-crm-col[data-stage="activo"] .vw-crm-col-head,
.vw-crm-col[data-stage="cerrado"] .vw-crm-col-head {
  background: var(--success-bg);
  border-color: var(--success-border);
}

.vw-crm-col[data-stage="en_riesgo"] .vw-crm-col-head,
.vw-crm-col[data-stage="perdido"] .vw-crm-col-head {
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.vw-crm-col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.vw-crm-col-count {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-faint);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  flex-shrink: 0;
}

.vw-crm-col-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.vw-crm-col-empty {
  padding: 12px 4px;
  text-align: center;
  font-size: 12px;
  color: var(--text-faint);
}

.vw-crm-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.vw-crm-card:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.vw-crm-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.vw-crm-card-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.vw-crm-card-plan {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.12);
  border-radius: 999px;
  padding: 2px 8px;
}

@media (max-width: 640px) {
  .vw-crm-col { flex-basis: 210px; width: 210px; }
}

/* Nota secundaria bajo una celda de tabla (p.ej. sub_status bajo org_status). */
.vw-cell-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Estado vacío "elegante" (p.ej. Mis clientes sin datos aún). */
.vw-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 44px 20px;
}

.vw-empty-state-icon {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.vw-empty-state-icon svg { width: 22px; height: 22px; }

.vw-empty-state h3 {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}

.vw-empty-state p {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 320px;
}

/* ───────────────────── Toast (reemplaza alert/confirm nativos) ───────────────────── */
.vw-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  /* Por encima de CUALQUIER ventana flotante (Demo/Soporte usan z-index cercano
     al máximo de 32-bit vía VentasFloatStack) — un toast siempre debe leerse. */
  z-index: 2147483647;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 13.5px;
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.vw-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.vw-toast.is-error {
  border-color: var(--danger-border);
  color: var(--danger);
}

/* ───────────────────── Responsive ───────────────────── */
@media (max-width: 860px) {
  .vw-shell { flex-direction: column; }

  .vw-sidebar {
    width: 100%;
    height: auto;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Fila 1: marca ... usuario/salir. Fila 2: nav horizontal a todo lo ancho.
     CRM2 OLA5.1 (BUG 1): `width:100%` viene de la regla base (pensada para
     la columna vertical de escritorio) y NUNCA se reseteaba aquí — en esta
     fila horizontal eso hacía que la marca reclamara el 100% del ANCHO DEL
     <aside> completo (no de una columna), empujando nav/identidad/Salir
     kilómetros fuera de la vista (reproducido en vivo: scrollWidth ~1580px
     en un viewport de 500px, con la marca sola ocupando los primeros
     499px). `width:auto` + `flex-shrink:0` la vuelve a su ancho de
     contenido, igual que nav/footer aquí abajo. */
  .vw-sidebar-brand {
    order: 1;
    width: auto;
    flex-shrink: 0;
    border-bottom: none;
    border-right: 1px solid var(--border);
    padding: 12px 14px;
  }

  .vw-sidebar-brand-text em { display: none; }

  .vw-sidebar-nav {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    padding: 8px 10px;
    gap: 4px;
    border-top: 1px solid var(--border);
  }

  /* width:auto pisa el width:100% de escritorio (pensado para la columna
     vertical del sidebar) — sin esto, cada botón hereda el ancho completo del
     contenedor de nav y el "scroll horizontal" queda roto (ítems gigantes
     superpuestos en vez de uno junto a otro). */
  .vw-nav-item { flex-shrink: 0; width: auto; white-space: nowrap; }
  .vw-nav-item span:not(.vw-nav-badge) { display: inline; }

  .vw-sidebar-footer {
    order: 2;
    flex-direction: row;
    align-items: center;
    border-top: none;
    border-left: 1px solid var(--border);
    margin-left: auto;
    padding: 10px 14px;
  }

  .vw-user-name { max-width: 90px; }

  .vw-main { padding: 24px 18px 40px; }
}

/* ── Smartphone (≤760px): el sidebar entero pasa a ser UNA sola barra superior
   horizontal scrolleable (marca + nav + usuario/salir en una fila), la Demo
   abre sin bisel a pantalla completa, y el chat de Soporte pasa de dos
   paneles lado a lado a lista↔hilo con botón "Volver". El ESCRITORIO (>760px,
   y el breakpoint de 860px de arriba para tablet) no se toca. */
@media (max-width: 760px) {
  /* ---- Nav: barra superior de una sola fila, scroll horizontal ---- */
  .vw-sidebar {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .vw-sidebar::-webkit-scrollbar { height: 3px; }
  .vw-sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }

  .vw-sidebar-brand {
    order: 0;
    width: auto;
    flex-shrink: 0;
  }

  /* En el layout de 860px la nav ocupa su propia fila completa (order:3,
     flex-basis:100%); aquí vuelve a ser un ítem más de la MISMA fila, con
     ancho natural (la fila entera es la que scrollea, no la nav por separado). */
  .vw-sidebar-nav {
    order: 1;
    flex: 0 0 auto;
    width: auto;
    flex-basis: auto;
    overflow: visible;
    border-top: none;
  }

  .vw-sidebar-footer {
    order: 2;
    flex-shrink: 0;
    margin-left: 0;
    border-left: 1px solid var(--border);
  }

  .vw-main { padding: 20px 16px 40px; }

  /* ---- Demo (VentasEmulator) y Soporte (VentasChat): en móvil ambas
     ventanas flotantes ocupan (casi) toda la pantalla — sin arrastre, sin
     redimensión, sin maximizar/minimizar (ya están a pantalla completa). ---- */
  .vw-emu-win,
  .vw-chat-win {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .vw-emu-win .vw-float-bar,
  .vw-chat-win .vw-float-bar { cursor: default; }

  .vw-emu-win .vw-float-tools,
  .vw-emu-win .vw-float-min,
  .vw-emu-win .vw-float-max,
  .vw-emu-win .vw-float-resize,
  .vw-chat-win .vw-float-min,
  .vw-chat-win .vw-float-max,
  .vw-chat-win .vw-float-resize {
    display: none !important;
  }

  /* Demo: sin bisel — el iframe llena el área bajo la barra directamente,
     igual que una vista normal de teléfono (ya ESTÁS en un teléfono). */
  .vw-emu-win .vw-float-body { padding: 0; }

  .vw-emu-win .vw-device,
  .vw-emu-win .vw-device-frame {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .vw-emu-win .vw-device-screen { border-radius: 0 !important; }

  .vw-emu-win .vw-device-notch,
  .vw-emu-win .vw-device-cam,
  .vw-emu-win .vw-device-key,
  .vw-emu-win .vw-device-base {
    display: none !important;
  }

  /* Chat: lista de conversaciones ↔ hilo activo (una vista a la vez), con
     "Volver" arriba del hilo. VentasChat alterna [data-view] en JS. */
  .vw-chat-back-btn { display: inline-flex; }

  .vw-chat-convlist { width: 100%; border-right: none; }
  .vw-chat-float-layout[data-view="thread"] .vw-chat-convlist { display: none; }
  .vw-chat-float-layout:not([data-view="thread"]) .vw-chat-thread { display: none; }
}

@media (max-width: 640px) {
  .vw-login-card { padding: 32px 22px 26px; }
  .vw-kpi-grid { grid-template-columns: 1fr 1fr; }
  .vw-steps { grid-template-columns: 1fr; }
  .vw-form-section.vw-card { padding: 16px; }
}

@media (max-width: 420px) {
  .vw-kpi-grid { grid-template-columns: 1fr; }
}

/* F7 HOY */

/* Selector de cupo (20/30/50) en la cabecera de la vista "Hoy". */
.vw-hoy-limit {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.vw-hoy-limit label {
  font-size: 12px;
  color: var(--text-muted);
}

.vw-hoy-limit select {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

/* Tarjetas de leads del día, en grilla auto-ajustable. */
.vw-hoy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.vw-hoy-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* "Quita la tarjeta con animación suave" tras Hecho/+7d. */
.vw-hoy-card.is-removing {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

.vw-hoy-card-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.vw-hoy-card-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
}

.vw-hoy-card-meta,
.vw-hoy-card-phone {
  font-size: 12px;
  color: var(--text-muted);
}

.vw-hoy-card-nowa {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
}

.vw-hoy-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vw-hoy-card-actions .vw-btn {
  padding: 7px 12px;
  font-size: 12.5px;
}

/* WhatsApp: "verde, principal" — reusa var(--success) del tema (nunca un hex
   de marca hardcodeado), así respeta ambos temas claro/oscuro automáticamente. */
.vw-hoy-wa-btn {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success);
}

.vw-hoy-wa-btn:hover {
  background: color-mix(in srgb, var(--success) 22%, transparent);
}

@media (max-width: 640px) {
  .vw-hoy-grid { grid-template-columns: 1fr; }
}

/* F7.1 RAFAGA */

/* ── Cabecera HOY: acciones + "Deshacer último" ────────────────────────── */
.vw-hoy-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.vw-hoy-selectall {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}

.vw-hoy-undo-btn {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

.vw-hoy-undo-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.vw-hoy-rafaga-btn {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 700;
}

.vw-hoy-rafaga-btn:hover { background: rgba(220, 38, 38, 0.16); }

/* ── Checkbox de selección por tarjeta (esquina superior derecha) ──────── */
.vw-hoy-card { position: relative; }

.vw-hoy-card-check {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  cursor: pointer;
}

.vw-hoy-select-cb {
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Barra fija inferior de acciones en lote ───────────────────────────── */
.vw-hoy-bulkbar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 2000;
  max-width: calc(100vw - 32px);
}

.vw-hoy-bulkbar-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding-right: 4px;
}

.vw-hoy-bulk-stage {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.vw-hoy-bulk-stage select {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

.vw-hoy-bulk-lost-inline {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vw-hoy-bulk-lost-inline input {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  width: 180px;
}

@media (max-width: 640px) {
  .vw-hoy-bulkbar { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; }
  .vw-hoy-bulk-lost-inline input { width: 130px; }
}

/* ── Modo Ráfaga: overlay a pantalla completa ──────────────────────────── */
.vw-rafaga-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 2147483000;
}

.vw-rafaga-box {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}

.vw-rafaga-progress {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.vw-rafaga-streak {
  font-size: 13px;
  color: var(--success);
  font-weight: 600;
}

.vw-rafaga-name {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  margin: 4px 0 0;
}

.vw-rafaga-meta {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

.vw-rafaga-nowa {
  font-size: 13px;
  color: var(--danger);
  font-style: italic;
  margin: 4px 0;
}

.vw-rafaga-textarea {
  width: 100%;
  min-height: 120px;
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
  resize: vertical;
  text-align: left;
}

.vw-rafaga-textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Botón GIGANTE verde — reusa var(--success) del tema (nunca un hex de marca
   hardcodeado), respeta ambos temas claro/oscuro automáticamente. */
.vw-rafaga-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--success);
  color: var(--accent-ink);
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}

.vw-rafaga-send-btn:hover { background: color-mix(in srgb, var(--success) 85%, black); }
.vw-rafaga-send-btn:active { transform: translateY(1px); }

.vw-rafaga-send-btn.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

.vw-rafaga-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.vw-rafaga-undo-btn {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

.vw-rafaga-exit-btn {
  border-color: var(--danger-border);
  color: var(--danger);
  background: transparent;
}

.vw-rafaga-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.vw-rafaga-done-icon { font-size: 48px; }

.vw-rafaga-done h2 {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}

.vw-rafaga-done p {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0 0 8px;
}

@media (max-width: 640px) {
  .vw-rafaga-name { font-size: 21px; }
  .vw-rafaga-send-btn { font-size: 16px; padding: 16px; }
}

/* F7.2 AUTO */

/* Capa "Ráfaga automática" — SOLO escritorio (window.innerWidth > 768),
   encima del flujo manual de 1-tap (que sigue igual arriba, en cualquier
   tamaño). Separada visualmente con un borde superior propio. */
.vw-rafaga-auto {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-strong);
}

.vw-rafaga-auto-label {
  width: 100%;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
}

.vw-rafaga-auto-speed {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.vw-rafaga-auto-speed select {
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

/* Anillo con el número de segundos restantes ("countdown grande"). */
.vw-rafaga-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 18px;
  font-weight: 800;
}

.vw-rafaga-auto-warning {
  width: 100%;
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
}

@media (max-width: 900px) {
  /* La regla real de "escritorio" vive en JS (vwIsDesktop, innerWidth>768);
     este breakpoint solo evita que los controles auto se vean apretados en
     una ventana angosta que todavía cuenta como "desktop". */
  .vw-rafaga-auto { gap: 8px; }
}

/* F7.3 LISTA+TECLADO */

/* ── Pista de atajos en la cabecera (solo escritorio) ──────────────────── */
.vw-hoy-shortcuts-hint {
  border: none;
  background: transparent;
  color: var(--text-faint);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
}

.vw-hoy-shortcuts-hint:hover { color: var(--text-muted); }

.vw-hoy-shortcuts-hint kbd,
.vw-hoy-help-list kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 5px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
  font-weight: 700;
}

@media (max-width: 768px) {
  .vw-hoy-shortcuts-hint { display: none; }
}

/* ── Lista densa (SOLO escritorio): filas compactas tipo tabla ─────────── */
.vw-hoy-listwrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vw-hoy-list-head,
.vw-hoy-row {
  display: grid;
  /* CRM2 OLA1 (Tarea B.1): Especialidad/Ciudad pasaron a columnas propias
     (antes iban juntas bajo el nombre) para poder ordenarlas por encabezado.
     CRM2 OLA5 (Tarea 4a): se agregó "#" (angosta, al inicio). "Acciones"
     pasó de `auto` a un ancho FIJO (cada fila es su propio grid — un
     `auto` calculado por fila desalineaba la columna entre encabezado y
     filas, y le robaba espacio al nombre dentro del presupuesto finito de
     .vw-main, max-width:1160px). CRM2 OLA5.1 (BUG 2): la columna "Tipo"
     que la ola 5 había agregado aquí SE QUITÓ — Miguel reportó que tapaba
     el nombre en pantallas angostas; la pill de Tipo ahora vive como
     segunda línea DENTRO de la celda de nombre (ver .vw-hoy-row-namecol
     más abajo), así que el ancho que le quitaba a las demás columnas se
     les devolvió.
     CRM PODERES: se agrega "Score" (angosta, 46px) entre "★" y "Acciones"
     — badge numérico 0-100, no necesita más ancho que eso; especialidad/
     ciudad/teléfono/★ se recortaron un poco para hacerle campo sin tocar
     el presupuesto de nombre/acciones. */
  grid-template-columns: 20px 24px minmax(0, 1fr) 100px 90px 80px 50px 46px 300px;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
}

.vw-hoy-list-head {
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.vw-hoy-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: calc(12 * 50px);
  overflow-y: auto;
}

.vw-hoy-row {
  min-height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--surface);
  cursor: default;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.vw-hoy-row:hover { background: var(--surface-hover); }

.vw-hoy-row.is-selected {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

/* Fila activa: cursor de teclado (Tarea B) — borde/fondo con var(--accent). */
.vw-hoy-row.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.vw-hoy-row-check { display: flex; }

/* CRM2 OLA5 (Tarea 4a): numeración 1..n, muted y angosta — se recalcula en
   cada render (vwHoyRowHtml), nunca es un id ni se persiste. */
.vw-hoy-col-num,
.vw-hoy-row-num {
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vw-hoy-row-name {
  /* CRM2 OLA2: pasó de columna a fila — ahora lleva avatar + una columna de
     texto (antes solo el nombre en línea). CRM2 OLA5.1 (BUG 2): el avatar
     se alinea arriba (flex-start) porque la columna de texto ahora tiene
     DOS líneas (nombre+etapa, y debajo el Tipo) — con center se veía
     descolgado respecto de la primera línea. */
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 6px 0;
}

.vw-hoy-row-name .vw-avatar { margin-top: 1px; }

/* CRM2 OLA5.1 (BUG 2): columna de texto a dos líneas dentro de la celda de
   nombre — arriba nombre+pill de etapa (como ya era), abajo la pill de
   Tipo, más chica y muted. Nada de esto es una columna del grid: vive
   entero dentro de la ÚNICA celda de nombre, así que nunca compite por
   ancho con especialidad/ciudad/teléfono. */
.vw-hoy-row-namecol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.vw-hoy-row-nameline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.vw-hoy-row-typeline {
  display: flex;
  min-width: 0;
}

.vw-hoy-row-typeline .vw-tipo-pill {
  transform: scale(0.92);
  transform-origin: left center;
}

.vw-hoy-row-namestr {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.vw-hoy-row-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vw-hoy-row-phone {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.vw-hoy-row-rating {
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
}

.vw-hoy-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end;
}

.vw-hoy-row-actions .vw-btn {
  padding: 5px 10px;
  font-size: 12px;
}

/* ── Mini-overlay de ayuda de teclado (?) ──────────────────────────────── */
.vw-hoy-help-overlay {
  position: fixed;
  inset: 0;
  /* CRM2 OLA3 TEMA: idem — token --scrim en vez de rgba()+@media(dark) suelto. */
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 2147483000;
}

.vw-hoy-help-box {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.vw-hoy-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.vw-hoy-help-head h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.vw-hoy-help-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.vw-hoy-help-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
}

.vw-hoy-help-list li span { color: var(--text-muted); }

@media (max-width: 768px) {
  /* La lista densa/atajos son solo-escritorio; por defensividad, si por lo
     que sea el overlay de ayuda quedó abierto al achicar la ventana, se oculta. */
  .vw-hoy-help-overlay { display: none; }
}

/* CRM2 OLA1 */

/* BUG preexistente encontrado al construir el CRM2 (verificado en vivo, no
   solo leído): cualquier elemento cuya CLASE fija `display` (flex/inline-flex)
   nunca se oculta con el atributo `hidden` — misma causa que ya documenta el
   comentario de #vw-view-login/#vw-view-app arriba del archivo (origen
   "autor" vs. UA: un `display` de autor gana SIEMPRE contra el `display:none`
   de UA de `[hidden]`, sin importar el orden). El propio archivo ya lo
   arregla en dos sitios (esas dos vistas por id, `.vw-tab-panel[hidden]` por
   clase compuesta) pero no en todos — quedaban rotos ".vw-hoy-undo-btn" y
   ".vw-rafaga-undo-btn" (vía .vw-btn, display:inline-flex) y
   ".vw-hoy-bulk-lost-inline" (display:flex), los tres YA EXISTÍAN antes de
   esta ola y se confirmó que se quedaban visibles con `hidden` puesto. Se
   arreglan aquí junto con sus equivalentes nuevos del CRM (Tarea C), todos
   por id para no tocar el resto de usos de esas clases. */
#vw-hoy-bulkbar[hidden],
#vw-crm-bulkbar[hidden],
#vw-hoy-bulk-lost-inline[hidden],
#vw-crm-bulk-lost-inline[hidden],
#vw-hoy-undo-btn[hidden],
#vw-rafaga-undo-btn[hidden],
#vw-crm-qv-delete-confirm[hidden],
#vw-crm-qv-actions-row[hidden] {
  display: none;
}

/* ───────────────────── Tarea A: identidad del vendedor arriba ───────────────────── */
/* CRM2 OLA4 (Tarea 2): .vw-sidebar-identity pasó de <div> a <button> (abre el
   menú de perfil) — vive dentro de .vw-identity-wrap. */
.vw-identity-wrap {
  border-bottom: 1px solid var(--border);
}

.vw-sidebar-identity {
  width: 100%;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 14px 16px 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s ease;
}

.vw-sidebar-identity:hover { background: var(--surface-hover); }

.vw-sidebar-identity:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.vw-identity-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  flex-shrink: 0;
}

.vw-identity-avatar svg { width: 16px; height: 16px; }

.vw-identity-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vw-identity-text .vw-user-name {
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vw-sidebar-identity-role {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.vw-identity-chevron {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}

.vw-sidebar-identity[aria-expanded="true"] .vw-identity-chevron { transform: rotate(180deg); }

/* CRM2 OLA5 (Corrección 2) + OLA5.1 (BUG 1): acordeón EN FLUJO — nada de
   position:fixed ni sombra flotante. Por defecto (dentro de
   .vw-identity-wrap, ESCRITORIO REAL >860px, donde <aside> es una columna
   vertical) es un bloque normal que crece en el flujo y empuja el <nav>
   hacia abajo; `max-height` animado es lo único que hace JS (index.html).
   Para TODO ≤860px (tablet en fila con wrap Y móvil de barra superior con
   scroll — el corte de JS es 860px, no 760px, ver la nota larga en
   index.html) el mismo nodo se reubica como hermano de <aside> dentro de
   .vw-shell (ver el selector `.vw-shell > ` más abajo) y se ve como una
   fila a todo lo ancho en vez de crecer torcido dentro de una fila. */
.vw-identity-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.22s ease;
  padding: 0 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}

/* El atributo `hidden` no gana solo contra una clase con `display` propio
   (mismo motivo documentado arriba en el archivo, ola por ola) — id explícito. */
#vw-identity-menu[hidden] { display: none; }

/* Reubicado como hermano de <aside> dentro de .vw-shell (≤860px, tablet en
   fila + móvil de barra superior): una fila a todo lo ancho DEBAJO de la
   barra, no un menú angosto pegado a la identidad — mismo padding
   horizontal que .vw-main. */
.vw-shell > .vw-identity-menu {
  padding: 6px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.vw-identity-menu-item {
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  margin: 3px 0;
}

/* ≤860px: el sidebar pasa a ser una barra horizontal (brand/nav/footer con
   `order` explícito — ver el media query en ── Responsive ──). El bloque de
   identidad ahora SÍ debe quedar accesible ahí (Tarea 2: "Mi perfil" y
   "Comisiones" viven solo aquí, ya no están en el nav principal) — se
   compacta a avatar+chevron nada más, mismo patrón `order` que el pie. */
@media (max-width: 860px) {
  .vw-identity-wrap {
    order: 2;
    border-bottom: none;
    border-left: 1px solid var(--border);
  }
  .vw-sidebar-identity { padding: 8px 12px; }
  .vw-identity-text { display: none; }
}

/* ───────────────────── Tarea B.1: encabezados ordenables (HOY + CRM lista) ─── */
.vw-hoy-col-sort {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  cursor: pointer;
  text-align: left;
}

.vw-hoy-col-sort:hover { color: var(--text-muted); }
.vw-hoy-col-sort.is-sorted { color: var(--accent); }

.vw-hoy-sort-arrow {
  font-size: 9px;
  line-height: 1;
}

.vw-hoy-row-specialty,
.vw-hoy-row-city {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ───────────────────── Tarea C: cabecera CRM (toggle Kanban/Lista) ───────── */
.vw-crm-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.vw-crm-view-toggle {
  display: flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.vw-crm-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.vw-crm-view-btn + .vw-crm-view-btn { border-left: 1px solid var(--border-strong); }
.vw-crm-view-btn svg { width: 16px; height: 16px; }
.vw-crm-view-btn:hover { background: var(--surface-hover); color: var(--text); }

.vw-crm-view-btn.is-active {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}

/* Sin esto el atributo `hidden` NO gana contra `.vw-crm-board { display:flex }`
   (misma especificidad, ver comentario del mismo patrón arriba en el archivo,
   en las vistas login/app) — hace falta el selector por id. */
#vw-crm-board[hidden],
#vw-crm-listview[hidden] {
  display: none;
}

/* ───────────────────── Tarea C.1: tarjetas kanban — selección + drag ────── */
.vw-crm-card {
  position: relative;
  /* CRM2 OLA2 (Tarea D): era `none` — bloqueaba el scroll vertical nativo de
     la columna en touch incluso ANTES de que JS decidiera si esto era un
     drag. `pan-y` deja que el dedo scrollee libremente por defecto; el JS
     (wireCrmCardDrag) exige 300ms de press en touch antes de armar el drag y
     recién ahí llama preventDefault() para cortar cualquier pan residual. */
  touch-action: pan-y;
}

.vw-crm-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.vw-crm-card.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.vw-crm-card.is-dragging-source {
  opacity: 0.35;
}

.vw-crm-card-check {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.vw-crm-card:hover .vw-crm-card-check,
.vw-crm-card:focus-within .vw-crm-card-check,
.vw-crm-card-check:has(:checked) {
  opacity: 1;
}

/* Touch (sin hover real): el checkbox de selección queda siempre visible. */
@media (pointer: coarse) {
  .vw-crm-card-check { opacity: 1; }
}

.vw-crm-select-cb {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Ghost que sigue al puntero mientras se arrastra una tarjeta. */
.vw-crm-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  pointer-events: none; /* clave: si no, document.elementFromPoint() detecta el ghost en vez de la columna */
  opacity: 0.85;
  transform: rotate(-1.5deg);
  box-shadow: var(--shadow);
}

.vw-crm-col.is-dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
}

/* ───────────────────── Tarea C.2: quick-view (drawer lateral) ───────────── */
.vw-crm-quickview-overlay {
  position: fixed;
  inset: 0;
  /* CRM2 OLA3 TEMA: token --scrim-soft (más claro que --scrim: es un drawer
     lateral, no un modal centrado, se quiere tapar menos el fondo). */
  background: var(--scrim-soft);
  z-index: 2147483000;
  display: flex;
  justify-content: flex-end;
}

.vw-crm-quickview {
  width: 100%;
  max-width: 380px;
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  animation: vwCrmQvSlideIn 0.16s ease;
}

@keyframes vwCrmQvSlideIn {
  from { transform: translateX(16px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.vw-crm-qv-topbar {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px 0;
  background: var(--surface);
  z-index: 1;
}

.vw-crm-qv-body {
  padding: 4px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vw-crm-qv-head {
  /* CRM2 OLA2: ahora lleva avatar grande a la izquierda (antes solo el
     nombre en columna) — el <select> de etapa se movió FUERA de este bloque,
     debajo del chevron nuevo (Tarea A.2). */
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.vw-crm-qv-head-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.vw-crm-qv-name {
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.25;
}

.vw-crm-qv-stage {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.vw-crm-qv-stage select {
  flex: 1;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

.vw-crm-qv-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 2px 0 10px;
}

.vw-crm-qv-phone-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.vw-crm-qv-email {
  font-size: 13px;
  margin-bottom: 6px;
}

.vw-crm-qv-email a,
.vw-crm-qv-timeline-item a { color: var(--accent); }

.vw-crm-qv-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin: 16px 0 8px;
}

.vw-crm-qv-timeline {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}

.vw-crm-qv-timeline-item {
  padding: 8px 10px;
  border-left: 2px solid var(--border-strong);
  background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.vw-crm-qv-timeline-item.vw-crm-qv-timeline-origin {
  border-left-color: var(--accent);
}

.vw-crm-qv-timeline-tag {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-faint);
  margin-bottom: 3px;
}

.vw-crm-qv-timeline-item p {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.vw-crm-qv-timeline-empty {
  font-size: 12.5px;
  color: var(--text-faint);
  font-style: italic;
  list-style: none;
}

.vw-crm-qv-note-row {
  display: flex;
  gap: 8px;
}

.vw-crm-qv-note-row input {
  flex: 1;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

.vw-crm-qv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.vw-crm-qv-actions .vw-btn { flex: 1 1 auto; justify-content: center; }

.vw-crm-qv-delete-confirm {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vw-crm-qv-delete-confirm p {
  font-size: 12.5px;
  color: var(--text);
}

.vw-crm-qv-delete-confirm .vw-btn { width: 100%; justify-content: center; }

@media (max-width: 640px) {
  /* Overlay a pantalla completa en móvil, como pide la Tarea C.2. */
  .vw-crm-quickview { max-width: none; }
}

/* ───────────────────── Tarea C.4: vista Lista del CRM ────────────────────── */
.vw-crm-listwrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vw-crm-list-head,
.vw-crm-list-row {
  display: grid;
  /* CRM2 OLA5 (Tarea 4a): se agrega "#" (al inicio). CRM2 OLA5.1 (BUG 2):
     la columna "Tipo" que la ola 5 había puesto aquí (entre nombre y
     etapa) SE QUITÓ — tapaba el nombre en pantallas angostas; la pill
     ahora vive como segunda línea dentro de la celda de nombre (ver
     .vw-crm-list-namecol más abajo). CRM PODERES: se agrega "Score"
     (angosta, 46px) antes de "Acciones" — mismo criterio que en HOY. */
  grid-template-columns: 22px 26px minmax(0, 1fr) 110px 120px 100px 110px 92px 46px auto;
  align-items: center;
  gap: 12px;
  padding: 0 10px;
}

.vw-crm-list-head {
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.vw-crm-list-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vw-crm-list-row {
  min-height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.vw-crm-list-row:hover { background: var(--surface-hover); }

.vw-crm-list-row.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.vw-crm-list-check { display: flex; }

/* CRM2 OLA5 (Tarea 4a): mismo tratamiento que la columna "#" de HOY. */
.vw-crm-list-col-num,
.vw-crm-list-num {
  font-size: 11px;
  color: var(--text-faint);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vw-crm-list-name {
  /* CRM2 OLA2: ahora lleva el avatar además del texto (antes solo texto).
     CRM2 OLA5.1 (BUG 2): el avatar se alinea arriba porque la columna de
     texto pasó a dos líneas (nombre, y debajo la pill de Tipo). */
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 4px 0;
}

.vw-crm-list-name .vw-avatar { margin-top: 1px; }

/* CRM2 OLA5.1 (BUG 2): columna de texto a dos líneas — arriba el nombre,
   abajo la pill de Tipo, chica y muted. Vive entera dentro de la ÚNICA
   celda de nombre del grid (nunca compite por ancho con Etapa/Especialidad/
   Ciudad/Teléfono, que tienen sus propias columnas). */
.vw-crm-list-namecol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.vw-crm-list-typeline { display: flex; min-width: 0; }
.vw-crm-list-typeline .vw-tipo-pill {
  transform: scale(0.92);
  transform-origin: left center;
}

.vw-crm-list-namestr {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.vw-crm-list-specialty,
.vw-crm-list-city,
.vw-crm-list-phone,
.vw-crm-list-updated {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vw-crm-list-actions { display: flex; justify-content: flex-end; }
.vw-crm-list-actions .vw-btn { padding: 5px 10px; font-size: 12px; }

.vw-crm-stage-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}

.vw-crm-stage-badge[data-stage="activo"],
.vw-crm-stage-badge[data-stage="cerrado"] {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.vw-crm-stage-badge[data-stage="en_riesgo"],
.vw-crm-stage-badge[data-stage="perdido"] {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

@media (max-width: 900px) {
  /* CRM2 OLA5: "#" se achica más. "Acciones" pasó de `auto` a un ancho FIJO
     (mismo motivo que en HOY: cada fila es su propio grid, así que un
     `auto` calculado por fila desalinea la columna entre el encabezado y
     las filas). CRM2 OLA5.1 (BUG 2): ya no hace falta reservar una columna
     para "Tipo" ni forzarla a solo-ícono — la pill vive bajo el nombre a
     cualquier ancho (ver .vw-crm-list-namecol), así que el nombre recupera
     el espacio completo. CRM PODERES: "Score" se oculta aquí igual que
     especialidad/ciudad/teléfono/actualizado — es secundaria y no hay
     espacio en 5 columnas; el grid sigue en 5 tracks porque a este ancho
     no se muestra (el badge también vive junto al nombre en HOY/kanban/
     quick-view, así que no se pierde del todo). */
  .vw-crm-list-head,
  .vw-crm-list-row {
    grid-template-columns: 18px 22px minmax(0, 1fr) 96px 60px;
    gap: 8px;
  }
  .vw-crm-list-col-specialty, .vw-crm-list-specialty,
  .vw-crm-list-col-city, .vw-crm-list-city,
  .vw-crm-list-col-phone, .vw-crm-list-phone,
  .vw-crm-list-col-updated, .vw-crm-list-updated,
  .vw-crm-list-col-score, .vw-crm-list-score {
    display: none;
  }
  .vw-crm-list-actions .vw-btn { padding: 5px 6px; font-size: 11px; }
}

/* CRM2 OLA2 */

/* --violet/--blue/--amber (propuesta/cerrado/en_riesgo) se consolidaron
   arriba, junto con el resto de los tokens del tema (CRM2 OLA3 TEMA) — ya
   tienen ahí sus 4 variantes (claro/oscuro × auto/manual). */

/* ───────────────────── Tarea A.1: pills de etapa (7 colores) ───────────────── */
.vw-stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
}

.vw-stage-pill.st-prospecto {
  color: color-mix(in srgb, var(--navy) 78%, var(--text));
  background: color-mix(in srgb, var(--navy) 14%, var(--surface-2));
  border-color: color-mix(in srgb, var(--navy) 30%, var(--border));
}

.vw-stage-pill.st-demo {
  /* CRM2 OLA3 TEMA: --accent puro como texto no pasaba ~3.5:1 de contraste
     sobre el fondo pálido en tema claro (--accent es el MISMO cian en los
     dos temas, no se aclara/oscurece solo). Mezclado con --text, igual que
     el resto de las pills, se oscurece en claro y se mantiene brillante en
     oscuro (porque --text SÍ cambia de significado por tema). */
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
}

.vw-stage-pill.st-propuesta {
  color: color-mix(in srgb, var(--violet) 82%, var(--text));
  background: color-mix(in srgb, var(--violet) 14%, var(--surface-2));
  border-color: color-mix(in srgb, var(--violet) 32%, var(--border));
}

.vw-stage-pill.st-cerrado {
  color: color-mix(in srgb, var(--blue) 82%, var(--text));
  background: color-mix(in srgb, var(--blue) 14%, var(--surface-2));
  border-color: color-mix(in srgb, var(--blue) 32%, var(--border));
}

.vw-stage-pill.st-activo {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success-border);
}

.vw-stage-pill.st-en_riesgo {
  color: color-mix(in srgb, var(--amber) 82%, var(--text));
  background: color-mix(in srgb, var(--amber) 16%, var(--surface-2));
  border-color: color-mix(in srgb, var(--amber) 34%, var(--border));
}

.vw-stage-pill.st-perdido {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

/* ───────────────────── Tarea A.4: avatares con iniciales ────────────────────── */
.vw-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--avatar-ink);
  flex-shrink: 0;
  letter-spacing: 0.01em;
}

.vw-avatar-lg {
  width: 46px;
  height: 46px;
  font-size: 16px;
}

/* CRM2 OLA3 TEMA: mezclaban con var(--text), que cambia de SIGNIFICADO por
   tema (oscuro→claro y viceversa) — en tema oscuro eso ACLARABA el círculo
   (mal: texto blanco perdía contraste contra un fondo ya claro). Mezclar con
   negro puro es neutral respecto al tema: siempre oscurece un poco el tono,
   nunca lo aclara, así el texto blanco (--avatar-ink) queda legible en los
   dos temas sin importar qué tan clara/oscura sea la variante del hue. */
.vw-avatar-h0 { background: color-mix(in srgb, var(--accent) 88%, black); }
.vw-avatar-h1 { background: color-mix(in srgb, var(--success) 88%, black); }
.vw-avatar-h2 { background: color-mix(in srgb, var(--navy) 88%, black); }
.vw-avatar-h3 { background: color-mix(in srgb, var(--violet) 88%, black); }
.vw-avatar-h4 { background: color-mix(in srgb, var(--blue) 88%, black); }
.vw-avatar-h5 { background: color-mix(in srgb, var(--amber) 88%, black); }

/* Tarjeta kanban: avatar + nombre en una fila, encima de la pill de etapa. */
.vw-crm-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.vw-crm-card-head .vw-crm-card-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ───────────────────── Tarea B: dashboard "Resumen" (Inicio) ────────────────── */
.vw-dash-header p {
  font-size: 13.5px;
  color: var(--text-muted);
  text-transform: capitalize;
}

.vw-dash-charts {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.vw-funnel-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vw-funnel-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
}

.vw-funnel-track {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  overflow: hidden;
}

.vw-funnel-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.vw-funnel-fill.st-prospecto { background: color-mix(in srgb, var(--navy) 70%, var(--accent)); }
.vw-funnel-fill.st-demo { background: var(--accent); }
.vw-funnel-fill.st-propuesta { background: var(--violet); }
.vw-funnel-fill.st-cerrado { background: var(--blue); }
.vw-funnel-fill.st-activo { background: var(--success); }
.vw-funnel-fill.st-en_riesgo { background: var(--amber); }
.vw-funnel-fill.st-perdido { background: var(--danger); }

.vw-funnel-count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}

/* Mini bar-chart CSS puro de actividad (14 días) — contenedor de altura fija,
   cada barra es un % de esa altura. */
.vw-activity-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 110px;
}

.vw-activity-bar-wrap {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  cursor: default;
}

.vw-activity-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
  min-height: 3px;
  transition: height 0.25s ease;
}

.vw-activity-bar.is-empty {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* ───────────────────── Tarea A.2: chevron de etapas (quick-view) ────────────── */
.vw-crm-qv-chevron {
  display: flex;
  width: 100%;
  margin-bottom: 14px;
}

.vw-chevron-step {
  flex: 1;
  position: relative;
  border: none;
  background: var(--surface-2);
  color: var(--text-faint);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 8px 6px 8px 16px;
  text-align: center;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
  margin-right: -8px;
  transition: background 0.15s ease, color 0.15s ease;
}

.vw-chevron-step:first-child {
  padding-left: 8px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
}

.vw-chevron-step:last-child { margin-right: 0; }

.vw-chevron-step:hover { background: var(--surface-hover); color: var(--text); }

.vw-chevron-step.is-done {
  background: color-mix(in srgb, var(--accent) 45%, var(--surface-2));
  color: color-mix(in srgb, var(--accent) 90%, var(--text));
}

.vw-chevron-step.is-current {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 800;
}

.vw-chevron-step.is-current:hover { background: var(--accent); }

/* ───────────────────── Tarea A.3: chips KPI del quick-view ──────────────────── */
.vw-crm-qv-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0;
}

.vw-crm-qv-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  text-align: center;
}

.vw-crm-qv-kpi-value {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}

.vw-crm-qv-kpi-label {
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-faint);
}

/* ───────────────────── Tarea C: material — botón + desplegable ──────────────── */
.vw-hoy-material-btn {
  border-color: var(--accent);
  color: var(--accent);
  background: transparent;
}

.vw-hoy-material-btn:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); }

.vw-material-menu {
  position: fixed;
  z-index: 2147483000;
  min-width: 220px;
  max-width: 280px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vw-material-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}

.vw-material-menu-item:hover { background: var(--surface-hover); }

.vw-material-menu-item.is-disabled {
  color: var(--text-faint);
  cursor: default;
}

.vw-material-menu-pending {
  font-size: 11px;
  font-style: italic;
  color: var(--text-faint);
}

.vw-material-menu-loading,
.vw-material-menu-empty {
  padding: 10px;
  font-size: 12.5px;
  color: var(--text-faint);
  text-align: center;
}

/* ───────────────────── Tarea C.2: tarjetas de "Material" ────────────────────── */
.vw-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.vw-asset-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}

.vw-asset-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vw-asset-kind {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  border-radius: 999px;
  padding: 2px 9px;
}

.vw-asset-pending-badge {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--amber) 82%, var(--text));
  background: color-mix(in srgb, var(--amber) 16%, var(--surface-2));
  border-radius: 999px;
  padding: 2px 9px;
}

.vw-asset-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
}

.vw-asset-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
  flex: 1;
}

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

.vw-asset-actions .vw-btn { flex: 1; justify-content: center; }

/* ═══════════════════ Tarea D: pasada móvil (≤768px) ═══════════════════════════ */
@media (max-width: 768px) {
  /* Quick-view: hoja deslizante desde abajo (85dvh) con X grande, en vez del
     drawer lateral de escritorio. */
  .vw-crm-quickview-overlay {
    align-items: flex-end;
    background: rgba(15, 23, 42, 0.5);
  }

  .vw-crm-quickview {
    max-width: none;
    width: 100%;
    height: 85dvh;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    animation: vwCrmQvSlideUp 0.18s ease;
  }

  @keyframes vwCrmQvSlideUp {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* X grande en móvil (el botón real es #vw-crm-qv-close, class .vw-modal-close). */
  #vw-crm-qv-close {
    width: 34px;
    height: 34px;
  }

  #vw-crm-qv-close svg { width: 16px; height: 16px; }

  /* Chevron: en pantallas chicas se colapsa a una sola pill con la etapa
     actual — el <select> de abajo (que ya cubre las 7 etapas, incluidas las
     excepcionales) sigue siendo el control real en este ancho. */
  .vw-crm-qv-chevron { display: none; }

  /* Dashboard: KPIs en grid de 2 columnas y charts a ancho completo. */
  .vw-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .vw-dash-charts { grid-template-columns: 1fr; }

  /* Barra de lote (HOY y CRM): no debe tapar el último elemento del listado. */
  #vw-tab-hoy .vw-panel-body,
  #vw-tab-crm .vw-panel-body { padding-bottom: 84px; }

  /* Material: tarjetas apiladas en una columna. */
  .vw-asset-grid { grid-template-columns: 1fr; }
}

/* CRM2 OLA3 TEMA */

/* El toggle de tema (antes vivía aquí, junto a "Salir") se movió al logo del
   sidebar en la ola 4 — ver .vw-sidebar-brand arriba del archivo (el
   mini-indicador que tenía se quitó en la ola 5, Corrección 1). El pie
   vuelve a ser un solo botón, sin reglas propias (hereda .vw-sidebar-footer
   de la Tarea A). */

/* CRM2 OLA4 */

/* ───────────────────── Tarea 5a: lockdown de selección de texto ─────────────
   Por defecto NADA es seleccionable — la copia sale SOLO por los botones
   dedicados ("Copiar pitch + link", "Copiar" del chat). Excepciones: los
   campos donde seleccionar/copiar/cortar es parte normal de escribir
   (input/textarea/contenteditable, incluida el textarea de la Ráfaga) y
   .vw-selectable como clase de escape explícita para el futuro (hoy no se
   usa en ningún lado, a propósito — todo lo demás queda bloqueado). */
* {
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
[contenteditable],
[contenteditable] *,
.vw-selectable,
.vw-selectable * {
  -webkit-user-select: text;
  user-select: text;
}

/* CRM2 OLA5 — 2 correcciones + 3 features:
   Corrección 1: quitar el mini-indicador de tema del logo (editado en el
   bloque .vw-sidebar-brand, arriba del archivo).
   Corrección 2: menú de perfil como acordeón en flujo (editado en el bloque
   Tarea A / .vw-identity-menu, arriba del archivo).
   Tarea 3: overscroll-behavior en html/body (editado junto a esa regla,
   arriba del archivo).
   Tareas 4 y 5 (numeración, totales, tipo de contacto, agrupar+buscar en
   CRM lista) son selectores NUEVOS — viven aquí. */

/* ───────────────────── Tarea 5b: pill de tipo de contacto ────────────────── */
.vw-tipo-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.vw-tipo-pill svg { width: 11px; height: 11px; flex-shrink: 0; }

.vw-tipo-pill-persona {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent);
}

.vw-tipo-pill-centro {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* ───────────────────── Tarea 5c/5d: barra de la vista Lista (CRM) ───────── */
.vw-crm-list-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 10px 12px;
}

/* El atributo `hidden` no gana solo contra una clase con `display` propio
   (mismo motivo documentado ola por ola en este archivo) — id explícito. */
#vw-crm-list-toolbar[hidden] { display: none; }

.vw-crm-list-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 160px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-faint);
}

.vw-crm-list-search svg { width: 14px; height: 14px; flex-shrink: 0; }

.vw-crm-list-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font: inherit;
  font-size: 13px;
  color: var(--text);
}

.vw-crm-list-search input::placeholder { color: var(--text-faint); }

/* El navegador dibuja su propia "x" de limpiar en type="search" — se deja
   tal cual (es información útil, no un adorno de marca). */

.vw-crm-group-select {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.vw-crm-group-select span {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.vw-crm-group-select select {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

.vw-crm-list-total {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ───────────────────── Tarea 5c: cabeceras de grupo (estilo Monday) ─────── */
.vw-crm-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  margin: 10px 0 4px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.vw-crm-group-head:first-child { margin-top: 0; }

.vw-crm-group-name {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.vw-crm-group-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}

@media (max-width: 640px) {
  .vw-crm-list-toolbar { padding: 0 4px 10px; }
  .vw-crm-list-total { margin-left: 0; flex-basis: 100%; }
}

/* CRM2 OLA5.1 — 2 bugs reportados por Miguel sobre la ola 5:
   BUG 1 (nav inaccesible en ancho angosto): dos causas, corregidas en el
   lugar donde vive cada regla (no hay selectores nuevos que agregar acá):
     a) el corte de JS del acordeón de identidad estaba en 760px pero
        debía estar en 860px (el corte real donde <aside> deja de ser una
        columna vertical) — index.html, IIFE del menú de identidad.
     b) `.vw-sidebar-brand` heredaba `width:100%` de la regla de escritorio
        sin resetear en los media queries de ≤860/≤760, así que reclamaba
        el ancho ENTERO del <aside> en la fila horizontal, empujando
        nav/identidad/Salir muy fuera de la vista — arreglado con
        `width:auto` en ambos breakpoints (arriba, junto a `.vw-sidebar-brand`).
   BUG 2 (la pill de Tipo tapaba el nombre): se quitó la columna "Tipo" de
   ambas listas densas (HOY y CRM) y la pill pasó a vivir como SEGUNDA
   LÍNEA dentro de la única celda de nombre — ver .vw-hoy-row-namecol/
   .vw-hoy-row-typeline y .vw-crm-list-namecol/.vw-crm-list-typeline más
   arriba, junto a cada .vw-*-row-name respectiva. El sort por tipo se
   conserva colgado del header "Nombre" (ciclo de 4 estados en index.html),
   sin necesitar una columna ni un control nuevo. */

/* CRM PODERES ─────────────────────────────────────────────────────────────
   Score/secuencia de 3 toques, respuestas + enfriados, salud de clientes,
   dashboard (días por etapa / motivos de pérdida / enfriados), import-
   export CSV y el drawer del Copiloto. Todo lo nuevo vive acá, un solo
   bloque, para no dispersar "ola por ola" (ver convención de arriba). */

/* ── Score (badge numérico 0-100, frío→caliente) ──────────────────────── */
.vw-score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  flex-shrink: 0;
}

.vw-score-badge.is-cold {
  color: var(--danger);
  background: var(--danger-bg);
  border-color: var(--danger-border);
}

.vw-score-badge.is-warm {
  color: color-mix(in srgb, var(--amber) 82%, var(--text));
  background: color-mix(in srgb, var(--amber) 16%, var(--surface-2));
  border-color: color-mix(in srgb, var(--amber) 34%, var(--border));
}

.vw-score-badge.is-hot {
  color: var(--success);
  background: var(--success-bg);
  border-color: var(--success-border);
}

/* Columna angosta numérica en HOY/CRM lista — centrada, no a la izquierda
   como el resto de las columnas de texto. HOY siempre visible (la lista
   densa de HOY no se pinta bajo 768px — vwIsDesktop() la reemplaza por
   tarjetas). La de CRM lista SOLO por encima de 900px: por debajo, el
   media query de la sección "Tarea C.4" (arriba, junto a .vw-crm-list-head)
   la esconde del todo — puesta sin @media aquí, esta regla (misma
   especificidad, pero DESPUÉS en el archivo) le habría ganado a ese
   `display:none` a cualquier ancho, dejando el Score visible en 375px. */
.vw-hoy-col-score, .vw-hoy-row-score {
  display: flex;
  justify-content: center;
}

@media (min-width: 901px) {
  .vw-crm-list-col-score, .vw-crm-list-score {
    display: flex;
    justify-content: center;
  }
}

/* ── Enfriado (3 toques sin respuesta) ────────────────────────────────── */
.vw-cooled-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── "Toque N de 3" (secuencia) ───────────────────────────────────────── */
.vw-seq-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent) 80%, var(--text));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  white-space: nowrap;
}

/* En la tarjeta/fila de HOY y en el quick-view, la pill cuelga del mismo
   grupo de acciones que el botón de WhatsApp/Material. */
.vw-hoy-card-actions .vw-seq-pill,
.vw-hoy-row-actions .vw-seq-pill,
.vw-crm-qv-phone-row .vw-seq-pill {
  align-self: center;
}

/* En la card de Ráfaga va justo bajo el nombre, como un subtítulo. */
.vw-rafaga-name + .vw-seq-pill {
  display: inline-flex;
  margin: -4px 0 6px;
}

/* ── Quick-view: pills de la cabecera (etapa + score + enfriado) ──────── */
.vw-crm-qv-head-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Quick-view: "Registrar respuesta" (input inline) ─────────────────── */
.vw-crm-qv-reply-row {
  margin-top: 10px;
}

.vw-crm-qv-reply-inline {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Mismo motivo documentado ola por ola en este archivo: `[hidden]` no gana
   solo contra una clase con `display` propio — id explícito. .vw-btn TAMBIÉN
   define `display:inline-flex` (ver #vw-crm-qv-actions-row, mismo patrón para
   el botón "Eliminar"), así que el propio botón "Registrar respuesta"
   necesita el mismo parche cuando se oculta al abrir el input inline. */
#vw-crm-qv-reply-inline[hidden] { display: none; }
#vw-crm-qv-reply-btn[hidden] { display: none; }

.vw-crm-qv-reply-inline input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
}

/* ── Timeline: [respuesta] y [auto] ────────────────────────────────────── */
.vw-crm-qv-timeline-item.vw-crm-qv-timeline-reply {
  border-left-color: var(--success);
  background: var(--success-bg);
}

.vw-crm-qv-timeline-item.vw-crm-qv-timeline-auto {
  opacity: 0.72;
}

/* ── CRM lista: filtro "ver enfriados" + Exportar/Importar CSV ────────── */
.vw-crm-list-io {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .vw-crm-list-io { flex-basis: 100%; order: 1; }
}

/* ── Mis clientes: semáforo de salud ───────────────────────────────────── */
.vw-health-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vw-health-dot.is-green { background: var(--success); }
.vw-health-dot.is-yellow { background: var(--amber); }
.vw-health-dot.is-red { background: var(--danger); }

.vw-health-dot.is-unknown {
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--text-faint);
  font-size: 12px;
}

/* ── Dashboard: motivos de pérdida ─────────────────────────────────────── */
.vw-lost-reasons {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vw-lost-reason-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.vw-lost-reason-text {
  font-size: 12.5px;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vw-lost-reason-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
  flex-shrink: 0;
}

/* ── Copiloto (drawer lateral, mismo patrón que el quick-view del CRM) ── */
.vw-copilot-drawer {
  display: flex;
  flex-direction: column;
  /* Un poco más ancho que el quick-view (380px) — es una conversación, no
     una ficha de datos, necesita más aire horizontal para las burbujas. */
  max-width: 440px;
}

.vw-copilot-body {
  padding: 4px 20px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 4px;
}

.vw-copilot-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
}

.vw-copilot-subtitle {
  font-size: 12px;
  color: var(--text-faint);
  margin: 0 0 10px;
}

.vw-copilot-messages {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px 0;
}

.vw-copilot-thinking {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
  margin: 4px 0;
}

.vw-copilot-composer {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.vw-copilot-composer input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13.5px;
  font-family: inherit;
}

/* 503 (sin llave configurada) — burbuja de advertencia, tono amber, nunca
   roja (no es un error del vendedor ni algo que se arregle reintentando). */
.vw-copilot-bubble-warning {
  background: color-mix(in srgb, var(--amber) 14%, var(--surface-2));
  border-color: color-mix(in srgb, var(--amber) 34%, var(--border));
}

@media (max-width: 640px) {
  .vw-copilot-drawer { max-width: none; }
}

/* ════ CRM PODERES — RECONCILIACIÓN (revisor) ════
   Las listas densas NUNCA comprimen la celda del nombre: por debajo del
   ancho mínimo, la lista scrollea horizontal dentro de su propio wrap
   (el body jamás scrollea de lado). Resuelve: nombre truncado en
   1024-1280px (HOY, tras sumar Score) y nombre colapsado a ~13px en la
   lista CRM móvil. */
.vw-hoy-listwrap, .vw-crm-listwrap { overflow-x: auto; }
.vw-hoy-list-head, .vw-hoy-row { min-width: 1000px; }
.vw-crm-list-head, .vw-crm-list-row { min-width: 1080px; }
@media (max-width: 900px) {
  .vw-crm-list-head, .vw-crm-list-row { min-width: 430px; }
}