*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f1117;
  --panel: #1a1d27;
  --border: #2a2d3a;
  --accent: #4f8ef7;
  --green: #22c55e;
  --orange: #f59e0b;
  --red: #ef4444;
  --text: #e2e8f0;
  --muted: #64748b;
  --header-h: 56px;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Header ── */
header {
  height: var(--header-h);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 16px;
  flex-shrink: 0;
  z-index: 1000;
}

.logo { font-size: 20px; font-weight: 700; letter-spacing: -0.5px; }
.logo span { color: var(--accent); }

.stats { display: flex; gap: 20px; margin-left: auto; }
.stat { display: flex; flex-direction: column; align-items: flex-end; }
.stat-val { font-size: 18px; font-weight: 700; }
.stat-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

.ws-status {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: #1e2a1e;
  color: var(--green);
  border: 1px solid #2a3a2a;
}
.ws-status.disconnected { background: #2a1e1e; color: var(--red); border-color: #3a2a2a; }

/* ── Main layout ── */
.main {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── Sidebar ── */
.sidebar {
  width: 340px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-title { font-weight: 600; font-size: 14px; }

.search-box {
  margin: 0 12px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  width: calc(100% - 24px);
  margin-top: 10px;
  margin-bottom: 6px;
}
.search-box:focus { outline: none; border-color: var(--accent); }

.vehicle-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.vehicle-list::-webkit-scrollbar { width: 5px; }
.vehicle-list::-webkit-scrollbar-track { background: transparent; }
.vehicle-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.vehicle-card {
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  border-left: 3px solid transparent;
}
.vehicle-card:hover { background: rgba(79,142,247,0.07); }
.vehicle-card.active { background: rgba(79,142,247,0.12); border-left-color: var(--accent); }

.vc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.vc-patente {
  font-weight: 700; font-size: 13px;
  background: rgba(79,142,247,0.15);
  color: var(--accent);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.vc-nombre { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.vc-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  flex-shrink: 0;
}
.badge-ok    { background: #1a2d1a; color: var(--green); }
.badge-alert { background: #2d2a1a; color: var(--orange); }
.badge-panic { background: #2d1a1a; color: var(--red); }

.vc-bottom { display: flex; gap: 12px; font-size: 11px; color: var(--muted); }
.vc-speed { color: var(--text); font-weight: 600; }

/* ── Map ── */
#map {
  flex: 1;
  background: #0f1117;
}

/* ── Detail panel (bottom) ── */
.detail-panel {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 300px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  z-index: 500;
  display: none;
}
.detail-panel.visible { display: block; }
.detail-panel h3 { font-size: 15px; margin-bottom: 12px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dg-item { background: var(--bg); padding: 8px 10px; border-radius: 8px; }
.dg-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.dg-val { font-size: 16px; font-weight: 700; margin-top: 2px; }
.detail-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none; color: var(--muted);
  cursor: pointer; font-size: 18px; line-height: 1;
}

/* ── Pulse animation for active vehicles ── */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.live { animation: pulse 2s ease-in-out infinite; }