/* Registro de actividad (Rediseño v3, pages/auditoria.html): filas tipo
   timeline -- marcador de color a la izquierda (según la acción), no una
   tabla plana. A propósito el único módulo sin tarjetas KPI: el pedido
   explícito era que esto se sienta como trazabilidad/seguridad, no como
   otro dashboard de negocio. Clic en una fila abre el detalle completo
   (panel lateral, reusa las clases .perfil-cliente-... y .rank-row ya definidas). */
.evento-fila{
  display:flex; align-items:center; gap:12px; padding:11px 8px; border-bottom:1px solid var(--paper-line);
  cursor:pointer; border-radius:8px; transition:background .12s;
}
.evento-fila:hover{ background:var(--paper); }
.evento-fila:last-child{ border-bottom:none; }
.evento-marca{ width:32px; height:32px; border-radius:var(--radius-sm); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.evento-marca svg{ width:16px; height:16px; }
.evento-marca-teal{ background:var(--teal-soft); color:var(--teal-deep); }
.evento-marca-blue{ background:var(--blue-soft); color:var(--blue); }
.evento-marca-danger{ background:#FBEAF0; color:var(--danger); }
.evento-marca-purple{ background:var(--purple-soft); color:var(--purple); }
.evento-marca-muted{ background:var(--paper); color:var(--muted); }
.evento-info{ flex:1; min-width:0; }
.evento-desc{ font-size:13px; color:var(--ink); }
.evento-meta{ font-size:11.5px; color:var(--muted); margin-top:2px; }
/* Celular: en una sola fila el texto quedaba en una columna de ~60px (una palabra por línea) con el
   badge y la fecha encima. Se baja el badge y la fecha a una segunda línea bajo el texto. */
@media (max-width:640px){
  .evento-fila{
    display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:start; gap:var(--space-2) var(--space-3);
    grid-template-areas:"marca info info" ". badge fecha";
  }
  .evento-fila .evento-marca{ grid-area:marca; }
  .evento-fila .evento-info{ grid-area:info; }
  .evento-fila > .evento-badge{ grid-area:badge; justify-self:start; align-self:center; }
  .evento-fila > .evento-fecha{ grid-area:fecha; align-self:center; }
}
.evento-badge{ font-family:var(--font-mono); font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px; flex-shrink:0; }
.evento-badge-teal{ color:var(--teal-deep); background:var(--teal-soft); }
.evento-badge-blue{ color:var(--blue); background:var(--blue-soft); }
.evento-badge-danger{ color:var(--danger); background:#FBEAF0; }
.evento-badge-orange{ color:#8A5A12; background:var(--orange-soft); }
.evento-badge-purple{ color:var(--purple); background:var(--purple-soft); }
.evento-badge-muted{ color:var(--muted); background:var(--paper); }
.evento-fecha{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); flex-shrink:0; white-space:nowrap; }

/* Buscador prominente (Rediseño v3, pages/repuestos.html): "búsqueda
   rápida" es el pedido explícito para este módulo, así que el buscador va
   arriba de todo -- no metido en el header genérico como el buscador
   global del topbar -- y filtra la lista en vivo (ver
   js/repuestosDashboard.js, evento 'input'). */
.buscador-panel{ padding:18px 22px; margin-bottom:20px; }
.buscador-grande{ position:relative; }
.buscador-grande .buscador-icono{ position:absolute; left:16px; top:50%; transform:translateY(-50%); display:flex; color:var(--muted); pointer-events:none; }
.buscador-grande .buscador-icono svg{ width:18px; height:18px; }
.buscador-grande input{
  width:100%; font-family:var(--font-body); font-size:14.5px; padding:14px 16px 14px 44px;
  border:1.5px solid var(--paper-line); border-radius:12px; background:var(--paper); color:var(--ink);
}
.buscador-grande input:focus{ outline:none; border-color:var(--ochre-deep); background:#fff; }

/* Tablero Kanban (Rediseño v3, pages/postventa.html): primer patrón Kanban
   de la app -- 3 columnas fijas por estado (pendiente/en_proceso/
   completado, el mismo CHECK constraint de la tabla postventa). Mover una
   tarjeta llama a js/postventaDashboard.js's moverOrden(), que hace un PUT
   real -- no hay drag-and-drop (más frágil de mantener que 2 botones). */
.kanban-postventa{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; align-items:start; }
.kanban-col{ background:var(--paper); border-radius:12px; padding:12px; min-width:0; }
.kanban-col-header{
  display:flex; align-items:center; justify-content:space-between; padding:4px 6px 12px;
  font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--ink);
}
.kanban-col-count{
  font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--muted);
  background:#fff; border-radius:20px; padding:2px 8px;
}
.kanban-col-body{ display:flex; flex-direction:column; gap:10px; min-height:60px; }
.kanban-vacio{ font-size:12.5px; color:var(--muted); text-align:center; padding:16px 8px; }

.ticket-card{ background:#fff; border-radius:10px; padding:12px 14px; box-shadow:var(--card-shadow); }
.ticket-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.ticket-tipo{
  font-family:var(--font-mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em;
  color:var(--ochre-deep); background:var(--teal-soft); border-radius:20px; padding:2px 8px;
}
.ticket-total{ font-family:var(--font-mono); font-weight:700; font-size:12.5px; color:var(--ink); }
.ticket-cliente{ font-size:13px; font-weight:600; color:var(--ink); }
.ticket-vehiculo{ font-size:11.5px; color:var(--muted); margin-top:1px; }
.ticket-desc{ font-size:12px; color:var(--ink); margin-top:8px; line-height:1.4; }
.ticket-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; padding-top:8px; border-top:1px solid var(--paper-line); }
.ticket-fecha{ font-size:11px; color:var(--muted); }
.ticket-mover{ display:flex; gap:4px; }
.ticket-mover button{
  width:24px; height:24px; border-radius:6px; border:1px solid var(--paper-line); background:#fff;
  cursor:pointer; font-size:12px; color:var(--muted); display:flex; align-items:center; justify-content:center;
}
.ticket-mover button:hover{ background:var(--paper); color:var(--ink); border-color:var(--ochre-deep); }

@media (max-width:820px){
  .kanban-postventa{ grid-template-columns:1fr; }
}

/* Hero de balance (Rediseño v3, pages/finanzas.html): pieza central estilo
   resumen bancario -- el balance del período es lo primero que se ve, no
   una tarjeta más entre otras. A propósito distinto de .hero (la franja
   genérica vieja de dashboard.js), que este módulo ya no usa. */
.fin-hero{ background:var(--ink); color:#fff; border-radius:16px; padding:26px 28px; margin-bottom:20px; }
.fin-hero-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.fin-hero-label{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255,0.55); }
.fin-hero-valor{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:38px; font-weight:700; margin-top:6px; }
.fin-hero-delta{ font-family:var(--font-mono); font-size:12.5px; color:rgba(255,255,255,0.6); margin-top:8px; }
.fin-hero-delta.up{ color:var(--cyan); }
.fin-hero-delta.down{ color:#F3A79E; }
.fin-hero-icono{
  width:48px; height:48px; border-radius:50%; background:rgba(46,226,206,0.14); color:var(--cyan);
  display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0;
}
.fin-hero-desglose{ display:flex; gap:28px; margin-top:22px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.12); }
.fin-hero-desglose-item{ display:flex; flex-direction:column; gap:3px; }
.fin-hero-desglose-label{ font-size:11.5px; color:rgba(255,255,255,0.55); }
.fin-hero-desglose-valor{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:17px; font-weight:700; }
.fin-hero-desglose-valor.ingreso{ color:var(--cyan); }
.fin-hero-desglose-valor.egreso{ color:#F3A79E; }

/* Libro de movimientos (ledger cronológico) -- distinto a propósito de los
   .rank-row de Ventas/Clientes: acá el orden es por fecha, no por valor, y
   cada fila indica ingreso/egreso con ícono + color, como un estado de
   cuenta, no un ranking. */
.movimiento-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--paper-line); }
.movimiento-row:last-child{ border-bottom:none; }
.movimiento-icono{
  width:28px; height:28px; border-radius:50%; flex-shrink:0; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.movimiento-icono.ingreso{ background:var(--teal-soft); color:var(--teal-deep); }
.movimiento-icono.egreso{ background:#FBEAF0; color:var(--danger); }
.movimiento-info{ flex:1; min-width:0; }
.movimiento-concepto{ font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.movimiento-meta{ font-size:11.5px; color:var(--muted); margin-top:1px; }
.movimiento-monto{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:13px; font-weight:700; flex-shrink:0; }
.movimiento-monto.ingreso{ color:var(--teal-deep); }
.movimiento-monto.egreso{ color:var(--danger); }

/* Con hasta 12 movimientos (dibujarMovimientos() en finanzasDashboard.js)
   la lista puede ser mucho más alta que el panel de al lado ("Gastos por
   categoría"), dejando un hueco en blanco enorme en la columna corta -- se
   acota con scroll interno en vez de dejar que crezca sin límite. */
#finMovimientos{ max-height:420px; overflow-y:auto; }

/* Banner de bienvenida (Recambio de diseño, 2026-09-21; pages/inicio.html).
   Paisaje andino de fondo (mismo assets/auth-paisaje.svg del login) -- ya
   representa a la marca en la pantalla de acceso, así que reaparece acá
   como el primer saludo dentro de la app, no como una imagen nueva. */
.welcome-banner{
  position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; gap:24px;
  padding:32px; margin-bottom:28px; border-radius:20px; color:#fff;
  background:
    linear-gradient(100deg, rgba(15,23,42,0.97) 0%, rgba(15,23,42,0.72) 46%, rgba(15,23,42,0.32) 100%),
    url('../assets/auth-paisaje.svg') right center / cover no-repeat, var(--ink);
}
.welcome-text{ flex:1 1 320px; min-width:0; }
.welcome-eyebrow{ font-family:var(--font-mono); font-size:11.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--teal); margin:0 0 8px; }
.welcome-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.6vw,30px); line-height:1.2; margin:0 0 8px; }
.welcome-title span{ color:var(--teal); }
.welcome-sub{ font-size:14px; line-height:1.5; color:rgba(255,255,255,0.78); max-width:46ch; margin:0; }
.welcome-stat{
  flex-shrink:0; display:flex; flex-direction:column; gap:8px; min-width:168px;
  background:#fff; color:var(--ink); border-radius:14px; padding:16px 20px; box-shadow:0 18px 36px -16px rgba(0,0,0,0.45);
}
.welcome-stat-top{ display:flex; align-items:center; gap:8px; }
.welcome-stat-icon{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--teal-soft); color:var(--teal-deep); flex-shrink:0; }
.welcome-stat-icon svg{ width:15px; height:15px; }
.welcome-stat-label{ font-size:11.5px; font-weight:600; color:var(--muted); }
.welcome-stat-value{ font-family:var(--font-mono); font-size:26px; font-weight:700; line-height:1; }
@media (max-width:640px){ .welcome-banner{ padding:24px; } .welcome-stat{ width:100%; } }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:var(--space-5); margin-bottom:var(--space-8); }
/* Tipografía de card (pasada de diseño premium, 2026-09-30): el label pasa de
   mayúscula+tracking (se leía "reporte viejo") a gris sentence-case chico,
   que es lo que separa un dashboard "de negocio" de uno "de software" --
   mismo criterio en .panel h3 de abajo. El valor sube de peso visual porque
   es lo único que alguien necesita leer en 2 segundos. */
