/* vo.css — SP-CRM-VO Fase 5 (scaffolding). Capa de pagina del modulo CRM VO.
   ORIGEN: maqueta fuente/css/vo.css (Atlas dir-c). RECONCILIACION: NINGUNA variable reasignada
   — todos los tokens usados YA existen en atlas-tokens.css (--accent*, --surface*, --text-*,
   --pos*, --neg*, --warn*, --radius*, --s-*, --shadow-card, --font-*, --header-h).
   SCOPE: cada regla prefijada con .crm-vo (las page-vo-* llevan class "crm-vo") para no tocar
   el resto de la app. El toggle html[data-role] de la maqueta se reescribe a .crm-vo[data-role]:
   la JS pone data-role en el wrapper desde el rol REAL del login (no hay conmutador).
   GENERADO por scope-transform; si cambia la maqueta, re-generar. */
/* ============================================================================
   VO.CSS — capa de página "Stock VO + CRM VO" (Atlas, dir. c).
   ----------------------------------------------------------------------------
   NO redefine tokens ni reinventa componentes. Reusa lo canónico Atlas
   (.dtable / .pager / .search, .modal, .field / .select / .seg, .input / .switch,
   .badge--*, .toast). Solo añade lo propio del módulo: barra de filtros siempre
   visible, badges de reserva, ficha a dos columnas, bloque "solo Jefe VO",
   asistente de oferta y estados transversales (skeleton / vacío / banners).
   ============================================================================ */

/* ── Conmutador de rol en la cabecera ───────────────────────────────────── */
.crm-vo .vo-role { display:flex; align-items:center; gap:9px; }
.crm-vo .vo-role__lbl { font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.crm-vo .vo-role .seg__btn.is-active[data-role="jefe"] { background:var(--text); color:#fff; }

/* ── Badges de estado de reserva ────────────────────────────────────────── */
.crm-vo .vo-resv { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.01em; padding:4px 10px; border-radius:var(--radius-pill); white-space:nowrap; }
.crm-vo .vo-resv::before { content:""; width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.crm-vo .vo-resv--libre { color:var(--text-2); background:var(--surface-2); }
.crm-vo .vo-resv--libre::before { background:var(--text-3); }
.crm-vo .vo-resv--mia { color:var(--accent-strong); background:var(--accent-weak); }
.crm-vo .vo-resv--mia::before { background:var(--accent); }
.crm-vo .vo-resv--otro { color:var(--text-3); background:var(--surface-2); }
.crm-vo .vo-resv--otro::before { background:var(--text-3); opacity:.6; }

/* ── Barra de filtros siempre visible (sobre .field/.select/.seg) ───────── */
.crm-vo .vo-filters { display:flex; align-items:flex-end; gap:var(--s-4); flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:var(--s-4) var(--s-5); margin-bottom:var(--s-5); }
.crm-vo .vo-filters .search input { width:280px; }
.crm-vo .vo-filters .search input:focus { width:300px; }
.crm-vo .vo-filters__spacer { flex:1; }
.crm-vo .vo-count { display:inline-flex; align-items:baseline; gap:6px; font-size:13px; color:var(--text-2); white-space:nowrap; padding-bottom:3px; }
.crm-vo .vo-count b { font-family:var(--font-num); font-size:18px; font-weight:600; color:var(--text); }
.crm-vo .vo-seg-jefe { display:none; }
.crm-vo[data-role="jefe"] .vo-seg-jefe { display:inline-flex; }

/* ── Tira de stats compacta ─────────────────────────────────────────────── */
.crm-vo .vo-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--kpi-gap); margin-bottom:var(--s-5); }
@media (max-width:1000px){
.crm-vo .vo-stats { grid-template-columns:repeat(2,1fr); }}
@media (max-width:520px){
.crm-vo .vo-stats { grid-template-columns:1fr; }}
.crm-vo .vo-stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-card); padding:16px 18px; display:flex; flex-direction:column; gap:8px; }
.crm-vo .vo-stat__top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.crm-vo .vo-stat__label { font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); }
.crm-vo .vo-stat__chip { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:13px; background:var(--accent-weak); color:var(--accent-strong); }
.crm-vo .vo-stat__val { font-family:var(--font-num); font-size:25px; font-weight:600; letter-spacing:-.01em; line-height:1; color:var(--text); }
.crm-vo .vo-stat__sub { font-size:11.5px; color:var(--text-3); }

