/* ============================================================================
 * ineteduca-brand.css — identidade visual iNeteduca (navy + ciano).
 *
 * Fonte da verdade das cores da marca e do cabeçalho escuro padrão.
 * Kit de logos: /img/brand/ (ver img/brand/README.md).
 * Página modelo: /modelo-cabecalho.html
 *
 * Como usar numa página:
 *   <link rel="stylesheet" href="/css/ineteduca-brand.css?v=1">
 *   <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
 *
 * ATENÇÃO: /css/** tem cache de 1 h no Hosting — ao editar, suba o ?v=N nas páginas.
 * Este arquivo NÃO usa Tailwind, então não exige `npm run build:css`.
 * ==========================================================================*/

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* marca */
  --inet-navy-900:#0A1D4D;   /* fundo institucional, base do cabeçalho */
  --inet-navy-800:#102C70;   /* NAVY OFICIAL — o mesmo da logo */
  --inet-navy-700:#1A3A8F;
  --inet-navy-600:#1E45AE;   /* navy claro, gradientes e links */
  --inet-cyan:#25D0E8;       /* acento brilho */
  --inet-cyan-700:#0FA9C8;   /* acento sobre fundo claro */

  /* apoio */
  --inet-ok:#12A05F;
  --inet-alert:#FF5C7A;
  --inet-warn:#F2B33D;

  /* superfícies — tema claro */
  --inet-page:#EEF1F8;
  --inet-surface:#FFFFFF;
  --inet-surface-2:#F6F8FD;
  --inet-line:#E3E8F4;
  --inet-txt:#1B2440;
  --inet-txt-2:#5C688A;

  /* gradientes prontos */
  --inet-grad-header:linear-gradient(105deg,var(--inet-navy-900) 0%,var(--inet-navy-800) 52%,#16357F 100%);
  --inet-grad-accent:linear-gradient(90deg,var(--inet-cyan-700),var(--inet-cyan));

  /* forma e movimento */
  --inet-r-lg:20px; --inet-r-md:14px; --inet-r-sm:10px;
  --inet-ease:cubic-bezier(.32,.72,0,1);
  --inet-shadow:0 1px 2px rgba(16,44,112,.05);
  --inet-shadow-pop:0 26px 60px -24px rgba(10,25,70,.55);

  /* camadas */
  --inet-z-hdr:50; --inet-z-pop:60; --inet-z-dock:70;
}

html.dark{
  --inet-page:#070F26;
  --inet-surface:#0F1B3D;
  --inet-surface-2:#132349;
  --inet-line:#1E2B57;
  --inet-txt:#EAF0FF;
  --inet-txt-2:#94A3CC;
  --inet-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* ------------------------------------------------------ cabeçalho .inh --- */
.inh{
  position:sticky; top:0; z-index:var(--inet-z-hdr);
  background:var(--inet-grad-header); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 10px 30px -18px rgba(6,15,45,.9);
  transition:box-shadow .25s var(--inet-ease);
}
.inh::after{                              /* fio de acento na base */
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:0; pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--inet-cyan-700) 22%,var(--inet-cyan) 50%,var(--inet-cyan-700) 78%,transparent);
  opacity:.85;
}
.inh.is-stuck{box-shadow:0 12px 34px -20px rgba(6,15,45,.95)}

.inh-bar{
  max-width:1360px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; gap:18px;
  transition:padding .25s var(--inet-ease);
}
.inh.is-stuck .inh-bar{padding-top:9px;padding-bottom:9px}

/* marca */
.inh-brand{display:flex;align-items:center;gap:16px;min-width:0}
.inh-logo{height:32px;width:auto;display:block;transition:height .25s var(--inet-ease)}
.inh.is-stuck .inh-logo{height:27px}
.inh-logo-mini{display:none}
.inh-div{width:1px;height:34px;flex:0 0 auto;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.28),transparent)}

/* js/branding.js marca toda logo horizontal com .inet-logo-horizontal e põe uma
   placa branca atrás (feito p/ cabeçalho CLARO). Aqui a regra vale SÓ para a
   assinatura iNeteduca, que já é branca e não precisa de placa.
   CUIDADO: não generalizar para `.inh .inet-logo-horizontal` — isso apagaria
   também a placa da logo do município (brasão escuro sobre navy = invisível). */
