/* =====================================================================
   RADAR CIBER BRASIL — cabeçalho, navegação e rodapé compartilhados
   (notícias e ferramentas). Usa os tokens de /tema.css. Marcação gerada
   por /cabecalho.js.
   - celular (<760px): topo fixo (marca + status + Atualizar) e barra
     inferior com 5 itens: Brasil · Mundo · Mapa · Ferramentas · Mais
   - tablet (760–1179px): 2 linhas — marca | destinos / visões
   - desktop (>=1180px): 1 linha — marca | visões (centro) | destinos
   ===================================================================== */
:root{--topo-h:60px;--nav-h:66px;--rodape-h:30px;--largura:1240px;--gut:16px}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- cabeçalho ---------- */
.topo{position:relative;z-index:40;flex:none}
.topo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,13,36,.9),rgba(8,13,36,.74));
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border-bottom:1px solid var(--borda)}
.topo-in{max-width:var(--largura);margin:0 auto;height:var(--topo-h);display:flex;align-items:center;gap:12px;
  padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
.marca{display:flex;align-items:center;gap:11px;flex:1 1 auto;min-width:0;text-decoration:none;color:var(--txt);border-radius:var(--r-md)}
.marca-txt{min-width:0;display:flex;flex-direction:column}
.marca-nome{font-family:var(--fonte-titulo);font-weight:700;font-size:17px;line-height:1.1;white-space:nowrap;letter-spacing:-.015em}
.marca-status{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;line-height:1.2;color:var(--txt-2);min-width:0;white-space:nowrap;font-variant-numeric:tabular-nums}
.marca-status .ponto-vivo{flex:none;width:7px;height:7px}
.marca-status .sep{flex:none;color:var(--txt-3)}
.marca-sub{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--txt-2)}
.ao-vivo{flex:none;font-weight:600;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--verde-2)}
.ao-vivo::after{content:"ao vivo"}
#st{overflow:hidden;text-overflow:ellipsis;min-width:0}
body.offline .marca-status .ponto-vivo,body.offline .rodape .ponto-vivo{background:var(--sev-critica);animation:none}
body.offline .ao-vivo{color:var(--sev-critica)} body.offline .ao-vivo::after{content:"offline"}

/* logo: mini radar com varredura */
.logo{width:36px;height:36px;flex:none;border-radius:50%;position:relative;overflow:hidden;
  background:radial-gradient(circle,transparent 0 31%,rgba(0,212,126,.35) 32% 34%,transparent 35% 62%,rgba(0,212,126,.25) 63% 65%,transparent 66%),
             radial-gradient(circle,rgba(0,212,126,.16),rgba(8,13,36,.9) 72%);
  box-shadow:inset 0 0 0 1.5px rgba(0,212,126,.6),0 0 18px -4px rgba(0,212,126,.55)}
.logo::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(92,240,176,.8),rgba(0,212,126,0) 26%,transparent);
  animation:varre 3.4s linear infinite;will-change:transform}
.logo::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:var(--amarelo);top:28%;left:60%;box-shadow:0 0 8px var(--amarelo);animation:blip 3.4s linear infinite}
@keyframes varre{to{transform:rotate(1turn)}}
@keyframes blip{0%,8%{opacity:1}40%,100%{opacity:.15}}

/* Atualizar: botão só com ícone (nome em aria-label, dica em title) */
#btAtualizar{width:44px;height:44px;min-height:0;padding:0;justify-content:center;flex:none;color:var(--txt-2);border-radius:var(--r-md)}
#btAtualizar:hover{color:var(--txt)}
#btAtualizar .bt-txt{display:none}
#btAtualizar.girando svg{animation:varre 1s linear infinite}
#btAtualizar:disabled{opacity:.7;cursor:progress}

/* ---------- navegação: no celular é a barra inferior (Brasil · Mundo · Mapa · Ferramentas · Mais) ---------- */
#abas{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;
  padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
  background:rgba(8,13,36,.92);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-top:1px solid var(--borda)}
