/*
 * ════════════════════════════════════════════════════════════
 *  Re-tema oscuro para el SPA legacy (index.html / app.js)
 * ════════════════════════════════════════════════════════════
 *  Capa de OVERRIDE: se carga DESPUÉS de styles.css y solo cambia la PALETA
 *  (fondos, colores de texto, bordes, sombras) de las clases legacy para que
 *  coincidan con el design-system (tokens.css, tema glassmorphism oscuro).
 *
 *  NO toca la estructura/grid de styles.css ni app.js. La vista de flota
 *  (.summary-card-small, donuts) ya era oscura; aquí se re-tematiza el chrome
 *  (topbar, sidebar, right-panel) y el dashboard por unidad (.panel, .kpi-card,
 *  .unit-table, .unit-badge, filtros).
 *
 *  Requiere que tokens.css esté cargado antes (lo está en index.html).
 * ════════════════════════════════════════════════════════════
 */

/* ── Base ─────────────────────────────────────────────────── */
body {
  background: var(--bg-app);
  color: var(--text-main);
  font-family: var(--font-family);
}

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
  background: var(--bg-elevated);
  color: var(--text-main);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
}
.topbar h1 {
  color: var(--text-main);
}
#unitName {
  color: var(--text-muted) !important; /* inline color:#1f2937 en el HTML */
}

.btn-toggle {
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--glass-border);
}
.btn-toggle:hover {
  background: var(--bg-card-hover);
  color: var(--text-main);
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
  background: var(--bg-card-solid);
  border-right: 1px solid var(--glass-border);
}
.sidebar h3 {
  color: var(--text-dim);
}
.menu-item {
  color: var(--text-muted);
}
.menu-item:hover {
  background: var(--bg-card-hover);
  color: var(--text-main);
}
.menu-item.active {
  background: var(--accent-primary);
  color: #fff;
}

/* ── Paneles genéricos ────────────────────────────────────── */
.panel {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(var(--glass-blur));
}
.panel-header {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--glass-border);
}
.panel-body {
  color: var(--text-dim);
}
.panel-list {
  color: var(--text-dim);
}

/* ── KPI cards ────────────────────────────────────────────── */
.kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
}
.kpi-card h4 {
  color: var(--text-dim);
}
.kpi-card p {
  color: var(--text-main);
}
.kpi-label {
  color: var(--text-dim);
}
.kpi-value {
  color: var(--text-main);
}

/* ── Badges de estado de la unidad ────────────────────────── */
.unit-badge {
  background: var(--bg-elevated);
  border: 1px solid var(--glass-border);
}
.unit-badge-label {
  color: var(--text-dim);
}
.unit-badge-value {
  color: var(--text-main);
}
/* Estados (eran fondos pastel claros → soft sobre oscuro) */
.unit-badge.status-on {
  background-color: var(--success-soft);
  border-color: var(--success);
}
.unit-badge.status-on .unit-badge-value { color: var(--success); }
.unit-badge.status-off {
  background-color: var(--danger-soft);
  border-color: var(--danger);
}
.unit-badge.status-off .unit-badge-value { color: var(--danger); }
/* Desconectado = gris (distinto de "Detenido", rojo): unidad sin reporte reciente,
   no es una alarma. Antes ambos compartían status-off (rojo) → confundía. */
.unit-badge.status-disconnected {
  background-color: rgba(100, 116, 139, 0.16);
  border-color: var(--text-dim);
}
.unit-badge.status-disconnected,
.unit-badge.status-disconnected .unit-badge-value { color: var(--text-dim); }
.unit-badge.status-warn {
  background-color: var(--warning-soft);
  border-color: var(--warning);
}
.unit-badge.status-warn .unit-badge-value { color: var(--warning); }
.unit-badge.status-info {
  background-color: var(--info-soft);
  border-color: var(--info);
}
.unit-badge.status-info .unit-badge-value { color: var(--info); }
.unit-badge.status-event {
  background-color: rgba(139, 92, 246, 0.15);
  border-color: #8b5cf6;
}
.unit-badge.status-event .unit-badge-value { color: #a78bfa; }

/* ── Tablas de unidad (info/motor) ────────────────────────── */
.unit-table tr {
  border-bottom: 1px solid var(--glass-border);
}
.unit-table .ut-label,
.ut-label {
  color: var(--text-dim);
  border-right: 1px solid var(--glass-border);
}
.ut-value {
  color: var(--text-main);
}

/* ── Filtros de fecha ─────────────────────────────────────── */
.date-filter-panel {
  background: transparent;
}
.date-input {
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
}
.date-field {
  color: var(--text-main);
  background: transparent;
}
/* El icono nativo del datetime-local es oscuro → invertir para que se vea */
.date-field::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(0.7);
}

.btn-filter,
.btn-add-unit {
  background: var(--accent-primary);
  color: #fff;
  border: none;
}
.btn-filter:hover,
.btn-add-unit:hover {
  background: var(--accent-primary-hover);
}

/* ── Mapas (placeholder oscuro mientras cargan los tiles) ─── */
#map,
[id^="map-"],
#mapFleet {
  background: var(--bg-card-solid);
}

/* ── Right panel (alertas) ────────────────────────────────── */
.right-panel {
  background: var(--bg-deep);
  border-left: 1px solid var(--glass-border);
}

/* Scrollbars del panel de alertas */
#alertsList { scrollbar-color: var(--accent-primary) transparent; }
#alertsList::-webkit-scrollbar-thumb {
  background: var(--accent-primary);
}

/* ── Vista de flota (tabla) ───────────────────────────────── */
.fleet-table th {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border-bottom: 1px solid var(--glass-border);
}
.fleet-table th,
.fleet-table td {
  border-bottom: 1px solid var(--glass-border);
}
.fleet-table tbody tr:hover {
  background: color-mix(in srgb, var(--plsat-green, #9BCB3C) 22%, var(--bg-card-solid, #111827));
}
.fleet-header h3 {
  color: var(--text-main);
}