/* ── Celda marca+modelo en tabla ────────────────────────────────────────── */
.crm-vo .vo-veh { display:flex; flex-direction:column; gap:2px; min-width:0; }
.crm-vo .vo-veh__name { font-weight:700; color:var(--text); white-space:nowrap; }
.crm-vo .vo-veh__sub { font-size:11.5px; color:var(--text-3); white-space:nowrap; }
.crm-vo .vo-mono { font-family:var(--font-num); letter-spacing:.02em; }
.crm-vo .vo-plate { display:inline-flex; align-items:center; font-family:var(--font-num); font-weight:600; font-size:12px; letter-spacing:.04em; color:var(--text); background:var(--surface-2); border:1px solid var(--border); border-radius:6px; padding:3px 8px; white-space:nowrap; }
.crm-vo .vo-price { font-family:var(--font-num); font-weight:700; font-size:14px; color:var(--text); }
.crm-vo .vo-pvr { display:block; font-size:10.5px; color:var(--text-3); font-family:var(--font-num); margin-top:2px; }

/* fila atenuada (reservado por otro → no ofertable) */
.crm-vo .dtable tbody tr.vo-dim td { color:var(--text-3); }
.crm-vo .dtable tbody tr.vo-dim .vo-veh__name { color:var(--text-2); font-weight:600; }
.crm-vo .dtable tbody tr.vo-alta td { background:color-mix(in srgb, var(--warn-bg) 38%, transparent); }

/* ── Layout de la tabla de Stock VO (SOLO dentro de .crm-vo; las .dtable de otros módulos no se tocan). ──
   La .vo-card tiene overflow:hidden y no existía regla .dwrap → la tabla desbordaba y se cortaba la columna
   "Acciones". Fix: la .dwrap scrollea en horizontal; nowrap selectivo (precio/km/fecha/badges/acciones en
   una sola línea, solo "Vehículo" envuelve a 2 líneas acotadas); padding de celda menor para filas compactas.
   Solo distribución/anchos/wrapping; colores y tokens intactos. */
.crm-vo .dwrap { overflow-x:auto; }
/* table-layout:fixed → thead y tbody comparten el MISMO reparto por columna (se ALINEAN). Anchos por
   columna; "Vehículo" (1ª, sin width) absorbe el resto. Robusto ante 8 columnas (jefe/viewer, con
   "Publicación") y 7 (vendedor, sin ella): la última (Acciones) por :last-child; "Publicación" por
   :nth-child(7):not(:last-child) (solo cuando existe). Suma fijas ≈76% (jefe) → Vehículo ~24%. */
.crm-vo .dtable { width:100%; table-layout:fixed; }
.crm-vo .dtable th, .crm-vo .dtable td { padding:8px 12px; vertical-align:middle; white-space:nowrap; }
.crm-vo .dtable th:nth-child(2), .crm-vo .dtable td:nth-child(2) { width:9%; }    /* Matrícula */
.crm-vo .dtable th:nth-child(3), .crm-vo .dtable td:nth-child(3) { width:8%; }    /* Kms */
.crm-vo .dtable th:nth-child(4), .crm-vo .dtable td:nth-child(4) { width:10%; }   /* Matriculación */
.crm-vo .dtable th:nth-child(5), .crm-vo .dtable td:nth-child(5) { width:10%; }   /* Precio */
.crm-vo .dtable th:nth-child(6), .crm-vo .dtable td:nth-child(6) { width:10%; }   /* Reserva */
.crm-vo .dtable th:nth-child(7):not(:last-child), .crm-vo .dtable td:nth-child(7):not(:last-child) { width:12%; } /* Publicación (solo jefe/viewer) */
.crm-vo .dtable th:last-child, .crm-vo .dtable td:last-child { width:18%; }       /* Acciones (aloja los 3 botones de fila) */
.crm-vo .dtable .vo-veh { white-space:normal; max-width:none; }
.crm-vo .dtable .vo-veh__name, .crm-vo .dtable .vo-veh__sub { white-space:normal; }