.seg,.destinos{display:contents}
.seg .aba-extra,.aba-mapa .vivo{display:none}
.seg [data-aba="brasil"]{order:1} .seg [data-aba="mundo"]{order:2} .aba-mapa{order:3} .aba-ferr{order:4} .aba-mais{order:5}
.aba{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:52px;padding:0 2px;
  border:0;border-radius:12px;background:none;color:var(--txt-3);font:inherit;font-size:11px;font-weight:500;line-height:1.1;cursor:pointer;text-decoration:none;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;transition:color var(--rapido) var(--ease)}
.aba>span:not(.ic-mapa):not(.vivo){max-width:100%;overflow:hidden;text-overflow:ellipsis}
.aba svg.i{width:22px;height:22px;transition:transform var(--medio) var(--ease)}
.aba:hover{color:var(--txt-2)}
.aba.ativo,.aba-mais[aria-expanded="true"]{color:var(--txt)}
.aba.ativo svg.i{color:var(--verde-2);transform:translateY(-2px)}
.aba:active svg.i{transform:scale(.88)}
.aba .rl{display:none}
.aba-mapa{color:var(--amarelo-2)}
.aba-mapa .ic-mapa{width:38px;height:38px;margin-top:-18px;border-radius:50%;display:grid;place-items:center;background:var(--grad-marca);color:#04140c;
  box-shadow:0 0 0 4px var(--anil-900),0 8px 22px -6px rgba(0,212,126,.7)}
.aba-mapa .ic-mapa svg.i{width:20px;height:20px;stroke-width:2.1}
.aba-mapa:hover{color:var(--amarelo)}
/* indicador deslizante: só transform/opacity */
.aba-ind{position:absolute;left:0;top:0;width:100px;height:3px;border-radius:3px;background:var(--grad-marca);box-shadow:0 0 12px rgba(0,212,126,.7);
  transform-origin:0 0;opacity:0;pointer-events:none}
.aba-ind.pronto{transition:transform var(--medio) var(--ease),opacity var(--rapido)}

/* "Mais" (celular): popover ancorado acima do botão, com Todas · Falhas exploradas · Fontes */
.folha-mais{position:absolute;right:max(10px,env(safe-area-inset-right));bottom:calc(100% + 12px);width:min(320px,calc(100vw - 20px));padding:8px;display:grid;gap:2px;
  border-radius:var(--r-lg);border:1px solid var(--borda-forte);background:linear-gradient(180deg,rgba(22,32,76,.985),rgba(11,17,46,.985));
  box-shadow:0 26px 50px -18px rgba(0,0,0,.9),0 0 34px -18px rgba(0,212,126,.45);
  transform-origin:calc(100% - 34px) 100%;opacity:0;transform:translateY(10px) scale(.96);visibility:hidden;pointer-events:none;
  transition:opacity var(--rapido) var(--ease),transform var(--medio) var(--ease),visibility 0s linear var(--medio)}
.folha-mais.aberta{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity var(--rapido) var(--ease),transform var(--medio) var(--ease)}
.folha-mais::after{content:"";position:absolute;bottom:-7px;right:calc((100vw - 12px) / 10 - 13px);width:12px;height:12px;transform:rotate(45deg);
  background:rgba(11,17,46,.985);border-right:1px solid var(--borda-forte);border-bottom:1px solid var(--borda-forte);border-bottom-right-radius:3px}
.folha-tit{margin:4px 10px 6px;font:600 11px var(--fonte-titulo);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3)}
.folha-item{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 12px 8px 8px;border:0;border-radius:var(--r-md);
  background:none;color:var(--txt);font:inherit;text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color var(--rapido)}
.folha-item:hover{background:rgba(255,255,255,.04)}
.folha-item:active{background:rgba(255,255,255,.07)}
.fi-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:var(--txt-2);background:rgba(255,255,255,.04);border:1px solid var(--borda)}
.fi-ic svg.i{width:19px;height:19px}
.fi-txt{flex:1;min-width:0;display:grid;gap:1px}
.fi-txt b{font:600 14.5px/1.25 var(--fonte-titulo);letter-spacing:-.01em}
.fi-txt small{font-size:12px;line-height:1.3;color:var(--txt-3)}
.fi-txt .kev{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:6px;font:500 10.5px/1.4 var(--fonte-mono);vertical-align:1px;color:#ffb8c4;background:rgba(255,77,109,.14)}
.folha-item.ativo{background:rgba(0,212,126,.1)}
.folha-item.ativo .fi-ic{color:var(--verde-2);border-color:rgba(0,212,126,.5);background:rgba(0,212,126,.1)}
.folha-item.ativo::after{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--verde);box-shadow:0 0 10px var(--verde)}
.veu-mais{position:fixed;inset:0;z-index:44;background:rgba(2,4,12,.55);opacity:0;pointer-events:none;transition:opacity var(--medio) var(--ease)}
.veu-mais.on{opacity:1;pointer-events:auto}