.kpi-card{
  background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-lg); padding:var(--space-5) var(--space-6);
  box-shadow:var(--shadow-sm); transition:box-shadow 0.18s var(--ease-out), transform 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
  /* fill-mode:backwards (no "both"): solo aplica el cuadro "from" durante el
     delay (evita el parpadeo visible→invisible→fade de una entrada escalonada),
     pero NO se queda fijando `transform` para siempre después -- si usara
     "both", ese transform animado le ganaría PARA SIEMPRE al `transform` de
     :hover de abajo (la animación pesa más que la cascada normal mientras
     sigue "en efecto", y con fill:forwards/both nunca deja de estarlo). */
  animation:card-entrada 0.4s var(--ease-out) backwards;
}
.kpi-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:#D7DFE9; }
.kpi-card .label{ font-size:13px; color:var(--muted); font-weight:500; }
.kpi-card .value{ font-size:30px; font-weight:700; margin-top:6px; letter-spacing:-0.01em; }
.kpi-card .sub{ font-size:12px; color:var(--muted); margin-top:4px; }
/* Entrada escalonada: cada tarjeta nace 10px abajo y transparente, en cascada
   (ver el nth-child de abajo) -- un único movimiento de conjunto al cargar la
   página, no algo que se repita en cada re-render. prefers-reduced-motion ya
   la anula por completo desde base.css. */