/* ── Densidad responsive del listado (escritorio ESTRECHO ~1280–1366px). SOLO dentro de .crm-vo:
   tipografía/padding de celda y tamaño de los botones de fila — cero lógica, cero color, cero
   reglas globales. En escritorio estrecho el desbordamiento interno de .dwrap lo provoca la celda
   de Acciones (3 botones nowrap ≈227px sobre una columna ~167px): se comprime progresivamente la
   letra y el padding de celda, se encogen los .vo-btn--sm de acción y se cede ancho de "Vehículo"
   a "Acciones" para que TODO quepa sin scroll interno. Suelo legible ~12px. A ≥1600px NO aplica
   (se conserva la densidad base). No toca .vo-tabs (botones de pestañas) ni clases fuera del módulo. */
@media (max-width:1440px){
  .crm-vo .dtable td { font-size:13px; }
  .crm-vo .dtable th, .crm-vo .dtable td { padding:7px 10px; }
  .crm-vo .dtable thead th { font-size:12px; }
  .crm-vo .vo-price { font-size:13px; }
  .crm-vo .vo-acts { gap:5px; }
  .crm-vo .vo-acts .vo-btn--sm { padding:5px 9px; font-size:11.5px; }
  .crm-vo .dtable th:last-child, .crm-vo .dtable td:last-child { width:20%; }        /* Acciones + */
}
@media (max-width:1340px){
  .crm-vo .dtable td { font-size:12.5px; }
  .crm-vo .dtable th, .crm-vo .dtable td { padding:6px 8px; }
  .crm-vo .dtable thead th { font-size:11px; }
  .crm-vo .vo-veh__sub { font-size:11px; }
  .crm-vo .vo-price { font-size:12.5px; }
  .crm-vo .vo-plate { font-size:11px; padding:2px 6px; }
  .crm-vo .vo-acts { gap:4px; }
  .crm-vo .vo-acts .vo-btn--sm { padding:4px 8px; font-size:11px; }
  .crm-vo .dtable th:last-child, .crm-vo .dtable td:last-child { width:21%; }        /* Acciones ++ */
  .crm-vo .dtable th:nth-child(2), .crm-vo .dtable td:nth-child(2) { width:8%; }     /* Matrícula − */
}

/* ── Botones de acción en fila ──────────────────────────────────────────── */
.crm-vo .vo-acts { display:inline-flex; gap:6px; justify-content:flex-end; }
.crm-vo .vo-iconbtn { position:relative; width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text-2); display:grid; place-items:center; font-size:13px; cursor:pointer; transition:all .13s; }
.crm-vo .vo-iconbtn:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
.crm-vo .vo-iconbtn--accent:hover { background:var(--accent-weak); color:var(--accent-strong); border-color:transparent; }
.crm-vo .vo-iconbtn:disabled { opacity:.35; cursor:not-allowed; }
.crm-vo .vo-iconbtn[data-tip]:hover::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%); background:var(--text); color:var(--surface); font-size:11px; font-weight:500; padding:4px 9px; border-radius:6px; white-space:nowrap; z-index:20; pointer-events:none; }

