/* =========================================================================
   ATHENA — Visual Impact Pack 2026
   ---------------------------------------------------------------------
   Adições visuais cinematográficas:
     1) Pulse halo no caminhão (mapa) — tiers warning/critical/ok
     2) Sparkline inline em métricas
     3) Confetti containers
     4) Driver Score Gauge F1 (cinematográfico)
     5) TV Mode layout
     6) Trip animation (polyline glow)
     7) Streak system (badges + flame)
     8) Skeleton shimmer premium
   ========================================================================= */


/* ─── 1) Pulse halo no caminhão — TIERS ──────────────────────────────────── */
/*    .has-falha (já existente) = critical (vermelho rápido)                  */
/*    .has-warning              = warning  (amarelo médio)                    */
/*    .has-info                 = info     (azul lento) — opcional            */
.mapa-frota-icon.has-warning::before,
.mapa-frota-icon.has-warning::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 36px; height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    border: 2px solid #ffb800;
    background: rgba(255,184,0,.14);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: mapaFrotaPulseWarning 2.2s cubic-bezier(.16,1,.3,1) infinite;
}
.mapa-frota-icon.has-warning::after { animation-delay: 1.1s; }

@keyframes mapaFrotaPulseWarning {
    0%   { transform: scale(0.55); opacity: 0.7; }
    80%  { transform: scale(2.2);  opacity: 0; }
    100% { transform: scale(2.2);  opacity: 0; }
}

/* Tier critical = mantém o existente mas com filter glow extra pra impacto */
.mapa-frota-icon.has-falha svg {
    filter: drop-shadow(0 0 8px rgba(230,57,70,.55))
            drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

/* Pulse INFO (azul, lento) — uso opcional pra "fora de rota", "sem comunicação" */
.mapa-frota-icon.has-info::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 36px; height: 36px;
    margin: -18px 0 0 -18px;
    border-radius: 50%;
    border: 2px solid #00aaff;
    background: rgba(0,170,255,.10);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: mapaFrotaPulseInfo 3s ease-out infinite;
}
@keyframes mapaFrotaPulseInfo {
    0%   { transform: scale(0.55); opacity: 0.55; }
    100% { transform: scale(2.5);  opacity: 0; }
}

/* Overview map markers (versão menor pra mapa do hero) */
.leaflet-marker-icon.has-falha-overview {
    filter: drop-shadow(0 0 6px rgba(230,57,70,.6));
    animation: overviewIconPulse 1.5s ease-in-out infinite;
}
@keyframes overviewIconPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}


/* ─── 2) Sparkline inline — SVG renderizado via JS ───────────────────────── */
/* Inserido como ULTIMO filho do val. O val vira inline-flex pra agrupar
   [numero][unidade][sparkline] num bloco unico que vai pra direita do row. */
.athena-sparkline {
    display: inline-block;
    vertical-align: middle;
    width: 56px;
    height: 18px;
    margin-left: 10px;
    overflow: visible;
    flex-shrink: 0;
}

/* Quando o val (span num-smooth) tem sparkline filho, vira inline-flex.
   Assim numero/unidade/sparkline ficam grudados num bloco unico. */