.inh .inh-logo.inet-logo-horizontal{
  background:transparent !important; padding:0 !important;
  border-radius:0 !important; max-width:none !important;
}

.inh-org{display:flex;align-items:center;gap:11px;min-width:0}
.inh-org-logo{
  width:40px;height:40px;flex:0 0 auto;border-radius:12px;object-fit:contain;
  background:rgba(255,255,255,.96);padding:4px;
  box-shadow:0 2px 10px -4px rgba(0,0,0,.5);
}
/* Sem logo do sistema, fica SÓ a assinatura iNeteduca à esquerda: nada de
   ícone genérico de prédio nem de placeholder cinza (decisão do usuário). */
.inh-org-fallback,
.inh #defaultSystemIcon,
.inh-legacy #defaultSystemIcon,
.inh img[src*="placehold.co"],
.inh-legacy img[src*="placehold.co"],
.inh img.inh-org-logo:not([src]),
.inh img.inh-org-logo[src=""]{display:none !important}
.inh-org-logo.hidden{display:none !important}
/* .inh-pill traz `display:inline-flex` e o padronizarAcoes o aplica a TODO botão
   da linha de ações — inclusive aos que a página deixa com `.hidden` até alguma
   condição (modo de edição, permissão). Como este arquivo carrega depois do
   Tailwind, o inline-flex ganhava do `.hidden` e o botão aparecia para todo
   mundo. Aqui o `.hidden` volta a mandar. */
.inh-pill.hidden{display:none !important}

/* Marca do município/sistema: SEMPRE sobre placa branca — brasões são escuros e
   somem no navy. Se for horizontal (branding.js marca com .inet-logo-horizontal),
   ganha largura em vez de encolher dentro do quadrado de 40px. */
.inh .inh-org-logo.inet-logo-horizontal{
  background:#fff !important;
  width:auto !important; height:40px; max-width:11rem !important;
  padding:4px 7px !important; border-radius:12px !important;
  object-fit:contain !important;
}
@media (max-width:640px){
  .inh .inh-org-logo.inet-logo-horizontal{height:34px;max-width:8rem !important}
}

/* Versão NEGATIVA (branca) do brasão: vai direto sobre o navy, sem placa —
   é como o manual da Prefeitura manda aplicar a marca em fundo escuro. */
.inh .inh-org-negativo,
.inh-legacy .inh-org-negativo,
.inh .inh-org-negativo.inet-logo-horizontal,
.inh-legacy .inh-org-negativo.inet-logo-horizontal{
  background:transparent !important; padding:0 !important; border-radius:0 !important;
  box-shadow:none !important; height:38px; width:auto !important; max-width:12rem !important;
  object-fit:contain !important;
}
@media (max-width:640px){
  .inh .inh-org-negativo,.inh-legacy .inh-org-negativo{height:30px;max-width:9rem !important}
}

.inh-org-txt{min-width:0}
.inh-tag{
  display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:#9FE9F6;line-height:1.5;
  background:rgba(37,208,232,.13);border:1px solid rgba(37,208,232,.3);
  padding:2px 7px;border-radius:6px;
}
.inh-name{
  display:block;font-size:15px;font-weight:600;color:#fff;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch;
}
.inh-name b{font-weight:400;color:rgba(255,255,255,.5);margin:0 5px}

