/* ============================================================
   Lustrol Fleet — tema oscuro. Tokens + componentes base.
   Cargar este archivo de forma GLOBAL una sola vez.
   Todo el resto de la app debe consumir estas variables,
   nunca colores hex sueltos.
   ============================================================ */

:root {
  /* Superficies — punto medio: más cálido, menos negro puro */
  --lf-bg-app:        #0F172A;
  --lf-bg-sidebar:    #131F35;
  --lf-bg-surface:    #1E293B;
  --lf-bg-surface-2:  #2D3F5A;

  /* Bordes — más visibles */
  --lf-border:        #334155;
  --lf-border-strong: #4B6080;

  /* Texto — más contraste */
  --lf-text-primary:   #F8FAFC;
  --lf-text-secondary: #94A3B8;
  --lf-text-tertiary:  #64748B;

  /* Marca / acción */
  --lf-brand:       #3B82F6;
  --lf-brand-hover: #2563EB;

  /* Estados */
  --lf-success-text:#4ADE80; --lf-success-bg:rgba(34,197,94,0.15);
  --lf-warning-text:#FBBF24; --lf-warning-bg:rgba(245,158,11,0.15);
  --lf-danger-text: #F87171; --lf-danger-bg: rgba(239,68,68,0.15);
  --lf-info-text:   #60A5FA; --lf-info-bg:   rgba(59,130,246,0.15);
  --lf-neutral-text:#94A3B8; --lf-neutral-bg:rgba(148,163,184,0.12);

  /* Categorías (mismos valores en lustrol-charts.js para los gráficos) */
  --lf-cat-combustible:   #34D399;
  --lf-cat-reparaciones:  #F97316; /* naranja — separado del rojo de estado malo */
  --lf-cat-mantenimiento: #3B82F6;
  --lf-cat-neumaticos:    #FBBF24;
  --lf-cat-seguros:       #22D3EE;
  --lf-cat-costo:         #60A5FA;

  /* Radios */
  --lf-radius-md: 8px;
  --lf-radius-lg: 12px;
}

body { background: var(--lf-bg-app); color: var(--lf-text-primary); }

/* ---------- Tarjeta genérica ---------- */
.lf-card { background: var(--lf-bg-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-radius-lg); }

/* ---------- KPI card (neutra, color solo en tendencia/ícono) ---------- */
.lf-kpi { background: var(--lf-bg-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-radius-lg); padding: 14px; }
.lf-kpi__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lf-kpi__label { font-size: 12px; color: var(--lf-text-secondary); }
.lf-kpi__icon { width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--lf-neutral-bg); color: var(--lf-text-secondary); }
.lf-kpi__icon--brand { background: var(--lf-info-bg); color: var(--lf-info-text); }
.lf-kpi__value { font-size: 24px; font-weight: 500; color: var(--lf-text-primary); line-height: 1; }
.lf-kpi__trend { font-size: 11px; margin-top: 4px; }
.lf-kpi__trend--up { color: var(--lf-success-text); }
.lf-kpi__trend--down { color: var(--lf-danger-text); }

/* ---------- Pills de estado (un significado por color) ---------- */
.lf-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; padding: 4px 9px; border-radius: var(--lf-radius-md); }
.lf-pill--success { background: var(--lf-success-bg); color: var(--lf-success-text); }
.lf-pill--warning { background: var(--lf-warning-bg); color: var(--lf-warning-text); }
.lf-pill--danger  { background: var(--lf-danger-bg);  color: var(--lf-danger-text); }
.lf-pill--info    { background: var(--lf-info-bg);    color: var(--lf-info-text); }
.lf-pill--neutral { background: var(--lf-neutral-bg); color: var(--lf-neutral-text); }

/* ---------- Tabla ---------- */
.lf-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--lf-bg-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-radius-lg); overflow: hidden; }
.lf-table thead th { text-align: left; padding: 11px 16px; font-weight: 500; font-size: 12px; color: var(--lf-text-secondary); background: var(--lf-bg-surface-2); }
.lf-table tbody td { padding: 12px 16px; border-top: 1px solid var(--lf-border); color: var(--lf-text-primary); }
.lf-table tbody tr:hover { background: var(--lf-bg-surface-2); }
.lf-table .num { text-align: right; }

/* ---------- Tarjeta de unidad — CONSERVA camión + borde de color por estado ---------- */
.lf-unit { background: var(--lf-bg-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-radius-lg); padding: 14px; text-align: center; }
.lf-unit--ok   { border-color: var(--lf-cat-combustible); }  /* al día */
.lf-unit--pend { border-color: var(--lf-warning-text); }     /* con pendientes */
.lf-unit__icon { font-size: 22px; color: var(--lf-text-tertiary); }
.lf-unit--ok   .lf-unit__icon { color: var(--lf-cat-combustible); }
.lf-unit--pend .lf-unit__icon { color: var(--lf-warning-text); }
.lf-unit__plate { font-size: 14px; font-weight: 500; color: var(--lf-text-primary); margin-top: 6px; }
.lf-unit__model { font-size: 10px; color: var(--lf-text-tertiary); }

/* ---------- Botones ---------- */
.lf-btn { font-size: 12px; padding: 7px 13px; border-radius: var(--lf-radius-md); border: 1px solid var(--lf-border); background: transparent; color: var(--lf-text-primary); cursor: pointer; }
.lf-btn:hover { background: var(--lf-bg-surface-2); }
.lf-btn--primary { background: var(--lf-brand); border-color: var(--lf-brand); color: #fff; }
.lf-btn--primary:hover { background: var(--lf-brand-hover); }
.lf-btn--pay { background: var(--lf-cat-combustible); border-color: var(--lf-cat-combustible); color: #06281D; }

@keyframes lf-overdue-pulse {
  0%,100% { background-color: rgba(239,68,68,0.07); }
  50%      { background-color: rgba(239,68,68,0.18); }
}
.rep-overdue-30d { animation: lf-overdue-pulse 3s ease-in-out infinite !important; }
.rep-overdue-30d td:first-child { border-left: 3px solid rgba(239,68,68,0.75) !important; }