@keyframes card-entrada{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.kpis .kpi-card:nth-child(1){ animation-delay:0ms; }
.kpis .kpi-card:nth-child(2){ animation-delay:40ms; }
.kpis .kpi-card:nth-child(3){ animation-delay:80ms; }
.kpis .kpi-card:nth-child(4){ animation-delay:120ms; }
.kpis .kpi-card:nth-child(n+5){ animation-delay:160ms; }
.kpi-card-delta{ font-family:var(--font-mono); font-size:12px; margin-top:4px; display:inline-flex; align-items:center; gap:4px; }
.kpi-card-delta.up{ color:var(--green); }
.kpi-card-delta.down{ color:var(--danger); }

/* Variante con ícono de color (solo pages/inicio.html: son 5 métricas fijas
   de negocio, cada una con un significado propio -- a diferencia de las
   tarjetas KPI genéricas de los módulos, armadas por dashboard.js a partir
   de columnas arbitrarias de un CSV, que no tienen un ícono honesto que
   asignarles). `data-accento` selecciona el color: red|blue|orange|purple|green|teal. */
/* Fila superior de la tarjeta: ícono a la izquierda y, si la tarjeta trae una
   tendencia real (kpiCard({ tendencia })), un sparkline a la derecha -- ver
   js/kpiCard.js. Sin tendencia, .kpi-card-top solo contiene el ícono y se ve
   igual que antes (el resto de los dashboards que usan kpiCard() no cambia). */
.kpi-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:12px; }
.kpi-card-icon{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:var(--radius-md); font-size:17px; flex-shrink:0;
}
.kpi-card[data-acento="red"] .kpi-card-icon{ background:#FBEAF0; color:var(--coral); }
.kpi-card[data-acento="blue"] .kpi-card-icon{ background:var(--blue-soft); color:var(--blue); }
.kpi-card[data-acento="orange"] .kpi-card-icon{ background:var(--orange-soft); color:var(--orange); }
.kpi-card[data-acento="purple"] .kpi-card-icon{ background:var(--purple-soft); color:var(--purple); }
.kpi-card[data-acento="green"] .kpi-card-icon{ background:var(--green-soft); color:var(--green); }
.kpi-card[data-acento="teal"] .kpi-card-icon{ background:var(--teal-soft); color:var(--teal-deep); }
.kpi-card-bar{ height:5px; border-radius:20px; background:var(--paper-line); margin-top:14px; overflow:hidden; }
.kpi-card-bar-fill{ height:100%; border-radius:20px; }

/* Sparkline (Rediseño de Inicio, 2026-09-22): mini-gráfico de área, mismo
   verde/rojo que .kpi-card-delta.up/.down -- una tarjeta sin tendencia real
   detrás (ver js/kpiCard.js) simplemente no la trae. */
.kpi-card-spark{ width:72px; height:30px; flex-shrink:0; }
.kpi-card-spark-svg{ width:100%; height:100%; display:block; overflow:visible; }
.kpi-card-spark-area{ fill:var(--teal); fill-opacity:0.16; stroke:none; }
.kpi-card-spark-linea{ fill:none; stroke:var(--teal-deep); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.kpi-card-spark.down .kpi-card-spark-area{ fill:var(--coral); }
.kpi-card-spark.down .kpi-card-spark-linea{ stroke:var(--coral-deep); }
.kpi-card[data-acento="red"] .kpi-card-bar-fill{ background:var(--coral); }
.kpi-card[data-acento="blue"] .kpi-card-bar-fill{ background:var(--blue); }
.kpi-card[data-acento="orange"] .kpi-card-bar-fill{ background:var(--orange); }
.kpi-card[data-acento="purple"] .kpi-card-bar-fill{ background:var(--purple); }
.kpi-card[data-acento="green"] .kpi-card-bar-fill{ background:var(--green); }
.kpi-card[data-acento="teal"] .kpi-card-bar-fill{ background:var(--teal-deep); }

.grid-2{ display:grid; grid-template-columns:1.6fr 1fr; gap:var(--space-6); margin-bottom:var(--space-7); }
.panel{
  background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-lg);
  padding:var(--space-6); box-shadow:var(--shadow-sm);
}
.panel h3{ font-family:var(--font-display); font-size:15px; font-weight:600; margin:0 0 18px 0; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; color:var(--ink); }
.panel h3 span.tag{ font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--muted); background:var(--paper); padding:3px 8px; border-radius:var(--radius-pill); border:1px solid var(--paper-line); }
.panel-link{ font-family:var(--font-body); font-size:12px; font-weight:600; color:var(--ochre-deep); text-decoration:none; transition:color 0.14s; }
.panel-link:hover{ color:var(--teal-deep); text-decoration:underline; }