/* ── Botones (acciones primarias/secundarias) ──────────────────────────── */
.crm-vo .vo-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font-sans); font-size:13px; font-weight:600; cursor:pointer; padding:9px 16px; border-radius:var(--radius-sm); border:1px solid transparent; transition:all .14s; white-space:nowrap; text-decoration:none; }
.crm-vo .vo-btn--primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.crm-vo .vo-btn--primary:hover { background:var(--accent-strong); border-color:var(--accent-strong); }
.crm-vo .vo-btn--ghost { background:var(--surface); color:var(--text-2); border-color:var(--border); }
.crm-vo .vo-btn--ghost:hover { background:var(--surface-2); color:var(--text); border-color:var(--border-strong); }
.crm-vo .vo-btn--sm { padding:6px 12px; font-size:12px; border-radius:var(--radius-sm); }
/* SP-CRM-VO: pestañas de navegación interna del módulo (Stock·Clientes·Reservas) más grandes que un
   vo-btn--sm — SOLO dentro de .vo-tabs (especificidad 0,3,0 > .vo-btn--sm), sin tocar los botones de
   acción por fila (.vo-acts) ni clases globales. Solo dimensiones; colores/tokens intactos. */
.crm-vo .vo-tabs .vo-btn { padding:11px 22px; font-size:14px; min-height:42px; border-radius:var(--radius); }
.crm-vo .vo-btn:disabled { opacity:.45; cursor:not-allowed; }
/* SP-CRM-VO (22/06/2026): navegación entre DESTINOS migrada al SUB-SIDEBAR contextual
   (subSidebar de crm_vo en _registro.js). La barra en-página .vo-tabs (Stock·Clientes·Reservas)
   queda redundante → oculta. JS de VO.tabs() intacto; los nodos siguen en DOM (reversible). Solo
   afecta a los 3 destinos (los drill-down vo-ficha/oferta/cliente usan vo-back, no .vo-tabs).
   `!important` necesario: VO.tabs() pinta la barra con `style="display:flex"` INLINE (que no debo
   tocar); sin !important el inline gana al selector. */
#page-vo-stock .vo-tabs, #page-vo-clientes .vo-tabs, #page-vo-reservas .vo-tabs { display:none !important; }
.crm-vo .vo-btn--danger { background:var(--neg); color:#fff; border-color:var(--neg); }
.crm-vo .vo-btn--danger:hover { filter:brightness(.95); }

/* ── Botón "volver" en la cabecera de detalle ──────────────────────────── */
.crm-vo .vo-back { display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--text-2); padding:7px 13px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); transition:all .13s; }
.crm-vo .vo-back:hover { background:var(--surface-2); color:var(--text); }

/* ============================================================================
   FICHA DE VEHÍCULO — dos columnas (principal + lateral de acciones)
   ============================================================================ */
