/* ── Variáveis (cores do app Android) ──────────────────────────────────────── */
:root {
  --neon:       #39FF88;
  --teal:       #00E5CC;
  --orange:     #FF5F1F;
  --blue:       #4DBBFF;
  --void:       #06080C;
  --card:       #0C1019;
  --text:       #EEF4FF;
  --muted:      #5B7394;
  --border:     #0F1520;
  --yellow:     #FFD60A;
  --red:        #FF5555;
  --tab-h:      50px;
  --safe-top:   env(safe-area-inset-top, 0px); /* status bar iOS */
  --safe-bot:   0px;                           /* tab bar: fixo, sem safe area */
}

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

html, body {
  height: 100%;
  background: var(--void);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ── Layout principal ────────────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: var(--safe-top);
}

/* ── Header ──────────────────────────────────────────────────────────────────── */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 6px;
  flex-shrink: 0;
}

/* ── Lado esquerdo: ECOTRIP acima, sub-row abaixo ── */
.header-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.header-sub {
  display: flex;
  align-items: center;
  gap: 7px;
}

#logo {
  font-size: 18px;
  font-weight: 800;
  color: var(--neon);
  letter-spacing: 2px;
  line-height: 1;
  text-shadow: 0 0 18px rgba(57,255,136,.45);
}

#version-badge {
  font-size: 10px;
  font-weight: 600;
  color: rgba(57,255,136,.7);
  background: rgba(57,255,136,.08);
  border: 1px solid rgba(57,255,136,.2);
  border-radius: 5px;
  padding: 2px 7px;
  flex-shrink: 0;
}

#model-label {
  font-size: 10px;
  color: rgba(148,163,184,.65);
  line-height: 1;
}

#car-version-badge {
  font-size: 9px;
  font-weight: 600;
  color: rgba(77,187,255,.75);
  display: none;
}
#car-version-badge.visible { display: inline; }

/* ── Lado direito: status ── */
#status-area { display: flex; align-items: center; gap: 6px; }

/* Tempos de sync redesenhados */
.sync-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.sync-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sync-lbl {
  font-size: 10px;
  color: var(--muted);
  opacity: 0.5;
  line-height: 1;
}
#last-update, #car-update {
  font-size: 9px;
  color: var(--muted);
}

#status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--muted);
  transition: background .4s;
}
#status-dot.online  { background: var(--neon); box-shadow: 0 0 8px var(--neon); }
#status-dot.offline { background: var(--red); }

/* ── Conteúdo com scroll ─────────────────────────────────────────────────────── */
#content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 10px 8px;
}

/* ── Tab bar ─────────────────────────────────────────────────────────────────── */
#tab-bar {
  display: flex;
  align-items: stretch;
  background: var(--card);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  /* altura auto pelo conteúdo; safe area só em baixo */
  padding-bottom: var(--safe-bot);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#tab-bar::-webkit-scrollbar { display: none; }

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: var(--tab-h);          /* 50px — padrão iOS */
  cursor: pointer;
  color: var(--muted);
  font-size: 0;
  border: none;
  background: none;
  padding: 0 1px;
  min-width: 40px;               /* 9 abas × 40px = 360px, cabe em qualquer iPhone */
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color .2s;
}
.tab-icon {
  font-size: 18px;
  line-height: 1;
  display: block;
}
.tab-icon svg { display: block; }
.tab-letter {
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
/* label visível apenas na aba activa — libertar espaço para 8+ abas */
.tab-label {
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  display: none;
}
.tab.active .tab-label { display: block; }
.tab.active { color: var(--neon); }

/* ── Tab panels ──────────────────────────────────────────────────────────────── */
.panel { display: none; }
.panel.active { display: block; }

/* ── Aba Conforto: animações da cabine ──────────────────────────────────────── */
.cmf-ac-vent {
  transition: fill 0.3s ease, filter 0.3s ease;
}
.cmf-ac-vent.on {
  fill: #22d3ee;
  filter: drop-shadow(0 0 4px rgba(34, 211, 238, 0.7));
}
/* Wave lines do AC (linhas saindo dos vents) — pulso constante.
   Quantidade visível controlada via .on (toggled em JS conforme fan_speed). */
.cmf-ww {
  opacity: 0;
  transform-origin: top center;
  transition: opacity 0.4s ease;
  filter: drop-shadow(0 0 2.5px rgba(34, 211, 238, 0.45));
}
.cmf-ww.on {
  animation: cmfAcWave 1.5s ease-in-out infinite;
}
@keyframes cmfAcWave {
  0%, 100% { opacity: 0.30; transform: translateY(0); }
  50%      { opacity: 0.90; transform: translateY(4px); }
}

/* Climate Panel: estado "AC desligado" — esconde controles, mostra indicador */
.climate-panel.off .climate-temps,
.climate-panel.off .climate-controls {
  display: none;
}
.climate-off-indicator {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 14px;
  color: #475569;
}
.climate-panel.off .climate-off-indicator {
  display: flex;
}
.climate-off-indicator svg {
  color: #334155;
  flex-shrink: 0;
}
.climate-off-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.climate-off-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #64748b;
  text-transform: uppercase;
}
.climate-off-subtitle {
  font-size: 10px;
  color: #475569;
  letter-spacing: 0.3px;
}
.cmf-vd {
  transition: fill 0.3s ease, filter 0.3s ease, r 0.3s ease;
}
.cmf-vd.on-1 { fill: #7dd3fc; filter: drop-shadow(0 0 3px rgba(125,211,252,0.6)); }
.cmf-vd.on-2 { fill: #22d3ee; filter: drop-shadow(0 0 4px rgba(34,211,238,0.7)); }
.cmf-vd.on-3 {
  fill: #5eead4;
  filter: drop-shadow(0 0 6px rgba(94,234,212,0.85));
  animation: cmfDotPulse 1.4s ease-in-out infinite;
}
@keyframes cmfDotPulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1.0; }
}

