/* ============================================================
   Extrator de Trechos Rodoviários — estilo baseado no
   painel-rotasertoes (tokens, header, sidebar, tabela, mapa)
   ============================================================ */

:root {
    --primary-color:var(--acento);
    --accent-color:var(--acento);
    --bg-light:var(--fundo);
    --card-bg:var(--superficie);
    --text-primary:var(--texto);
    --text-secondary:var(--texto-2);
    --border-color:var(--borda);
    --shadow-sm:0 1px 2px 0 var(--sombra);
    --neutral-bar:var(--azul-90);
    --reference-color: var(--cobre-40);
}

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

/* O atributo `hidden` precisa SEMPRE esconder o elemento. Sem isto, um `display` vindo de
   uma classe (ex.: .filter-group, .dica-clique) vence a regra de baixa especificidade do
   navegador `[hidden]{display:none}` e o elemento reaparece mesmo com `hidden`. */
[hidden] {
    display: none !important;
}

body {
    font-family: var(--fonte);
    background-color: var(--bg-light);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* Página em tela única: header fixo + conteúdo preenchendo o resto, sem scroll
       de página (o scroll interno fica só na barra lateral). */
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* ===================== Header (2 níveis) ===================== */

.main-header {
    background-color: var(--superficie);
    padding: 0 40px;
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    height: 90px;
}

.logo-container {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.logo-container img.logo {
    height: var(--h-logo);
    width: auto;
    object-fit: contain;
}

/* Destaque laranja (mesmo tom do antigo selo SNV) para a fonte no subtítulo. */
.fonte-dest {
    color: var(--vermelho-50);
    font-weight: 700;
}

.title-container h1 {
    font-size: 19px;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.025em;
    text-transform: uppercase;
    line-height: 1;
}

.subtitle {
    text-transform: uppercase;
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-top: 4px;
}

.snv-badge {
    color: var(--vermelho-50);
}

.header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.main-nav {
    display: flex;
    gap: 32px;
}

.nav-btn {
    background: none;
    border: none;
    padding: 16px 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 2px solid transparent;
    text-decoration: none;
    display: inline-block;
}

.nav-btn:hover {
    color: var(--primary-color);
}

.nav-btn.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 700;
}

/* ===================== Layout principal ===================== */

#content-area {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

.map-sidebar {
    width: 342px;
    flex: 0 0 342px;
    background: var(--superficie);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 9px color-mix(in srgb, var(--texto) 5%, transparent);
    z-index: 10;
}

.sidebar-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.sidebar-header h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}

#contador-trechos {
    font-size: 11px;
    color: var(--primary-color);
    font-weight: 600;
    white-space: nowrap;
}

.map-filters {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    flex: 1;
}

.map-filters::-webkit-scrollbar {
    width: 6px;
}

.map-filters::-webkit-scrollbar-track {
    background: transparent;
}

.map-filters::-webkit-scrollbar-thumb {
    background: var(--borda);
    border-radius: 10px;
}

.sidebar-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--border-color);
    background: var(--superficie);
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex-shrink: 0;
}

/* ===================== Grupos de filtro ===================== */

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group > label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.map-filters select,
.map-filters input[type="text"],
.map-filters input[type="number"] {
    padding: 9px 11px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    font-size: 13px;
    color: var(--text-primary);
    font-family: var(--fonte);
    background: var(--superficie);
    width: 100%;
}

.map-filters select:focus,
.map-filters input[type="text"]:focus,
.map-filters input[type="number"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul-80) 10%, transparent);
}

.map-filters select:disabled,
.map-filters input:disabled {
    background: var(--superficie);
    color: var(--texto-3);
    cursor: not-allowed;
}

.hint {
    font-size: 11px;
    color: var(--text-secondary);
    margin: 0;
}

.preview-extensao {
    font-size: 12px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

/* ===================== Toggle Federal/Estadual ===================== */

.phase-slicer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
}

.phase-btn {
    height: 38px;
    padding: 5px 4px;
    background: var(--azul-10);
    border: 1px solid transparent;
    border-radius: 5px;
    font-family: var(--fonte);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.phase-btn:hover {
    background: var(--superficie-2);
}

/* Regra do painel: botão toggle ativo = fundo primário + texto branco */
.phase-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--superficie);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--azul-80) 30%, transparent);
}

/* ===================== Faixa de km ===================== */

.km-inputs {
    display: flex;
    align-items: center;
    gap: 7px;
}

.km-inputs input {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-weight: 600;
}

.km-sep {
    color: var(--text-secondary);
    font-size: 13px;
    flex-shrink: 0;
}

/* Slider duplo (padrão .range-slicer do capex.html) */
.range-slicer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-top: 2px;
}

.range-slicer .range-track {
    position: relative;
    height: 20px;
}