/* área direita */
.inh-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.inh-pill{
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.92);font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease;
}
.inh-pill:hover{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.26);color:#fff}
.inh-pill svg{width:17px;height:17px;flex:0 0 auto}
.inh-pill i{font-size:15px;line-height:0}
.inh-ico{width:40px;padding:0;justify-content:center}
.inh-cta{
  background:linear-gradient(135deg,var(--inet-cyan) 0%,var(--inet-cyan-700) 100%);
  border-color:transparent;color:#06283A;font-weight:700;
  box-shadow:0 8px 20px -10px rgba(15,169,200,.9);
}
.inh-cta:hover{background:linear-gradient(135deg,#4FDCF0 0%,#14BBDC 100%);color:#06283A}

/* abas expansíveis */
.inh-tabs{
  display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
}
.inh-tab{
  position:relative;display:inline-flex;align-items:center;gap:0;
  height:38px;min-width:38px;padding:0 10px;border-radius:999px;
  color:rgba(255,255,255,.72);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;
  transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;
}
.inh-tab i{font-size:17px;line-height:0;flex:0 0 auto}
.inh-tab svg{width:17px;height:17px;flex:0 0 auto}
.inh-tab .lbl{max-width:0;opacity:0;overflow:hidden;
  transition:max-width .35s var(--inet-ease),opacity .2s ease,margin-left .35s var(--inet-ease)}
.inh-tab:hover{background:rgba(255,255,255,.13);color:#fff}
.inh-tab.is-active{background:#fff;color:var(--inet-navy-800);box-shadow:0 4px 14px -6px rgba(0,0,0,.55)}
.inh-tab.is-active .lbl{max-width:11rem;opacity:1;margin-left:8px}
.inh-sep{width:1px;height:20px;background:rgba(255,255,255,.18);margin:0 4px;flex:0 0 auto}

.inh-badge{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:var(--inet-alert);color:#fff;font-size:10px;font-weight:700;line-height:1;
  border:2px solid var(--inet-navy-800);
}

/* painéis suspensos */
.inh-anchor{position:relative}
.inh-pop{
  /* 32px = padding do cabeçalho + fio de acento + respiro; menos que isso e o
     topo arredondado nasce ATRÁS do cabeçalho */
  position:absolute;right:0;top:calc(100% + 32px);z-index:var(--inet-z-pop);
  min-width:268px;padding:8px;border-radius:var(--inet-r-lg);
  background:var(--inet-surface);color:var(--inet-txt);
  border:1px solid var(--inet-line);box-shadow:var(--inet-shadow-pop);
  opacity:0;transform:translateY(-8px) scale(.97);pointer-events:none;
  transition:opacity .18s ease,transform .18s var(--inet-ease);
}
.inh-pop.is-open{opacity:1;transform:none;pointer-events:auto}
.inh-pop-hd{padding:9px 12px 10px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--inet-txt-2)}
.inh-item{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:10px 12px;border-radius:var(--inet-r-md);
  font-size:14px;font-weight:500;text-align:left;color:var(--inet-txt);cursor:pointer;
  transition:background-color .16s ease,color .16s ease;
}
.inh-item i{font-size:16px;line-height:0;color:var(--inet-navy-600);width:18px;text-align:center}
.inh-item svg{width:17px;height:17px;flex:0 0 auto;color:var(--inet-navy-600)}
html.dark .inh-item i,html.dark .inh-item svg{color:var(--inet-cyan)}
.inh-item:hover{background:rgba(16,44,112,.07)}
html.dark .inh-item:hover{background:rgba(255,255,255,.07)}
.inh-item.is-sel{background:rgba(16,44,112,.09);color:var(--inet-navy-800);font-weight:700}
html.dark .inh-item.is-sel{background:rgba(37,208,232,.14);color:var(--inet-cyan)}
.inh-item.is-danger,.inh-item.is-danger svg,.inh-item.is-danger i{color:#D93B57}
.inh-item.is-danger:hover{background:rgba(217,59,87,.1)}
.inh-rule{height:1px;background:var(--inet-line);margin:6px 10px}

.inh-user{display:flex;align-items:center;gap:12px;padding:12px}
.inh-avatar{
  width:44px;height:44px;border-radius:14px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--inet-navy-600),var(--inet-navy-900));
  color:#fff;font-weight:700;font-size:15px;
}
.inh-user b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.inh-user span{display:block;font-size:12.5px;color:var(--inet-txt-2)}

/* ═══════════════ cabeçalhos legados vestidos de navy (.inh-legacy) ═══════
   Para páginas cujo cabeçalho não foi reescrito: o js/inet-header.js marca o
   #mainHeader com `.inh .inh-legacy`, insere a assinatura à esquerda e estas
   regras repintam o conteúdo que já estava lá. Assim 1 arquivo veste N páginas. */
.inh-legacy{ color:#fff; }
.inh-legacy h1,.inh-legacy h2,.inh-legacy h3{ color:#fff !important; }
.inh-legacy .text-gradient{
  background:none !important; -webkit-text-fill-color:#fff !important; color:#fff !important;
}
/* títulos escuros do tema claro precisam virar branco sobre o navy */
.inh-legacy [class*="text-gray-7"],.inh-legacy [class*="text-gray-8"],
.inh-legacy [class*="text-gray-9"],.inh-legacy [class*="text-slate-7"],
.inh-legacy [class*="text-slate-8"],.inh-legacy [class*="text-slate-9"]{
  color:#fff !important;
}
/* textos de apoio (subtítulos cinza no tema claro) */
.inh-legacy p,
.inh-legacy [class*="text-gray-4"],.inh-legacy [class*="text-gray-5"],
.inh-legacy [class*="text-gray-6"],
.inh-legacy [class*="text-slate-4"],.inh-legacy [class*="text-slate-5"]{
  color:rgba(255,255,255,.66) !important;
}
/* … menos dentro dos painéis suspensos, que continuam claros */
.inh-legacy [id*="Dropdown"] [class*="text-gray-7"],
.inh-legacy [id*="Dropdown"] [class*="text-gray-8"],
.inh-legacy [id*="Dropdown"] [class*="text-gray-9"]{ color:var(--inet-txt) !important; }
/* contadores e ícones coloridos do tema claro somem no navy: viram brancos.
   Dentro dos painéis suspensos a cor original é preservada. */
.inh-legacy :not([id*="Dropdown"]) > [class*="text-green-"],
.inh-legacy :not([id*="Dropdown"]) > [class*="text-blue-"],
.inh-legacy :not([id*="Dropdown"]) > [class*="text-teal-"],
.inh-legacy :not([id*="Dropdown"]) > [class*="text-amber-"],
.inh-legacy :not([id*="Dropdown"]) > [class*="text-orange-"],
.inh-legacy :not([id*="Dropdown"]) > [class*="text-purple-"],
.inh-legacy :not([id*="Dropdown"]) > [class*="text-indigo-"],
.inh-legacy :not([id*="Dropdown"]) > [class*="text-cyan-"]{
  color:rgba(255,255,255,.92) !important;
}
/* botões e pílulas de vidro do tema claro → vidro sobre navy */
.inh-legacy .glass,.inh-legacy .glass-panel,.inh-legacy .btn-glass,
.inh-legacy button:not([id*="Dropdown"]),.inh-legacy nav > div > div > a,
.inh-legacy .inh-actions > a{
  color:#fff;
}
.inh-legacy a.glass,.inh-legacy button.glass,.inh-legacy .glass{
  background:rgba(255,255,255,.09) !important;
  border-color:rgba(255,255,255,.15) !important;
  box-shadow:none !important; backdrop-filter:none !important;
}
.inh-legacy a.glass:hover,.inh-legacy button.glass:hover,.inh-legacy .glass:hover{
  background:rgba(255,255,255,.18) !important;
}
/* marca do sistema: placa branca para brasão escuro não sumir */
.inh-legacy img[id*="ogo" i]:not(.inh-logo){
  background:#fff; border-radius:12px; padding:4px 6px;
  height:40px; width:auto; max-width:11rem; object-fit:contain;
}
/* painéis suspensos voltam a ser claros */
.inh-legacy [id*="Dropdown"],.inh-legacy [id*="dropdown"]{
  background:var(--inet-surface) !important; color:var(--inet-txt) !important;
  border:1px solid var(--inet-line) !important;
  box-shadow:var(--inet-shadow-pop) !important; backdrop-filter:none !important;
}

/* ═══ Menus suspensos do cabeçalho: SÓLIDOS, sempre ═══════════════════════
   Estas caixas nascem com a classe `.glass` da página (fundo rgba + blur).
   Sobre o corpo claro isso vira um borrão: dava para ler o botão laranja e os
   cartões ATRAVÉS do menu. O bloco `layout-inet-agosto` de propósito não
   repinta nada dentro do #mainHeader (senão a faixa navy viraria branca), então
   a correção mora aqui e não depende de `.inh-legacy` estar aplicado.
   Vale para qualquer id que contenha "Dropdown"/"dropdown" e para o .inh-pop. */
#mainHeader [id*="Dropdown"], #mainHeader [id*="dropdown"], #mainHeader .inh-pop,
.inh [id*="Dropdown"], .inh [id*="dropdown"], .inh .inh-pop{
  background:#fff !important; background-image:none !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  opacity:1 !important;
  border:1px solid var(--inet-line) !important;
  box-shadow:0 24px 60px -18px rgba(6,15,45,.55), 0 2px 8px rgba(6,15,45,.14) !important;
  z-index:80 !important;
}
.dark #mainHeader [id*="Dropdown"], .dark #mainHeader [id*="dropdown"],
.dark #mainHeader .inh-pop, .dark .inh [id*="Dropdown"],
.dark .inh [id*="dropdown"], .dark .inh .inh-pop{
  background:var(--inet-surface) !important;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.75), 0 2px 8px rgba(0,0,0,.4) !important;
}
/* o `.hidden` continua mandando: sem isto o menu abriria sozinho */
#mainHeader [id*="Dropdown"].hidden, #mainHeader [id*="dropdown"].hidden,
.inh [id*="Dropdown"].hidden, .inh [id*="dropdown"].hidden{display:none !important}
.inh-legacy [id*="Dropdown"] *,.inh-legacy [id*="dropdown"] *{ color:var(--inet-txt); }
.inh-legacy [id*="Dropdown"] [class*="text-red"],
.inh-legacy [id*="Dropdown"] [id*="logout" i],
.inh-legacy [id*="Dropdown"] [class*="text-rose"]{ color:#D93B57 !important; }
.inh-legacy [id*="Dropdown"] [class*="text-gray-4"],
.inh-legacy [id*="Dropdown"] [class*="text-gray-5"]{ color:var(--inet-txt-2) !important; }
/* a assinatura inserida pelo script */
.inh-brandmark{ display:flex; align-items:center; flex:0 0 auto; }
.inh-brandmark + .inh-div{ margin-right:2px; }

/* ------------------------- menu de abas do header-menu.js sobre o navy ----
   O header-menu.js injeta o CSS dele por <style> (depois deste arquivo), então
   estas regras precisam de especificidade maior: `.inh #headerExpandTabs …`.
   Só valem no desktop — no celular o menu é movido para o <body> e mantém o
   visual de vidro claro dele. */
/* ── PADRAO: A PLACA DO MUNICIPIO MANDA (31/08/2026) ──────────────────────
   O brasao do municipio ABRE a faixa; a assinatura iNeteduca FECHA, reduzida
   ao simbolo. Quem usa o painel trabalha numa prefeitura, nao na iNeteduca.
    em vez de mover no DOM: a ordem de leitura para o leitor de tela
   continua sendo a do HTML, e nenhum script precisa remontar nada. */
.inh .inh-brandmark-fim{ order:98; opacity:1; gap:9px; margin-left:0 !important; }
/* quem empurra para a direita e o GRUPO DE ACOES, nao a marca: com a marca
   levando o margin-left:auto, o dock ficava colado no nome da escola. */
.inh #mainNavButtons{ margin-left:auto !important; }
.inh .inh-div-fim{ margin-left:0 !important; }
/* os menus suspensos precisam passar POR CIMA do fio ciano da base */
.inh #headerExpandTabs > .relative, .inh #headerExpandTabs > #yearSelectWrap{ z-index:5; }
.inh [id$="Dropdown"], .inh .inh-pop{ z-index:300 !important; }
.inh #headerExpandTabs{ z-index:2; }   /* o dock acima do fio da base */
.inh .inh-div-fim{ order:97; }
.inh .inh-brandmark-fim .inh-logo-full{ display:none; }
.inh .inh-brandmark-fim .inh-logo-mini{ display:block; height:26px; }
.inh .inh-brandmark-txt{ font-size:15px; font-weight:700; letter-spacing:.01em; color:#fff; white-space:nowrap; }
/* o cabecalho escrito a mao (admin-dashboard) tem a assinatura DENTRO do
   .inh-brand: aqui ela vai para o fim do proprio grupo e encolhe igual. */
.inh .inh-brand > a[aria-label^=iNeteduca]{ order:98; opacity:.8; }
.inh .inh-brand > a[aria-label^=iNeteduca] .inh-logo-full{ display:none; }
.inh .inh-brand > a[aria-label^=iNeteduca] .inh-logo-mini{ display:block; height:20px; }
.inh .inh-brand > .inh-div{ order:97; }
.inh .inh-brand{ width:100%; }
.inh .inh-brand > .inh-org{ order:1; margin-right:auto; }

/* MENU LUXO — colado do canvas (EscolaOnda.dc.html), so com os nomes trocados:
   .lx -> #headerExpandTabs, .lx-aba -> .exp-tab, .lx-aba.on -> .exp-tab.is-active.
   A luz e um <svg> DE VERDADE dentro do dock (o inet-header.js injeta), e nao um
   background-image no ::before: foi assim que ficou certo no canvas, e SVG em
   elemento aceita gradiente com id, que em background-image data-URI e fragil.

   O rotulo continua no DOM, so nao e pintado — e ele que da nome ao link.
   SO NO DESKTOP: abaixo de 1025px a barra vira rodape claro, em coluna, COM
   rotulo, e ali o rotulo e necessario porque o polegar nao tem hover. */
@media (min-width:1025px){
  .inh #headerExpandTabs{
    position:relative; display:inline-flex; align-items:stretch; height:52px; padding:0 7px;
    /* SEM overflow:hidden aqui: os menus suspensos (ano, perfil, avisos) sao
       filhos do dock e ficavam CORTADOS. Quem recorta e so a moldura da luz. */
    border-radius:999px; flex:0 0 auto; gap:0; justify-content:flex-start;
    overflow:visible !important;   /* alguem no mobile.css corta em overflow-x */
    background:rgba(0,0,0,.16); border:1px solid rgba(255,255,255,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.25);
  }
  .inh #headerExpandTabs .lx-base{
    position:absolute; left:10%; right:10%; bottom:0; height:1px; pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.09) 30%,rgba(255,255,255,.09) 70%,transparent);
  }
  /* moldura que recorta a luz no formato da pilula, sem prender os dropdowns */
  .inh #headerExpandTabs .lx-clip{
    position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%;
    border-radius:999px; overflow:hidden; pointer-events:none; z-index:1;
  }
  .inh #headerExpandTabs .lx-luz{
    position:absolute; left:0; bottom:0; width:180px; height:40px; pointer-events:none;
    opacity:0; will-change:transform;
    transition:transform .58s cubic-bezier(.22,.61,.12,1), opacity .38s ease;
  }
  .inh #headerExpandTabs .lx-luz.on{ opacity:1; }
  .inh #headerExpandTabs .lx-clip{ z-index:0; }
  .inh #headerExpandTabs .exp-tab{
    position:relative; z-index:2;
    flex:0 0 54px; width:54px; padding:0 !important; gap:0 !important; min-height:0; height:auto;
    display:flex; align-items:center; justify-content:center;
    border:0; border-radius:999px; background:transparent !important; box-shadow:none !important;
    color:rgba(255,255,255,.88);
    transition:color .38s ease, transform .58s cubic-bezier(.22,.61,.12,1);
  }
  .inh #headerExpandTabs .exp-tab i{ font-size:21px; line-height:0; }
  .inh #headerExpandTabs .exp-tab svg{ width:21px; height:21px; stroke-width:1.7; }
  .inh #headerExpandTabs .exp-tab:hover{ color:#fff; }
  .inh #headerExpandTabs .exp-tab.is-active{
    color:#fff; transform:translateY(-6px);
    filter:drop-shadow(0 4px 10px rgba(37,208,232,.42));
  }
  .inh #headerExpandTabs .exp-tab:focus-visible{
    outline:1px solid rgba(37,208,232,.7); outline-offset:-3px;
  }
  .inh #headerExpandTabs .exp-tab .exp-tab-label{
    position:absolute !important; width:1px !important; height:1px !important;
    max-width:1px !important; opacity:0 !important; margin:0; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap; pointer-events:none;
  }
  .inh #headerExpandTabs .exp-sep{ background:rgba(255,255,255,.16); height:18px; margin:0 3px; align-self:center; }
  /* perfil e sino vem embrulhados em <div class="relative">: o filho do flex
     e o wrapper, nao a aba — sem isto os dois flutuam fora da linha. */
  .inh #headerExpandTabs > *{ align-self:center; }
  .inh #headerExpandTabs > .relative{ flex:0 0 50px; display:flex; align-items:center; position:relative; }
  .inh #headerExpandTabs > .relative > .exp-tab{ flex:1 1 auto; width:100%; }
  /* o seletor de ano vira uma aba larga, com rotulo, dentro do dock */
  .inh #headerExpandTabs > #yearSelectWrap{ flex:0 0 auto; }
  .inh #headerExpandTabs #yearSelectBtn{
    flex:0 0 auto !important; width:auto !important; gap:7px !important;
    height:36px; padding:0 13px !important; border-radius:999px !important;
    background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.16) !important;
    color:#fff !important; font-size:13.5px; font-weight:700; letter-spacing:.01em;
  }
  .inh #headerExpandTabs #yearSelectBtn:hover{ background:rgba(255,255,255,.18) !important; }
  /* o calendario e a setinha ficam MENORES que os icones de aba: o numero e que manda */
  .inh #headerExpandTabs #yearSelectBtn svg:first-of-type{ width:15px !important; height:15px !important; stroke-width:1.9; opacity:.85; }
  .inh #headerExpandTabs #yearSelectBtn svg:last-of-type{ width:12px !important; height:12px !important; stroke-width:2.4; opacity:.7; }
  .inh #headerExpandTabs #yearSelectBtn i{ font-size:14px; color:inherit; }
  .inh #headerExpandTabs #yearSelectBtn:hover{ color:#fff; }
}
@media (prefers-reduced-motion:reduce){
  .inh #headerExpandTabs .lx-luz, .inh #headerExpandTabs .exp-tab{ transition:none; }
}

