/*
* Suporte Edu — portal/panorama.html (fundação da nova página, 17/09/2026;
* correções de 17/09 e 20/09/2026; redesign visual — mapa no hero,
* escopo Rede Municipal — em 20/09/2026)
*
* Específico desta página. Depende de tokens.css e base.css já
* carregados antes (usa var(--ink), var(--paper), var(--sans) etc.).
* Reaproveita a paleta e a tipografia já em produção — não introduz cor
* ou fonte nova fora do amarelo de marca (#FCD34D) já usado no logo e no
* selo "preview". Deliberadamente NÃO define nenhuma variável de risco
* (o semáforo --risco-critico/--risco-atencao/--risco-estavel existia
* apenas na versão anterior do Panorama, removida do ar na etapa de
* substituição controlada da página inicial e preservada só no histórico
* do Git) — esta página não tem semáforo nem classificação qualitativa.
* O amarelo é usado SOMENTE para
* destaque/seleção (título, selo de escopo, município selecionado no
* mapa, valor no tooltip) — nunca para representar desempenho.
*/
.wrap{max-width:1100px;margin:0 auto;padding:0 24px 80px;}
.visually-hidden{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
position:absolute;left:-999px;top:0;background:#fff;color:var(--ink);padding:10px 16px;
border-radius:0 0 8px 0;z-index:100;font-size:13px;font-weight:600;
}
.skip-link:focus{left:0;}
/* ---------------- Hero (topo em degradê, com o mapa em destaque) ---------------- */
.hero{
background:linear-gradient(135deg, #1E1B4B 0%, #4338CA 55%, #6D28D9 100%);
color:#fff;padding:22px 0 32px;
}
.hero .wrap{padding-bottom:0;}
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
/* .brand agora é um para index.html (etapa 1 de navegação,
20/09/2026) — reseta a aparência padrão de link (sem sublinhado, cor
herdada) para preservar exatamente a aparência anterior, e ganha um
contorno de foco visível próprio (mesmo amarelo de marca usado em
todo o resto da página para foco/seleção). */
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;border-radius:10px;}
.brand:focus-visible{outline:2px solid #FCD34D;outline-offset:3px;}
.brand-badge{width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,0.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.35);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.brand-word{font-family:var(--serif);font-weight:700;font-size:16px;color:#fff;letter-spacing:-0.01em;}
.brand-word em{font-style:normal;color:#FCD34D;}
.preview-badge{
font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
background:rgba(255,255,255,0.14);color:#FDE9C4;padding:4px 9px;border-radius:99px;
border:1px solid rgba(255,255,255,0.22);
}
/* Grade principal do hero: mapa (≈52%) à esquerda, conteúdo (≈48%) à
direita no desktop. Em ≤640px vira coluna única — a ORDEM VISUAL nessa
largura é ditada pela posição real do
no DOM (movido por JS entre #mapaSlotDesktop e #mapaSlotMobile — ver
panorama-page.js:posicionarMapa()), nunca só por CSS, para que a ordem
de foco/leitura combine com a ordem visual nos dois tamanhos de tela. */
.hero-grid{
display:grid;grid-template-columns:58fr 42fr;gap:30px;align-items:start;margin-top:26px;
}
.hero-mapa-col, .hero-conteudo-col{min-width:0;}
@media (max-width:640px){
.hero-grid{grid-template-columns:1fr;gap:0;margin-top:20px;}
}
.destaque-amarelo{color:#FCD34D;font-style:normal;}
.top h1{font-family:var(--serif);font-weight:700;font-size:clamp(24px,3.6vw,34px);margin:0 0 10px;letter-spacing:-0.02em;}
.top .lead{font-size:14px;line-height:1.65;color:#E4E3F3;max-width:100%;margin:0;}
.busca-row{margin-top:20px;max-width:520px;}
.busca-label{display:block;font-size:12.5px;font-weight:600;color:#C9C6EE;margin-bottom:6px;}
.busca-wrap{position:relative;}
.busca-wrap input{
width:100%;padding:12px 14px;border-radius:11px;border:1.5px solid rgba(255,255,255,0.28);
background:rgba(255,255,255,0.1);color:#fff;font-size:15px;font-family:var(--sans);
}
.busca-wrap input::placeholder{color:#C9C6EE;}
.busca-wrap input:focus-visible{outline:2px solid #FCD34D;outline-offset:1px;background:rgba(255,255,255,0.16);}
.autocomplete-list{
position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
background:var(--paper-2);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
max-height:320px;overflow-y:auto;overscroll-behavior:contain;display:none;
}
.autocomplete-list.open{display:block;}
.autocomplete-item{padding:10px 14px;font-size:13.5px;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line);word-break:break-word;}
.autocomplete-item:last-child{border-bottom:none;}
.autocomplete-item:hover, .autocomplete-item.active{background:var(--paper);}
.autocomplete-item .tipo{font-family:var(--mono);font-size:10px;color:var(--muted);text-transform:uppercase;margin-right:6px;}
.autocomplete-empty{padding:12px 14px;font-size:13px;color:var(--muted);}
/* Acabamento de 20/09/2026 (item 5): no mobile, limita a lista a uma
fração da altura da tela (nunca a tela quase inteira, mesmo com muitos
resultados) — a rolagem interna já existente (overflow-y:auto) cuida
do restante, sem gerar rolagem horizontal (largura sempre 100% do
campo de busca) nem cobrir permanentemente os controles seguintes,
já que a lista some ao selecionar um item ou perder o foco. */
@media (max-width:640px){
.autocomplete-list{max-height:min(320px, 48vh);}
}
/* ---------------- Indicador + etapa + legenda (coluna de conteúdo do hero) ---------------- */
.indicador-section-hero{margin-top:22px;}
/* Correção pontual de 20/09/2026: indicador e etapa viviam num único
flex-row com 4 itens soltos (rótulo, select, rótulo, select); em
larguras intermediárias de desktop/tablet (a coluna de conteúdo do
hero é mais estreita que uma página inteira), o flex-wrap quebrava
ENTRE o rótulo "Etapa:" e o próprio