/* ── Climate Panel (controles do AC acima da cabine) ────────────────────────── */
.climate-panel {
  background: linear-gradient(180deg, #0c1019 0%, #080c14 100%);
  border: 1px solid #1e293b;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 0 auto 14px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.climate-temps {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.climate-zone {
  background: #0a0f1c;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.climate-zone.active {
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.15);
}
.climate-zone-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.climate-zone-value {
  font-size: 28px;
  font-weight: 800;
  color: #475569;
  letter-spacing: -1px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s, text-shadow 0.3s;
}
.climate-zone.active .climate-zone-value {
  color: #22d3ee;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
}
.climate-sync {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #334155;
  transition: color 0.3s;
}
.climate-sync.on { color: #5eead4; filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.55)); }
.climate-sync-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 1px;
}

/* Linha de controles: AUTO + FAN */
.climate-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.climate-auto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #1a2236;
  border: 1px solid #1e293b;
  border-radius: 8px;
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.climate-auto.on {
  background: rgba(34, 211, 238, 0.10);
  border-color: rgba(34, 211, 238, 0.45);
  color: #22d3ee;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.18);
}
.climate-auto-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #334155;
  transition: background 0.3s, box-shadow 0.3s;
}
.climate-auto.on .climate-auto-dot {
  background: #22d3ee;
  box-shadow: 0 0 6px rgba(34, 211, 238, 0.85);
}
.climate-auto-text {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #475569;
}
.climate-auto.on .climate-auto-text { color: #22d3ee; }

.climate-fan {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #475569;
  transition: color 0.3s;
}
.climate-fan.on { color: #22d3ee; }
.climate-fan-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
}
.climate-fan-bar {
  width: 3px;
  background: #1e293b;
  border-radius: 1px;
  transition: background 0.3s, box-shadow 0.3s;
}
.climate-fan-bar[data-level="1"] { height: 4px; }
.climate-fan-bar[data-level="2"] { height: 6px; }
.climate-fan-bar[data-level="3"] { height: 8px; }
.climate-fan-bar[data-level="4"] { height: 10px; }
.climate-fan-bar[data-level="5"] { height: 12px; }
.climate-fan-bar[data-level="6"] { height: 14px; }
.climate-fan-bar[data-level="7"] { height: 16px; }
.climate-fan-bar.on {
  background: #22d3ee;
  box-shadow: 0 0 4px rgba(34, 211, 238, 0.7);
}
.climate-fan-val {
  font-size: 16px;
  font-weight: 800;
  color: #475569;
  letter-spacing: -0.5px;
  min-width: 18px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.climate-fan.on .climate-fan-val { color: #22d3ee; }

/* ── Dashboard: reordenação por estado do motor ──────────────────────────────── */
#panel-dash.active { display: flex; flex-direction: column; }

/* Ordem padrão (motor desligado): alertas → mapa → trip cards */
#d-alerts-card   { order: 4; }
#d-map-card      { order: 5; }
#d-trips-summary { order: 6; }
#d-roll-card     { order: 7; }
#d-curtrip-card  { order: 8; }

/* Motor ligado: mapa sobe, trips no meio, alertas vão pro fim, trip cards no rodapé */
#panel-dash.engine-on #d-map-card      { order: 4; }
#panel-dash.engine-on #d-trips-summary { order: 5; }
#panel-dash.engine-on #d-alerts-card   { order: 6; }

/* ── Cards ───────────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 6px;
}

.card-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.divider {
  height: 0.5px;
  background: var(--border);
  margin: 10px 0;
}

/* ── Métricas ────────────────────────────────────────────────────────────────── */
.metrics-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.metrics-row:last-child { margin-bottom: 0; }

.metric {
  flex: 1;
  min-width: 0;
}
.metric-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-value.lg { font-size: 28px; }
.metric-value.sm { font-size: 16px; }
.metric-value.xs { font-size: 13px; }
.metric-label {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.metric-value.green   { color: var(--neon); }
.metric-value.blue    { color: var(--blue); }
.metric-value.teal    { color: var(--teal); }
.metric-value.orange  { color: var(--orange); }
.metric-value.yellow  { color: var(--yellow); }
.metric-value.muted   { color: var(--muted); }

/* ── Card de recarga — animação ─────────────────────────────────────────── */
@keyframes chrg-glow {
  0%,100% { box-shadow: 0 0 0 1px rgba(0,229,204,.18), 0 0 14px rgba(0,229,204,.10); }
  50%      { box-shadow: 0 0 0 1px rgba(0,229,204,.55), 0 0 28px rgba(0,229,204,.28); }
}
@keyframes chrg-bolt {
  0%,100% { opacity:1;   transform:scale(1);    }
  50%      { opacity:.50; transform:scale(1.25); }
}
@keyframes chrg-shimmer {
  0%   { transform:translateX(-200%); }
  100% { transform:translateX(450%); }
}

#d-bfc-card.chrg-active {
  background: linear-gradient(148deg, var(--card) 60%, rgba(0,229,204,.025) 100%);
  border-color: rgba(0,229,204,.38);
  animation: chrg-glow 2.4s ease-in-out infinite;
}

.chrg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.chrg-bolt-icon {
  font-size: 15px;
  display: inline-block;
  line-height: 1;
  animation: chrg-bolt 1.8s ease-in-out infinite;
}
.chrg-power-hero {
  font-size: 26px;
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
  white-space: nowrap;
}

.chrg-bar-wrap { margin-bottom: 4px; }
.chrg-bar-track {
  height: 9px;
  background: rgba(255,255,255,.07);
  border-radius: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}
.chrg-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(0,229,204,.55) 0%, #00E5CC 100%);
  border-radius: 5px;
  overflow: hidden;
  transition: width 1.2s ease;
  position: relative;
}
.chrg-shimmer {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.50) 50%, transparent 100%);
  animation: chrg-shimmer 2.4s ease-in-out infinite;
}
.chrg-bar-marker {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  background: rgba(255,255,255,.55);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 4px rgba(255,255,255,.3);
}
.chrg-bar-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 1px;
}