.chart-periodo-select{
  font-family:var(--font-body); font-size:12px; font-weight:600; padding:5px 8px;
  border-radius:6px; border:1px solid var(--paper-line); background:#fff; color:var(--ink);
}
.chart-periodo-custom{ display:inline-flex; align-items:center; gap:6px; margin-left:6px; }
.chart-periodo-custom input[type="date"]{
  font-family:var(--font-body); font-size:12px; padding:4px 6px; border-radius:6px;
  border:1px solid var(--paper-line); color:var(--ink); color-scheme:light;
}

/* Selector de período tipo "tabs segmentadas" -- pensado para reusarse en
   cualquier dashboard bespoke que necesite elegir un rango (Ventas es el
   primero; Clientes/Finanzas/etc. pueden reusar esto tal cual). */
.periodo-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; margin-bottom:20px; flex-wrap:wrap; }
.periodo-tabs{ display:inline-flex; background:var(--paper); border-radius:10px; padding:3px; gap:2px; }
.periodo-tab{
  font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--muted);
  background:none; border:none; padding:7px 14px; border-radius:8px; cursor:pointer; transition:background .14s, color .14s;
}
.periodo-tab:hover{ color:var(--ink); }
.periodo-tab.activo{ background:#fff; color:var(--ink); box-shadow:var(--card-shadow); }
.periodo-custom-range{ display:inline-flex; align-items:center; gap:6px; }
.periodo-custom-range input[type="date"]{
  font-family:var(--font-body); font-size:12px; padding:5px 8px; border-radius:6px;
  border:1px solid var(--paper-line); color:var(--ink); color-scheme:light;
}

/* Tamaño de los gráficos, definido UNA sola vez acá. Antes cada página fijaba
   200-240px en línea (más de 40 sitios) y la grilla de 3-4 columnas los dejaba
   de ~300px de ancho: chicos y difíciles de leer. Los gráficos principales
   (dentro de .panel) son más altos que los secundarios (.sec-chart-panel).
   Prima el tamaño sobre la compacidad: que ocupen lo que necesiten. */
:root{ --alto-grafico:340px; --alto-grafico-principal:400px; }
.chart-wrap{ position:relative; height:var(--alto-grafico-principal); width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.sec-chart-panel .chart-wrap{ height:var(--alto-grafico); }
.chart-wrap canvas{ max-width:100%; max-height:100%; }
@media (max-width:600px){
  :root{ --alto-grafico:300px; --alto-grafico-principal:320px; }
}

/* Paneles de Inicio (gráfico + tarjetas de resumen): dos columnas
   independientes en vez de grid-2 fila por fila. Con grid, cada fila toma
   la altura de su panel más alto y el más corto de esa fila queda con un
   hueco en blanco debajo (ej. el gráfico junto a 3 tarjetas apiladas). Acá
   cada .inicio-col apila sus propios paneles con su propia altura real --
   pueden terminar a distinta altura entre sí, pero ninguna deja hueco. */
.inicio-columnas{ display:flex; align-items:flex-start; gap:22px; margin-bottom:28px; }
.inicio-col{ flex:1.6; min-width:0; display:flex; flex-direction:column; gap:22px; }
.inicio-col-angosta{ flex:1; }
/* .captura-panel tiene margin:auto a los lados (para centrarse en <main>); dentro
   de una columna flex eso le quita el estiramiento y el panel mide lo que pida
   su tabla, pasándose de la columna. width:100% lo ata al ancho de la columna y
   la tabla hace scroll dentro de su .tabla-registros-wrap. */
.inicio-col > .captura-panel{ width:100%; }
@media (max-width:900px){
  /* stretch: con flex-start (el de escritorio) cada columna medía lo que pide su
     contenido, y una tabla ancha empujaba toda la página en vez de hacer scroll
     dentro de su .tabla-registros-wrap. */
  .inicio-columnas{ flex-direction:column; align-items:stretch; }
}
.chart-empty{ color:var(--muted); font-size:13px; text-align:center; padding:0 20px; }

.rank-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--paper-line); font-size:13px; }
.rank-row:last-child{ border-bottom:none; }
.rank-num{
  font-family:var(--font-mono); font-weight:600; font-size:11px; color:var(--teal-deep); background:var(--teal-soft);
  width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.rank-name{ flex:1; font-weight:500; }
.rank-val{ font-weight:600; }
.rank-sub{ font-size:11px; font-weight:400; color:var(--muted); margin-top:2px; }

/* padding 3px 9px, no 2px 7px (auditoría de consistencia, 2026-09-30): mismo
   tamaño que .evento-badge/.segmento-badge -- eran 3 variantes del mismo
   "pill de estado chico" con specs ligeramente distintas. */
.stock-risk-badge{ font-family:var(--font-mono); font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.stock-risk-bajo{ color:var(--orange); background:var(--orange-soft); }
.stock-risk-critico{ color:var(--danger); background:#FBEAF0; }

.cat-row{ margin-bottom:12px; }
.cat-row .top{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; }
.cat-bar-bg{ background:var(--paper); border-radius:4px; height:8px; overflow:hidden; }
.cat-bar-fill{ height:100%; background:var(--teal); border-radius:4px; }

/* Segmentación de clientes (Rediseño v3, pages/clientes.html): chips
   clicleables que filtran la lista de abajo -- ver js/clientesDashboard.js.
   Reutiliza los mismos tokens de acento que .kpi-card[data-acento], solo
   que acá el color se aplica directo por clase de segmento en vez de un
   atributo data-*, porque el id del segmento ya es un nombre estable
   (vip/recurrente/activo/en_riesgo/sin_actividad), no una paleta genérica. */
.segmento-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.segmento-chip{
  font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--muted);
  background:var(--paper); border:1.5px solid transparent; border-radius:20px; padding:7px 14px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; transition:border-color .14s, background .14s;
}
.segmento-chip:hover{ border-color:var(--paper-line); }
.segmento-chip-count{ font-family:var(--font-mono); font-weight:700; }
.segmento-chip svg, .segmento-badge svg{ width:13px; height:13px; flex-shrink:0; }
/* Punto simple para segmentos "on/off" (activo/sin_actividad) -- no todo
   segmento necesita su propio pictograma, un estado binario ya se lee con
   un punto de color (mismo lenguaje que la leyenda de un gráfico). */
.segmento-dot{ width:8px; height:8px; border-radius:50%; background:var(--blue); flex-shrink:0; }
.segmento-dot-apagado{ background:var(--muted); opacity:0.5; }
.segmento-chip.seleccionado{ background:#fff; box-shadow:var(--card-shadow); }
.segmento-chip.vip.seleccionado{ border-color:var(--purple); color:var(--purple); }
.segmento-chip.recurrente.seleccionado{ border-color:var(--teal-deep); color:var(--teal-deep); }
.segmento-chip.activo.seleccionado{ border-color:var(--blue); color:var(--blue); }
.segmento-chip.en_riesgo.seleccionado{ border-color:var(--orange); color:var(--orange); }
.segmento-chip.sin_actividad.seleccionado{ border-color:var(--muted); color:var(--muted); }

.segmento-badge{
  font-family:var(--font-mono); font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px;
  white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; gap:4px;
}
.segmento-badge.vip{ color:var(--purple); background:var(--purple-soft); }
.segmento-badge.recurrente{ color:var(--teal-deep); background:var(--teal-soft); }
.segmento-badge.activo{ color:var(--blue); background:var(--blue-soft); }
.segmento-badge.en_riesgo{ color:var(--orange); background:var(--orange-soft); }
.segmento-badge.sin_actividad{ color:var(--muted); background:var(--paper); }

/* Listado inteligente -- filas clicleables que abren un perfil (panel
   lateral) en vez de una tabla de edición inline. Nació para Clientes,
   pero el nombre de la clase quedó genérico a propósito: Vehículos ya lo
   reusa tal cual para su listado de flota (js/vehiculosDashboard.js). */
.cliente-row{
  display:flex; align-items:center; gap:14px; padding:12px 8px; border-bottom:1px solid var(--paper-line);
  cursor:pointer; border-radius:8px; transition:background .12s;
}
.cliente-row:hover{ background:var(--paper); }
.cliente-row:last-child{ border-bottom:none; }
.cliente-row-info{ flex:1; min-width:0; }
.cliente-row-nombre{ font-size:13.5px; font-weight:600; color:var(--ink); }
.cliente-row-contacto{ font-size:12px; color:var(--muted); margin-top:1px; }
.cliente-row-valor{ text-align:right; }
.cliente-row-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
/* Celular angosto (QA 2026-09-30): un nombre largo ("Corporación Andina SAC")
   no cabe junto al badge de segmento + el monto, y al envolver a 2 líneas su
   segunda línea quedaba tapada por el badge (la fila no crece con
   align-items:center). Se envuelve la fila entera: nombre+contacto ocupan su
   propia línea completa, badge y monto bajan a la siguiente. */
@media (max-width:640px){
  .cliente-row{ flex-wrap:wrap; row-gap:8px; }
  .cliente-row-info{ flex-basis:100%; }
  .cliente-row-valor{ margin-left:auto; }
}
/* Alto acotado + scroll interno (pasada de jerarquía, 2026-09-30): con
   muchos clientes esta lista se estiraba más que el resto de la página --
   nada se oculta (sigue completa, filtrable por segmento), pero ya no
   compite en altura con los KPI/gráficos de arriba. Mismo patrón que
   #finMovimientos en Finanzas. */
#clientesLista{ max-height:560px; overflow-y:auto; }

/* Perfil de cliente (panel lateral -- components/panelLateral.js). Genérico
   a propósito: cualquier otro módulo con un "perfil" (vehículo, proveedor)
   puede reusar estas mismas clases más adelante. */
.perfil-cliente-contacto{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--ink); margin-bottom:18px; }
.perfil-cliente-contacto svg{ width:14px; height:14px; vertical-align:-2px; margin-right:4px; color:var(--muted); }
.perfil-cliente-notas{ font-size:12.5px; color:var(--muted); font-style:italic; margin-top:4px; }
.perfil-cliente-kpis{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; padding:14px; background:var(--paper);
  border-radius:12px; margin-bottom:8px;
}
.perfil-cliente-kpis .label{ font-size:10px; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); font-weight:600; }
.perfil-cliente-kpis .value{ font-size:16px; font-weight:700; color:var(--ink); margin-top:3px; }
.perfil-cliente-subtitulo{ font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--ink); margin:22px 0 10px; }
.perfil-cliente-timeline{ display:flex; flex-direction:column; gap:2px; }
.timeline-item{ display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--paper-line); }
.timeline-item:last-child{ border-bottom:none; }
.timeline-icono{
  width:28px; height:28px; border-radius:50%; background:var(--paper); color:var(--muted); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.timeline-icono svg{ width:14px; height:14px; }
.timeline-info{ min-width:0; }
.timeline-texto{ font-size:13px; color:var(--ink); }
.timeline-fecha{ font-size:11.5px; color:var(--muted); margin-top:2px; }

/* Gráficos secundarios: 2 columnas (antes auto-fit de 260px = hasta 4 columnas
   de ~300px, y con 4 gráficos en 3 columnas uno quedaba solo en la segunda
   fila). Con cantidad impar, el último ocupa todo el ancho para que no quede
   un hueco al lado. Una sola columna en pantallas angostas. */
.secundarios-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; align-items:stretch; }
.secundarios-grid > :last-child:nth-child(odd){ grid-column:1 / -1; }
/* minmax(0, 1fr), no 1fr a secas: 1fr tiene mínimo "auto" y una columna se
   ensancha por el contenido (un canvas con ancho fijo desde el primer dibujo
   hacía desbordar la página en celular). */
@media (max-width:900px){
  .secundarios-grid{ grid-template-columns:minmax(0, 1fr); }
}
.sec-chart-panel{ background:#fff; border:1px solid var(--paper-line); border-radius:var(--radius-lg); padding:var(--space-4); box-shadow:var(--shadow-sm); }
.sec-chart-panel h4{ font-family:var(--font-display); font-size:14px; font-weight:600; margin:0 0 10px 0; display:flex; align-items:center; justify-content:space-between; color:var(--ink); }
.sec-chart-panel .tag{ font-family:var(--font-mono); font-size:10px; font-weight:600; color:var(--muted); background:var(--paper); padding:2px 7px; border-radius:20px; border:1px solid var(--paper-line); }

@media (max-width: 820px){
  .kpis{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
}
@media print{
  .kpis{ grid-template-columns:repeat(3, 1fr); }
  .grid-2{ grid-template-columns:1fr 1fr; }
  .panel, .kpi-card, .sec-chart-panel{ box-shadow:none; border:1px solid var(--paper-line); break-inside:avoid; }
  .hero{ break-inside:avoid; }
}