.range-slicer .track-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--border-color);
    border-radius: 2px;
    transform: translateY(-50%);
}

.range-slicer .track-fill {
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
    transform: translateY(-50%);
}

.range-slicer input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: none;
}

.range-slicer input[type="range"]::-webkit-slider-runnable-track {
    height: 3px;
    background: transparent;
}

.range-slicer input[type="range"]::-moz-range-track {
    height: 3px;
    background: transparent;
}

.range-slicer input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid var(--superficie);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--texto) 30%, transparent);
    cursor: pointer;
    pointer-events: all;
    margin-top: -7.5px;
}

.range-slicer input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 2px solid var(--superficie);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--texto) 30%, transparent);
    cursor: pointer;
    pointer-events: all;
}

.range-slicer input[type="range"]:disabled::-webkit-slider-thumb {
    background: var(--borda);
    cursor: not-allowed;
}

.range-slicer input[type="range"]:disabled::-moz-range-thumb {
    background: var(--borda);
    cursor: not-allowed;
}

/* ===================== Segmentação e formatos ===================== */

.segmento-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.segmento-row input {
    width: 90px !important;
    flex: none;
}

.segmento-row .hint {
    flex: 1;
}

.filter-group label.check-row,
.formatos-row label.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.check-row input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
}

.formatos-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

/* ===================== Botões ===================== */

.btn-primario {
    width: 100%;
    padding: 11px 14px;
    background: var(--primary-color);
    color: var(--superficie);
    border: none;
    border-radius: 7px;
    font-family: var(--fonte);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primario:hover:not(:disabled) {
    background: var(--azul-80);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--azul-80) 25%, transparent);
}

.btn-primario:disabled {
    background: var(--borda);
    cursor: not-allowed;
}

.export-btn {
    width: 100%;
    background: var(--verde-80);
    color: var(--superficie);
    border: none;
    padding: 12px 18px;
    border-radius: 8px;
    font-family: var(--fonte);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px color-mix(in srgb, var(--texto) 10%, transparent);
}

.export-btn:hover:not(:disabled) {
    background: var(--verde-80);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px color-mix(in srgb, var(--texto) 15%, transparent);
}

.export-btn:active:not(:disabled) {
    transform: translateY(0);
}

.export-btn:disabled {
    background: var(--borda-forte);
    cursor: not-allowed;
    box-shadow: none;
}

.spinner {
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--superficie) 35%, transparent);
    border-top-color: var(--superficie);
    border-radius: 50%;
    animation: girar 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes girar {
    to {
        transform: rotate(360deg);
    }
}

/* ===================== KPI (summary card) ===================== */