.crm-vo .vo-ficha { display:grid; grid-template-columns:1fr 360px; gap:var(--s-5); align-items:start; }
@media (max-width:1040px){
.crm-vo .vo-ficha { grid-template-columns:1fr; }}
.crm-vo .vo-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; }
.crm-vo .vo-card__head { display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border); flex-wrap:wrap; }
.crm-vo .vo-card__head h2 { font-size:15px; font-weight:700; }
.crm-vo .vo-card__body { padding:var(--s-5); }
.crm-vo .vo-hero { display:flex; flex-direction:column; gap:14px; }
.crm-vo .vo-hero__top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.crm-vo .vo-hero__title h1 { font-size:24px; font-weight:800; letter-spacing:-.02em; line-height:1.1; }
.crm-vo .vo-hero__title .sub { font-size:14px; color:var(--text-2); margin-top:4px; }
.crm-vo .vo-hero__tags { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.crm-vo .vo-hero__price { text-align:right; }
.crm-vo .vo-hero__price-k { font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--text-3); }
.crm-vo .vo-hero__price-v { font-family:var(--font-num); font-size:34px; font-weight:700; letter-spacing:-.01em; color:var(--text); line-height:1; margin-top:4px; }
.crm-vo .vo-hero__price-sub { font-size:11.5px; color:var(--text-3); margin-top:4px; }
.crm-vo .vo-spec { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
@media (max-width:560px){
.crm-vo .vo-spec { grid-template-columns:1fr; }}
.crm-vo .vo-spec__cell { background:var(--surface); padding:13px 16px; }
.crm-vo .vo-spec__k { font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.crm-vo .vo-spec__v { font-size:14px; color:var(--text); font-weight:600; margin-top:4px; }
.crm-vo .vo-spec__v.mono { font-family:var(--font-num); letter-spacing:.02em; font-weight:500; }

/* placeholder de imagen del vehículo (sin SVG dibujado a mano) */
.crm-vo .vo-photo { aspect-ratio:16/9; border-radius:var(--radius); border:1px solid var(--border); background:
  repeating-linear-gradient(135deg, var(--surface-2) 0 14px, var(--surface-3) 14px 28px);
  display:grid; place-items:center; }
.crm-vo .vo-photo span { font-family:var(--font-num); font-size:12px; color:var(--text-3); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-pill); padding:6px 14px; }

/* lateral de acciones */
.crm-vo .vo-side { display:flex; flex-direction:column; gap:var(--s-4); position:sticky; top:calc(var(--header-h) + 46px + var(--s-5)); }
.crm-vo .vo-side__actions { display:flex; flex-direction:column; gap:10px; }
.crm-vo .vo-side .vo-btn { width:100%; padding:12px 16px; font-size:14px; }
.crm-vo .vo-side__resv { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); }
.crm-vo .vo-side__resv-k { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); }

/* ── Bloque SOLO JEFE VO / ADMIN — diferenciado visualmente ─────────────── */
.crm-vo .jefe-only { display:none; }
.crm-vo[data-role="jefe"] .jefe-only { display:revert; }
.crm-vo[data-role="jefe"] .jefe-only.vo-side__actions { display:flex; }
.crm-vo .vo-internal { border:1px dashed color-mix(in srgb, var(--warn) 45%, var(--border)); border-radius:var(--radius-lg); background:color-mix(in srgb, var(--warn-bg) 36%, var(--surface)); overflow:hidden; }
.crm-vo .vo-internal__head { display:flex; align-items:center; gap:10px; padding:13px var(--s-5); border-bottom:1px dashed color-mix(in srgb, var(--warn) 38%, var(--border)); }
.crm-vo .vo-internal__lock { width:28px; height:28px; border-radius:8px; background:var(--warn); color:#fff; display:grid; place-items:center; font-size:13px; flex-shrink:0; }
.crm-vo .vo-internal__head h3 { font-size:14px; font-weight:700; color:var(--text); }
.crm-vo .vo-internal__head .tag-int { margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--warn); background:var(--warn-bg); border:1px solid color-mix(in srgb,var(--warn) 30%,transparent); padding:3px 9px; border-radius:var(--radius-pill); }
.crm-vo .vo-internal__body { padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-4); }
.crm-vo .vo-internal__note { font-size:11.5px; color:var(--text-2); line-height:1.5; }

/* PVR editor */
.crm-vo .vo-pvr-row { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.crm-vo .vo-pvr-row .field { flex:1; min-width:140px; }

/* información económica plegable */
.crm-vo .vo-econ { border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); overflow:hidden; }
.crm-vo .vo-econ__sum { display:flex; align-items:center; gap:10px; width:100%; padding:12px 15px; background:var(--surface); border:0; font-family:var(--font-sans); font-size:13.5px; font-weight:600; color:var(--text); cursor:pointer; text-align:left; }
.crm-vo .vo-econ__sum::after { content:"▾"; margin-left:auto; color:var(--text-3); transition:transform .18s; }
.crm-vo .vo-econ.is-open .vo-econ__sum::after { transform:rotate(180deg); }
.crm-vo .vo-econ__body { display:none; padding:0 15px 14px; }
.crm-vo .vo-econ.is-open .vo-econ__body { display:block; }
.crm-vo .vo-econ__row { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--border); font-size:13px; }
.crm-vo .vo-econ__row:last-child { border-bottom:0; }
.crm-vo .vo-econ__row.is-total { font-weight:700; border-top:1px solid var(--border-strong); margin-top:2px; }
.crm-vo .vo-econ__k { color:var(--text-2); }
.crm-vo .vo-econ__v { font-family:var(--font-num); font-weight:600; color:var(--text); }
.crm-vo .vo-econ__v.pos { color:var(--pos); }

