/* Página /mapa: o mapa de normas (desenho da opção D), entre o cabeçalho e o rodapé do site.
   Tudo com escopo em .mapa-app, para não mexer no cabeçalho e no rodapé padrão. */
.mapa-app{
  --m-navy:#003a6e; --m-gold:#a88d3d; --m-bg:#f7f9fb; --m-ink:#0f172a; --m-muted:#64748b; --m-line:#e2e8f0; --m-rev:#9f1d35; --m-alt:#1d5fa8; --m-vinc:#b8a36a;
  position:relative;display:flex;flex-direction:column;height:calc(100vh - 104px);height:calc(100dvh - 104px);min-height:600px;background:var(--m-bg);color:var(--m-ink);font-family:'Inter',system-ui,sans-serif;overflow:hidden
}
.mapa-app button{font-family:inherit}
.m-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Título no centro do cabeçalho do site (só nesta página). Em telas largas ele sai da barra do mapa;
   abaixo de 1100px o cabeçalho não tem espaço e o título volta para a barra. */
.ca-nav-in{position:relative}
.ca-titulo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Inter',system-ui,sans-serif;font-size:32px;font-weight:900;line-height:1;letter-spacing:-.04em;color:#003a6e;white-space:nowrap;pointer-events:none}
.ca-titulo span{color:#a88d3d}
@media (min-width:1101px){.mapa-app .m-titulo{display:none}}
@media (max-width:1100px){.ca-titulo{display:none}}

/* barra de ferramentas: título, busca e filtros */
.m-barra{display:grid;grid-template-columns:1fr minmax(240px,460px) 1fr;align-items:center;gap:16px;padding:12px 22px;background:#fff;border-bottom:1px solid var(--m-line);flex:none;z-index:22}
.m-titulo{grid-column:1;font-size:32px;font-weight:900;line-height:1;letter-spacing:-.04em;color:var(--m-navy);white-space:nowrap;justify-self:start}
.m-titulo span{color:var(--m-gold)}
.m-busca{grid-column:2;position:relative;width:100%}
.m-busca input{width:100%;height:40px;border-radius:999px;border:1px solid var(--m-line);background:#f8fafc;color:var(--m-ink);padding:0 44px 0 40px;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s}
.m-busca input:focus{border-color:var(--m-gold);background:#fff;box-shadow:0 0 0 4px rgba(168,141,61,.12)}
.m-busca .lupa{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:13px}
.m-busca kbd{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:600 11px 'JetBrains Mono',monospace;color:#94a3b8;border:1px solid var(--m-line);border-radius:6px;padding:2px 6px}
.m-lista{position:absolute;top:48px;left:0;right:0;z-index:40;background:#fff;border:1px solid var(--m-line);border-radius:16px;padding:6px;box-shadow:0 24px 60px rgba(0,58,110,.16);max-height:60vh;overflow:auto}
.m-lista[hidden]{display:none}
.m-it{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;width:100%;text-align:left;background:none;border:0;padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--m-ink)}
.m-it b{font-size:14px;color:var(--m-navy)}
.m-it span{font-size:12px;color:var(--m-muted);align-self:center}
.m-it small{grid-column:1/3;font-size:12px;color:#94a3b8;line-height:1.4}
.m-it.on,.m-it:hover{background:#f9f5ea}
.m-vazio-busca{padding:12px;font-size:13px;color:var(--m-muted)}
.m-filtros{grid-column:3;display:flex;gap:6px;justify-self:end}
.m-filtros button{display:flex;align-items:center;gap:8px;border:1px solid var(--m-line);background:#fff;color:var(--m-navy);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;cursor:pointer}
.m-filtros button i{width:9px;height:9px;border-radius:50%}
.m-filtros button.off{opacity:.4}

/* palco do grafo */
.m-palco{position:relative;flex:1;min-height:0}
#tela{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#tela:active{cursor:grabbing}
.faixa{fill:#fff;stroke:#eef2f6}
.faixa-t{font:800 10.5px Inter,sans-serif;letter-spacing:.18em;fill:#94a3b8;text-transform:uppercase}
.faixa-t tspan{fill:var(--m-navy);letter-spacing:0}
.lado{font:900 11px Inter,sans-serif;letter-spacing:.24em;fill:var(--m-muted)}
.lado-seta{fill:var(--m-gold)}
.eixo-l{stroke:#eef2f6}
.eixo-t{font:600 10.5px 'JetBrains Mono',monospace;fill:#a3b1c2;text-anchor:middle}
.lig{fill:none}
.no{cursor:pointer}
.no text{font:700 11px Inter,sans-serif;fill:var(--m-navy);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.no.fut{opacity:.08;pointer-events:none}
.lig.fut{opacity:.03!important}
.centro{cursor:pointer}
.centro-nm{font:900 17px Inter,sans-serif;fill:#fff;text-anchor:middle}
.centro-dt{font:600 11px 'JetBrains Mono',monospace;fill:rgba(255,255,255,.62);text-anchor:middle}
.centro-st{font:800 9.5px Inter,sans-serif;letter-spacing:.12em;text-anchor:middle}
.marca{font:900 150px Inter,sans-serif;letter-spacing:-.05em;fill:none;stroke:rgba(168,141,61,.13);stroke-width:1.4;text-anchor:middle;pointer-events:none}
.m-aviso{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-size:15px;color:var(--m-muted);background:var(--m-bg);z-index:5}
.m-aviso[hidden]{display:none}
.m-aviso a{color:var(--m-gold);font-weight:700}

/* controles (zoom e história) */
.m-ctrl{position:absolute;right:18px;bottom:18px;z-index:20;display:flex;align-items:center;background:#fff;border:1px solid var(--m-line);border-radius:14px;box-shadow:0 10px 30px rgba(0,58,110,.08);overflow:hidden}
.m-ctrl button{border:0;background:none;width:44px;height:44px;font-size:20px;font-weight:700;color:var(--m-navy);cursor:pointer}
.m-ctrl button:hover{background:#f9f5ea;color:var(--m-gold)}
.m-ctrl span{min-width:56px;text-align:center;font:700 12px 'JetBrains Mono',monospace;color:var(--m-muted);border-left:1px solid var(--m-line);border-right:1px solid var(--m-line);height:44px;line-height:44px}
.m-ctrl .ajusta{width:auto;padding:0 14px;font-size:12.5px;border-left:1px solid var(--m-line)}
.m-tempo{position:absolute;left:18px;bottom:18px;z-index:20;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--m-line);border-radius:14px;padding:6px 14px 6px 6px;box-shadow:0 10px 30px rgba(0,58,110,.08)}
.m-tempo button{border:0;background:var(--m-navy);color:#fff;border-radius:10px;padding:10px 14px;font-size:12.5px;font-weight:800;cursor:pointer}
.m-tempo button:hover{background:var(--m-gold)}
.m-tempo .ano{font:700 13px 'JetBrains Mono',monospace;color:var(--m-gold)}
.m-tempo .ev{font-size:12.5px;color:var(--m-muted);max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* dica flutuante */
.m-dica{position:fixed;z-index:60;pointer-events:none;background:#fff;border:1px solid var(--m-line);border-radius:14px;padding:12px 14px;max-width:320px;box-shadow:0 18px 44px rgba(0,58,110,.16);opacity:0;transition:opacity .12s;font-family:'Inter',system-ui,sans-serif}
.m-dica.on{opacity:1}
.m-dica .r{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.m-dica b{display:block;font-size:14px;color:#003a6e}
.m-dica .d{font:600 11.5px 'JetBrains Mono',monospace;color:#94a3b8;margin:3px 0 6px}
.m-dica p{margin:0;font-size:12.5px;line-height:1.55;color:#64748b}
.m-dica small{display:block;margin-top:8px;font-size:11px;color:#a88d3d;font-weight:700}

/* gaveta de detalhes e linhagem */
.m-gaveta{position:absolute;top:0;right:0;bottom:0;width:390px;z-index:25;background:#fff;border-left:1px solid var(--m-line);box-shadow:-20px 0 50px rgba(0,58,110,.1);transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);overflow:auto;padding:22px 22px 30px}
.m-gaveta.on{transform:none}
.m-gaveta .fecha{float:right;border:1px solid var(--m-line);background:#fff;border-radius:999px;width:34px;height:34px;cursor:pointer;color:var(--m-muted);font-size:16px}
.m-gaveta .pn-fam{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--m-gold)}
.m-gaveta h2{margin:8px 0 12px;font-size:23px;line-height:1.15;font-weight:900;color:var(--m-navy)}
.m-gaveta .selo{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 14px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;background:var(--m-navy);color:#fff;white-space:nowrap}
.m-gaveta .selo .pt{width:7px;height:7px;border-radius:50%;background:#6ee7b7}
.m-gaveta .selo.warn .pt{background:#d9bd5c}.m-gaveta .selo.part .pt{background:#c9a445}
.m-gaveta .selo.dead{background:#7f1d2e}.m-gaveta .selo.dead .pt{background:#fff}
.m-gaveta .selo.na .pt{background:#94a3b8}
.m-gaveta .pn-ass{font-size:13.5px;line-height:1.6;color:var(--m-muted);margin:14px 0}
.m-gaveta .pn-open{font-size:13px;font-weight:700;color:var(--m-gold);text-decoration:none}
.m-gaveta .pn-cont{display:flex;flex-wrap:wrap;gap:6px 14px;margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--m-line)}
.m-gaveta .pn-k{font-size:12.5px;color:var(--m-muted)}
.m-gaveta .pn-k b{font-size:15px}
.m-gaveta .pn-sec{margin-top:18px}
.m-gaveta .pn-sec h4{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--m-muted);font-weight:800}
.m-gaveta .pn-sec h4 i{width:10px;height:3px;border-radius:2px}
.m-gaveta .pn-sec h4 small{margin-left:auto;color:#94a3b8;letter-spacing:0}
.m-gaveta .pn-list{display:flex;flex-direction:column;gap:2px}
.m-gaveta .pn-it{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:7px 8px;border-radius:9px;cursor:pointer;text-align:left;font-size:13.5px;color:var(--m-ink)}
.m-gaveta .pn-it:hover{background:#f9f5ea}
.m-gaveta .pn-dot{width:7px;height:7px;border-radius:50%}
.m-gaveta .pn-nm{flex:1;font-weight:600;color:var(--m-navy)}
.m-gaveta .pn-dt{font:600 11.5px 'JetBrains Mono',monospace;color:#94a3b8}
.m-gaveta .pn-mais{font-size:12px;color:#94a3b8;padding:4px 8px}
.m-gaveta .pn-fora{font-size:12px;line-height:1.7;color:#94a3b8;margin:0}
.m-gaveta .lin{display:flex;flex-direction:column}
.m-gaveta .lin-g{display:flex;flex-direction:column;gap:2px;border:1px solid var(--m-line);border-radius:12px;padding:4px}
.m-gaveta .lin-eu{border-color:var(--m-gold);background:#f9f5ea}
.m-gaveta .lin-seta{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--m-rev);text-align:center;padding:5px 0}

.m-desk{display:none}

@media (max-width:860px){
  .mapa-app{height:calc(100vh - 84px);height:calc(100dvh - 84px);min-height:560px}
  .m-barra{display:flex;flex-wrap:wrap;gap:8px;padding:10px 12px}
  .m-titulo{font-size:24px;flex:1 1 100%;text-align:center}
  .m-filtros,.m-ctrl,.m-tempo{display:none}
  .m-desk{display:block;position:absolute;left:50%;bottom:14px;transform:translateX(-50%);white-space:nowrap;background:var(--m-navy);color:#fff;border-radius:999px;padding:7px 16px;font-size:12px;font-weight:700;box-shadow:0 6px 18px rgba(0,58,110,.22);pointer-events:none}
  .m-desk i{color:var(--m-gold);margin-right:4px}
  .m-busca{flex:1 1 100%}
  .m-filtros button{padding:5px 10px;font-size:11px}
  .m-tempo .ev{display:none}.m-tempo{left:10px;bottom:10px}
  .m-ctrl{right:10px;bottom:66px}.m-ctrl button{width:40px;height:40px}.m-ctrl span{height:40px;line-height:40px;min-width:48px}
  .m-gaveta{width:100%}
}