.summary-card {
    background: linear-gradient(135deg, var(--azul-90), var(--azul-60));
    color: var(--superficie);
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 6px 15px color-mix(in srgb, var(--azul-70) 25%, transparent);
    border: 1px solid color-mix(in srgb, var(--superficie) 10%, transparent);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.summary-card h4 {
    margin: 0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.85;
    font-weight: 700;
    flex: 1;
    line-height: 1.4;
}

.summary-card .total-value {
    font-size: 22px;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 4px color-mix(in srgb, var(--texto) 20%, transparent);
}

/* ===================== Tabela de trechos ===================== */

.lista-container {
    max-height: 190px;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--superficie);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.data-table thead th {
    position: sticky;
    top: 0;
    background: var(--superficie);
    color: var(--text-secondary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.05em;
    padding: 8px;
    border-bottom: 2px solid var(--border-color);
    text-align: left;
    z-index: 2;
    white-space: nowrap;
}

.data-table tbody td {
    padding: 7px 8px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    white-space: nowrap;
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr:hover {
    background-color: var(--azul-10);
    cursor: pointer;
}

.data-table tr.linha-vazia td {
    color: var(--text-secondary);
    text-align: center;
    padding: 14px 8px;
    white-space: normal;
    cursor: default;
}

.data-table tr.linha-vazia:hover {
    background: transparent;
}

.btn-remover {
    border: none;
    background: transparent;
    color: var(--texto-3);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-remover:hover {
    background: var(--vermelho-20);
    color: var(--vermelho-60);
}

/* ===================== Banners (erros e avisos) ===================== */

.banner {
    padding: 10px 12px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.5;
}

/* Cada mensagem ocupa a altura que precisar (códigos longos quebram em vez de
   espremer); o banner cresce para mostrar tudo por inteiro, sem caixa de rolagem. */
.banner > div {
    overflow-wrap: anywhere;
}

.banner-erro {
    background: var(--vermelho-20);
    color: var(--vermelho-70);
    border: 1px solid var(--vermelho-60);
}

.banner-aviso {
    background: var(--ambar-10);
    color: var(--vermelho-80);
    border: 1px solid var(--ambar-30);
}

/* Respiro + separador entre avisos múltiplos, para distinguir um do outro. */
.banner-aviso > div + div {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--vermelho-80) 22%, transparent);
}

/* ===================== Km por clique ===================== */

.dica-clique {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.dica-clique svg {
    flex-shrink: 0;
}

/* Área de clique invisível sobre o traçado detalhado */
.km-click-area {
    cursor: crosshair;
}

#map.map-consultando,
#map.map-consultando .km-click-area {
    cursor: progress;
}

.km-popup-nome {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: var(--fonte);
    font-size: 11px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.km-popup-nome:focus {
    outline: none;
    border-color: var(--primary-color);
}

.km-popup-sub {
    margin: -4px 0 8px;
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.km-popup-acoes + .km-popup-acoes {
    margin-top: 6px;
}

.km-popup-btn-remover {
    color: var(--vermelho-60);
}

.km-popup-btn-remover:hover {
    background: var(--vermelho-60);
    border-color: var(--vermelho-60);
    color: var(--superficie);
}

/* ===================== Pontos salvos ===================== */

.label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contador-mini {
    font-size: 11px;
    color: var(--primary-color);
    font-weight: 600;
    white-space: nowrap;
}

.pontos-container {
    max-height: 150px;
}

.td-nome-ponto {
    max-width: 150px;
}

.ponto-nome-input {
    width: 100%;
    border: none;
    background: transparent;
    font-family: var(--fonte);
    font-size: 11px;
    color: var(--text-primary);
    padding: 2px 4px;
    border-radius: 4px;
    outline: none;
}

.ponto-nome-input:hover {
    background: var(--azul-10);
}

.ponto-nome-input:focus {
    background: var(--azul-10);
    box-shadow: 0 0 0 1px var(--primary-color);
}

.btn-baixar-pontos {
    padding: 9px 14px;
    font-size: 11.5px;
}

/* Botão pequeno para salvar os pontos do intervalo (início/fim) */
/* Botão "Salvar pontos do intervalo" ocultado (pouco usado; reduz poluição da barra).
   Para reativar, remover esta regra. */
#btn-salvar-intervalo {
    display: none;
}

.btn-intervalo {
    width: 100%;
    border: 1px solid var(--border-color);
    background: var(--superficie);
    color: var(--primary-color);
    font-family: var(--fonte);
    font-size: 11px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-intervalo:hover:not(:disabled) {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--superficie);
}

.btn-intervalo:disabled {
    color: var(--texto-3);
    cursor: not-allowed;
}

/* ===================== Controle da malha federal ===================== */

.malha-toggle a {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: var(--superficie);
    color: var(--text-secondary);
    font-family: var(--fonte);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

.malha-toggle a:hover {
    color: var(--primary-color);
}

/* Regra do painel: toggle ativo = fundo primário + texto branco */
.malha-toggle a.ativa {
    background: var(--primary-color);
    color: var(--superficie);
}

.malha-toggle a.carregando {
    cursor: progress;
}

.km-popup-titulo {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
}

.km-popup-acoes {
    display: flex;
    gap: 6px;
}

.km-popup-btn {
    border: 1px solid var(--border-color);
    background: var(--superficie);
    color: var(--primary-color);
    font-family: var(--fonte);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.km-popup-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--superficie);
}

.leaflet-popup-content-wrapper {
    border-radius: 8px;
    box-shadow: 0 2px 9px color-mix(in srgb, var(--texto) 15%, transparent);
}

.leaflet-popup-content {
    margin: 12px 14px;
    font-family: var(--fonte);
}

/* ===================== Mapa e legenda ===================== */

#map-wrap {
    flex: 1;
    position: relative;
    min-width: 0;
}

#map {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.legend {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1000;
    background: color-mix(in srgb, var(--superficie) 90%, transparent);
    padding: 11px;
    border-radius: 7px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 9px color-mix(in srgb, var(--texto) 10%, transparent);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
}

.legend-line {
    width: 22px;
    height: 4px;
    border-radius: 2px;
    flex-shrink: 0;
}

.legend-line-rodovia {
    background: var(--azul-80);
    opacity: 0.55;
}

.legend-line-recorte {
    background: var(--cobre-40);
}

.legend-line-lista {
    background: var(--azul-90);
}

/* Visão nacional: uma cor por UF (amostra da paleta usada no app.js). */
.legend-line-visao {
    background: linear-gradient(90deg, var(--azul-80), var(--azul-70), var(--teal-70), var(--cobre-40));
    opacity: 0.8;
}

.legend-line-contexto {
    background: var(--borda-forte);
    opacity: 0.5;
}

.legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

.legend-dot-km {
    background: var(--superficie);
    border: 2.5px solid var(--azul-80);
}

.legend-dot-ponto {
    background: var(--azul-80);
    border: 2px solid var(--superficie);
    box-shadow: 0 0 0 1px var(--azul-80);
}

.legend-line-malha {
    background: var(--texto-3);
    opacity: 0.55;
    height: 2px;
}

/* ---------------------- Orientação de trechos isolados ---------------------- */

/* Toggle "inverter sentido do km": aparece só em trechos isolados; destacado em âmbar
   por ser uma ação de correção que o usuário precisa avaliar conscientemente. */
.check-inverter {
    margin-top: 8px;
    padding: 7px 9px;
    background: var(--ambar-10);
    border: 1px solid var(--ambar-20);
    border-radius: 6px;
    color: var(--vermelho-80);
    font-weight: 600;
}

/* Rótulo permanente sobre cada ponta (km inicial em verde, km final em vermelho). */
.leaflet-tooltip.ponta-tooltip {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: 5px;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--texto) 18%, transparent);
    color: var(--texto);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 7px;
    max-width: 240px;
    white-space: normal;
}

