/* Wendell Freitas Kart — comparador de voltas (telemetria).
   Migrado do cksl.com.br; cores na paleta do site (amarelo-neon da carenagem do #55 + ciano complementar). */
:root {
  /* nomes usados pelo motor/interface da ferramenta, apontando para a paleta do site */
  --surface: var(--grafite);
  --surface-2: var(--grafite-2);
  --line: var(--linha);
  --text: var(--texto);
  --radius: var(--raio);
  --accent: var(--amarelo);
}
.tl {
  --tl-ref: #4cc9f0;
  --tl-cmp: #e3f12a;
  --tl-loss: #ff5a5a;
  --tl-gain: #34c759;
  --tl-loss-text: #ff7b7b;
  --tl-gain-text: #4ade80;
  --tl-ink-2: #cdd1d6;
  --tl-grid: rgba(255, 255, 255, 0.06);
  --tl-axis: rgba(255, 255, 255, 0.18);
  --tl-band: rgba(255, 255, 255, 0.035);
  --tl-band-sel: rgba(76, 201, 240, 0.2);
  display: grid;
  gap: 16px;
}
.tl > * { min-width: 0; }
.tl [hidden], .tl-tip[hidden] { display: none !important; }
.tl h2 { font-size: clamp(1.25rem, 2.6vw, 1.6rem); margin: 0; }
.tl h3 { margin: 0; }
.tl p { margin: 0; }
.tl select { color-scheme: dark; font: inherit; font-size: .9rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; max-width: 100%; min-width: 0; }
.tl :focus-visible { outline: 2px solid var(--amarelo); outline-offset: 2px; }
.tl table { width: 100%; border-collapse: collapse; }
.tl th { font: 600 .72rem/1 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.tl-label { font: 600 .72rem/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tl-sm { padding: 7px 12px; font-size: .85rem; }
.loss { color: var(--tl-loss-text); }
.gain { color: var(--tl-gain-text); }

/* escolha das voltas */
.tl-setup { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.tl-slot { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.tl-slot-head { display: flex; align-items: center; gap: 10px; }
.tl-swatch { width: 20px; height: 4px; border-radius: 2px; flex: none; display: inline-block; }
.tl-swatch.tl-ref { background: var(--tl-ref); }
.tl-swatch.tl-cmp { background: var(--tl-cmp); }
.tl-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; min-width: 0; }
.tl-row select { flex: 1 1 220px; }
.tl-file { position: relative; }
.tl-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.tl-file:focus-within { outline: 2px solid var(--amarelo); outline-offset: 2px; }
.tl-fname { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; min-width: 0; flex: 1 1 180px; }
.tl-hint { font-size: .8rem; color: var(--muted); margin: 0; line-height: 1.45; }
.tl-status { color: var(--tl-loss-text); font-size: .9rem; min-height: 1.2em; margin-top: -6px !important; }
.tl-status.info { color: var(--muted); }

/* resumo */
.tl-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tl-tile { background: var(--surface); padding: 14px 16px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.tl-tile .v { font: 700 clamp(1.6rem, 4vw, 2.2rem)/1 var(--head); font-variant-numeric: tabular-nums; }
.tl-tile .s { font-size: .8rem; color: var(--muted); }
.tl-verdict { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 14px 18px; }
.tl-verdict p { max-width: 95ch; color: var(--tl-ink-2); }

/* mapa + barras */
.tl-main { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 900px) { .tl-main { grid-template-columns: minmax(0, 1fr); } }
.tl-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.tl-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .8rem; color: var(--muted); align-items: center; }
.tl-legend span { display: inline-flex; align-items: center; gap: 6px; }
#map { width: 100%; height: 480px; display: block; touch-action: pan-y pinch-zoom; }
.tl-map-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; font-size: .8rem; color: var(--muted); align-items: center; }

.tl-bars { display: grid; gap: 2px; }
.tl-bar-row { display: grid; grid-template-columns: 3.4rem 1fr 4.6rem; align-items: center; gap: 8px; padding: 6px 6px; border-radius: 8px; cursor: pointer; border: 0; background: none; color: var(--text); text-align: left; width: 100%; font: inherit; }
.tl-bar-row:hover { background: var(--tl-band); }
.tl-bar-row.sel { background: var(--tl-band-sel); }
.tl-bar-row .lbl { font: 700 1rem/1 var(--head); }
.tl-bar-row .lbl small { font: 400 .72rem var(--body); color: var(--muted); margin-left: 3px; }
.tl-bar-track { position: relative; height: 16px; }
.tl-bar-track::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--tl-axis); }
.tl-bar { position: absolute; top: 2px; height: 12px; }
.tl-bar.l { background: var(--tl-loss); left: 50%; border-radius: 0 4px 4px 0; }
.tl-bar.g { background: var(--tl-gain); right: 50%; border-radius: 4px 0 0 4px; }
.tl-bar-row .val { font-size: .85rem; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tl-bars-scale { display: grid; grid-template-columns: 3.4rem 1fr 4.6rem; gap: 8px; font-size: .72rem; color: var(--muted); padding: 0 6px; }
.tl-bars-scale div { display: flex; justify-content: space-between; }

/* gráficos */
.tl-charts { display: grid; gap: 10px; }
.tl-chart svg { display: block; width: 100%; overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tl-chart-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: .8rem; color: var(--muted); }
.tl-chart-title b { font: 700 1.1rem/1.2 var(--head); text-transform: uppercase; color: var(--text); letter-spacing: .02em; }
.tl-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); padding: 9px 12px; font-size: .82rem; display: grid; gap: 3px; min-width: 210px; }
.tl-tip.dock { left: 16px !important; right: 16px; top: auto !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); min-width: 0; }
.tl-tip .row { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; }
.tl-tip .row b { font-variant-numeric: tabular-nums; text-align: right; }
.tl-tip .key { width: 12px; height: 3px; border-radius: 2px; }
.tl-tip .hd { color: var(--muted); }