.num-smooth:has(> .athena-sparkline),
.mc-row-val:has(> .athena-sparkline),
.mc-vital-value:has(> .athena-sparkline),
.mc-banner-kpi-val:has(> .athena-sparkline) {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

/* Unidades dos indicadores (kPa, %, V, H, KM, kg, L/h) — o inline style
   default em 9px + opacity 0.3 ficava praticamente invisivel. Aumenta pra
   11px com 55% opacidade pra legibilidade real. */
.mc-row-val > small,
.mc-vital-value > small,
.mc-banner-kpi-val > small {
    font-size: 11px !important;
    color: rgba(255, 255, 255, .55) !important;
    margin-left: 3px;
    font-weight: 500;
    letter-spacing: .2px;
}

/* FIX desalinhamento: small VAZIO (caminhao offline, "—") ocupava 3px de
   margin-left empurrando o "—" 3px pra esquerda em relacao a rows sem <small>.
   :empty seleciona elementos sem filhos nem texto. */
.mc-row-val > small:empty,
.mc-vital-value > small:empty,
.mc-banner-kpi-val > small:empty {
    display: none;
}
.athena-sparkline-path {
    fill: none;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 2px currentColor);
}
.athena-sparkline-area {
    opacity: 0.18;
}
.athena-sparkline-dot {
    fill: currentColor;
    filter: drop-shadow(0 0 3px currentColor);
}
/* Trend indicators */
.athena-sparkline.trend-up    { color: #00ff88; }
.athena-sparkline.trend-down  { color: #ff4d4d; }
.athena-sparkline.trend-flat  { color: #888; }


/* ─── 3) Confetti container (canvas overlay) ─────────────────────────────── */
.athena-confetti-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 99999;
}


/* ─── 4) Driver Score Gauge F1 cinematográfico ───────────────────────────── */
/* Tamanho compacto pra caber no row de 168px de altura (banner-matched). */
.athena-ds-f1 {
    position: relative;
    width: 132px;
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.athena-ds-f1-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.athena-ds-f1-track {
    fill: none;
    stroke: rgba(255,255,255,0.08);
    stroke-width: 10;
}
.athena-ds-f1-progress {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s cubic-bezier(.16,1,.3,1),
                stroke 0.6s ease;
    filter: drop-shadow(0 0 6px currentColor);
}
.athena-ds-f1-glow {
    fill: none;
    stroke-width: 16;
    stroke-linecap: round;
    opacity: 0.3;
    transition: stroke-dashoffset 0.8s cubic-bezier(.16,1,.3,1);
    filter: blur(3px);
}
.athena-ds-f1-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
}
.athena-ds-f1-value {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(180deg, #fff 0%, #ccc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.athena-ds-f1-label {
    font-size: 7px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-top: 3px;
}
.athena-ds-f1-band {
    font-size: 9px;
    font-weight: 700;
    margin-top: 3px;
    letter-spacing: 1px;
}
/* Tier colors */
.athena-ds-f1.tier-eco       .athena-ds-f1-progress,
.athena-ds-f1.tier-eco       .athena-ds-f1-glow      { stroke: #00ff88; }
.athena-ds-f1.tier-eco       .athena-ds-f1-band      { color: #00ff88; }
.athena-ds-f1.tier-bom       .athena-ds-f1-progress,
.athena-ds-f1.tier-bom       .athena-ds-f1-glow      { stroke: #88ff00; }
.athena-ds-f1.tier-bom       .athena-ds-f1-band      { color: #88ff00; }
.athena-ds-f1.tier-medio     .athena-ds-f1-progress,
.athena-ds-f1.tier-medio     .athena-ds-f1-glow      { stroke: #ffb800; }
.athena-ds-f1.tier-medio     .athena-ds-f1-band      { color: #ffb800; }
.athena-ds-f1.tier-ruim      .athena-ds-f1-progress,
.athena-ds-f1.tier-ruim      .athena-ds-f1-glow      { stroke: #ff681f; }
.athena-ds-f1.tier-ruim      .athena-ds-f1-band      { color: #ff681f; }
.athena-ds-f1.tier-critico   .athena-ds-f1-progress,
.athena-ds-f1.tier-critico   .athena-ds-f1-glow      { stroke: #ff4444; }
.athena-ds-f1.tier-critico   .athena-ds-f1-band      { color: #ff4444; animation: dsCriticoPulse 1.2s ease-in-out infinite; }
@keyframes dsCriticoPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}


/* ─── 5) TV Mode layout (rota /tv, fullscreen) ───────────────────────────── */
.tv-mode {
    background: radial-gradient(ellipse at top, #0a0e1a 0%, #050608 100%);
    color: #fff;
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
    padding: 24px 32px;
}

/* ── TV MODE v2 — cinematografico + mapa + sidebar + back btn ───────────── */
.tv-mode-v2 {
    position: relative;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100vh;
    overflow: hidden;
    background: #04050a;
    box-sizing: border-box;
}
/* Backgrounds — position absolute (forcado com !important pra n‹o herdar
   o `position: relative` do `.tv-mode-v2 > *` que empurraria tudo no flow). */
.tv-bg-grid {
    position: absolute !important;
    inset: 0;
    z-index: 0 !important;
    background-image:
        linear-gradient(rgba(255,102,0,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,102,0,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 100%);
}
.tv-bg-glow {
    position: absolute !important;
    border-radius: 50%;
    filter: blur(140px);
    pointer-events: none;
    opacity: .3;
    z-index: 0 !important;
}
.tv-bg-glow-1 { background: #ff681f; width: 600px; height: 600px; top: -200px; right: -150px; animation: tvGlow1 14s ease-in-out infinite; }
.tv-bg-glow-2 { background: #00aaff; width: 500px; height: 500px; bottom: -150px; left: -100px; animation: tvGlow2 18s ease-in-out infinite; }
@keyframes tvGlow1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px, 30px); } }
@keyframes tvGlow2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(40px, -30px); } }

/* Conteudo principal (header/kpis/main/footer) — z-index acima dos bgs.
   Excluimos os backgrounds via :not() pra nao sobrescrever o position absolute. */
.tv-mode-v2 > .tv-mode-header,
.tv-mode-v2 > .tv-mode-bignums,
.tv-mode-v2 > .tv-mode-main,
.tv-mode-v2 > .tv-mode-footer {
    position: relative;
    z-index: 2;
}

.tv-mode-v2 .tv-mode-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,102,0,.18);
}
.tv-mode-v2 .tv-mode-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 3px;
    background: linear-gradient(90deg, #ff681f 0%, #ffaa00 50%, #ff681f 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: tvTitleShimmer 6s ease-in-out infinite;
}
@keyframes tvTitleShimmer { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.tv-mode-logo {
    width: 36px; height: 36px;
    filter: drop-shadow(0 0 10px rgba(255,102,0,.5));
}
.tv-mode-header-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}
.tv-mode-v2 .tv-mode-clock {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 3px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    padding: 6px 14px;
    border-radius: 8px;
}
.tv-mode-back-btn {
    background: rgba(255,102,0,.12);
    border: 1px solid rgba(255,102,0,.45);
    color: #ff681f;
    padding: 8px 18px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all .2s;
    text-transform: uppercase;
}
.tv-mode-back-btn:hover {
    background: rgba(255,102,0,.25);
    transform: translateX(-2px);
    box-shadow: 0 4px 16px rgba(255,102,0,.3);
}

/* KPIs v2 — mais cinematográficos */
.tv-mode-v2 .tv-mode-bignums {
    margin-top: 0;
    gap: 16px;
}
.tv-mode-v2 .tv-mode-bignum {
    padding: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
    border-radius: 14px;
    transition: transform .3s;
    position: relative;
}
.tv-mode-v2 .tv-mode-bignum:hover { transform: translateY(-3px); }
.tv-mode-v2 .tv-mode-bignum-value {
    font-size: 64px;
    line-height: 1;
}

/* Layout principal: mapa + sidebar */
.tv-mode-main {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 16px;
    flex: 1 1 0;
    min-height: 0;       /* permite grid items encolherem dentro do flex */
    height: 100%;
}
.tv-mode-map-wrap {
    position: relative;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    overflow: hidden;
    height: 100%;
    min-height: 0;
}
.tv-mode-map {
    position: absolute;
    inset: 0;
    background: #0a0e1a;
    z-index: 1;
}
/* Satellite ArcGIS ja' tem cores naturais — leve dessaturacao + contraste
   pra combinar com o tema dark do dashboard sem virar negativo. */
.tv-mode-map .leaflet-tile-pane {
    filter: brightness(.85) saturate(.9) contrast(1.05);
}
.tv-mode-map .leaflet-control-attribution {
    background: rgba(0,0,0,.6);
    color: rgba(255,255,255,.4);
    font-size: 9px;
}
.tv-mode-map-legend {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    gap: 14px;
    background: rgba(5,6,14,.9);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    padding: 8px 14px;
    z-index: 500;
}
.tv-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255,255,255,.75);
    letter-spacing: 1px;
}
.tv-legend-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 6px currentColor;
}
.tv-marker {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,.8);
    box-shadow: 0 0 10px currentColor, 0 0 4px rgba(0,0,0,.5);
}

/* Wrap vertical: label sempre visivel em cima do dot (estilo "etiqueta do
   carro" no mapa). Layout em coluna com gap pequeno + drop-shadow do label. */
.tv-marker-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
}
.tv-marker-label {
    position: relative;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #fff;
    background: rgba(10, 12, 18, .94);
    border: 1px solid var(--label-color, #ff681f);
    border-radius: 6px;
    padding: 3px 9px;
    line-height: 1.3;
    margin-bottom: 6px;
    white-space: nowrap;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, .6),
        0 0 0 1px rgba(0, 0, 0, .35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .65);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Setinha apontando do label pro dot — usa borders pra criar triangulo. */
.tv-marker-label::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--label-color, #ff681f);
}

/* Painéis comuns */
.tv-mode-panel {
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 16px 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.tv-mode-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 3px;
    color: rgba(255,170,0,.85);
    text-transform: uppercase;
    font-weight: 700;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-shrink: 0;
}
.tv-mode-map-wrap > .tv-mode-panel-title {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 500;
    background: linear-gradient(180deg, rgba(5,6,14,.95), rgba(5,6,14,.7) 80%, transparent);
    padding: 14px 18px;
    border-bottom: 0;
    margin-bottom: 0;
}
.tv-mode-pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #00ff88;
    box-shadow: 0 0 8px #00ff88;
    animation: tvPulseDot 1.5s ease-in-out infinite;
}
.tv-mode-pulse-dot.crit { background: #ff4444; box-shadow: 0 0 8px #ff4444; }
@keyframes tvPulseDot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Sidebar */
.tv-mode-sidebar {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 14px;
    min-height: 0;
    height: 100%;
}

/* Status sistemas */
.tv-status-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tv-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(255,255,255,.02);
    border-radius: 8px;
    border-left: 3px solid transparent;
}
.tv-status-row.ok    { border-left-color: #00ff88; }
.tv-status-row.warn  { border-left-color: #ffaa00; }
.tv-status-row.fail  { border-left-color: #ff4444; animation: tvBlinkFail 1.5s ease-in-out infinite; }
@keyframes tvBlinkFail { 0%,100% { background: rgba(255,68,68,.05); } 50% { background: rgba(255,68,68,.15); } }
.tv-status-name { font-size: 13px; color: #fff; font-weight: 600; }
.tv-status-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: rgba(255,255,255,.7);
}
.tv-status-row.ok   .tv-status-badge { color: #00ff88; }
.tv-status-row.warn .tv-status-badge { color: #ffaa00; }
.tv-status-row.fail .tv-status-badge { color: #ff4444; }

/* Alertas live — modo carrossel (1 por vez, sem scroll, fade entre eles).
   TV nunca rola — operador ve' tudo sem interacao. */
.tv-alerts-panel {
    overflow: hidden;
    justify-content: flex-start;
}
.tv-alert-cycle {
    animation: tvAlertFadeIn .55s cubic-bezier(.16,1,.3,1);
}
@keyframes tvAlertFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Dots de progresso (mostra qual alerta esta visivel agora) */
.tv-alert-dots {
    display: flex;
    gap: 5px;
    justify-content: center;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.04);
}
.tv-alert-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    transition: background .3s, transform .3s;
}
.tv-alert-dot.active {
    background: #ff681f;
    transform: scale(1.4);
    box-shadow: 0 0 6px rgba(255,102,0,.6);
}
.tv-alerts-empty {
    text-align: center;
    padding: 32px 8px;
    color: rgba(255,255,255,.45);
    font-size: 13px;
}
.tv-alerts-empty > span { font-size: 32px; display: block; margin-bottom: 8px; }
.tv-alert-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: rgba(255,255,255,.02);
    border-left: 3px solid #ff681f;
}
.tv-alert-row.crit {
    background: linear-gradient(90deg, rgba(255,68,68,.12) 0%, rgba(255,68,68,.02) 100%);
    border-left-color: #ff4444;
}
.tv-alert-icon { font-size: 16px; line-height: 1; padding-top: 2px; }
.tv-alert-content { flex: 1; min-width: 0; }
.tv-alert-truck { font-size: 13px; font-weight: 700; color: #fff; }
.tv-alert-msg { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 2px; }

/* Footer — flex-shrink: 0 garante que nao colapsa nem corta texto.
   gap + flex-wrap permite quebrar em telas estreitas sem overflow. */
.tv-mode-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    flex-shrink: 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.05);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(255,255,255,.4);
    letter-spacing: 1.5px;
    white-space: nowrap;
}

/* Responsivo TV — fica em coluna em telas pequenas */
@media (max-width: 1200px) {
    .tv-mode-main { grid-template-columns: 1fr; }
    .tv-mode-sidebar { grid-template-rows: auto auto; }
    .tv-mode-v2 .tv-mode-bignums { grid-template-columns: repeat(2, 1fr); }
}
.tv-mode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,102,0,.25);
}
.tv-mode-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 4px;
    background: linear-gradient(90deg, #ff681f 0%, #ffaa00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.tv-mode-clock {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    color: rgba(255,255,255,.85);
    letter-spacing: 2px;
}
.tv-mode-bignums {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 32px;
}
.tv-mode-bignum {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}
.tv-mode-bignum::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--tv-accent, #ff681f), transparent);
}
.tv-mode-bignum-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 84px;
    font-weight: 800;
    line-height: 1;
    color: var(--tv-accent, #fff);
    text-shadow: 0 0 30px var(--tv-accent, rgba(255,102,0,.4));
}
.tv-mode-bignum-label {
    font-size: 13px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-top: 12px;
}
.tv-mode-bignum-sub {
    font-size: 14px;
    color: rgba(255,255,255,.7);
    margin-top: 8px;
}
.tv-mode-alert {
    margin-top: 24px;
    background: linear-gradient(90deg, rgba(255,68,68,.18) 0%, rgba(255,68,68,.04) 100%);
    border: 1px solid rgba(255,68,68,.4);
    border-radius: 12px;
    padding: 20px 28px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    animation: tvAlertPulse 1.5s ease-in-out infinite;
}
@keyframes tvAlertPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,68,68,.6); }
    50%      { box-shadow: 0 0 30px 4px rgba(255,68,68,.45); }
}
.tv-mode-leaderboard {
    margin-top: 24px;
    background: rgba(255,255,255,.03);
    border-radius: 12px;
    padding: 20px 28px;
}
.tv-mode-leaderboard-title {
    font-size: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,170,0,.85);
    margin-bottom: 14px;
}
.tv-mode-leaderboard-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255,255,255,.06);
    font-size: 18px;
}
.tv-mode-leaderboard-pos {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 800;
    width: 40px;
    color: rgba(255,170,0,.7);
}
.tv-mode-leaderboard-pos.gold   { color: #ffd700; }
.tv-mode-leaderboard-pos.silver { color: #c0c0c0; }
.tv-mode-leaderboard-pos.bronze { color: #cd7f32; }
.tv-mode-leaderboard-name {
    flex: 1;
    font-weight: 600;
}
.tv-mode-leaderboard-score {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #00ff88;
}


/* ─── 6) Trip animation — polyline glow + carrinho ───────────────────────── */
.athena-trip-trail {
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px currentColor);
}
.athena-trip-marker {
    border-radius: 50%;
    box-shadow: 0 0 12px #ff681f, 0 0 24px rgba(255,102,0,.5);
}
.athena-trip-controls {
    position: absolute;
    bottom: 16px; left: 50%;
    transform: translateX(-50%);
    background: rgba(10,12,18,.92);
    border: 1px solid rgba(255,102,0,.4);
    border-radius: 24px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1000;
    backdrop-filter: blur(10px);
}
.athena-trip-controls button {
    background: transparent;
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    transition: all .2s;
}
.athena-trip-controls button:hover {
    border-color: #ff681f;
    color: #ff681f;
}
.athena-trip-controls input[type=range] {
    width: 280px;
    accent-color: #ff681f;
}
.athena-trip-controls-time {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: rgba(255,255,255,.75);
    min-width: 70px;
}


/* ─── 7) Streak system (badges + flame) ──────────────────────────────────── */
.athena-streak {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, rgba(255,102,0,.18) 0%, rgba(255,184,0,.08) 100%);
    border: 1px solid rgba(255,184,0,.35);
    border-radius: 24px;
    padding: 6px 14px 6px 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #fff;
}
.athena-streak-flame {
    font-size: 18px;
    animation: streakFlameFlicker 1.4s ease-in-out infinite;
    filter: drop-shadow(0 0 4px #ff6800);
}
@keyframes streakFlameFlicker {
    0%, 100% { transform: scale(1) rotate(-2deg); }
    33%      { transform: scale(1.08) rotate(2deg); }
    66%      { transform: scale(.96) rotate(-1deg); }
}
.athena-streak-days {
    font-family: 'JetBrains Mono', monospace;
    font-size: 16px;
    font-weight: 800;
    color: #ffb800;
}
.athena-streak-label {
    font-size: 11px;
    opacity: .7;
    letter-spacing: 1px;
}

.athena-streak-bar {
    height: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
}
.athena-streak-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff6800 0%, #ffd700 100%);
    transition: width 0.8s cubic-bezier(.16,1,.3,1);
    box-shadow: 0 0 8px rgba(255,184,0,.45);
}

.athena-streak-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    /* 2026-06: removido grid-column/row absoluto — agora segue o fluxo
       natural da grid 2-colunas do .athena-streak-card. */
}
.athena-streak-badge {
    width: 56px;
    height: 88px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 22px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.3);
    transition: all .3s;
    position: relative;
}
.athena-streak-badge::after {
    content: attr(data-label);
    font-size: 8px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: rgba(255,255,255,.35);
    margin-top: 2px;
}
.athena-streak-badge.earned {
    background: linear-gradient(135deg, rgba(0,0,0,.2), var(--badge-color, #ffd700) 200%);
    border-color: var(--badge-color, #ffd700);
    color: #fff;
    text-shadow: 0 0 8px var(--badge-color, #ffd700);
    box-shadow: 0 0 12px rgba(255,215,0,.18), inset 0 0 14px rgba(255,255,255,.05);
}
.athena-streak-badge.earned::after { color: var(--badge-color, #ffd700); }
.athena-streak-badge[data-tier="bronze"].earned   { --badge-color: #cd7f32; }
.athena-streak-badge[data-tier="prata"].earned    { --badge-color: #c0c0c0; }
.athena-streak-badge[data-tier="ouro"].earned     { --badge-color: #ffd700; }
.athena-streak-badge[data-tier="diamante"].earned { --badge-color: #00e5ff; }

/* ─── MODO CLARO: card de streak + hero score (2026-06) ──────────────────── */
/* Esses elementos ficavam escuros no modo claro porque so tinham fundo/texto
   dark hardcoded. Overrides abaixo clareiam fundo e escurecem texto.
   Badges "earned" mantem o gradient colorido (legivel em ambos os temas). */
.light-theme .athena-hero-score-row {
    background: linear-gradient(135deg, #ffffff 0%, #f3f5f9 100%);
    border-color: rgba(0,0,0,.08);
    box-shadow: 0 10px 28px -8px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.6);
}
.light-theme .athena-streak {
    color: #2a2a2a;
    background: linear-gradient(90deg, rgba(255,102,0,.14) 0%, rgba(255,184,0,.08) 100%);
    border-color: rgba(255,140,0,.40);
}
.light-theme .athena-streak-days     { color: #b35a00; }
.light-theme .athena-streak-label    { color: rgba(0,0,0,.55); }
.light-theme .athena-streak-next     { color: rgba(0,0,0,.55); }
.light-theme .athena-streak-card-empty { color: rgba(0,0,0,.55); }
.light-theme .athena-streak-card-title { color: #b35a00; }
.light-theme .athena-streak-bar      { background: rgba(0,0,0,.08); }
.light-theme .athena-streak-badge {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.10);
    color: rgba(0,0,0,.35);
}
.light-theme .athena-streak-badge::after { color: rgba(0,0,0,.45); }


/* ─── 8) Skeleton shimmer premium ────────────────────────────────────────── */
.athena-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,.04) 0%,
        rgba(255,255,255,.08) 50%,
        rgba(255,255,255,.04) 100%
    );
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
    display: inline-block;
}
@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.athena-skeleton-text  { height: 14px; width: 80%; }
.athena-skeleton-num   { height: 24px; width: 60px; }
.athena-skeleton-card  { height: 80px; width: 100%; }


/* ─── Hero Score Row (Driver Score F1 + Streak) ──────────────────────────── */
/* Mesmo padrao visual do banner .mc-banner que fica acima:
   full-width, height 168px, padding/radius/background/border identicos. */
.athena-hero-score-row {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 132px 1fr;
    gap: 24px;
    margin-top: 12px;
    padding: 18px 24px;
    height: 168px;
    min-height: 168px;
    background: linear-gradient(135deg, rgba(14,14,26,.98) 0%, rgba(6,6,16,.99) 100%);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
    align-items: center;
}
.athena-hero-score-row::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #00ff88 0%, rgba(0,210,255,.5) 50%, transparent 100%);
}
.athena-streak-card {
    padding: 0;
    background: transparent;
    /* 2026-06: redesign — 2 colunas (info empilhada vertical + badges).
       Antes era grid 2x2 com 5 elementos planos => layout caotico. */
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    height: 100%;
}
.athena-streak-card-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;   /* permite que children encolham se faltar espaco */
}
.athena-streak-next {
    font-size: 11px;
    color: rgba(255,255,255,.55);
    line-height: 1.2;
}
.athena-streak-card-title {
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,170,0,.8);
    font-weight: 800;
}
.athena-streak-card-empty {
    color: rgba(255,255,255,.55);
    font-size: 11px;
    line-height: 1.3;
    max-width: 240px;
}

.athena-trip-replay-btn {
    margin-top: 12px;
    background: linear-gradient(90deg, #ff681f 0%, #ffaa00 100%);
    border: none;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    width: 100%;
    box-shadow: 0 4px 12px rgba(255,102,0,.25);
}
.athena-trip-replay-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255,102,0,.4);
}

@media (max-width: 880px) {
    .athena-hero-score-row {
        grid-template-columns: 1fr;
        text-align: center;
    }
}


/* Reduced motion — respeitar usuários com sensibilidade vestibular */
@media (prefers-reduced-motion: reduce) {
    .mapa-frota-radar,
    .mapa-frota-radar-2,
    .mapa-frota-icon.has-warning::before,
    .mapa-frota-icon.has-warning::after,
    .mapa-frota-icon.has-info::before,
    .athena-streak-flame,
    .tv-mode-alert,
    .athena-skeleton,
    .athena-ds-f1.tier-critico .athena-ds-f1-band {
        animation: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   MODO CLARO 2026-06 — medidor F1 de eficiencia (driver score gauge).
   Numero/label/band eram brancos e sumiam no fundo claro do card.
   ═══════════════════════════════════════════════════════════════════ */
.light-theme .athena-ds-f1-value {
    background: linear-gradient(180deg, #15151a 0%, #44464d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.light-theme .athena-ds-f1-label { color: rgba(0,0,0,.55); }
.light-theme .athena-ds-f1-band  { color: rgba(0,0,0,.62); }