.leaflet-tooltip.ponta-tooltip b {
    color: var(--texto);
}

/* ---------- a marca, dimensionada pela TINTA (pele Atlas v2) ----------
   A régua é a mesma aprovada nos painéis de concessão, com UMA medida declarada
   (`--altura-do-A`) e todo o resto derivado das métricas da peça ativa
   (identidade/marca-metricas.css). Medido contra o 2 de Julho:

                        cabeçalho   caixa    A     centro do A
     2 de Julho (ok)       80 px   71,7   48,0   11,9 px acima
     ferrovia (antes)      64 px   56,8   38,0    6,3 px acima   <- desalinhado
     ferrovia (agora)      64 px   54,7   46,0    centrado

   A peça do cabeçalho aqui é a SEM DESCRITOR, recortada na tinta
   (identidade/gerar_marca_cabecalho.py): a oficial gasta 33% da caixa em respiro
   e no descritor, que neste cabeçalho de 64 px sairia com menos de 4 px de
   altura, ilegível. Sem esse peso morto o A vai de 38 para 46 px, quase o
   tamanho aprovado no 2 de Julho (48), e o respiro da régua passa a vir do
   layout, que é onde ele deve estar.

   A proporção do A já estava certa (48/80 = 0,60; 38/64 = 0,59). O que faltava
   era o translateY: as peças oficiais são assimétricas (28 unidades de respiro
   acima do A, 14 abaixo), então centrar a CAIXA deixa a TINTA baixa. O fator vem
   do arquivo de métricas, não de ajuste a olho, e por isso vale para qualquer
   versão da peça. */
:root{
  --altura-do-A: 54px;
  --h-logo: calc(var(--altura-do-A) / var(--marca-fracao-a, 0.6693));
  /* calha fixa, proporcional à dos painéis de concessão (200px para A de 48):
     sem ela o título muda de posição a cada troca de peça */
  /* 158 px: no 2 de Julho o título começa 240 px depois da marca, com A de 48
     (razão 5,0). Com A de 38 aqui a mesma razão pede 190 px, dos quais 15 são o
     gap do cabeçalho e 15 o recuo do próprio bloco de título. */
  --largura-marca: 225px;
}
.logo{
  height: var(--h-logo);
  width: auto; object-fit: contain;
  /* centra a TINTA e não a caixa */
  transform: translateY(calc(-1 * var(--marca-desvio, 0.0551) * var(--h-logo)));
}
/* A CALHA É DA MARCA, não do bloco. `min-width` no .header-marca não reserva
   nada, porque esse bloco contém a marca E o título: o título continuava
   colando na peça. A calha vai na própria imagem, com a tinta ancorada à
   esquerda, e é o que faz o título começar sempre no mesmo x, qualquer que seja
   a versão da peça. */
.logo{ width: var(--largura-marca); object-position: left center; }
/* center, e não stretch: com stretch a imagem para de centralizar e a marca
   sobe mais alguns pixels, defeito já registrado no painel de concessões */
.header-marca{ align-items: center; }
/* o SVG da assinatura é desenhado em midnight: no tema escuro ele desapareceria */
[data-tema="escuro"] img.logo{ filter: invert(1) hue-rotate(180deg) saturate(1.15); }
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]) img.logo{ filter: invert(1) hue-rotate(180deg) saturate(1.15); }
}

/* --altura-do-A-escalada: assinatura completa numa barra de 90px, régua do 2 de Julho (A = 0,60 da barra). */

/* o cinza de fábrica do Leaflet vem de folha de CDN e não
   conhece o tema: enquanto o tile não chega, o mapa é um retângulo
   cinza fora da identidade. */
.leaflet-container{background:var(--fundo)}