/* ---------------------------------------------------------- responsivo --- */
@media (max-width:1024px){
  .inh-tabs{display:none}
  .inh-name{max-width:18ch}
  .inh-div{display:none}
  .inh-org-txt .inh-tag{display:none}
}
@media (max-width:640px){
  .inh-bar{gap:11px;padding:11px 14px}
  .inh-brand{gap:11px}
  .inh-org{gap:9px}
  .inh-org-logo{width:34px;height:34px}
  .inh-logo-full{display:none}
  .inh-logo-mini{display:block;height:30px}
  .inh.is-stuck .inh-logo-mini{height:27px}
  .inh-name{max-width:none;font-size:14px}
  .inh-pill span{display:none}
  .inh-pill{padding:0 12px}
}

/* barra inferior de celular/tablet.
   Precisa ficar FORA do <header>: backdrop-filter num ancestral cria containing
   block e prende o position:fixed dentro do cabeçalho. */
.inh-dock{display:none}
@media (max-width:1024px){
  .inh-dock{
    display:flex;position:fixed;z-index:var(--inet-z-dock);
    left:.7rem;right:.7rem;bottom:calc(.55rem + env(safe-area-inset-bottom));
    align-items:center;justify-content:space-around;gap:2px;
    padding:6px;border-radius:1.5rem;
    background:rgba(10,29,77,.72);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 18px 44px -18px rgba(4,11,35,.85),0 1px 0 rgba(255,255,255,.1) inset;
  }
  .inh-dock .inh-tab{flex-direction:column;gap:3px;height:auto;padding:8px 6px;min-width:56px;border-radius:1.1rem}
  .inh-dock .inh-tab .lbl{max-width:none;opacity:.85;overflow:visible;margin:0;font-size:10px;font-weight:600}
  .inh-dock .inh-tab.is-active{background:rgba(255,255,255,.95)}
  .inh-dock .inh-tab.is-active .lbl{opacity:1}
  .inh-dock .inh-badge{top:4px;right:12px;border-color:transparent}
}

@media (prefers-reduced-motion:reduce){
  .inh *,.inh-dock *,.inh-pop{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ===========================================================================
   BADGE DO ANO NO CABEÇALHO — só contorno, nunca preenchido.

   As páginas escrevem esses selos com `bg-indigo-100 text-indigo-800`, que era
   discreto no cabeçalho branco antigo. No cabeçalho navy vira uma mancha azul
   bebê no meio da faixa. Aqui, DENTRO do cabeçalho, eles ficam transparentes,
   com texto branco e um fio claro em volta. Fora do cabeçalho nada muda.
   =========================================================================== */
#mainHeader #activeYearBadge,
#mainHeader #selectedYearDisplay,
#mainHeader #yearDisplay,
#mainHeader #yearSelectBtn,
#mainHeader #searchYearDisplay,
.inh #activeYearBadge,
.inh #selectedYearDisplay,
.inh #yearDisplay,
.inh #yearSelectBtn,
.inh #searchYearDisplay {
  background: transparent !important;
  background-image: none !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
#mainHeader #activeYearBadge:hover,
#mainHeader #yearSelectBtn:hover,
.inh #activeYearBadge:hover,
.inh #yearSelectBtn:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.45) !important;
}