/* estado conmutador En venta / Alta */
.crm-vo .vo-estado-toggle { display:flex; gap:10px; align-items:center; }

/* ============================================================================
   CLIENTES — listado, tag "gestionada por otro", ficha
   ============================================================================ */
.crm-vo .vo-cli-name { display:flex; align-items:center; gap:10px; }
.crm-vo .vo-ava { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff; font-family:var(--font-num); font-size:12px; font-weight:600; flex-shrink:0; background:var(--accent); }
.crm-vo .vo-cli-meta { display:flex; flex-direction:column; }
.crm-vo .vo-cli-meta b { font-weight:700; color:var(--text); }
.crm-vo .vo-tag-otro { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:var(--text-3); background:var(--surface-2); border:1px solid var(--border); padding:3px 9px; border-radius:var(--radius-pill); white-space:nowrap; }
.crm-vo .vo-tag-otro::before { content:"◷"; font-size:11px; }

/* ficha de cliente: cabecera */
.crm-vo .vo-cli-head { display:flex; align-items:flex-start; gap:18px; flex-wrap:wrap; }
.crm-vo .vo-cli-head__ava { width:60px; height:60px; border-radius:16px; font-size:20px; }
.crm-vo .vo-cli-head__main { flex:1; min-width:0; }
.crm-vo .vo-cli-head__main h1 { font-size:24px; font-weight:800; letter-spacing:-.02em; }
.crm-vo .vo-cli-head__contact { display:flex; gap:18px; flex-wrap:wrap; margin-top:8px; font-size:13px; color:var(--text-2); }
.crm-vo .vo-cli-head__contact span { display:inline-flex; align-items:center; gap:7px; }
.crm-vo .vo-cli-head__contact .k { color:var(--text-3); }
.crm-vo .vo-cli-head__actions { display:flex; gap:10px; flex-wrap:wrap; }

/* vigencia de oferta */
.crm-vo .vo-vig { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--radius-pill); white-space:nowrap; }
.crm-vo .vo-vig--ok { color:var(--pos); background:var(--pos-bg); }
.crm-vo .vo-vig--cad { color:var(--text-3); background:var(--surface-2); }

/* ============================================================================
   ASISTENTE DE NUEVA OFERTA
   ============================================================================ */
.crm-vo .vo-wizard { display:grid; grid-template-columns:1fr 320px; gap:var(--s-5); align-items:start; }
@media (max-width:1040px){
.crm-vo .vo-wizard { grid-template-columns:1fr; }}
.crm-vo .vo-steps { display:flex; flex-direction:column; gap:var(--s-4); }
.crm-vo .vo-step { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; }
.crm-vo .vo-step__head { display:flex; align-items:center; gap:12px; padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border); }
.crm-vo .vo-step__n { width:28px; height:28px; border-radius:50%; background:var(--accent-weak); color:var(--accent-strong); display:grid; place-items:center; font-family:var(--font-num); font-weight:700; font-size:13px; flex-shrink:0; }
.crm-vo .vo-step.is-done .vo-step__n { background:var(--accent); color:#fff; }
.crm-vo .vo-step__head h2 { font-size:15px; font-weight:700; }
.crm-vo .vo-step__head .opt { margin-left:auto; font-size:11px; font-weight:600; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }
.crm-vo .vo-step__body { padding:var(--s-5); }

/* picker de vehículo / cliente */
.crm-vo .vo-pick { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface-2); }
.crm-vo .vo-pick__icon { width:42px; height:42px; border-radius:11px; background:var(--accent-weak); color:var(--accent-strong); display:grid; place-items:center; font-size:18px; flex-shrink:0; }
.crm-vo .vo-pick__main { flex:1; min-width:0; }
.crm-vo .vo-pick__title { font-weight:700; color:var(--text); }
.crm-vo .vo-pick__sub { font-size:12px; color:var(--text-3); margin-top:2px; }
.crm-vo .vo-pick__empty { color:var(--text-3); font-style:italic; }