/* ---------- voltar ao topo ---------- */
.bt-topo{position:fixed;z-index:35;right:max(16px,env(safe-area-inset-right));bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);
  width:46px;height:46px;padding:0;justify-content:center;border-radius:50%;border-color:rgba(0,212,126,.45);background:var(--vidro-forte);color:var(--verde-2);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 12px 28px -12px rgba(0,0,0,.9),0 0 18px -8px rgba(0,212,126,.7);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px) scale(.9);
  transition:opacity var(--medio) var(--ease),transform var(--medio) var(--ease),visibility 0s linear var(--medio)}
.bt-topo.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity var(--medio) var(--ease),transform var(--medio) var(--ease)}
.bt-topo.on:hover{transform:translateY(-2px)}
.bt-topo svg.i{width:20px;height:20px;stroke-width:2.1}

/* ---------- rodapé fino (só desktop) ---------- */
.rodape{display:none}

@media (max-width:380px){
  .aba{font-size:10.5px}
  .marca-nome{font-size:16px}
}

/* ======================== tablet (>=760px) ======================== */
@media (min-width:760px){
  :root{--gut:24px}
  /* cabeçalho em 2 linhas: [marca + status | Mapa · Ferramentas · Atualizar] / [visões em controle segmentado] */
  .topo-in{height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"marca dest" "seg seg";column-gap:16px;row-gap:0;
    align-items:center;padding:0 var(--gut) 10px}
  .marca{grid-area:marca;position:relative;z-index:2;justify-self:start;max-width:100%;min-height:58px}
  /* a <nav> vira uma subgrade do cabeçalho: suas partes caem nas áreas "seg" e "dest" */
  #abas{grid-column:1/-1;grid-row:1/-1;position:static;z-index:auto;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;gap:normal;align-items:center;
    padding:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0;pointer-events:none}
  .seg{grid-area:seg;pointer-events:auto;position:relative;display:flex;gap:2px;min-width:0;padding:3px;border-radius:999px;border:1px solid var(--borda);
    background:rgba(5,8,22,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.04);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .seg::-webkit-scrollbar{display:none}
  .seg .aba-extra{display:flex}
  .seg .aba{order:0;flex:1 0 auto;flex-direction:row;gap:8px;min-height:38px;padding:0 16px;border-radius:999px;font-size:14px;color:var(--txt-2);isolation:isolate}
  .seg .aba::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(140,160,255,.17),rgba(140,160,255,.06));
    box-shadow:inset 0 0 0 1px rgba(140,160,255,.24);opacity:0;transition:opacity var(--rapido) var(--ease)}
  .seg .aba:hover{color:var(--txt)}
  .seg .aba:not(.ativo):hover::before{opacity:.4}
  .seg .aba.ativo{color:var(--txt)}
  .seg .aba.ativo::before{opacity:1}
  .seg .aba svg.i{width:17px;height:17px}
  .seg .aba.ativo svg.i{transform:none}
  .aba-ind{top:auto;bottom:4px;height:2px}
  .destinos{grid-area:dest;pointer-events:auto;display:flex;align-items:center;gap:8px;justify-self:end;margin-right:56px}
  .sem-atualizar .destinos{margin-right:0}
  .destinos .aba{order:0;flex-direction:row;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;font-size:13.5px;color:var(--txt);
    border:1px solid var(--borda-forte);background:rgba(255,255,255,.03);transition:transform var(--rapido) var(--ease),border-color var(--rapido),background-color var(--rapido),color var(--rapido)}
  .destinos .aba:hover{transform:translateY(-1px)}
  .destinos .aba:active{transform:none}
  .destinos .aba svg.i{width:17px;height:17px}
  .aba-ferr svg.i{color:var(--txt-2)}
  .aba-ferr:hover{border-color:rgba(76,201,240,.55);background:rgba(76,201,240,.08)}
  .aba-ferr:hover svg.i{color:var(--ciano)}
  .destinos .aba-ferr.ativo{border-color:rgba(0,212,126,.6);background:rgba(0,212,126,.12);box-shadow:inset 0 0 0 1px rgba(0,212,126,.18)}
  .destinos .aba-ferr.ativo svg.i{color:var(--verde-2);transform:none}
  /* destino principal: contorno com o gradiente da marca + luz "ao vivo" */
  .destinos .aba-mapa{padding-left:14px;border-color:transparent;color:var(--txt);
    background:linear-gradient(180deg,rgba(19,29,70,.96),rgba(11,18,48,.96)) padding-box,var(--grad-marca) border-box;box-shadow:0 6px 20px -12px rgba(0,212,126,.8)}
  .destinos .aba-mapa:hover{color:var(--amarelo-2)}
  .aba-mapa .ic-mapa,.aba-mapa .rc{display:none} .aba-mapa .rl{display:inline}
  .aba-mapa .vivo{display:block;position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--verde);box-shadow:0 0 8px var(--verde)}
  .aba-mapa .vivo::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1.5px solid var(--verde);animation:pulso 2.2s var(--ease) infinite;will-change:transform}
  @keyframes pulso{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(2.6);opacity:0}}
  .aba-mais,.folha-mais,.veu-mais{display:none!important}
  #btAtualizar{grid-area:dest;justify-self:end;align-self:center;position:relative;z-index:2}
  .bt-topo{bottom:20px;right:max(20px,calc((100vw - var(--largura)) / 2 + var(--gut) + 16px))}
}