/* Métricas menores na seção de recarga (dentro do card unificado) */
#bfc-soc-charging .metric-value { font-size: 18px; }
/* Linha de 5 métricas (com pot. média e pico) — fonte reduzida pra caber */
#bfc-soc-charging .chrg-metrics-5 .metric-value { font-size: 14px; }
#bfc-soc-charging .chrg-metrics-5 .metric-label { font-size: 9px; letter-spacing: 0.4px; }
#bfc-soc-charging .chrg-metrics-5 .chrg-unit    { font-size: 8px; margin-left: 0; }
.chrg-unit { font-size: 9px; font-weight: 500; opacity: .75; vertical-align: baseline; margin-left: 1px; }

/* Marcador do SOC inicial na barra de recarga — bem sutil */
.chrg-bar-start-marker {
  position: absolute;
  top: -1px; bottom: -1px;
  width: 1px;
  background: rgba(255,255,255,.25);
  pointer-events: none;
}

/* Pílulas de pressão dos pneus — leve, sem competir com a ilustração */
.tyre-pill {
  position: absolute;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  white-space: nowrap;
  font-feature-settings: 'tnum';
}
.tyre-pill .tyre-psi {
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #22d3ee;
}
.tyre-pill .tyre-sep {
  font-size: 9px;
  color: #475569;
  line-height: 1;
}
.tyre-pill .tyre-temp {
  font-size: 9px;
  color: #94a3b8;
  line-height: 1;
}

/* ── Cards Desde última partida / Trip A / Trip B — unidades micro ────────── */
#d-trips-summary .dash-unit    { font-size: 8px; font-weight: 500; opacity: .70; vertical-align: baseline; margin-left: 1px; }

/* ── Bateria & Combustível — card aprimorado ─────────────────────────────── */
@keyframes bfc-shimmer {
  0%   { transform: translateX(-300%); }
  100% { transform: translateX(600%); }
}

/* Fundo levemente gradiente, borda com toque verde */
#d-bfc-card {
  background: linear-gradient(148deg, var(--card) 60%, rgba(57,255,136,.03) 100%);
  border-color: rgba(57,255,136,.12);
}

/* Barras mais altas */
#d-bfc-card .bar-track {
  height: 10px;
  border-radius: 5px;
}

/* Fills precisam de position:relative + overflow:hidden para o shimmer via ::after */
#d-bfc-card .bar-fill {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

/* Gradiente nas barras — ponta mais clara simula brilho natural */
#d-bfc-card .bar-fill.soc {
  background: linear-gradient(90deg, rgba(57,255,136,.50) 0%, #39FF88 78%, rgba(205,255,228,.92) 100%);
}
#d-bfc-card .bar-fill.fuel {
  background: linear-gradient(90deg, rgba(255,95,31,.50) 0%, #FF5F1F 78%, rgba(255,198,148,.92) 100%);
}
#d-bfc-card .bar-fill.batt12v {
  background: linear-gradient(90deg, rgba(255,214,10,.45) 0%, #FFD60A 78%, rgba(255,246,180,.92) 100%);
}

/* Shimmer escalonado — uma barra de cada vez, com ~2.3 s de intervalo */
#d-bfc-card .bar-fill::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.30) 50%, transparent 100%);
  animation: bfc-shimmer 7s linear infinite;
}
#d-bfc-card .bar-fill.soc::after     { animation-delay:  0s; }
#d-bfc-card .bar-fill.fuel::after    { animation-delay: -2.3s; }
#d-bfc-card .bar-fill.batt12v::after { animation-delay: -4.7s; }

/* Valores coloridos no tom de cada barra + tamanho levemente maior */
#d-bfc-card .bar-val  { font-size: 13px; font-weight: 700; }
#d-bfc-card #d-soc    { color: var(--neon); }
#d-bfc-card #d-fuel   { color: var(--orange); }
#d-bfc-card #d-batt12v { color: var(--yellow); }

/* Texto de autonomia: mais legível */
#d-ev-range, #d-fuel-range { font-weight: 600; letter-spacing: 0.2px; }