/* precio congelado */
.crm-vo .vo-frozen { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 18px; border:1px solid var(--border); border-radius:var(--radius); background:var(--accent-weak); }
.crm-vo .vo-frozen__k { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-strong); }
.crm-vo .vo-frozen__v { font-family:var(--font-num); font-size:28px; font-weight:700; color:var(--text); line-height:1; }
.crm-vo .vo-frozen__lock { font-size:11px; color:var(--text-2); display:inline-flex; align-items:center; gap:6px; margin-top:4px; }

/* tasación: rejilla de campos */
.crm-vo .vo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s-4); }
@media (max-width:720px){
.crm-vo .vo-grid { grid-template-columns:1fr 1fr; }}
@media (max-width:480px){
.crm-vo .vo-grid { grid-template-columns:1fr; }}
.crm-vo .vo-grid--2 { grid-template-columns:1fr 1fr; }
.crm-vo .vo-field { display:flex; flex-direction:column; gap:6px; }
.crm-vo .vo-field label { font-size:9.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }

/* resumen lateral del asistente */
.crm-vo .vo-summary { position:sticky; top:calc(var(--header-h) + 46px + var(--s-5)); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); overflow:hidden; }
.crm-vo .vo-summary__head { padding:var(--s-4) var(--s-5); border-bottom:1px solid var(--border); }
.crm-vo .vo-summary__head h3 { font-size:14px; font-weight:700; }
.crm-vo .vo-summary__head p { font-size:11.5px; color:var(--text-3); margin-top:2px; }
.crm-vo .vo-summary__body { padding:var(--s-5); display:flex; flex-direction:column; gap:14px; }
.crm-vo .vo-summary__row { display:flex; justify-content:space-between; gap:12px; font-size:13px; }
.crm-vo .vo-summary__row .k { color:var(--text-3); }
.crm-vo .vo-summary__row .v { font-weight:600; color:var(--text); text-align:right; }
.crm-vo .vo-summary__foot { padding:var(--s-5); border-top:1px solid var(--border); background:var(--surface-2); }
.crm-vo .vo-summary__foot .vo-btn { width:100%; padding:12px; font-size:14px; }

/* tasación toggle */
.crm-vo .vo-tas-toggle { display:flex; align-items:center; gap:12px; }

/* ── Banners (avisos de error/aviso, no pantallas rotas) ────────────────── */
.crm-vo .vo-banner { display:flex; align-items:flex-start; gap:12px; border-radius:var(--radius); padding:13px 15px; font-size:13px; line-height:1.5; margin-bottom:var(--s-5); }
.crm-vo .vo-banner__ico { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:14px; color:#fff; flex-shrink:0; font-weight:700; }
.crm-vo .vo-banner--warn { background:var(--warn-bg); border:1px solid color-mix(in srgb,var(--warn) 30%,transparent); color:var(--text); }
.crm-vo .vo-banner--warn .vo-banner__ico { background:var(--warn); }
.crm-vo .vo-banner--error { background:var(--neg-bg); border:1px solid color-mix(in srgb,var(--neg) 28%,transparent); color:var(--text); }
.crm-vo .vo-banner--error .vo-banner__ico { background:var(--neg); }
.crm-vo .vo-banner--info { background:var(--accent-weak); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); color:var(--text); }
.crm-vo .vo-banner--info .vo-banner__ico { background:var(--accent); }
.crm-vo .vo-banner b { font-weight:700; }
.crm-vo .vo-banner__close { margin-left:auto; border:0; background:transparent; color:var(--text-3); font-size:15px; cursor:pointer; line-height:1; }