/* ============ desktop (>=900px): rodapé fino ============ */
@media (min-width:900px){
  .bt-topo{bottom:calc(var(--rodape-h) + 18px)}
  .rodape{display:block;flex:none;position:relative;z-index:20;border-top:1px solid var(--borda);background:rgba(8,13,36,.72);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .rodape-in{max-width:var(--largura);margin:0 auto;height:var(--rodape-h);padding:0 var(--gut);display:flex;align-items:center;gap:16px;
    font-size:11.5px;color:var(--txt-3);white-space:nowrap}
  .rodape-st{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;overflow:hidden}
  .rodape-st span:last-child{overflow:hidden;text-overflow:ellipsis}
  .rodape .ponto-vivo{flex:none;width:6px;height:6px;animation:none;box-shadow:0 0 8px var(--verde)}
  .rodape-dev b{font-family:var(--fonte-mono);font-weight:500;letter-spacing:-.01em}
}

/* ============ cabeçalho desktop (>=1180px): uma linha só ============ */
/* colunas laterais iguais (visões no centro); se um lado precisar de mais espaço ele cresce e o centro se desloca — nunca sobrepõe */
@media (min-width:1180px){
  :root{--topo-h:66px}
  .topo-in{height:var(--topo-h);grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);grid-template-areas:"marca seg dest";
    column-gap:20px;padding-bottom:0}
  .marca{flex:none;min-height:0}
  .marca-txt{max-width:260px}
  .seg{overflow:visible;justify-self:center}
  .seg .aba{flex:none;min-height:32px;padding:0 15px;font-size:13.5px}
  .seg .aba svg.i{display:none}
  .destinos{margin-right:52px}
  .destinos .aba{min-height:40px}
  #btAtualizar{width:40px;height:40px}
}
@media (min-width:1280px){
  .seg .aba{gap:7px;padding:0 15px 0 13px}
  .seg .aba svg.i{display:block;width:16px;height:16px}
}
@media (min-width:1400px){
  :root{--largura:1360px}
}
@media (min-width:1500px){
  :root{--largura:1440px}
  .marca-txt{max-width:320px}
  .seg .rc{display:none} .seg .rl{display:inline}
}

@media print{
  .topo,#abas,.rodape,.bt-topo,.veu-mais{display:none!important}
}