/* ══════════════════════════════════════════════════════════════════════
   componentes.css — aparência do HTML que os scripts montam em tempo de
   execução (popups do mapa, listas, Street View, barras de estado).
   Antes isso ia como style="…" dentro das strings do JavaScript.
   Usado por index.html e corte-teste.html.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Mapa ─────────────────────────────────────────────────────────────── */
/* mapa base escuro (map.js e corte-mapa.js ligam/desligam a classe) */
.mapa-escuro .leaflet-tile-pane{filter:brightness(0.85) saturate(0.7) hue-rotate(180deg) invert(1) contrast(1.05)}
/* modo "adicionar marcação": cursor de mira */
.leaflet-container.mapa-mira{cursor:crosshair}

/* ── Textos soltos ────────────────────────────────────────────────────── */
.txt-destaque{color:var(--accent)}
.nota-pequena{font-size:0.65rem;color:var(--muted)}
.link-destaque{color:var(--accent);text-decoration:underline}
.link-suave{color:var(--muted)}
.icone-cat{vertical-align:middle;flex:none}

/* ── Listas vazias ────────────────────────────────────────────────────── */
.lista-vazia{color:var(--muted);font-size:0.72rem;padding:6px 0}
.lista-vazia-pontos{font-size:0.75rem;padding:8px 0;text-align:center}
.lista-vazia-video{font-size:0.7rem;padding:4px 0}

/* ── Estados que o JS troca (data-estado) ─────────────────────────────── */
/* O seletor leva o #id para vencer a regra base de cada elemento. */
#clickStartLabel[data-estado="inicio"]{color:var(--start-color)}
#clickEndLabel[data-estado="fim"]{color:var(--end-color)}
#clickStartLabel[data-estado="vazio"],
#clickEndLabel[data-estado="vazio"],
#cutCoordStart[data-estado="vazio"],
#cutCoordEnd[data-estado="vazio"],
#kmCalcStart[data-estado="vazio"],
#kmCalcEnd[data-estado="vazio"]{color:var(--muted)}
#cutCoordStart[data-estado="ativo"],
#cutCoordEnd[data-estado="ativo"],
#kmCalcStart[data-estado="ativo"],
#kmCalcEnd[data-estado="ativo"]{color:var(--accent)}
#ptSearchChevron.girado{transform:rotate(180deg)}

/* ── Calculadora de km (resultado manual) ─────────────────────────────── */
.km-manual-rodovia{font-size:0.7rem;color:var(--muted);margin-bottom:4px}
.km-manual-valor{font-size:1.6rem;font-weight:800;color:var(--accent);font-family:'JetBrains Mono',monospace}
.km-manual-ref{font-size:0.65rem;color:var(--muted);margin-top:4px}
.km-manual-erro{color:var(--danger);font-size:0.75rem}

/* ── Camadas na lista (KMZ tem cor fixa; GPX recebe a cor pelo JS) ────── */
.pt-gpx-color-kmz{background:#216C3E;border:1px solid #73b753}

/* ── Popup do marco KMZ ───────────────────────────────────────────────── */
.pop-kmz{font-family:'Syne',sans-serif;min-width:160px;max-width:280px}
.pop-kmz-titulo{font-weight:800;font-size:0.9rem;margin-bottom:5px;color:#73b753}
.pop-kmz-coords{font-size:0.68rem;color:#888;font-family:'JetBrains Mono',monospace;margin-bottom:6px}
.pop-kmz-estaca{font-size:0.7rem;color:#aaa;margin-bottom:4px}
.pop-kmz-linha{display:flex;justify-content:space-between;font-size:0.68rem;border-top:1px solid #1e2124;padding:2px 0;gap:8px}
.pop-kmz-chave{color:#888;text-transform:uppercase;font-size:0.6rem}
.pop-kmz-valor{font-family:'JetBrains Mono',monospace;color:#fff}

/* ── Popup de ponto marcado ───────────────────────────────────────────── */
.pop-ponto{font-family:'Syne',sans-serif;min-width:160px}
.pop-ponto-titulo{font-weight:700;font-size:0.9rem;margin-bottom:6px}
.pop-ponto-km{font-size:0.78rem;color:var(--accent);font-family:'JetBrains Mono',monospace;margin-bottom:4px}
.pop-coords{font-size:0.72rem;color:#888;font-family:'JetBrains Mono',monospace}
.pop-cat{margin-top:4px;font-size:0.72rem;color:#aaa}
.pop-botao-sv{margin-top:8px;width:100%;background:var(--surface2);border:1px solid var(--border);
  color:var(--accent);border-radius:5px;padding:5px 8px;font-size:0.68rem;cursor:pointer;
  font-family:'Syne',sans-serif}

/* ── Popup de trecho marcado ──────────────────────────────────────────── */
.pop-trecho{font-family:'Syne',sans-serif;min-width:180px}
.pop-trecho-titulo{font-weight:700;font-size:0.9rem;margin-bottom:4px}
.pop-trecho-km{font-size:0.78rem;color:var(--accent);font-family:'JetBrains Mono',monospace;margin:4px 0}
.pop-trecho-coords{font-size:0.7rem;color:#888;font-family:'JetBrains Mono',monospace}

/* ── Popup do resultado da busca ──────────────────────────────────────── */
.pop-busca{font-family:'Syne',sans-serif;min-width:190px}
.pop-busca-titulo{font-weight:700;font-size:0.85rem;color:#73b753;margin-bottom:4px}
.pop-busca-coords{font-family:'JetBrains Mono',monospace;font-size:0.65rem;color:#888}
.pop-busca-acoes{margin-top:8px;display:flex;gap:6px}
.pop-busca-btn{flex:1;background:var(--surface2);border:1px solid var(--border);color:var(--accent);
  border-radius:5px;padding:4px 8px;font-size:0.65rem;cursor:pointer;font-family:'Syne',sans-serif}
.pop-busca-fechar{background:transparent;border:1px solid var(--border);color:var(--muted);
  border-radius:5px;padding:4px 8px;font-size:0.65rem;cursor:pointer}

/* ── Street View ──────────────────────────────────────────────────────── */
.sv-error-btn{margin-top:10px}
#svPanoContainer{width:100%;height:100%}
.sv-com-tour{position:relative}
#svTourBar{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:50;
  display:flex;gap:8px;align-items:center;background:rgba(15,17,21,0.85);
  padding:8px 12px;border-radius:12px;backdrop-filter:blur(6px)}
#svTourBar .sv-tour-btn{padding:6px 12px}
#svTourBar #svTourPlayBtn{padding:6px 14px}
#svTourInfo{font-size:0.68rem;color:#9aa3ad;font-family:monospace}

/* ── Vídeo: selo do codec e lista de cortes ───────────────────────────── */
.vid-codec-tag{margin-left:8px;font-size:11px;padding:2px 6px;border-radius:4px}
.vid-codec-tag.tag-hevc{background:#7a2b2b;color:#ffd7d7}
.vid-codec-tag.tag-outro{background:#2b5a2b;color:#d7ffd7}
.vid-cut-item-dur{font-size:0.62rem;color:var(--muted)}