/* =========================================================================
   Tema do app (Brand ODE) — claro + escuro via [data-theme];
   sidebar recolhível via [data-sidebar]. Tudo dirigido por variáveis.
   ========================================================================= */
:root,:root[data-theme="dark"]{
  --bg:#041f29; --panel:#0a3340; --panel-2:#0c3a48; --line:#16404f;
  --txt:#eaf3f4; --muted:#8aa6ad; --heading:#ffffff; --kpi-val:#ffffff;
  --input-bg:#06222c; --menu-bg:#0c3a48;
  --side-bg:#062a36; --side-txt:#cfe0e3; --side-hover:#0a3340;
  --accent:#4fd1c5; --accent-2:#7c9cff; --gold:#C19A3A; --green:#5A8D6A;
  --scroll-thumb:#1d4a5a;
}
/* tema claro com mais separação: fundo levemente acinzentado, painéis
   brancos, bordas visíveis e texto secundário mais escuro (antes tudo
   era quase branco sobre branco) */
:root[data-theme="light"]{
  --bg:#EBF0F3; --panel:#ffffff; --panel-2:#F4F7F9; --line:#C3CFD6;
  --txt:#0F1419; --muted:#54636F; --heading:#052630; --kpi-val:#094454;
  --input-bg:#ffffff; --menu-bg:#ffffff;
  --side-bg:#ffffff; --side-txt:#1f2933; --side-hover:#e6eef1;
  --scroll-thumb:#b3c0c9;
  --shadow-md:0 6px 20px rgba(9,68,84,.10);
}
:root[data-theme="light"] .card,
:root[data-theme="light"] .painel-card,
:root[data-theme="light"] .busca-card,
:root[data-theme="light"] .stat{box-shadow:0 4px 16px rgba(9,68,84,.08);}

/* ---------- Scrollbars (toda a aplicação) ---------- */
*{scrollbar-width:thin; scrollbar-color:var(--scroll-thumb) transparent;}
*::-webkit-scrollbar{width:8px; height:8px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:var(--scroll-thumb); border-radius:8px;
  border:2px solid transparent; background-clip:padding-box;}
*::-webkit-scrollbar-thumb:hover{background:var(--accent);
  border:2px solid transparent; background-clip:padding-box;}
*::-webkit-scrollbar-corner{background:transparent;}
*{box-sizing:border-box;}
html,body{margin:0;}
/* âncoras (#paineis) param abaixo da navbar fixa de 60px */
html{scroll-behavior:smooth;}
[id]{scroll-margin-top:76px;}
body{font-family:var(--font-sans,'Sora',sans-serif); background:var(--bg);
  color:var(--txt); font-size:15px;}
a{text-decoration:none; color:inherit;}