/* relatório */
.tl-report { display: grid; gap: 14px; }
.tl-report-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 16px; }
.tl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.tl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.tl-card.sel { border-color: var(--amarelo); box-shadow: 0 0 0 1px var(--amarelo); }
.tl-card-head { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.tl-card-head h3 { font-size: 1.7rem; }
.tl-card-head .meta { color: var(--muted); font-size: .82rem; flex: 1 1 auto; }
.tl-pill { font: 700 1.05rem/1 var(--head); padding: 5px 11px; border-radius: 999px; font-variant-numeric: tabular-nums; border: 1px solid currentColor; }
.tl-tablewrap { overflow-x: auto; }
.tl table.tl-metrics { font-size: .85rem; font-variant-numeric: tabular-nums; }
.tl .tl-metrics th, .tl .tl-metrics td { padding: 6px 6px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tl .tl-metrics th { background: none; font-size: .68rem; }
.tl .tl-metrics th:first-child, .tl .tl-metrics td:first-child { text-align: left; color: var(--tl-ink-2); white-space: normal; }
.tl .tl-metrics tbody tr:hover { background: none; }
.tl-metrics th .tl-swatch { margin-right: 5px; vertical-align: middle; width: 12px; height: 3px; }
.tl-notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tl-notes li { display: grid; grid-template-columns: 6.6rem 1fr; gap: 10px; font-size: .88rem; color: var(--tl-ink-2); }
.tl-notes li .k { font: 600 .68rem/1.6 var(--body); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.tl-tipbox { background: var(--surface-2); border-radius: 10px; padding: 10px 14px; font-size: .88rem; }
.tl-tipbox b { font: 700 .95rem var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-right: 8px; }
.tl-method { color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 8px; }
.tl-method p { max-width: 110ch; }
.tl-method b { color: var(--tl-ink-2); }

/* celular */
@media (max-width: 600px) {
  .tl { gap: 14px; }
  .tl .page-head { padding-bottom: 8px; }
  .tl-slot, .tl-panel, .tl-card { padding: 14px; }
  .tl-file { width: 100%; justify-content: center; }
  .tl-row select { flex-basis: 100%; }
  #map { height: 330px; }
  .tl-tile { padding: 12px; }
  .tl-notes li { grid-template-columns: 1fr; gap: 2px; }
  .tl-card-head .meta { flex-basis: 100%; order: 3; }
  .tl-card-head .btn { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .tl * { transition: none !important; } }