/* ── Limite de carga SOC ─────────────────────────────────────────────────── */
.charge-limit-row   { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.charge-limit-label { font-size:11px; color:var(--muted); white-space:nowrap; }
.charge-limit-cur   { font-size:14px; font-weight:700; color:var(--teal); min-width:32px; }
.charge-limit-btns  { display:flex; gap:4px; flex-wrap:wrap; }
.clb {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--text);
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.clb:active          { background: rgba(255,255,255,.18); }
.clb.clb-active      { background: var(--teal); border-color: var(--teal); color: #000; }
.charge-limit-status { font-size: 11px; color: var(--muted); margin-top: 4px; min-height: 14px; }

/* ── Marcha grande (dashboard) ───────────────────────────────────────────────── */
.gear-badge-lg {
  display: inline-block;
  font-size: 32px;
  font-weight: 800;
  color: var(--neon);
  background: rgba(57,255,136,.08);
  border: 1px solid rgba(57,255,136,.25);
  border-radius: 10px;
  padding: 4px 14px;
  line-height: 1;
  min-width: 52px;
  text-align: center;
}

/* ── Status chips — barra inferior do card do carro ─────────────────────────── */
.car-chip {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 8px;
  border-radius: 20px;
  background: #0f1c2e;
  border: 1px solid #1e3a5f;
  white-space: nowrap;
}
.car-chip-btn {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  min-height: 36px;
  transition: background .2s, border-color .2s;
}

/* ── Locais Conhecidos ───────────────────────────────────────────────────────── */
.kp-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  margin-bottom: 6px;
}
.kp-item-name { font-size: 13px; font-weight: 600; color: #e2e8f0; }
.kp-item-sub  { font-size: 11px; color: #475569; margin-top: 2px; }
.kp-item-actions { display: flex; gap: 6px; }
.kp-btn-edit, .kp-btn-del {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.kp-btn-del { opacity: 0.5; }

/* ── Chips de locais conhecidos no picker de recarga ──────────────────────── */
.loc-kp-chip {
  padding: 7px 13px;
  background: #0f1c2e;
  border: 1px solid #1e3a5f;
  border-radius: 20px;
  color: #7FBADC;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s, color .15s;
}
.loc-kp-chip--active {
  background: #0e4a6e;
  border-color: #22d3ee;
  color: #22d3ee;
  font-weight: 600;
}

/* ── Barra de SOC/combustível ────────────────────────────────────────────────── */
.bar-row { display: flex; flex-direction: column; gap: 6px; }
.bar-item { display: flex; flex-direction: column; gap: 3px; }
.bar-header { display: flex; justify-content: space-between; }
.bar-label  { font-size: 11px; color: var(--muted); }
.bar-val    { font-size: 12px; font-weight: 600; color: var(--text); }
.bar-track  {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .6s ease;
}
.bar-fill.soc     { background: var(--neon); }
.bar-fill.fuel    { background: var(--orange); }
.bar-fill.batt12v { background: var(--yellow); }

/* ── Recarga ─────────────────────────────────────────────────────────────────── */
.charge-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(0,229,204,.08);
  border: 1px solid rgba(0,229,204,.25);
  color: var(--teal);
}

/* ── Histórico ───────────────────────────────────────────────────────────────── */
.trip-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.trip-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.trip-badge {
  font-size: 10px;
  font-weight: 600;
  color: var(--neon);
  background: rgba(57,255,136,.08);
  border: 1px solid rgba(57,255,136,.2);
  border-radius: 6px;
  padding: 2px 6px;
}
.trip-name  { font-size: 13px; font-weight: 600; color: var(--text); }
.trip-date  { font-size: 11px; color: var(--muted); }
.trip-cost  { font-size: 13px; font-weight: 700; color: var(--yellow); }
.trip-metrics {
  display: flex;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.trip-metrics-row2 {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.trip-metric { text-align: center; min-width: 40px; }
.trip-metric-val { font-size: 13px; font-weight: 700; color: var(--text); }
.trip-metric-lbl { font-size: 10px; color: var(--muted); }
.trip-metric-val.green  { color: var(--neon); }
.trip-metric-val.blue   { color: var(--blue); }
.trip-metric-val.orange { color: var(--orange); }
.trip-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.trip-action-btn {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.trip-action-btn:active { background: rgba(255,255,255,.09); }

/* ── Recargas ────────────────────────────────────────────────────────────────── */
.charge-summary-card {
  background: var(--card);
  border: 1px solid rgba(0,229,204,.2);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.charge-kwh-badge {
  font-size: 14px;
  font-weight: 700;
  color: var(--teal);
  white-space: nowrap;
}

/* ── Empty state ─────────────────────────────────────────────────────────────── */
.empty {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 40px 20px;
}

/* ── Filtros de data ─────────────────────────────────────────────────────────── */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.filter-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.filter-chip.active {
  background: rgba(57,255,136,.1);
  border-color: var(--neon);
  color: var(--neon);
}
.filter-dates {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.filter-dates input[type=date] {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 12px;
}
.filter-sep { font-size: 11px; color: var(--muted); }

/* ── Badge geocodificação em andamento ───────────────────────────────────────── */
.geo-loading {
  font-size: 10px;
  color: var(--muted);
  padding: 4px 6px;
  margin-bottom: 6px;
  text-align: center;
  animation: pulse-opacity 1.4s ease-in-out infinite;
}
@keyframes pulse-opacity { 0%,100%{opacity:.5} 50%{opacity:1} }

/* Cidade no card de auto-trip */
.trip-geo {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Busca por nome (hist + auto) ────────────────────────────────────────────── */
.filter-search {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
}
.filter-search-icon {
  font-size: 13px;
  flex-shrink: 0;
  opacity: .7;
}
.filter-search-input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 13px;
  -webkit-appearance: none;
}
.filter-search-input::placeholder { color: var(--muted); }
/* botão × nativo do type=search */
.filter-search-input::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
  opacity: .5;
}

/* ── Renomear trip ─────────────────────────────────────────────────────────── */
.trip-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;   /* altura mesmo quando não há nome */
}
.rename-btn {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: .4;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.rename-btn:active { opacity: 1; }

/* ── Recalcular custo por trip ───────────────────────────────────────────────── */
.cost-edit-btn {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: .45;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.cost-edit-btn:active { opacity: 1; }
.cost-edit-form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.cost-edit-form input {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  padding: 5px 8px;
  width: 120px;
  -webkit-appearance: none;
}
.cost-apply-btn {
  background: rgba(251,191,36,.12);
  border: 1px solid rgba(251,191,36,.3);
  border-radius: 6px;
  color: #fbbf24;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.cost-apply-btn:active { background: rgba(251,191,36,.25); }

/* ── Status de sync do rename ────────────────────────────────────────────────── */
.rename-status-pending {
  font-size: 11px;
  flex-shrink: 0;
  line-height: 1;
  opacity: .8;
}
.rename-status-ok {
  font-size: 11px;
  font-weight: 700;
  color: var(--neon);
  flex-shrink: 0;
  line-height: 1;
}

/* ── Toggle switch (notificações) ────────────────────────────────────────────── */
.notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.notif-row:last-child { border-bottom: none; }
.notif-minutes-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 8px 24px;
  border-bottom: 1px solid var(--border);
}
.notif-minutes-row:last-child { border-bottom: none; }
.notif-minutes-input {
  width: 48px;
  padding: 3px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 13px;
  text-align: center;
}
.notif-label {
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 7px;
}
.notif-label-sub { font-size: 11px; color: var(--muted); display: block; }

/* iOS toggle */
.toggle-wrap { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: #334155;
  border-radius: 24px;
  cursor: pointer;
  transition: background .2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}
.toggle-wrap input:checked + .toggle-slider { background: var(--neon); }
.toggle-wrap input:checked + .toggle-slider::before { transform: translateX(18px); }

/* ── Trip detail overlay (mapa + gráficos) ───────────────────────────────────── */
#trip-detail {
  position: fixed;
  inset: 0;
  background: var(--void);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
}
#trip-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 6px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
#trip-detail-back {
  background: none;
  border: none;
  color: var(--neon);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  -webkit-tap-highlight-color: transparent;
}
#trip-detail-title { font-size: 13px; font-weight: 700; color: var(--text); flex: 1; }
#trip-detail-body  { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#trip-map          { height: 312px; width: 100%; background: #111; }
.playback-bar {
  padding: 10px 14px 6px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
#playback-slider {
  width: 100%;
  accent-color: var(--neon);
  margin-bottom: 6px;
}
.playback-snapshot {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 4px;
}
.snap-item { display: flex; flex-direction: column; align-items: center; min-width: 50px; }
.snap-val  { font-size: 14px; font-weight: 700; color: var(--text); }
.snap-lbl  { font-size: 9px; color: var(--muted); }
.snap-val.green  { color: var(--neon); }
.snap-val.blue   { color: var(--blue); }
.snap-val.yellow { color: var(--yellow); }
.snap-val.orange { color: var(--orange); }
.snap-val.red    { color: var(--red); }
.snap-val.teal   { color: var(--teal); }
.snap-val.muted  { color: var(--muted); }
.chart-section { padding: 10px 12px 4px; }
.chart-label   { font-size: 10px; font-weight: 600; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.chart-wrap    { position: relative; height: 90px; margin-bottom: 10px; }

/* ── Charge timeline overlay ─────────────────────────────────────────────────── */
#charge-timeline {
  position: fixed;
  inset: 0;
  background: var(--void);
  z-index: 200;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
}
#charge-timeline-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.overlay-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 6px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.overlay-back-btn {
  background: none;
  border: none;
  color: var(--neon);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 6px;
  -webkit-tap-highlight-color: transparent;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────────── */
#content::-webkit-scrollbar { width: 0; }

/* ── Action buttons (panel-actions) ─────────────────────────────────────────── */
/* ── Ações — header do card (título + status) ─────────────────────────────── */
.act-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.act-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
}
.act-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.act-log {
  min-height: 14px;
  margin-top: 8px;
  text-align: right;
  font-size: 10px;
  font-family: monospace;
  letter-spacing: 0.3px;
  color: var(--muted);
}
.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.action-btn {
  padding: 14px 8px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1.2;
  text-align: center;
}
.action-btn.full   { grid-column: 1 / -1; }
.action-btn.green  { background: #14532d; color: #4ade80; }
.action-btn.red    { background: #7f1d1d; color: #fca5a5; }
.action-btn.orange { background: #7c2d12; color: #fdba74; }
.action-btn.teal   { background: #134e4a; color: #2dd4bf; }
.action-btn.blue   { background: #1e3a5f; color: #93c5fd; }
.action-btn.muted  { background: #1e293b; color: #94a3b8; border: 1px solid #334155; }

/* ── Configurações: cards colapsáveis ────────────────────────────────────────── */
.settings-card {
  background: #0C1019;
  border: 1px solid #0F1520;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.sc-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
/* quando o body está oculto, remove o espaço inferior do header */
.sc-header:last-child { margin-bottom: 0; }
.sc-title {
  font-size: 14px;
  font-weight: 700;
  color: #EEF4FF;
  flex: 1;
}
.sc-toggle {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  color: #64748b;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 3px 10px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  flex-shrink: 0;
}
/* sub-caixa dentro de um card (ex: senha, status) */
.sc-box {
  background: #0f172a;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.sc-box-label {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 8px;
}

/* ── Mapa de localização ─────────────────────────────────────────────────────── */
#d-map-card {
  padding: 0;
  overflow: hidden;
}
#d-car-map {
  height: 215px;
  width: 100%;
  transition: height .25s ease;
}
/* Durante a recarga, encolhe pra liberar espaço pro card de bateria expandido */
#panel-dash.charging #d-car-map {
  height: 158px;
}
.map-info-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  background: var(--card);
  border-top: 1px solid var(--border);
  min-height: 36px;
}
.map-pin-icon {
  font-size: 13px;
  flex-shrink: 0;
  line-height: 1;
  opacity: .85;
}
.map-address {
  flex: 1;
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
.map-ts {
  font-size: 10px;
  color: #475569;
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Marcador pulsante — box-shadow expansível (sem elementos extra) */
@keyframes map-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(57,255,136,.7), 0 0 6px rgba(57,255,136,.4); }
  65%  { box-shadow: 0 0 0 12px rgba(57,255,136,0), 0 0 6px rgba(57,255,136,.15); }
  100% { box-shadow: 0 0 0 0 rgba(57,255,136,0), 0 0 6px rgba(57,255,136,.4); }
}
.map-pulse-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #39FF88;
  border: 2.5px solid rgba(255,255,255,.95);
  animation: map-pulse 2.4s ease-out infinite;
}

/* ── Charge location row ─────────────────────────────────────────────────────── */
.charge-location-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 2px 3px;
  border-top: 1px solid var(--border);
  cursor: pointer;
  margin-top: 6px;
}
.charge-loc-name {
  font-size: 12px;
  color: var(--teal);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.charge-loc-edit {
  font-size: 12px;
  opacity: .5;
}
.charge-loc-add {
  font-size: 12px;
  color: var(--muted);
  opacity: .6;
}

/* ── Log de eventos ─────────────────────────────────────────────────────────── */
.log-entry {
  display: flex;
  align-items: center;
  padding: 7px 4px;
  border-bottom: 1px solid #1a2336;
  gap: 8px;
}
.log-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }
.log-label { flex: 1; font-size: 13px; color: #c8d8e8; }
.log-time { font-size: 11px; color: #5B7394; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.log-day-header {
  font-size: 11px;
  font-weight: 600;
  color: #5B7394;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 4px 4px;
}

/* ── Trip cards (dash) — desde última partida + viagem atual/última ─── */
.trip-card { padding: 12px 16px; }
.trip-hdr {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.trip-hdr-icon { font-size: 13px; line-height: 1; }
.trip-hdr-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.trip-hdr-sub {
  font-size: 10px;
  color: #475569;
  font-weight: 500;
  margin-left: auto;
}
.trip-hero {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.trip-hero-val {
  font-size: 30px;
  font-weight: 700;
  color: var(--teal);
  line-height: 1;
  letter-spacing: -0.5px;
}
.trip-hero-unit { font-size: 13px; color: var(--muted); font-weight: 500; }
.trip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.trip-grid-6 { grid-template-columns: 1fr 1fr 1fr; }
.trip-cell { display: flex; flex-direction: column; min-width: 0; }
.trip-cell-label {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.trip-cell-val {
  font-size: 14px;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trip-cell-val.green { color: #4ade80; }
#d-curtrip-card.in-progress .trip-hdr-title { color: var(--teal); }
#d-curtrip-card.in-progress .trip-hdr-icon::after {
  content: "●";
  margin-left: 6px;
  font-size: 8px;
  color: #4ade80;
  animation: blink 1.4s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ── Conforto: pills de temperatura ambiente (interna/externa) ─────────── */
.cmf-env-temps {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cmf-env-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 0;
}
.cmf-env-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.cmf-env-meta { display: flex; flex-direction: column; line-height: 1.1; }
.cmf-env-val { font-size: 14px; font-weight: 700; letter-spacing: -0.3px; }
.cmf-env-lbl {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-top: 1px;
}
.cmf-env-in  .cmf-env-val { color: #60a5fa; }
.cmf-env-in  { border-color: rgba(96, 165, 250, 0.25); }
.cmf-env-out .cmf-env-val { color: #94a3b8; }

/* ── Drive panel: HUD em camadas sobre mapa ────────────────────────────── */
/* min-height usa dvh (dynamic viewport) pra acomodar o toolbar do Safari iOS;
   tira ~110px do header + tab-bar. Sem scroll dentro do panel — tudo cabe. */
#panel-drive.active { display: block; }
#panel-drive {
  position: relative;
  min-height: calc(100dvh - 110px);
  overflow: hidden;
  background: #000;
  margin: -6px -10px -8px;          /* compensa padding do #content pra ocupar full bleed */
  border-radius: 0;
}
#drv-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: saturate(0.6) brightness(0.55);
}
.drv-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center 38%, rgba(0,0,0,0.10) 0%, rgba(6,8,12,0.78) 60%, rgba(0,0,0,0.92) 100%),
    linear-gradient(180deg, rgba(6,8,12,0.6) 0%, transparent 30%, transparent 70%, rgba(6,8,12,0.85) 100%);
}
.drv-hud {
  position: relative;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px 16px 18px;
  gap: 10px;
}

/* Top row: gear + power chip */
.drv-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drv-gear {
  font-size: 28px;
  font-weight: 800;
  color: #4ade80;
  letter-spacing: -1px;
  text-shadow: 0 0 16px rgba(74, 222, 128, 0.55);
  min-width: 32px;
  text-align: center;
}
.drv-gear.idle { color: #475569; text-shadow: none; }
.drv-gear.reverse { color: #fb923c; text-shadow: 0 0 16px rgba(251, 146, 60, 0.55); }
.drv-power-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(8, 12, 20, 0.75);
  border: 1px solid rgba(34, 211, 238, 0.4);
  border-radius: 18px;
  font-size: 14px;
  font-weight: 700;
  color: #22d3ee;
  letter-spacing: 0.2px;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.15);
  backdrop-filter: blur(6px);
  transition: color .3s, border-color .3s, box-shadow .3s;
}
.drv-power-chip.regen {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.5);
  box-shadow: 0 0 22px rgba(74, 222, 128, 0.25);
}
.drv-power-chip.charging {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 22px rgba(251, 191, 36, 0.25);
}
.drv-power-icon { font-size: 13px; }

/* Speedometer central com anel */
.drv-speed-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
  min-height: 0;
}
.drv-speed-ring {
  width: 100%;
  height: 100%;
  max-height: min(95vw, 460px);
  aspect-ratio: 1 / 1;
  display: block;
  margin: 0 auto;
}
.drv-ring-bg, .drv-ring-fill {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
}
.drv-ring-bg { stroke: rgba(91, 115, 148, 0.18); }
.drv-ring-fill {
  stroke: #22d3ee;
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.6));
  /* 120ms linear casa com a taxa de chegada (~10 Hz). Antes era 250ms ease-out —
     com dado chegando a cada ~100ms, cada update reiniciava a transição no meio,
     gerando engasgo visual mesmo com fonte fluida. Cor mantém ease-out. */
  transition: stroke-dashoffset .12s linear, stroke .3s ease-out;
}
.drv-ring-fill.regen {
  stroke: #4ade80;
  filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.6));
}
/* Tacômetro externo (RPM do ICE) */
.drv-tach-bg, .drv-tach-fill {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
}
.drv-tach-bg { stroke: rgba(91, 115, 148, 0.12); }
.drv-tach-fill {
  stroke: #fb923c;
  filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.55));
  transition: stroke-dashoffset .12s linear, stroke .3s ease-out, filter .3s ease-out;
}
.drv-tach-fill.redline {
  stroke: #ef4444;
  filter: drop-shadow(0 0 9px rgba(239, 68, 68, 0.75));
}
.drv-speed-content {
  position: absolute;
  text-align: center;
  pointer-events: none;
}
.drv-speed-num {
  font-size: clamp(96px, 32vw, 160px);
  font-weight: 800;
  color: #e2e8f0;
  line-height: 0.95;
  letter-spacing: -4px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 32px rgba(34, 211, 238, 0.45);
  transition: text-shadow .3s, color .3s;
}
.drv-speed-num.idle {
  color: #475569;
  text-shadow: none;
}
.drv-speed-unit {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-top: 6px;
}
.drv-rpm-inline {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.drv-rpm-inline.redline .drv-rpm-inline-val { color: #ef4444; text-shadow: 0 0 12px rgba(239, 68, 68, 0.55); }
.drv-rpm-inline-val {
  font-size: 18px;
  font-weight: 700;
  color: #fb923c;
  letter-spacing: -0.5px;
  text-shadow: 0 0 10px rgba(251, 146, 60, 0.45);
  transition: color .25s, text-shadow .25s;
}
.drv-rpm-inline-unit {
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.drv-peak-row {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.drv-peak-row .drv-peak-val {
  color: #cbd5e1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.drv-peak-sep { opacity: 0.4; }

/* Gráfico de potência (30s rolling) */
.drv-chart-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drv-chart-label {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 0 2px;
}
.drv-chart {
  width: 100%;
  height: 78px;
  display: block;
}
.drv-chart-axis {
  stroke: rgba(91, 115, 148, 0.25);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.drv-chart-line {
  fill: none;
  stroke: #22d3ee;
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.5));
}
.drv-chart-fill {
  fill: rgba(34, 211, 238, 0.12);
  stroke: none;
}

/* Stats: SOC + autonomia + consumo */
.drv-stats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(8, 12, 20, 0.55);
  border: 1px solid rgba(34, 211, 238, 0.12);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}
.drv-stat-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
}
.drv-stat-icon { font-size: 14px; line-height: 1; }
.drv-stat-pct {
  font-size: 16px;
  font-weight: 700;
  color: #22d3ee;
  font-variant-numeric: tabular-nums;
  min-width: 42px;
}
.drv-stat-pct-fuel { color: #fb923c; }
.drv-stat-sep { color: var(--muted); opacity: 0.5; }
.drv-stat-km {
  color: #cbd5e1;
  font-size: 11px;
}
.drv-stat-km span { color: #e2e8f0; font-weight: 600; }
.drv-stat-cons .drv-stat-pct { color: #fbbf24; min-width: auto; }

/* Footer: endereço + temps */
.drv-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.drv-address {
  flex: 1;
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drv-chips {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.drv-chip {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}

/* ── HVAC gesture: preview durante drag / pending após release ───────── */
.hvac-dragging,
.hvac-pending {
  color: #fbbf24 !important;
  transition: none;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.55);
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.45));
}
.hvac-pending {
  animation: hvacPendingPulse 1.2s ease-in-out infinite;
}
@keyframes hvacPendingPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ── Badge de eficiência de viagens (compara vs média do mesmo trecho) ─── */
.trip-eff-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  letter-spacing: 0.2px;
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
}
.trip-eff-badge.better {
  background: rgba(74, 222, 128, 0.12);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.28);
}
.trip-eff-badge.worse {
  background: rgba(248, 113, 113, 0.10);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.25);
}
.trip-eff-badge.neutral {
  background: rgba(148, 163, 184, 0.10);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.20);
}

/* ── Eco score badge (0-100 por viagem) ──────────────────────────────────── */
.trip-eco-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
  margin-left: 6px;
  letter-spacing: 0.3px;
  vertical-align: middle;
  white-space: nowrap;
  cursor: help;
  font-variant-numeric: tabular-nums;
}
.trip-eco-badge.eco-excellent {
  background: rgba(74, 222, 128, 0.16);
  color: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.40);
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.45);
}
.trip-eco-badge.eco-good {
  background: rgba(132, 204, 22, 0.12);
  color: #a3e635;
  border: 1px solid rgba(132, 204, 22, 0.30);
}
.trip-eco-badge.eco-ok {
  background: rgba(251, 191, 36, 0.10);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.28);
}
.trip-eco-badge.eco-bad {
  background: rgba(248, 113, 113, 0.08);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.22);
}