/* aviso de DNI duplicado bajo el campo (no bloqueante) */
.crm-vo .vo-inline-warn { display:none; align-items:center; gap:7px; font-size:12px; color:var(--warn); margin-top:6px; }
.crm-vo .vo-inline-warn.is-on { display:flex; }
.crm-vo .vo-inline-warn::before { content:"!"; width:16px; height:16px; border-radius:50%; background:var(--warn); color:#fff; display:grid; place-items:center; font-size:10px; font-weight:700; flex-shrink:0; }

/* ── Estado vacío (genérico del módulo) ─────────────────────────────────── */
.crm-vo .vo-empty { text-align:center; padding:var(--s-6) var(--s-5); }
.crm-vo .vo-empty__ico { width:56px; height:56px; margin:0 auto 14px; border-radius:16px; background:var(--accent-weak); color:var(--accent-strong); display:grid; place-items:center; font-size:26px; }
.crm-vo .vo-empty__t { font-size:16px; font-weight:700; color:var(--text); }
.crm-vo .vo-empty__s { font-size:13px; color:var(--text-2); margin-top:6px; max-width:380px; margin-inline:auto; line-height:1.5; }
.crm-vo .vo-empty__act { margin-top:18px; }

/* mensaje de permiso insuficiente (neutro, sin filtrar datos) */
.crm-vo .vo-permiso { display:flex; align-items:center; gap:12px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:13px 16px; font-size:13px; color:var(--text-2); }
.crm-vo .vo-permiso__ico { width:28px; height:28px; border-radius:8px; background:var(--surface-3); color:var(--text-3); display:grid; place-items:center; font-size:14px; flex-shrink:0; }

/* ── Skeleton de carga ──────────────────────────────────────────────────── */
.crm-vo .vo-skel { position:relative; overflow:hidden; background:var(--surface-2); border-radius:6px; }
.crm-vo .vo-skel::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--surface) 70%, transparent), transparent); animation:voShimmer 1.3s infinite; }
@keyframes voShimmer { 100% { transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce){
.crm-vo .vo-skel::after { animation:none; }}
.crm-vo .vo-skel-row td { padding:13px var(--s-3); }
.crm-vo .vo-skel-line { height:12px; }

/* toasts de error/aviso (variantes sobre .toast de Atlas) */
.crm-vo .toast--error { border-left-color:var(--neg); }
.crm-vo .toast--error .toast__ico { background:var(--neg-bg); color:var(--neg); }
.crm-vo .toast--warn { border-left-color:var(--warn); }
.crm-vo .toast--warn .toast__ico { background:var(--warn-bg); color:var(--warn); }

/* ── Modal: formulario (sobre .modal de Atlas) ──────────────────────────── */
.crm-vo .vo-modal-form { padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-4); }
.crm-vo .vo-modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:var(--s-4) var(--s-5); border-top:1px solid var(--border); background:var(--surface-2); }
.crm-vo .vo-modal-desc { font-size:13px; color:var(--text-2); line-height:1.5; }

/* impresión: ocultar chrome y laterales de acción */
@media print {
.crm-vo .vo-role, .crm-vo .vo-side, .crm-vo .vo-summary, .crm-vo .vo-acts, .crm-vo .vo-filters { display:none !important; }
.crm-vo .vo-ficha, .crm-vo .vo-wizard { grid-template-columns:1fr; }}