/* ---------- Navbar (mantém-se escura nos dois temas) ---------- */
.navbar{height:60px; display:flex; align-items:center; gap:24px; padding:0 22px;
  background:linear-gradient(90deg,#06222c,#0a3340);
  border-bottom:1px solid #16404f; position:sticky; top:0; z-index:1000;}
.navbar-brand{display:flex; align-items:center; gap:12px; min-width:230px;}
/* logo + nome clicáveis (vão para a home) */
.brand-link{display:flex; align-items:center; gap:12px; cursor:pointer;}
.brand-link:hover .brand-word{color:var(--accent);}
.brand-logo{height:36px; width:auto; display:block;}
.brand-word{color:#fff; font-weight:800; font-size:19px; letter-spacing:.14em;}
.brand-ufpb{color:var(--accent);}
/* ---------- Links de seção (FLAG NAV_NA_NAVBAR em config.py) ----------
   Sem ícones: em 7 itens eles viravam textura. Ícone só nas AÇÕES.       */
.navbar-links{display:flex; align-items:center; gap:2px; flex:1; min-width:0;
  overflow:visible;}
.nav-link{position:relative; display:flex; align-items:center; gap:6px;
  padding:8px 14px; background:transparent; border:none; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:500; color:#eaf3f4;
  white-space:nowrap; border-radius:8px;
  transition:color .15s ease, background .15s ease;}
.nav-link:hover{color:#fff; background:rgba(255,255,255,.07);}
/* página atual: accent + linha inferior (orientação clara) */
.nav-link--atual{color:var(--accent); font-weight:600;}
.nav-link--atual::after{content:""; position:absolute; left:14px; right:14px;
  bottom:-19px; height:2px; background:var(--accent); border-radius:2px;}

/* menu suspenso (Extensionistas / usuário) — CSS puro, sem JS */
.nav-menu{position:relative;}
.nav-caret{width:13px; height:13px; margin-left:4px; opacity:.8;
  transition:transform .15s ease;}
.nav-menu:hover .nav-caret,
.nav-menu:focus-within .nav-caret{transform:rotate(180deg);}
.nav-menu-lista{position:absolute; top:calc(100% + 14px); left:0; z-index:1200;
  min-width:200px; padding:6px; border-radius:12px;
  background:var(--menu-bg); border:1px solid var(--line);
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;}
.nav-menu-lista--dir{left:auto; right:0;}
.nav-menu:hover .nav-menu-lista,
.nav-menu:focus-within .nav-menu-lista{opacity:1; visibility:visible;
  transform:translateY(0);}
.nav-menu-item{display:block; padding:9px 12px; border-radius:8px;
  color:var(--txt); font-size:14px; white-space:nowrap;}
.nav-menu-item:hover{background:var(--side-hover); color:var(--accent);}
.nav-menu-item--atual{color:var(--accent); font-weight:600;}
.nav-menu-item--sair{color:#fb7185;}
.nav-menu-item--sair:hover{background:rgba(251,113,133,.12); color:#fb7185;}
/* cabeçalho do menu do usuário */
.nav-menu-cabecalho{padding:10px 12px 8px; border-bottom:1px solid var(--line);
  margin-bottom:6px;}
.nav-menu-nome{color:var(--heading); font-size:14px; font-weight:600;}
.nav-menu-papel{color:var(--accent); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; margin-top:2px;}
/* gatilho do menu do usuário: avatar + seta */
.nav-user-botao{display:flex; align-items:center; gap:4px; padding:2px 6px 2px 2px;
  background:transparent; border:none; border-radius:9999px; cursor:pointer;
  color:#eaf3f4; transition:background .15s ease;}
.nav-user-botao:hover{background:rgba(255,255,255,.08);}

/* ---------- Ações (geometria uniforme: círculos de 36px) ---------- */
.navbar-actions{display:flex; align-items:center; gap:8px; margin-left:auto;}
/* sem contorno: o ícone sozinho é mais leve; o hover dá o retorno */
.nav-acao{width:36px; height:36px; flex:none; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:#cfe0e3; cursor:pointer;
  padding:0; transition:color .15s ease, background .15s ease;}
.nav-acao:hover{color:var(--accent); background:rgba(255,255,255,.08);}
.nav-acao--atual{color:var(--accent);}
/* a pílula é EXCLUSIVA do Entrar => lê-se como ação principal */
.nav-entrar{padding:8px 18px; border-radius:9999px; font-size:14px;
  font-weight:600; color:#062a36; background:var(--accent);
  white-space:nowrap; transition:filter .15s ease;}
.nav-entrar:hover{filter:brightness(1.08);}

.nav-avatar{width:34px; height:34px; border-radius:50%; display:flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:700;
  color:#04222b; background:#4fd1c5; flex:none;}

/* ---------- Hambúrguer (mobile) ----------
   o botão alterna data-nav no <html> (padrão do tema/sidebar)          */
.nav-hamburguer{display:none;}

/* ---------- Shell + sidebar recolhível ---------- */
.shell{display:flex; align-items:flex-start; min-height:calc(100vh - 60px);}
.sidebar{width:230px; flex:0 0 230px; background:var(--side-bg);
  border-right:1px solid var(--line); padding:0px 12px; display:flex;
  flex-direction:column; justify-content:space-between;
  position:sticky; top:60px;                 /* <<< fixa abaixo da navbar (60px) */
  height:calc(100vh - 60px);                  /* <<< altura cheia da tela */
  overflow-y:auto;                            /* <<< rola sozinha se o menu crescer */
  transition:width .18s ease, flex-basis .18s ease;}
/* recolhida: some e libera a largura para o conteúdo */
:root[data-sidebar="collapsed"] .sidebar{width:0; flex-basis:0;
  padding-left:0; padding-right:0; overflow:hidden; border-right:none;}
.side-section{color:var(--muted); font-size:11px; font-weight:700;
  letter-spacing:1px; margin:18px 10px 8px; white-space:nowrap;}
.side-link{display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:8px; color:var(--side-txt); font-size:14px; font-weight:500;
  margin:2px 0; white-space:nowrap;}
.side-link:hover{background:var(--side-hover);}
.side-link.side-link--disabled{opacity:.45; cursor:not-allowed;}
.side-link.side-link--disabled:hover{background:transparent;}
.side-ico{width:20px; text-align:center; font-size:15px;}
.side-foot{padding:12px 0px; border-top:1px solid var(--line); white-space:nowrap;}
.side-foot-title{font-size:11px; font-weight:600; color:var(--txt);}
.side-foot-sub{font-size:11px; color:var(--muted);}

/* respiro no fim de toda página: além do conforto de leitura, é o que
   dá espaço para o menu de um dropdown que fique no último card */
.content{flex:1; min-width:0; padding:24px 28px 72px;}

/* ---------- Cabeçalho de página ---------- */
.page-head h2{margin:0 0 4px; color:var(--heading); font-size:26px;}
.lead{color:var(--muted); font-size:14px; margin:4px 0 0;}

/* =========================================================================
   HOME (landing institucional)
   ========================================================================= */
.btn{display:inline-block; padding:12px 22px; border-radius:8px; font-weight:700;
  cursor:pointer; border:none; font-size:14px;}
.btn-accent{background:var(--accent); color:#04222b;}
.btn-accent:hover{filter:brightness(1.06);}
.btn-ghost{background:transparent; color:var(--txt); border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}

/* ---------- Superfície de vidro (linguagem do material de divulgação) ----
   painéis translúcidos com blur e borda accent: leves, não "caixas".     */
.vidro{background:rgba(9,68,84,.34); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(79,209,197,.20); border-radius:18px;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;}
:root[data-theme="light"] .vidro{background:rgba(255,255,255,.72);
  border-color:rgba(9,68,84,.12);
  box-shadow:0 6px 24px rgba(9,68,84,.06);}
.vidro:hover{border-color:rgba(79,209,197,.55);
  box-shadow:0 14px 40px rgba(0,0,0,.22);}

/* texto com gradiente (assinatura tipográfica da marca) */
.texto-gradiente{background:linear-gradient(90deg,var(--accent),#ffffff);
  -webkit-background-clip:text; background-clip:text; color:transparent;}

/* Hero: foto + padrão de circuito + constelação de dados (canvas).
   O hero REDEFINE as variáveis de tema localmente: é sempre escuro, em
   qualquer tema, porque vive sobre a foto. Tudo que usa var() dentro
   dele herda automaticamente — sem precisar de exceção item a item. */
.hero{--panel:rgba(9,68,84,.34); --panel-2:rgba(9,68,84,.44);
  --txt:#eaf3f4; --heading:#ffffff; --muted:#aecbd0; --kpi-val:#ffffff;
  --line:rgba(79,209,197,.22);
  position:relative; overflow:hidden;
  margin:-24px -28px 28px;                 /* full-bleed sobre o .content */
  min-height:600px; display:flex; flex-direction:column;
  justify-content:center;
  background-color:#052630;
  background-image:
    linear-gradient(90deg, rgba(5,38,48,.96) 0%, rgba(5,38,48,.80) 46%, rgba(5,38,48,.42) 100%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234fd1c5' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url('/assets/img/hero.webp');
  background-size:cover, 60px 60px, cover;
  background-position:center, center, center;
  background-repeat:no-repeat, repeat, no-repeat;}
/* constelação animada — assets/constelacao.js */
.hero-canvas{position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;}
/* o vidro dentro do hero ignora o tema (a regra light não o alcança) */
:root[data-theme="light"] .hero .vidro{background:rgba(5,38,48,.52);
  border-color:rgba(79,209,197,.28); box-shadow:none;}
:root[data-theme="light"] .hero .vidro:hover{
  border-color:rgba(79,209,197,.6);}
.hero-inner{position:relative; z-index:1;
  width:calc(100% - 56px); max-width:1180px; margin:0 auto;
  padding:56px 0 0; text-align:left;}
.hero-inner > *{max-width:640px;}
/* tipografia institucional: Sora em todo o site (a mono ficou só no
   material de recrutamento, onde o público era técnico) */
.hero-eyebrow{display:inline-block; font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:22px;}
.hero h1{color:#fff; font-size:clamp(42px,5.4vw,72px); line-height:.94;
  letter-spacing:-.03em; margin:0 0 20px; font-weight:800;}
.hero-sub{color:#cfe2e6; font-size:18px; line-height:1.55; max-width:540px;
  margin:0 0 30px !important; text-align:left;}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap;}
.hero .btn{padding:14px 26px; font-size:15px; border-radius:9999px;}
.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.45);}
.hero .btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
/* cartão de destaque flutuante (canto inferior direito) */
/* right alinhado à coluna de conteúdo (1180px); bottom acima da faixa de
   números, que invade o hero em -44px */
.hero-card{position:absolute;
  right:max(40px, calc((100% - 1180px) / 2)); bottom:64px; z-index:1;
  background:rgba(6,34,44,.82); backdrop-filter:blur(4px);
  border:1px solid rgba(79,209,197,.4); border-radius:14px; padding:18px 22px; min-width:210px;}
.hero-card-eyebrow{display:block; font-size:11px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; color:var(--accent); margin-bottom:6px;}
.hero-card-value{display:block; font-size:32px; font-weight:700; color:#fff; line-height:1;}
.hero-card-label{display:block; font-size:12px; color:#aecbd0; margin-top:6px; max-width:170px;}

/* Cabeçalho de seção */
.sec-head{margin:0 0 22px;}
.sec-eyebrow{display:inline-block; font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  margin-bottom:8px;}
.sec-head h2{color:var(--heading); font-size:30px; margin:0; font-weight:800;
  letter-spacing:-.02em;}
.sec-sub{color:var(--muted); font-size:14px; line-height:1.55; margin:8px 0 0; max-width:640px;}

/* Números de impacto — em vidro, dentro do hero (sem faixa rígida) */
.stats-band{position:relative; z-index:1;
  width:calc(100% - 56px); max-width:1180px; margin:56px auto 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.stat{padding:18px 22px; border-left:3px solid var(--accent);}
.stat:hover{transform:translateY(-4px);}
.stat-value{display:block; font-size:30px; font-weight:800; color:#fff;
  line-height:1.05; letter-spacing:-.02em;}
.stat-label{display:block; font-size:11px; font-weight:700;
  color:var(--accent); text-transform:uppercase; letter-spacing:.1em;
  margin-top:6px;}
/* selo de atualização */
.stats-atualizacao{margin:14px 4px 40px; text-align:right; font-size:12px;
  color:var(--muted);}
/* Seções */
.home-section{margin:0 0 56px;}
.sobre-grid{display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:center;}
.sobre-texto{color:var(--txt); font-size:16px; line-height:1.75; margin:0;}
.sobre-texto abbr{text-decoration:none; border-bottom:1px dotted var(--muted);}
.sobre-aside{padding:26px;}
.sobre-aside .painel-ico{width:30px; height:30px; color:var(--accent);}
.sobre-aside h3{color:var(--heading); font-size:16px; margin:12px 0 6px;}
.sobre-aside p{color:var(--muted); font-size:13px; line-height:1.6; margin:0;}

/* Painéis em BENTO: o tamanho comunica a importância (nada de 6 cards
   idênticos). Linha 1: Ações (hub) + PDI; linha 2: os quatro vínculos. */
.paineis-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.painel-card{padding:24px; display:flex; flex-direction:column; cursor:pointer;
  position:relative; overflow:hidden;}
.painel-card:hover{transform:translateY(-5px);}
.painel-card--destaque{grid-column:span 2; padding:30px;
  border-color:rgba(79,209,197,.45);
  background:linear-gradient(135deg, rgba(79,209,197,.16),
                             rgba(9,68,84,.34) 55%);}
.painel-card--largo{grid-column:span 2; padding:30px;}
.painel-card--destaque .painel-titulo,
.painel-card--largo .painel-titulo{font-size:26px;}
.painel-card--destaque .painel-desc,
.painel-card--largo .painel-desc{font-size:14px; max-width:46ch;}
.painel-badge{width:46px; height:46px; border-radius:14px; display:flex;
  align-items:center; justify-content:center;
  background:rgba(79,209,197,.14); margin-bottom:16px;}
.painel-ico{width:24px; height:24px; color:var(--accent);}
.painel-titulo{color:var(--heading); font-size:19px; margin:0 0 8px;
  font-weight:700; letter-spacing:-.01em;}
.painel-desc{color:var(--muted); font-size:13px; line-height:1.55;
  margin:0 0 18px; flex:1;}
.painel-cta{display:inline-flex; align-items:center; gap:6px; font-size:13px;
  font-weight:700; color:var(--accent);}
.painel-cta .icon{width:16px; height:16px;}
.badge-breve{display:inline-block; font-size:11px; font-weight:700; color:var(--gold);
  background:rgba(193,154,58,.14); border:1px solid rgba(193,154,58,.4);
  padding:3px 10px; border-radius:9999px;}

/* Em breve */
.breve-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom: 20px;}
.breve-card{background:var(--panel); border:1px dashed var(--line); border-radius:14px; padding:20px;}
.breve-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.breve-card .painel-ico{width:24px; height:24px; color:var(--muted);}

/* Faixa de CTA (vidro + brilho accent) */
.cta-band{display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap; padding:36px 40px; margin:0 0 44px;
  background:linear-gradient(120deg, rgba(79,209,197,.14),
                             rgba(9,68,84,.34) 60%);}
.cta-band .btn{border-radius:9999px;}
.cta-text h2{color:var(--heading); font-size:26px; margin:0 0 6px;
  font-weight:800; letter-spacing:-.02em;}
.cta-text p{color:#bcd6da; font-size:15px; margin:0; max-width:520px;}
.cta-band .btn{display:inline-flex; align-items:center; gap:8px; white-space:nowrap;}
.cta-band .btn .icon{width:18px; height:18px;}

/* Parceiros */
/* 3 colunas iguais — cards proporcionais em qualquer conteúdo */
.parceiros-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px; align-items:stretch;}
.parceiro-logo{background:#062a36; border-radius:14px; padding:24px 16px; display:flex;
  align-items:center; justify-content:center; min-width:160px; height:200px;
  border:1px solid var(--line); transition:transform .15s, box-shadow .15s;}
.parceiro-logo:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.parceiro-img{max-width:170px; width:auto; object-fit:contain;}

/* Rodapé */
.home-footer{border-top:1px solid var(--line); margin-top:0px; padding:5px 0px;
  color:var(--muted); font-size:13px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content: center; }
.home-footer a{color:var(--accent);}
.home-footer .dot{color:var(--line);}

/* mais largo primeiro; o mais estreito vem depois para poder sobrescrever */
@media (max-width:1000px){
  .stats-band{grid-template-columns:repeat(2,1fr); margin-top:36px;}
  .paineis-grid{grid-template-columns:repeat(2,1fr);}
  .painel-card--destaque,.painel-card--largo{grid-column:span 2;}
  .breve-grid{grid-template-columns:1fr 1fr;}
  .parceiros-grid{grid-template-columns:1fr;}
  .sobre-grid{grid-template-columns:1fr;}
  .cta-band{flex-direction:column; align-items:flex-start;}
  .hero{min-height:520px;}
  .hero-inner{padding:40px 24px 0;}
  .hero-card{display:none;}
}
@media (max-width:760px){
  .paineis-grid{grid-template-columns:1fr;}
  .painel-card--destaque,.painel-card--largo{grid-column:span 1; padding:24px;}
  .painel-card--destaque .painel-titulo,
  .painel-card--largo .painel-titulo{font-size:20px;}
  .stats-band{width:calc(100% - 32px);}
  .hero{min-height:460px;}
}

/* ---------- Barra de filtros (grid firme) ---------- */
.filtros-barra{display:grid; grid-template-columns:120px repeat(4,minmax(0,1fr));
  gap:12px; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; margin:18px 0;}
.filtro-grupo{min-width:0;}
.filtro-grupo label{display:block; font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px;}

/* ---------- KPIs ---------- */
/* auto-fit: cada painel decide quantos cards tem (4, 5, 6…) */
.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin:6px 0 22px;}
.kpi-card{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; border-left:4px solid var(--accent);}
.kpi-card:nth-child(2){border-left-color:#34d399;}
.kpi-card:nth-child(3){border-left-color:var(--accent-2);}
.kpi-card:nth-child(4){border-left-color:#34d399;}
.kpi-card:nth-child(5){border-left-color:var(--gold);}
.kpi-card:nth-child(6){border-left-color:var(--green);}
.kpi-title{display:block; font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px;}
.kpi-value{display:block; font-size:26px; font-weight:700; color:var(--kpi-val);
  line-height:1.2; margin-top:4px;}
/* linha de crescimento dentro do card: "▲ 12,3% vs 2025" */
.kpi-sub{display:block; font-size:12px; font-weight:600; color:var(--muted);
  margin-top:4px; white-space:nowrap;}

/* ---------- Cards de gráfico ---------- */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px;}
.grid-1{display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:20px;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:16px 18px; min-width:0;}
.card-title{font-size:15px; font-weight:600; color:var(--heading); display:block; margin-bottom:10px;}
.card-title-row{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.card-title-row .card-title{margin-bottom:0; white-space:nowrap;}
/* corpo de card com rolagem: a figura define a própria altura */
.card-scroll{max-height:320px; overflow-y:auto; overflow-x:hidden;}

/* ---------- Página Sobre ---------- */
/* linha como pseudo-elemento do <ol>, pontos centrados nela (x = 7px) */
.timeline{list-style:none; margin:0; padding:0; position:relative;}
.timeline::before{content:""; position:absolute; left:6px; top:6px; bottom:6px;
  width:2px; background:var(--line);}
.tl-item{display:flex; gap:18px; padding:0 0 26px 30px; position:relative;}
.tl-item::before{content:""; position:absolute; left:-1px; top:5px;
  width:12px; height:12px; border-radius:50%; background:var(--accent);
  border:2px solid var(--bg); box-sizing:content-box;}
.tl-ano{flex:0 0 56px; font-weight:700; color:var(--accent); font-size:17px;}
.tl-titulo{margin:0 0 4px; color:var(--heading); font-size:16px;}
.tl-texto{margin:0; color:var(--muted); font-size:14px; line-height:1.55;}

.passos-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;}
.passo-card{background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:18px;}

.equipe-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;}
.pessoa-card{background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:22px 16px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;}
.pessoa-foto{width:108px; height:108px; border-radius:50%; object-fit:cover;
  border:3px solid var(--accent); margin-bottom:6px;}
.pessoa-funcao{font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px;}
.pessoa-nome{margin:0; font-size:15px; color:var(--heading); line-height:1.3;}
.btn-lattes{margin-top:8px; padding:6px 18px; font-size:13px;}

/* parceiros como cards com papel no projeto */
.parceiro-card{padding:20px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;}
.parceiro-card:hover{transform:translateY(-4px);}
/* logos são BRANCAS: chip escuro fixo garante contraste nos dois temas */
.parceiro-card .parceiro-img{width:100%; max-width:none; height:120px;
  object-fit:contain; background:#07303d; border:1px solid #16404f;
  border-radius:12px; padding:18px;}
.parceiro-nome{margin:0; font-size:16px; color:var(--heading);}
.parceiro-papel{margin:0; font-size:13px; color:var(--muted); line-height:1.5;}

/* ---------- Navbar: usuário e sessão ---------- */
.nav-user{display:flex; align-items:center; gap:9px; white-space:nowrap;
  margin-left:4px;}
.nav-identidade{display:flex; flex-direction:column; line-height:1.15;}
.nav-nome{color:#fff; font-size:13px; font-weight:600;}
.nav-papel{color:var(--accent); font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px;}
.nav-sair{color:#aecbd0; font-size:13px; font-weight:600; white-space:nowrap;}
.nav-sair:hover{color:#fb7185;}

/* ---------- Navbar responsiva ---------- */
@media (max-width:1100px){
  .navbar-brand{min-width:auto;}
}
@media (max-width:900px){
  .navbar{gap:10px; padding:0 14px;}
  .nav-hamburguer{display:flex; order:-1;}   /* antes da marca */
  /* links viram gaveta abaixo da navbar */
  .navbar-links{display:none; position:absolute; top:60px; left:0; right:0;
    z-index:1100; flex-direction:column; align-items:stretch; gap:2px;
    padding:10px; background:var(--menu-bg);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 32px rgba(0,0,0,.35);}
  :root[data-nav="aberto"] .navbar-links{display:flex;}
  .navbar-links .nav-link{color:var(--txt); justify-content:flex-start;}
  .nav-link--atual::after{display:none;}
  /* grupo Extensionistas: lista sempre aberta dentro da gaveta */
  .nav-menu-botao{pointer-events:none; opacity:.65; font-size:11px;
    text-transform:uppercase; letter-spacing:.5px; padding-bottom:2px;}
  .nav-menu-botao .nav-caret{display:none;}
  .navbar-links .nav-menu-lista{position:static; opacity:1; visibility:visible;
    transform:none; box-shadow:none; border:none; background:transparent;
    padding:0 0 0 10px; min-width:0;}
  /* usuário: só o avatar (o menu continua clicável) */
  .nav-menu-cabecalho{display:block;}
}

/* ---------- Tela de acesso (/entrar) ----------
   Full-bleed com a constelação do hero. ACOMPANHA O TEMA: no escuro é
   fundo profundo; no claro, superfície clara com o mesmo desenho. */
.auth-tela{position:relative; overflow:hidden;
  margin:-24px -28px;                       /* quebra o padding do .content */
  min-height:calc(100vh - 60px);
  display:flex; align-items:center; justify-content:center; padding:40px 20px;
  background-color:#052630;
  /* background-image:
    radial-gradient(ellipse at 50% 0%, rgba(79,209,197,.12), transparent 60%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234fd1c5' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */
  background-size:cover, 60px 60px;}
.auth-canvas{position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;}

.auth-card{position:relative; z-index:1; width:100%; max-width:420px;
  padding:40px 38px; text-align:center; border-radius:20px;
  background:rgba(9,68,84,.42); backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(79,209,197,.22);
  box-shadow:0 24px 60px rgba(0,0,0,.35);}
.auth-logo{height:52px; width:auto; margin-bottom:18px;}
.auth-card h2{color:#fff; font-size:26px; font-weight:800;
  letter-spacing:-.02em; margin:0 0 6px;}
.auth-sub{color:#aecbd0; font-size:14px; line-height:1.5; margin:0 0 26px;}

.auth-form{display:flex; flex-direction:column; gap:12px;}
.auth-input{width:100%; padding:15px 20px; font-size:15px;
  font-family:inherit; text-align:left;
  color:#fff; background:rgba(4,28,37,.55);
  border:1px solid rgba(255,255,255,.16); border-radius:9999px;
  outline:none; transition:border-color .15s ease, box-shadow .15s ease;}
.auth-input::placeholder{color:#7f9ba3;}
.auth-input:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,209,197,.20);}
.auth-botao{width:100%; padding:15px; border-radius:9999px; font-size:15px;
  cursor:pointer; margin-top:4px;}
.auth-nota{color:#8fb3bb; font-size:12px; line-height:1.55; margin:10px 0 0;}
.auth-nota strong{color:#cfe2e6;}

.auth-msg{border-radius:12px; padding:12px 16px; font-size:13px;
  line-height:1.5; margin-bottom:18px; text-align:left;}
.auth-msg--erro{background:rgba(251,113,133,.14);
  border:1px solid rgba(251,113,133,.5); color:#ffc3cc;}
.auth-msg--ok{background:rgba(79,209,197,.12);
  border:1px solid rgba(79,209,197,.45); color:#a9ebe4;}

.auth-rodape{color:#6f9199; font-size:11px; margin:22px 0 0;}
.auth-voltar{display:inline-block; margin-top:14px; font-size:13px;
  color:#8fb3bb;}
.auth-voltar:hover{color:var(--accent);}

/* --- tela de acesso no TEMA CLARO --- */
:root[data-theme="light"] .auth-tela{
  background-color:#EBF0F3;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(9,68,84,.10), transparent 62%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23094454' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");}
:root[data-theme="light"] .auth-card{
  background:rgba(255,255,255,.86); border-color:#C3CFD6;
  box-shadow:0 20px 48px rgba(9,68,84,.14);}
:root[data-theme="light"] .auth-card h2{color:var(--heading);}
:root[data-theme="light"] .auth-sub{color:var(--muted);}
:root[data-theme="light"] .auth-input{
  background:#fff; color:var(--txt); border-color:#C3CFD6;}
:root[data-theme="light"] .auth-input::placeholder{color:#8b98a3;}
:root[data-theme="light"] .auth-nota{color:var(--muted);}
:root[data-theme="light"] .auth-nota strong{color:var(--txt);}
:root[data-theme="light"] .auth-rodape,
:root[data-theme="light"] .auth-voltar{color:var(--muted);}
:root[data-theme="light"] .auth-msg--erro{color:#b3273c;}
:root[data-theme="light"] .auth-msg--ok{color:#0b6b60;}

/* @media (max-width:700px){
  .auth-tela{margin:-16px -16px; padding:28px 16px;}
  .auth-card{padding:32px 24px;}
} */

/* ---------- Autenticação (MVP local) ---------- */
.login-page{max-width:520px;}
.login-form{display:flex; flex-direction:column; gap:6px; padding:22px;}
.login-form label{font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.4px; margin-top:8px;}
.login-form .btn{margin-top:16px; align-self:flex-start; cursor:pointer;}
.login-erro{background:rgba(251,113,133,.12); border:1px solid #fb7185;
  color:#fb7185; border-radius:8px; padding:10px 14px; font-size:13px;
  margin-top:10px;}
.login-aviso-caixa{background:rgba(79,209,197,.10);
  border:1px solid var(--accent); color:var(--accent); border-radius:8px;
  padding:12px 16px; font-size:13px; line-height:1.5; margin-top:10px;}
.login-aviso{font-size:12px; color:var(--muted); margin:12px 0 0;
  line-height:1.5;}
.admin-form{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.admin-form .busca-input{max-width:280px; margin:0;}
.admin-form .filtro--inline{margin-left:0; min-width:180px;}

/* ---------- Buscador de ações ---------- */
/* coluna de leitura centralizada (max-width sozinho ancorava à esquerda) */
.busca-page{max-width:920px; margin-inline:auto;}
.busca-head{margin-bottom:14px;}
.busca-head h2{font-size:26px;}

/* barra: campo (protagonista) + filtro de intenção */
.busca-barra{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.busca-input{flex:1; min-width:280px; padding:15px 22px; font-size:16px;
  font-family:inherit; background:var(--input-bg); color:var(--txt);
  border:1px solid var(--line); border-radius:9999px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;}
.busca-input:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79,209,197,.18);}
.busca-input::placeholder{color:var(--muted);}
.busca-toggle{padding:14px 20px; border-radius:9999px; cursor:pointer;
  font-family:inherit; font-size:14px; font-weight:600; white-space:nowrap;
  background:transparent; color:var(--muted);
  border:1px solid var(--line);
  transition:color .15s ease, border-color .15s ease, background .15s ease;}
.busca-toggle:hover{color:var(--accent); border-color:var(--accent);}
.busca-toggle--on{background:var(--accent); border-color:var(--accent);
  color:#04222b;}
.busca-ajuda{font-size:12px; color:var(--muted); margin:10px 4px 16px;}

/* chips de tema — a ponte para quem não sabe o que digitar */
.busca-temas-linha{display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; margin-bottom:22px;}
.busca-temas-rotulo{font-size:12px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.08em; white-space:nowrap;}
.busca-temas{display:flex; flex-wrap:wrap; gap:8px;}
.busca-tema{padding:7px 15px; border-radius:9999px; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:600;
  background:rgba(79,209,197,.10); color:var(--accent);
  border:1px solid rgba(79,209,197,.30);
  transition:background .15s ease, transform .15s ease;}
.busca-tema:hover{background:rgba(79,209,197,.22); transform:translateY(-1px);}

.busca-contagem{font-size:13px; color:var(--muted); margin:0 2px 14px;}
.busca-lista{display:flex; flex-direction:column; gap:12px;}
.busca-card{display:block; background:var(--panel);
  border:1px solid var(--line); border-left:3px solid transparent;
  border-radius:14px; padding:18px 22px;
  transition:border-color .15s ease, transform .15s ease,
             box-shadow .15s ease;}
.busca-card:hover{border-color:var(--accent); border-left-color:var(--accent);
  transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.14);}
/* hierarquia: selos decisivos > título > trecho > contexto */
.busca-selos{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
.busca-chip{font-size:11px; font-weight:700; color:var(--muted);
  border:1px solid var(--line); border-radius:9999px; padding:3px 10px;
  background:var(--panel-2); text-transform:uppercase; letter-spacing:.04em;}
.busca-chip--cat{color:var(--accent); border-color:var(--accent);
  background:rgba(79,209,197,.10);}
.busca-chip--ativa{color:#34d399; border-color:#34d399;
  background:rgba(52,211,153,.10);}
.busca-titulo{margin:0 0 8px; font-size:17px; color:var(--heading);
  line-height:1.4; font-weight:700;}
/* trecho do resumo: explica POR QUE o resultado apareceu */
.busca-trecho{margin:0 0 10px; font-size:13px; line-height:1.6;
  color:var(--muted);}
.busca-marca{background:rgba(79,209,197,.22); color:var(--accent);
  font-weight:700; border-radius:4px; padding:0 3px;}
.busca-rodape{display:flex; flex-wrap:wrap; gap:6px 14px;}
.busca-meta{font-size:12px; color:var(--muted); position:relative;}
.busca-meta:not(:last-child)::after{content:"·"; margin-left:14px;
  opacity:.5;}
.busca-ico{width:14px; height:14px;}
.busca-vazio{color:var(--muted); font-size:14px; margin:8px 2px;}
.busca-mais{display:flex; justify-content:center; margin:22px 0 8px;}
.busca-mais .btn{cursor:pointer;}

/* ---------- Página da ação (/acao/<codigo>) ---------- */
.acao-page{max-width:920px; margin-inline:auto;}
/* trilha (orienta quem chegou por link compartilhado) */
.trilha{display:flex; gap:8px; align-items:center; font-size:12px;
  color:var(--muted); margin-bottom:14px;}
.trilha a:hover{color:var(--accent);}
.trilha-sep{opacity:.5;}
.trilha-atual{color:var(--txt);}
.acao-titulo{font-size:28px; line-height:1.25; margin:10px 0 0;
  letter-spacing:-.01em;}

/* ficha rápida: decide o interesse em 3 segundos */
.ficha-grade{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px; margin:20px 0 18px;}
.ficha-item{background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--accent); border-radius:10px; padding:12px 14px;}
.ficha-rotulo{display:block; font-size:10px; font-weight:700;
  color:var(--muted); text-transform:uppercase; letter-spacing:.08em;}
.ficha-valor{display:block; font-size:15px; font-weight:700;
  color:var(--heading); margin-top:4px; line-height:1.3;}

.acao-municipios{display:flex; align-items:flex-start; gap:8px;
  font-size:13px; color:var(--txt); margin:0 2px 22px;}

/* equipe */
.acao-equipe{padding:18px 22px; margin-top:18px;}
.equipe-grade{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px;
  margin-top:10px;}
.equipe-item{text-align:center;}
.equipe-num{display:block; font-size:22px; font-weight:800;
  color:var(--accent); line-height:1.1;}
.equipe-rotulo{display:block; font-size:11px; font-weight:600;
  color:var(--muted); text-transform:uppercase; letter-spacing:.06em;
  margin-top:2px;}

/* chamada para ação: o caminho para participar */
.acao-cta{margin-top:18px; padding:24px;
  background:linear-gradient(120deg, rgba(79,209,197,.12),
                             var(--panel) 60%);
  border-color:rgba(79,209,197,.35);}
.cta-titulo{margin:0 0 10px; font-size:19px; color:var(--heading);
  font-weight:700;}
.cta-linha{margin:0 0 6px; font-size:14px; color:var(--txt);}
.cta-nota{margin:6px 0 16px; font-size:12px; color:var(--muted);
  line-height:1.6; max-width:60ch;}
.cta-acoes{display:flex; gap:10px; flex-wrap:wrap;}
.cta-acoes .btn{cursor:pointer; border-radius:9999px;}
.cta-copiado{display:inline-block; margin-top:10px; font-size:12px;
  color:var(--accent); font-weight:600;}

/* posts do Instagram (seção "Nas redes") */
.acao-midias{margin-top:18px; padding:18px 22px;}
/* grade compacta: 2–3 posts lado a lado em telas largas */
.midia-grade{display:grid; gap:14px; margin-top:12px;}
.midia-grade--iframe{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.midia-grade--card{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.midia-item{display:flex; flex-direction:column; gap:6px;}
.midia-frame{width:100%; height:400px; border:1px solid var(--line);
  border-radius:12px; background:var(--panel-2); display:block;}

/* card na identidade do ODE (modo "card") */
.midia-card{display:flex; flex-direction:column; padding:0; overflow:hidden;
  height:100%;}
.midia-capa-wrap{position:relative; width:100%; aspect-ratio:1/1;
  background:var(--panel-2); overflow:hidden;}
.midia-capa{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .3s ease;}
.midia-card:hover .midia-capa{transform:scale(1.04);}
.midia-sem-capa{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:12px; color:var(--muted);}
.midia-topo{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 14px 0;}
.midia-selo{font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid rgba(79,209,197,.4); border-radius:9999px;
  padding:2px 8px;}
.midia-autor{font-size:12px; color:var(--muted); font-weight:600;}
.midia-legenda{margin:8px 14px 0; font-size:12px; line-height:1.55;
  color:var(--txt); display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden;}
.midia-card .painel-cta{margin:12px 14px 14px; font-size:12px;}
.midia-manual{margin-top:10px;}
.midia-manual summary{font-size:13px; padding:10px 14px;}
.midia-manual .midia-form{padding:0 14px 14px;}
/* ações fora do iframe (antes cobriam o cabeçalho do post) */
.midia-acoes{display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:0 2px;}
.midia-link{font-size:12px; color:var(--accent); font-weight:600;}
.midia-remover{cursor:pointer; background:transparent; color:#fb7185;
  border:1px solid rgba(251,113,133,.45); border-radius:9999px;
  padding:4px 12px; font-size:12px; font-weight:600; font-family:inherit;
  transition:background .15s ease;}
.midia-remover:hover{background:rgba(251,113,133,.14);}
.midia-nota{margin:12px 0 0; font-size:11px; color:var(--muted);}
.midia-form{display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top:14px;}
.midia-form .busca-input{max-width:420px; margin:0; padding:11px 18px;
  font-size:14px;}
.midia-form .btn{cursor:pointer;}

/* relacionadas: mantém a descoberta viva */
.acao-relacionadas{margin-top:26px;}
.rel-grade{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;
  margin-top:10px;}
.rel-card{display:block; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  transition:border-color .15s ease, transform .15s ease;}
.rel-card:hover{border-color:var(--accent); transform:translateY(-2px);}
.rel-titulo{margin:8px 0 6px; font-size:14px; line-height:1.4;
  color:var(--heading); font-weight:600;}
.acao-secoes{display:flex; flex-direction:column; gap:10px;}
.acao-secao{background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:0; overflow:hidden;}
.acao-secao summary{cursor:pointer; padding:14px 20px; font-size:15px;
  font-weight:600; color:var(--heading); list-style:none;
  display:flex; align-items:center; gap:10px;}
/* seta em SVG (mesmo chevron dos menus), via máscara CSS */
.acao-secao summary::before{content:""; width:15px; height:15px; flex:none;
  background-color:var(--accent);
  -webkit-mask:url(/assets/icons/chevron-down.svg) no-repeat center/contain;
  mask:url(/assets/icons/chevron-down.svg) no-repeat center/contain;
  transform:rotate(-90deg); transition:transform .18s ease;}
.acao-secao[open] summary::before{transform:rotate(0deg);}
.acao-secao summary:hover{color:var(--accent);}
.acao-secao summary::-webkit-details-marker{display:none;}
.acao-secao summary::marker{content:"";}
.acao-secao-corpo{padding:0 20px 18px;}
/* coluna de leitura confortável (~70 caracteres por linha) */
.acao-secao-corpo p{margin:0 0 12px; font-size:15px; line-height:1.75;
  color:var(--txt); max-width:70ch;}

/* ---------- Painel PDI ---------- */
/* placar executivo: "X de N metas atingidas" + chips por indicador */
.pdi-placar{display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; background:var(--panel);
  border:1px solid var(--line); border-left:4px solid var(--accent);
  border-radius:12px; padding:16px 22px; margin:6px 0 26px;}
.pdi-placar-resumo{display:flex; align-items:baseline; gap:10px;}
.pdi-placar-num{font-size:30px; font-weight:700; color:var(--kpi-val);}
.pdi-placar-txt{font-size:14px; color:var(--muted); font-weight:600;}
.pdi-placar-chips{display:flex; gap:8px; flex-wrap:wrap;}
.pdi-chip{font-size:12px; font-weight:600; color:var(--txt);
  border:1px solid var(--line); border-radius:9999px; padding:5px 12px;
  background:var(--panel-2); white-space:nowrap;}

.pdi-grupo-head{margin:26px 0 12px;}
.pdi-grupo-head .lead{margin-top:2px;}

.kpi-sub--parcial{color:var(--muted); font-weight:500; font-style:italic;}

.btn-mini{margin-left:auto; padding:7px 16px; font-size:13px; cursor:pointer;
  border:none; border-radius:9999px;}

.pdi-cod{font-size:11px; font-weight:700; letter-spacing:.5px; color:var(--accent);}
.pdi-metas{margin:8px 0 0; font-size:12px; color:var(--txt);}
.pdi-fonte{margin:4px 0 0; font-size:11px; color:var(--muted);}
.pdi-secao{color:var(--heading); font-size:20px; margin:26px 0 4px;}
.pdi-indisponiveis{margin-top:10px;}
.pdi-nota{margin:22px 2px 8px; font-size:12px; color:var(--muted);
  line-height:1.6; border-left:3px solid var(--gold); padding-left:12px;}

/* ---------- Tabela de ações (painel Mapa) ---------- */
.tabela-acoes{width:100%; border-collapse:collapse; font-size:13px;}
.tabela-acoes th{position:sticky; top:0; background:var(--panel-2);
  color:var(--muted); font-size:11px; text-transform:uppercase;
  letter-spacing:.4px; text-align:left; padding:8px 10px;
  border-bottom:1px solid var(--line);}
.tabela-acoes td{padding:8px 10px; border-bottom:1px solid var(--line);
  color:var(--txt);}
.tabela-acoes td:not(:first-child),.tabela-acoes th:not(:first-child){
  text-align:center; white-space:nowrap;}
.tabela-acoes tbody tr:hover{background:var(--side-hover);}
.tabela-vazia{color:var(--muted); font-size:13px; margin:6px 2px;}
/* dropdown interno do gráfico: largura legível, empurrado p/ a direita */
.filtro--inline{margin-left:auto; min-width:210px; flex:0 0 210px;}

/* =========================================================================
   DROPDOWNS (dcc.Dropdown) — variáveis (claro/escuro)
   ========================================================================= */
.filtro .Select-control,.filtro .Select-control:hover{
  background:var(--input-bg); border:1px solid var(--line); border-radius:8px;
  box-shadow:none; min-height:38px;}
.filtro.is-focused:not(.is-open) > .Select-control{
  border-color:var(--accent); box-shadow:0 0 0 2px rgba(79,209,197,.25);}
.filtro .Select-placeholder{color:var(--muted);}
.filtro .Select--single > .Select-control .Select-value .Select-value-label,
.filtro .Select-value-label{color:var(--txt) !important;}
.filtro .Select-input > input{color:var(--txt);}
.filtro .Select-arrow{border-color:var(--muted) transparent transparent;}
.filtro.is-open .Select-arrow{border-color:transparent transparent var(--accent);}
.filtro .Select--multi .Select-value{background:rgba(79,209,197,.14);
  border:1px solid rgba(79,209,197,.45); color:var(--txt); border-radius:6px;}
.filtro .Select--multi .Select-value-icon{border-right:1px solid rgba(79,209,197,.45); color:var(--accent);}
.filtro .Select--multi .Select-value-icon:hover{background:rgba(79,209,197,.25);}
.filtro .Select-menu-outer{background:var(--menu-bg); border:1px solid var(--line);
  border-radius:0 0 8px 8px; z-index:1200;}
.filtro .Select-option{background:var(--menu-bg); color:var(--txt); font-size:14px;}
.filtro .Select-option.is-focused{background:rgba(79,209,197,.18);}
.filtro .Select-option.is-selected{background:rgba(124,156,255,.18);}
.filtro .Select-noresults{color:var(--muted);}

/* =========================================================================
   ÍCONES SVG (máscara CSS) — herdam a cor do texto (currentColor)
   ========================================================================= */
.icon{display:inline-block; width:20px; height:20px; background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain; vertical-align:middle; flex:none;}
.icon-menu{-webkit-mask-image:url(/assets/icons/menu.svg); mask-image:url(/assets/icons/menu.svg);}
.icon-settings{-webkit-mask-image:url(/assets/icons/settings.svg); mask-image:url(/assets/icons/settings.svg);}
.icon-mail{-webkit-mask-image:url(/assets/icons/mail.svg); mask-image:url(/assets/icons/mail.svg);}
.icon-search{-webkit-mask-image:url(/assets/icons/search.svg); mask-image:url(/assets/icons/search.svg);}
.icon-home{-webkit-mask-image:url(/assets/icons/home.svg); mask-image:url(/assets/icons/home.svg);}
.icon-students{-webkit-mask-image:url(/assets/icons/students.svg); mask-image:url(/assets/icons/students.svg);}
.icon-teacher{-webkit-mask-image:url(/assets/icons/teacher.svg); mask-image:url(/assets/icons/teacher.svg);}
.icon-clipboard{-webkit-mask-image:url(/assets/icons/clipboard.svg); mask-image:url(/assets/icons/clipboard.svg);}
.icon-map{-webkit-mask-image:url(/assets/icons/map.svg); mask-image:url(/assets/icons/map.svg);}
.icon-building{-webkit-mask-image:url(/assets/icons/building.svg); mask-image:url(/assets/icons/building.svg);}
.icon-star{-webkit-mask-image:url(/assets/icons/star.svg); mask-image:url(/assets/icons/star.svg);}
.icon-users{-webkit-mask-image:url(/assets/icons/users.svg); mask-image:url(/assets/icons/users.svg);}
.icon-award{-webkit-mask-image:url(/assets/icons/award.svg); mask-image:url(/assets/icons/award.svg);}
.icon-book{-webkit-mask-image:url(/assets/icons/book.svg); mask-image:url(/assets/icons/book.svg);}
.icon-calendar{-webkit-mask-image:url(/assets/icons/calendar.svg); mask-image:url(/assets/icons/calendar.svg);}
.icon-arrow-right{-webkit-mask-image:url(/assets/icons/arrow-right.svg); mask-image:url(/assets/icons/arrow-right.svg);}
.icon-chevron-down{-webkit-mask-image:url(/assets/icons/chevron-down.svg); mask-image:url(/assets/icons/chevron-down.svg);}
.icon-chart-bar{-webkit-mask-image:url(/assets/icons/chart-bar.svg); mask-image:url(/assets/icons/chart-bar.svg);}
/* tema: lua no escuro, sol no claro */
.icon-theme{-webkit-mask-image:url(/assets/icons/sun.svg); mask-image:url(/assets/icons/sun.svg);}
:root[data-theme="light"] .icon-theme{-webkit-mask-image:url(/assets/icons/moon.svg); mask-image:url(/assets/icons/moon.svg);}
.nav-search-ico{color:#8aa6ad; margin-right:8px; width:18px; height:18px;}
.side-ico{width:18px; height:18px;}

/* =========================================================================
   NAVBAR transparente sobre o hero — apenas na home e no topo da página
   ========================================================================= */
.navbar{transition:background .25s ease, border-color .25s ease;}
:root[data-page="home"] .content{padding-top:0;}
:root[data-page="home"] .hero{margin-top:-60px; padding-top:60px;}
/* transparente sobre o hero, mas com véu escuro no topo: os links brancos
   ficam legíveis independentemente do trecho da foto que estiver atrás.
   Sem borda inferior — ela cortava a imagem com uma linha dura. */
:root[data-page="home"]:not([data-scrolled]) .navbar{
  background:linear-gradient(180deg, rgba(4,28,37,.55) 0%,
                             rgba(4,28,37,.28) 60%, rgba(4,28,37,0) 100%);
  border-bottom:none;}
:root[data-page="home"]:not([data-scrolled]) .nav-acao{
  border-color:rgba(255,255,255,.30);}

/* =========================================================================
   Largura máxima do conteúdo da home — o hero continua full-bleed
   ========================================================================= */
.stats-band,
.stats-atualizacao,
.home-section,
.cta-band,
.home-footer{
  max-width:1180px; margin-left:auto; margin-right:auto;
}

.sobre-logo{height:48px; width:auto; display:block; margin-bottom:14px;}
/* --- Curricularização ------------------------------------------------- */
/* Linhas de contexto do curso escolhido: leitura em coluna, não em tabela,
   porque são poucos campos e cada um é uma frase. */
.curr-detalhe{margin:12px 0 4px;}
.curr-linhas{display:flex; flex-direction:column; gap:6px; font-size:13px;
  color:var(--text);}
.curr-linhas strong{color:var(--muted); font-weight:700;}
.curr-alerta{color:var(--gold); font-weight:600;}
/* Nota de fonte: discreta, mas presente — todo número precisa de origem. */
.fonte-nota{margin:18px 0 6px; font-size:12px; line-height:1.6;
  color:var(--muted);}

/* --- Curricularização (pública e gestão) ---------------------------------------
   Disciplina da ISA-101 (cor só para o anormal, símbolo junto da cor,
   do geral ao detalhe) com acabamento de produto: hierarquia por
   tipografia e espaço, superfícies leves, cor rara e intencional.
   Duas cores de estado no arquivo inteiro — âmbar e vermelho. Só. */
.quadro{--atencao:#E5A94F; --critico:#E5675F;
  --superficie:color-mix(in srgb, var(--panel) 92%, transparent);}

/* Superfície única, repetida: menos moldura, mais respiro. */
.quadro .painel{background:var(--superficie); border:1px solid var(--line);
  border-radius:16px; padding:22px 24px; margin-bottom:14px;}
:root[data-theme="light"] .quadro .painel{box-shadow:0 2px 10px rgba(9,68,84,.05);}
.quadro .painel-topo{display:flex; align-items:baseline;
  justify-content:space-between; gap:12px; margin-bottom:16px;}
/* "olho" = sobrancelha tipográfica; orienta sem gritar */
.quadro .olho{font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);}
.quadro .olho-dica{font-size:11.5px; color:var(--muted); opacity:.72;}

/* ---- abertura: a frase primeiro, o número confirmando ---- */
.painel--abertura{padding:26px 24px 20px;}
.abertura-topo{display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:18px; margin:10px 0 20px;}
.abertura-numero{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.numero-forte{font-size:54px; font-weight:800; line-height:.95;
  letter-spacing:-.02em; color:var(--heading); font-variant-numeric:tabular-nums;}
.numero-frase{font-size:17px; font-weight:600; color:var(--txt); opacity:.9;}
.abertura-apoio{margin:0; max-width:42ch; font-size:13px; line-height:1.6;
  color:var(--muted);}

/* Barra: segmentos separados por respiro, sem número dentro. A leitura é
   a proporção; os números ficam na legenda, onde não competem. */
.barra{display:flex; gap:3px; height:8px;}
.barra-seg{border-radius:99px; min-width:6px; transition:opacity .15s;}
.barra:hover .barra-seg{opacity:.55;}
.barra .barra-seg:hover{opacity:1;}
.seg--feito{background:var(--accent);}
.seg--curso{background:color-mix(in srgb, var(--muted) 55%, transparent);}
.seg--atencao{background:var(--atencao);}
.barra-legenda{display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:14px;}
.leg-item{display:inline-flex; align-items:center; gap:7px; font-size:12px;}
.leg-ponto{width:8px; height:8px; border-radius:99px; display:inline-block;}
.leg-nome{color:var(--muted);}
.leg-num{font-weight:700; color:var(--txt); font-variant-numeric:tabular-nums;}

/* ---- cartões de ação: número grande, rótulo em frase ---- */
.acao-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:12px;}
.acao-card{position:relative; display:flex; flex-direction:column; gap:2px;
  padding:16px 18px 15px; border:1px solid var(--line); border-radius:14px;
  background:transparent; font:inherit; text-align:left; cursor:pointer;
  color:var(--txt); overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;}
.acao-card::before{content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:transparent;}
.acao-card:hover:not(:disabled){transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow:0 10px 26px rgba(0,0,0,.18);}
.acao-card:disabled{cursor:default;}
.acao-num{font-size:32px; font-weight:800; line-height:1.05;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.acao-titulo{font-size:13.5px; font-weight:600;}
.acao-apoio{font-size:11.5px; color:var(--muted); line-height:1.45;}
/* cor entra só aqui — e sempre com o número, que já é o sinal */
.acao-card--critico::before{background:var(--critico);}
.acao-card--critico .acao-num{color:var(--critico);}
.acao-card--atencao::before{background:var(--atencao);}
.acao-card--atencao .acao-num{color:var(--atencao);}
.acao-card--info .acao-num{color:var(--txt);}
.acao-card--zerado{opacity:.45;}
.acao-card--zerado .acao-num{color:var(--muted);}

/* ---- tabelas: sem grade; o alinhamento faz o trabalho ---- */
.quadro .tabela-envolve{overflow:auto; max-height:520px; margin:0 -6px;}
.quadro .tabela{width:100%; border-collapse:collapse; font-size:13px;}
.quadro .tabela th{position:sticky; top:0; z-index:1; padding:0 12px 10px;
  background:var(--panel); text-align:right; white-space:nowrap;
  font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);}
.quadro .tabela td{padding:11px 12px; text-align:right;
  border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent);
  font-variant-numeric:tabular-nums;}
.quadro .tabela th.col-nome, .quadro .tabela td.col-nome{text-align:left;}
.quadro .tabela tbody tr{transition:background .12s;}
.quadro .tabela tbody tr:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);}
.quadro .num{font-weight:600;}
.quadro .num--zero{color:var(--muted); opacity:.32; font-weight:400;}
.quadro .num--atencao{color:var(--atencao); font-weight:700;}
.quadro .num--acao{color:var(--atencao); font-weight:700;}
.quadro .apagado{color:var(--muted);}
.quadro .observacao{text-align:left; font-size:12px; color:var(--muted);}
.quadro .marca{margin-right:6px; font-size:11px;}
/* severidade: filete à esquerda + a marca no texto. Linha normal, nada. */
.quadro .linha--critico td:first-child{box-shadow:inset 2px 0 0 var(--critico);}
.quadro .linha--critico .observacao{color:var(--critico);}
.quadro .linha--atencao td:first-child{box-shadow:inset 2px 0 0 var(--atencao);}
.quadro .linha--atencao .observacao{color:var(--atencao);}
.quadro .celula-link{background:none; border:0; padding:0; font:inherit;
  font-weight:600; color:var(--txt); cursor:pointer; text-align:left;}
.quadro .celula-link:hover{color:var(--accent);}
.quadro .vazio{padding:18px 0; font-size:13px; color:var(--muted);}

/* ---- processo aberto ---- */
.proc-cabecalho{display:flex; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; gap:12px; margin-bottom:18px;}
.proc-nome{margin:0 0 4px; font-size:19px; font-weight:700; color:var(--heading);}
.proc-meta{font-size:12.5px; color:var(--muted);}
.proc-lado{display:flex; flex-direction:column; align-items:flex-end; gap:3px;}
.proc-numero{font-size:12.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;}
.proc-situacao{font-size:13px; font-weight:600; color:var(--txt);}

/* Trilha dos marcos: percorrido em neutro, atual com anel. */
.fluxo-h{display:flex; overflow-x:auto; padding:6px 0 2px;}
.h-passo{position:relative; min-width:112px; flex:1; text-align:center;
  padding:0 4px;}
.h-passo::before,.h-passo::after{content:""; position:absolute; top:6px;
  height:1.5px; background:var(--line);}
.h-passo::before{left:0; right:50%;}
.h-passo::after{left:50%; right:0;}
.h-passo:first-child::before,.h-passo:last-child::after{display:none;}
.h-dot{position:relative; z-index:1; width:10px; height:10px; margin:1px auto 10px;
  border-radius:99px; background:color-mix(in srgb,var(--muted) 70%,transparent);}
.h-label{font-size:11px; font-weight:600; color:var(--txt); line-height:1.35;}
.h-data{font-size:10.5px; color:var(--muted); margin-top:3px;
  font-variant-numeric:tabular-nums;}
.h-passo--vazio .h-dot{background:transparent;
  box-shadow:inset 0 0 0 1.5px var(--line);}
.h-passo--vazio .h-label,.h-passo--vazio .h-data{opacity:.38;}
.h-passo--atual .h-dot{background:var(--accent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 22%,transparent);}
.h-passo--atual .h-label{color:var(--accent);}

/* Histórico: linha do tempo enxuta; cor só na etapa aberta ou muito longa. */
.v-timeline{display:flex; flex-direction:column; max-height:440px;
  overflow-y:auto; margin-top:14px; padding-right:6px;}
.v-item{position:relative; display:flex; gap:14px; padding:10px 0;}
.v-item::before{content:""; position:absolute; left:4.5px; top:0; bottom:0;
  width:1.5px; background:var(--line);}
.v-item:first-child::before{top:15px;}
.v-item:last-child::before{bottom:calc(100% - 15px);}
.v-dot{position:relative; z-index:1; flex:0 0 10px; width:10px; height:10px;
  margin-top:5px; border-radius:99px;
  background:color-mix(in srgb,var(--muted) 70%,transparent);
  box-shadow:0 0 0 3px var(--panel);}
.v-dot--alerta{background:var(--atencao);}
.v-corpo{display:flex; flex-direction:column; gap:3px; min-width:0;}
.v-unidade{font-size:12.5px; font-weight:600; color:var(--txt);}
.v-datas{font-size:11.5px; color:var(--muted);}
.v-dias{font-variant-numeric:tabular-nums;}
.v-dias--alerta{color:var(--atencao); font-weight:700;}
.v-pessoa{font-size:12px; color:var(--txt); opacity:.85;}
.v-contato{font-size:11px; color:var(--muted);}

/* Documentos: o cartão inteiro é o alvo do clique. */
.doc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr));
  gap:10px; max-height:440px; overflow-y:auto; margin-top:14px;}
.doc-card{position:relative; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; display:flex; flex-direction:column; gap:5px;
  transition:border-color .15s, transform .15s;}
.doc-card:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  transform:translateY(-1px);}
.doc-topo{display:flex; justify-content:space-between; gap:8px;}
.doc-especie{font-size:12px; font-weight:700; color:var(--txt);}
.doc-data{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums;}
.doc-origem{font-size:11px; color:var(--muted); line-height:1.45;}
.doc-link{font-size:11.5px; font-weight:600; color:var(--accent);}
.doc-link::after{content:" ↗"; font-size:10px;}
/* A matriz tem muitas colunas numéricas curtas: aperta o passo lateral
   para caber sem rolagem no desktop, sem espremer a coluna do centro. */
.quadro .tabela--matriz td, .quadro .tabela--matriz th{padding-left:9px;
  padding-right:9px;}
.quadro .tabela--matriz td.col-nome{min-width:96px;}


/* --- Tabela recorte (página pública) ----------------------------------
   Reproduz o quadro que a PROEX já lê na planilha. Mantém a divisão por
   setor e a leitura em colunas, mas troca o vermelho/azul/amarelo puros
   da planilha pela paleta da marca: mesma orientação, sem a estridência
   que cansa em tela. */
/* A largura de cada setor vem de --cols (calculado na página, na
   proporção do nº de subcolunas). Sem isso, quatro colunas iguais fazem o
   CONSEPE quebrar em duas linhas e o Currículo sobrar espaço. */
.rec-grade{display:grid; grid-template-columns:var(--cols,repeat(4,1fr));
  gap:12px; margin-top:6px;}
.rec-coluna{border:1px solid var(--line); border-radius:12px; overflow:hidden;
  display:flex; flex-direction:column;}
.rec-setor{padding:8px 12px; font-size:11px; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase; color:#04222c;
  text-align:center;}
.rec-setor--prg{background:var(--accent-2);}
.rec-setor--proex{background:var(--accent);}
.rec-setor--consepe{background:var(--gold);}
.rec-setor--final{background:var(--green); color:#f2f8f3;}
/* Grade, e não flex-wrap: com 6 colunas o wrap fazia a segunda fila
   esticar e os números saírem do prumo. Aqui toda célula tem a mesma
   largura, e o rótulo ocupa uma faixa fixa para os valores alinharem
   mesmo quando o texto quebra em duas linhas. */
.rec-celulas{display:grid; flex:1;
  grid-template-columns:repeat(var(--n,3),minmax(0,1fr));
  gap:1px; background:var(--line);}
/* separadores desenhados pelo gap: funcionam em qualquer quebra de linha,
   sem depender de :nth-child para saber onde começa a fila de baixo */
.rec-celula{display:flex; flex-direction:column; justify-content:flex-start;
  padding:10px 6px 12px; text-align:center; background:var(--panel);}
.rec-rotulo{display:flex; align-items:center; justify-content:center;
  height:30px; font-size:10px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--muted); line-height:1.25;}
.rec-valor{font-size:26px; font-weight:800; color:var(--kpi-val);
  line-height:1.15; font-variant-numeric:tabular-nums;}
.rec-pct{font-size:11px; font-weight:600; color:var(--muted);
  font-variant-numeric:tabular-nums; min-height:14px;}
.rec-base{font-size:11.5px; color:var(--muted);}

/* Abaixo de 1100px não cabem as 12 subcolunas lado a lado: os setores
   passam a empilhar, cada um ocupando a linha inteira. */
@media (max-width:1100px){
  .rec-grade{grid-template-columns:1fr;}
  .rec-celulas{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));}
}
/* Célula clicável (só na gestão): afeta o cursor e o realce, nunca o
   alinhamento — botão e div ocupam exatamente o mesmo espaço. */
.rec-celula--btn{border:0; font:inherit; cursor:pointer; width:100%;
  transition:background .15s;}
.rec-celula--btn:hover{background:color-mix(in srgb,var(--accent) 12%,var(--panel));}
.rec-celula--btn:hover .rec-valor{color:var(--accent);}
.rec-celula--vazia .rec-valor{opacity:.35;}
/* Cabeçalho com ação: título à esquerda, exportação à direita. */
.page-head--acao{display:flex; align-items:flex-start;
  justify-content:space-between; flex-wrap:wrap; gap:16px;}
.exportar-caixa{display:flex; flex-direction:column; align-items:flex-end;
  gap:6px; max-width:280px; text-align:right;}
.exportar-dica{font-size:11px; color:var(--muted); line-height:1.4;}
.exportar-status{font-size:11.5px; color:var(--accent); min-height:16px;}

/* Controle de acessos: as três camadas em lista numerada e a coluna de
   permissões contida, para a tabela não esticar com textos longos. */
.admin-camadas{margin:6px 0 10px; padding-left:20px; font-size:13px;
  line-height:1.7; color:var(--txt);}
.admin-camadas strong{color:var(--accent);}
.admin-permissoes{font-size:11.5px; color:var(--muted); max-width:360px;}

/* Card que contém formulário com dropdown ------------------------------
   O menu do dcc.Dropdown é posicionado por cima do conteúdo seguinte. Sem
   um contexto de empilhamento próprio, o card de baixo — que tem fundo
   opaco — era desenhado por cima e cortava a lista de papéis pela metade.
   Elevar o card resolve para qualquer quantidade de opções. */
.card--form{position:relative; z-index:30; overflow:visible;}
/* Em empate de z-index quem vem depois no DOM ganha: sem esta regra, o
   menu do primeiro formulário seria coberto pelo card do segundo. */
.card--form ~ .card--form{z-index:29;}
.admin-form{position:relative; z-index:31;}
/* o menu precisa vencer também os cards vizinhos, não só o irmão direto */
.filtro .Select-menu-outer{z-index:2000;}
.admin-form .filtro--inline .Select-menu-outer{min-width:180px;}
/* O menu do dropdown tem rolagem própria; limitá-lo evita que uma lista
   longa (130 cursos) tente ocupar mais tela do que existe. */
.filtro .Select-menu-outer{max-height:280px;}
.filtro .Select-menu{max-height:278px;}

/* ---- Curricularizacao (gestao): filtros + cartoes de curso -------------- */
/* Os filtros nao sao "mais um painel": sao a porta de entrada de quem chega
   com um numero de processo na mao. Por isso ficam colados na lista. */
.quadro .filtro-linha{display:grid; gap:12px;
  grid-template-columns:minmax(220px,1.6fr) repeat(3,minmax(150px,1fr)) 130px;}
@media (max-width:900px){
  .quadro .filtro-linha{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}
}
.quadro .campo{width:100%; box-sizing:border-box; padding:9px 11px;
  background:var(--panel-2); color:var(--txt); font:inherit; font-size:13.5px;
  border:1px solid var(--line); border-radius:8px;}
.quadro .campo:focus{outline:none;
  border-color:color-mix(in srgb,var(--accent) 60%,var(--line));}
.quadro .radio-linha{display:flex; gap:12px; align-items:center;
  font-size:13px; padding-top:7px;}
.quadro .radio-linha label{display:inline-flex; align-items:center; gap:5px;
  color:var(--txt); cursor:pointer;}
.quadro .btn-limpar{background:none; border:0; font:inherit; font-size:11.5px;
  color:var(--muted); cursor:pointer; text-decoration:underline;
  text-underline-offset:3px; padding:0;}
.quadro .btn-limpar:hover{color:var(--accent);}

/* Cartao de curso: identificacao, avanco, processo. O detalhe fica no clique. */
.cc-grade{display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.cc-card{display:flex; flex-direction:column; gap:9px; width:100%;
  padding:16px 18px 14px; text-align:left; font:inherit; color:var(--txt);
  background:transparent; border:1px solid var(--line); border-radius:14px;
  position:relative; overflow:hidden;}
.cc-card--clicavel{cursor:pointer;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;}
.cc-card--clicavel:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 10px 26px rgba(0,0,0,.18);}
/* filete a esquerda, como nas linhas da tabela: mesma gramatica de severidade */
.cc-card::before{content:""; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:transparent;}
.cc-card--atencao::before{background:var(--atencao);}
.cc-card--critico::before{background:var(--critico);}
.cc-topo{display:flex; align-items:baseline; justify-content:space-between;
  gap:10px;}
.cc-nome{font-size:14.5px; font-weight:700; color:var(--heading);
  line-height:1.25;}
.cc-codigo{flex:none; font-size:11px; color:var(--muted);
  font-variant-numeric:tabular-nums; background:var(--panel-2);
  border-radius:6px; padding:2px 7px;}
.cc-linhas{display:flex; flex-wrap:wrap; gap:2px 10px;}
.cc-meta{font-size:12px; color:var(--muted);}
.cc-rodape{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px;
  margin-top:2px; padding-top:9px;
  border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent);}
.cc-processo{font-size:12px; color:var(--txt); font-weight:600;
  font-variant-numeric:tabular-nums;}
.cc-situacao{font-size:12px; color:var(--muted);}
.cc-dias{margin-left:auto; font-size:11.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;}
.cc-alerta{font-size:12px; font-weight:600; color:var(--atencao);}
.cc-card--critico .cc-alerta{color:var(--critico);}

/* Trilha compacta: so os pontos, para caber no cartao. O rotulo vai no title. */
.fluxo-h--mini{padding:2px 0 0; overflow:visible;}
.fluxo-h--mini .h-passo{min-width:0; padding:0;}
.fluxo-h--mini .h-dot{margin:0 auto; width:9px; height:9px;}
.fluxo-h--mini .h-passo::before,.fluxo-h--mini .h-passo::after{top:4px;}
.fluxo-h--mini .h-passo--atual .h-dot{
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--accent) 24%,transparent);}

/* ---- Gestao em tres telas: navegacao e historico ----------------------- */
/* Os elementos clicaveis viraram <a> (dcc.Link) para trocar de tela em vez
   de empilhar conteudo. Sem isto herdariam o sublinhado e o azul de link. */
.quadro a.acao-card,.quadro a.cc-card,.quadro a.rec-celula--btn,
.quadro a.celula-link,.quadro a.leg-item{
  text-decoration:none; color:inherit;}
.quadro a.celula-link:hover{color:var(--accent);}
.quadro a.leg-item{cursor:pointer;}
.quadro a.leg-item:hover .leg-nome{color:var(--accent);}
.quadro .tabela td.num a.celula-link{font-weight:inherit; color:inherit;}

/* Migalha: numa tela que troca por link, sem isto a unica saida e o botao
   voltar do navegador — da para sair, mas nao para saber onde se esta. */
.migalha{display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:0 0 16px; font-size:12.5px;}
.mig-link{color:var(--muted); text-decoration:none;}
.mig-link:hover{color:var(--accent); text-decoration:underline;
  text-underline-offset:3px;}
.mig-sep{color:var(--muted); opacity:.5;}
.mig-atual{color:var(--txt); font-weight:600;}
.tela-rodape{display:flex; justify-content:center; margin:18px 0 6px;}

/* Historico detalhado: uma movimentacao por cartao, com os anexos DENTRO
   dela — e assim que o SIPAC apresenta e e a pergunta de quem confere
   ("o que entrou quando?"). Cor so na movimentacao aberta ou longa demais. */
.hist-linha{display:flex; flex-direction:column; gap:14px; margin-top:6px;}
.hist-item{position:relative; display:flex; gap:16px;}
.hist-item::before{content:""; position:absolute; left:5px; top:18px;
  bottom:-14px; width:2px;
  background:color-mix(in srgb,var(--line) 70%,transparent);}
.hist-item:last-child::before{display:none;}
.hist-marca{flex:none; width:12px; height:12px; margin-top:16px;
  border-radius:99px; background:var(--superficie);
  box-shadow:inset 0 0 0 2.5px color-mix(in srgb,var(--muted) 60%,transparent);}
.hist-cartao{flex:1; min-width:0; padding:16px 20px 14px;
  border:1px solid var(--line); border-radius:14px;
  background:color-mix(in srgb,var(--panel-2) 60%,transparent);}
.hist-cartao--alerta{border-color:color-mix(in srgb,var(--atencao) 45%,var(--line));}
.hist-item:has(.hist-cartao--alerta) .hist-marca{
  box-shadow:inset 0 0 0 3px var(--atencao);}
.hist-cabecalho{display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px;}
.hist-data{font-size:12px; font-weight:700; color:var(--txt);
  font-variant-numeric:tabular-nums; background:var(--panel-2);
  border:1px solid var(--line); border-radius:7px; padding:3px 9px;}
.hist-unidade{flex:1 1 260px; margin:0; font-size:14.5px; font-weight:700;
  color:var(--heading); line-height:1.3;}
.hist-chips{display:flex; flex-wrap:wrap; gap:6px;}
.hist-chip{font-size:11px; font-weight:600; border-radius:99px;
  padding:3px 10px; white-space:nowrap;}
.hist-chip--neutro{color:var(--muted);
  background:color-mix(in srgb,var(--muted) 14%,transparent);}
.hist-chip--alerta{color:var(--atencao);
  background:color-mix(in srgb,var(--atencao) 16%,transparent);}
.hist-recebido{margin-top:10px; padding-top:10px; font-size:12.5px;
  color:var(--muted);
  border-top:1px dashed color-mix(in srgb,var(--line) 70%,transparent);}
.hist-recebido strong{color:var(--txt); font-weight:600;}
.hist-pessoa{color:var(--txt);}
.hist-contato{font-variant-numeric:tabular-nums;}
.hist-anexos-titulo{margin:14px 0 8px; font-size:11px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.hist-anexos{display:flex; flex-direction:column; gap:6px;}
.anexo{display:flex; align-items:flex-start; gap:10px; padding:9px 12px;
  border-radius:10px;
  background:color-mix(in srgb,var(--panel) 55%,transparent);
  border:1px solid color-mix(in srgb,var(--line) 45%,transparent);}
.anexo-icone{flex:none; font-size:13px; line-height:1.5; opacity:.6;}
.anexo-nome{font-size:12.5px; font-weight:700; color:var(--accent);
  text-decoration:none;}
.anexo-nome:hover{text-decoration:underline; text-underline-offset:2px;}
.anexo-nome--sem{color:var(--muted); font-weight:600;}
.anexo-linhas{display:flex; flex-wrap:wrap; gap:2px 14px; margin-top:2px;}
.anexo-meta{font-size:11.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;}
@media (max-width:640px){
  .hist-item{gap:10px;}
  .hist-cartao{padding:14px 14px 12px;}
}

/* ---- Gestao: modo instrumento ------------------------------------------
   A casca institucional (navbar, marca, tipografia, o fundo da UFPB) fica
   igual — a gestao nao e outro produto, e uma sala restrita do mesmo
   predio, e quem entra precisa saber que continua no ODE. O que nao
   atravessa a porta e a paleta da marca usada como TINTA DE DADO: nas
   paginas publicas roxo/verde-agua/dourado/verde sao sinalizacao, aqui
   toda cor precisa significar um estado, senao o ambar do alarme disputa
   atencao com uma tarja decorativa. Os setores mantem a identidade num
   filete; o preenchimento sai. `.quadro` so existe na gestao, entao a
   pagina publica continua exatamente como estava. */
.quadro .rec-setor{background:transparent; color:var(--muted);
  border-top:3px solid var(--line); border-radius:0; padding:10px 12px 8px;
  letter-spacing:.14em;}
.quadro .rec-setor--prg{border-top-color:var(--accent-2);}
.quadro .rec-setor--proex{border-top-color:var(--accent);}
.quadro .rec-setor--consepe{border-top-color:var(--gold);}
.quadro .rec-setor--final{border-top-color:var(--green); color:var(--muted);}
.quadro .rec-valor{color:var(--txt);}

/* Foco visivel. Os cliques viraram <a>, e sem isto quem navega por teclado
   nao enxerga onde esta — o unico foco na pagina vinha de CSS de biblioteca. */
.quadro a:focus-visible,.quadro button:focus-visible,
.quadro [tabindex]:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:6px;}
/* O Dropdown do dcc guarda um <input> invisivel de 1px dentro do controle.
   Apanhado por um seletor generico de input, ele ganhava um contorno solto
   que nao acompanhava a caixa — era o retangulo estranho no campo Etapa.
   Quem mostra o foco e o CONTROLE inteiro; o input interno, nenhum. */
.quadro .Select-input input:focus,.quadro .Select-input input:focus-visible{
  outline:none; box-shadow:none;}
.quadro .Select-control:focus-within{outline:2px solid var(--accent);
  outline-offset:2px; border-radius:8px;}
.quadro .campo:focus,.quadro .campo:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px; border-color:transparent;}

/* Trilha completa: cabe em uma linha em vez de esconder o fim atras de
   rolagem horizontal. O fim da trilha e onde o processo esta — era
   justamente a parte que ficava cortada. */
.quadro .fluxo-h .h-passo{min-width:0; flex:1 1 0;}
.quadro .fluxo-h .h-label{hyphens:auto; overflow-wrap:anywhere;}
@media (max-width:820px){
  .quadro .fluxo-h .h-passo{min-width:104px; flex:none;}
}

/* Progresso por setor, no cartao: cinco blocos e um numero no lugar dos 13
   pontos de 9px, que a essa escala liam como linha pontilhada decorativa. */
.progresso-setor{display:flex; align-items:center; gap:10px;}
.ps-blocos{display:flex; flex:1; gap:3px; min-width:0;}
.ps-bloco{flex:1; height:6px; border-radius:99px; overflow:hidden;
  background:color-mix(in srgb,var(--muted) 20%,transparent);}
.ps-fatia{height:100%; border-radius:99px;
  background:color-mix(in srgb,var(--muted) 75%,transparent);}
.ps-bloco--cheio .ps-fatia{background:var(--accent);}
.ps-texto{flex:none; font-size:11px; color:var(--muted);
  font-variant-numeric:tabular-nums;}

/* Erro de planilha nao pinta o cartao: e problema de outro dono. Fica em
   cinza, embaixo, onde informa sem competir com o alarme do processo. */
.cc-dado,.marca-dado{font-size:11.5px; color:var(--muted);}
.cc-dado{padding-top:2px;}
.cc-grade + .btn,.quadro .cc-grade ~ .btn{margin-top:12px;}
.quadro > .btn-ghost{display:block; margin:14px auto 4px;}

/* ---- Gestao: os dois graficos da visao geral --------------------------- */
/* Uma medida por barra. O tempo entra como rotulo direto, nunca como um
   segundo eixo — duas escalas no mesmo desenho e o erro que mais engana. */
.qs-grade{display:flex; flex-direction:column; gap:12px;}
.qs-linha{display:grid; align-items:center; gap:14px;
  grid-template-columns:190px minmax(0,1fr) 44px 210px;}
.qs-nome{font-size:13px; font-weight:600; color:var(--txt);}
.qs-trilho{height:14px; border-radius:4px;
  background:color-mix(in srgb,var(--muted) 12%,transparent);}
.qs-barra{height:100%; border-radius:4px; min-width:3px;
  background:color-mix(in srgb,var(--muted) 60%,transparent);}
.qs-barra--atencao{background:var(--atencao);}
.qs-barra--critico{background:var(--critico);}
.qs-num{font-size:16px; font-weight:700; text-align:right;
  font-variant-numeric:tabular-nums; color:var(--txt);}
.qs-tempo{font-size:11.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;}
.qs-tempo--atencao{color:var(--atencao);}
.qs-tempo--critico{color:var(--critico);}
@media (max-width:820px){
  .qs-linha{grid-template-columns:1fr auto; gap:4px 10px;}
  .qs-trilho{grid-column:1/-1;}
}

/* Ritmo: uma serie em accent (o desfecho que os KPIs contam) e uma neutra
   (o contexto). Duas cores categoricas disputariam significado numa tela
   onde cor ja quer dizer estado. */
.rt-grade{display:flex; align-items:flex-end; gap:10px; height:170px;
  padding-top:6px;}
.rt-ano-bloco{flex:1; display:flex; flex-direction:column; height:100%;
  min-width:0;}
.rt-colunas{flex:1; display:flex; align-items:flex-end; gap:4px;
  justify-content:center;}
.rt-par{flex:1; max-width:26px; height:100%; display:flex;
  flex-direction:column; justify-content:flex-end; align-items:center; gap:3px;}
.rt-barra{width:100%; border-radius:4px 4px 0 0; min-height:2px;}
.rt-barra--entrada{background:color-mix(in srgb,var(--muted) 45%,transparent);}
.rt-barra--implantado{background:var(--accent);}
.rt-valor{font-size:10.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;}
.rt-ano{margin-top:8px; text-align:center; font-size:11px; color:var(--muted);
  font-variant-numeric:tabular-nums;
  border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent);
  padding-top:6px;}
.rt-ponto--entrada{background:color-mix(in srgb,var(--muted) 45%,transparent);}
.rt-ponto--implantado{background:var(--accent);}

/* Movimentação alcançada por link (tabela de divergências → #mov-N). O
   realce dura o tempo de achar o trecho e sai sozinho: destaque permanente
   viraria mais uma cor competindo com o alarme. */
.hist-item{scroll-margin-top:90px;}
.hist-item--achada .hist-cartao{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
  animation:mov-achada 2.4s ease-out 1;}
.hist-item--achada .hist-marca{box-shadow:inset 0 0 0 3px var(--accent);}
@keyframes mov-achada{
  0%,55%{background:color-mix(in srgb,var(--accent) 14%,transparent);}
  100%{background:color-mix(in srgb,var(--panel-2) 60%,transparent);}
}
@media (prefers-reduced-motion:reduce){
  .hist-item--achada .hist-cartao{animation:none;}
}

/* Trilha com as duas fontes (só na gestão). A planilha é o registro que
   vale e fica no lugar de sempre; o SIPAC entra ABAIXO, menor, como
   evidência — nunca no lugar dela. */
.h-sipac{margin-top:4px; font-size:10px; line-height:1.35;
  color:var(--muted); font-variant-numeric:tabular-nums;}
.h-fonte{display:block; font-size:8.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; opacity:.75;}
.h-sipac--diverge{color:var(--atencao);}
/* marco que só o SIPAC tem: deixa de ser ausência e passa a ser registro
   de outra fonte — ponto tracejado em vez de vazio. */
.h-passo--sipac .h-dot{background:transparent;
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 70%,transparent);}
.h-passo--sipac .h-label{opacity:.8;}
.h-passo--sipac .h-data{opacity:.35;}
.h-passo--sipac .h-sipac{color:var(--accent);}

/* Ponto da trilha que leva à movimentação. O sublinhado pontilhado avisa
   que ali se clica sem gastar cor: numa trilha de 13 pontos, 13 links
   coloridos seriam mais ruído que informação. */
.quadro a.h-ir{color:inherit; text-decoration:underline dotted;
  text-underline-offset:3px; text-decoration-color:var(--line);}
.quadro a.h-ir:hover{color:var(--accent); text-decoration-color:var(--accent);}
.h-sipac a.h-ir{color:inherit;}

/* Anexo alcançado pelo link da tabela de divergências. É ELE que carrega a
   data que a tabela mostrou — a movimentação em volta tem a data em que a
   unidade recebeu o processo, que é anterior e parecia link errado. */
.anexo--achado{border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 26%,transparent);}
.anexo--achado .anexo-meta{color:var(--txt);}