/* ── Modal de comparativo lado-a-lado ───────────────────────────────────── */
.cmp-headers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}
.cmp-head { min-width: 0; text-align: center; }
.cmp-head-name {
  font-size: 13px;
  font-weight: 700;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmp-head-date { font-size: 11px; color: #64748b; margin-top: 2px; }
.cmp-vs {
  font-size: 11px;
  font-weight: 800;
  color: #22d3ee;
  letter-spacing: 1px;
}
.cmp-metrics {
  background: #0c1019;
  border: 1px solid #0F1520;
  border-radius: 10px;
  padding: 4px 12px;
}
.cmp-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #0F1520;
}
.cmp-metric:last-child { border-bottom: none; }
.cmp-metric-label {
  font-size: 11px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  max-width: 38%;
}
.cmp-metric-vals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  flex: 1;
  text-align: center;
}
.cmp-val {
  font-size: 13px;
  font-weight: 600;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
}
.cmp-val.cmp-win  { color: #4ade80; font-weight: 800; }
.cmp-val.cmp-loss { color: #94a3b8; opacity: 0.6; }

/* ── Manutenções (card do Dash + admin) ─────────────────────────────────── */
#d-maint-card { order: 6; padding: 10px 14px; }
.maint-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.maint-row:last-child { border-bottom: none; }
.maint-icon { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.maint-body { flex: 1; min-width: 0; }
.maint-body-row1 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  font-weight: 600;
}
.maint-body-row1 .maint-label { color: #e2e8f0; }
.maint-body-row1 .maint-rem-km {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #4ade80;
}
.maint-body-row2 {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}
.maint-bar-track {
  height: 4px;
  background: rgba(91,115,148,0.18);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 6px;
}
.maint-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #4ade80);
  border-radius: 2px;
  transition: width .6s ease, background .3s;
}
/* Estados — colore valor + barra */
.maint-row.soon .maint-rem-km     { color: #fbbf24; }
.maint-row.soon .maint-bar-fill   { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.maint-row.overdue .maint-rem-km  { color: #f87171; }
.maint-row.overdue .maint-bar-fill{ background: linear-gradient(90deg, #f87171, #ef4444); }
.maint-row.overdue .maint-label   { color: #f87171; }

/* Admin: lista de intervalos + histórico */
.maint-admin-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 10px;
  margin-bottom: 6px;
  font-size: 12px;
}
.maint-admin-name { color: #e2e8f0; font-weight: 600; }
.maint-admin-sub  { color: var(--muted); font-size: 10px; margin-top: 2px; }
.maint-admin-actions button {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  margin-left: 4px;
}

/* ── Abastecimentos ─────────────────────────────────────────────────────── */
.refuel-pending {
  border-color: rgba(251, 191, 36, 0.45) !important;
  background: rgba(251, 191, 36, 0.04);
}
.refuel-pending-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 8px;
  background: rgba(251, 191, 36, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.40);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  animation: refuelPendingPulse 2s ease-in-out infinite;
}
@keyframes refuelPendingPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

/* ── Tema claro (experimental — vários elementos seguem com look dark) ──── */
/* Aplica overrides quando .theme-light está em <html> (definido por JS).
   Cores principais via CSS vars seguem; itens com cor hardcoded mantêm dark. */
:root.theme-light {
  --void:   #f1f5f9;
  --card:   #ffffff;
  --text:   #0f172a;
  --muted:  #475569;
  --border: #cbd5e1;
}
:root.theme-light html, :root.theme-light body { background: var(--void); }
:root.theme-light #header,
:root.theme-light #tab-bar { background: #ffffff; border-color: var(--border); }
:root.theme-light .tab { color: #94a3b8; }
:root.theme-light .tab.active { color: var(--neon); }
:root.theme-light .card { background: var(--card); border-color: var(--border); box-shadow: 0 1px 3px rgba(15,23,42,0.06); }
:root.theme-light .card-title { color: #64748b; }
:root.theme-light .filter-chip { background: #f8fafc; border-color: var(--border); color: #475569; }
:root.theme-light .filter-chip.active { background: rgba(57,255,136,0.10); color: #0a8a3a; border-color: rgba(57,255,136,0.45); }

/* ── Tela larga (Z Fold 7 desdobrado, tablets) ─────────────────────────────── */
/* Em ≥780px, painéis com cards listados verticalmente viram grid 2 colunas.
   Itens "largos" (mapa, ilustração do carro, alertas, banners) ocupam a linha
   inteira pra continuar bem legíveis. Painéis de visualização contínua (Drive,
   Conforto) ficam centralizados com max-width. */
@media (min-width: 700px) {
  /* Habilita labels nos botões da tab bar (mais espaço disponível) */
  .tab-label { display: block; }

  /* Painéis com lista vertical de cards → grid 2 col */
  #panel-dash.active,
  #panel-charges.active,
  #panel-auto.active,
  #panel-stats.active,
  #panel-actions.active,
  #panel-events.active,
  #panel-maint.active,
  #panel-logs.active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-content: start;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
  }

  /* Cards "grandes" / "informativos" que ficam melhor full-width */
  #panel-dash #d-car-card,
  #panel-dash #d-map-card,
  #panel-dash #d-alerts-card,
  #panel-dash #auto-backup-banner,
  #panel-charges .card-title,
  #panel-auto .card-title,
  #panel-stats > div:first-child {
    grid-column: 1 / -1;
  }

  /* Drive (cluster) e Conforto: centraliza com max-width — gauges não escalam bem */
  #panel-drive.active,
  #panel-comfort.active {
    max-width: 900px;
    margin: 0 auto;
  }

  /* Tab bar: aumenta área tocável quando há espaço */
  .tab { font-size: 0; padding: 0 8px; }
  .tab-icon { font-size: 20px; }
  .tab-label { font-size: 10px; }
}

/* ── Tela muito larga (Fold em landscape, tablet horizontal) ───────────────── */
@media (min-width: 1100px) {
  #panel-dash.active,
  #panel-stats.active {
    grid-template-columns: 1fr 1fr 1fr;
  }
  /* Mapa ainda full-width pra acomodar a visualização */
  #panel-dash #d-map-card,
  #panel-dash #d-alerts-card {
    grid-column: 1 / -1;
  }
}