/* 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 .perfil-cliente-*/.rank-row ya definidos). */
.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:8px; height:8px; border-radius:50%; flex-shrink:0; }
.evento-marca-teal{ background:var(--teal); }
.evento-marca-blue{ background:var(--blue); }
.evento-marca-danger{ background:var(--danger); }
.evento-marca-purple{ background:var(--purple); }
.evento-marca-muted{ background: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; }
.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-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%); font-size:15px; color:var(--muted); pointer-events:none; }
.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; }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:18px; margin-bottom:36px; }
.kpi-card{ background:#fff; border-radius:14px; padding:18px 20px; box-shadow:var(--card-shadow); }
.kpi-card .label{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); font-weight:600; }
.kpi-card .value{ font-size:26px; font-weight:700; margin-top:6px; }
.kpi-card .sub{ font-size:12px; color:var(--muted); margin-top:4px; }
.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. */
.kpi-card-icon{
  display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:11px; font-size:17px; margin-bottom:12px;
}
.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; }
.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:22px; margin-bottom:28px; }
.panel{ background:#fff; border-radius:14px; padding:24px; box-shadow:var(--card-shadow); }
.panel h3{ font-family:var(--font-display); font-size:15px; font-weight:700; margin:0 0 18px 0; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.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:20px; 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; }
.panel-link:hover{ 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;
}

.chart-wrap{ position:relative; height:280px; width:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.chart-wrap canvas{ max-width:100%; max-height:100%; }

/* 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; }
@media (max-width:900px){
  .inicio-columnas{ flex-direction:column; }
}
.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; }

.stock-risk-badge{ font-family:var(--font-mono); font-size:10px; font-weight:600; padding:2px 7px; 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.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; }

/* 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-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); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.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; }

.secundarios-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; align-items:stretch; }
.sec-chart-panel{ background:#fff; border:1px solid var(--paper-line); border-radius:14px; padding:16px; box-shadow:var(--card-shadow); }
.sec-chart-panel h4{ font-family:var(--font-display); font-size:14px; font-weight:700; margin:0 0 10px 0; display:flex; align-items:center; justify-content:space-between; }
.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; }
}