/* =========================================================================
   Espaço PROEX (27/10/2026) — as páginas públicas da curricularização com a
   identidade da PROEX (manual de marca: azul #2D2E83, vermelho #E30613 só
   como acento, Saira / Saira SemiCondensed). Casca em components/espaco_proex.py.

   TUDO aqui pende de `:root[data-espaco="proex"]` (marcado no <head> e no
   clientside de app.py) ou de `.espaco-proex`. A especificidade é alta DE
   PROPÓSITO: este arquivo carrega ANTES do theme.css (ordem alfabética dos
   assets, mapa 01) e não pode depender dessa ordem para vencer.
   O tema é sempre claro aqui: app.py força data-theme="light" e as regras
   [data-theme="light"] do theme.css valem; abaixo só o que muda da marca.
   ========================================================================= */
:root[data-espaco="proex"][data-theme]{
  --proex:#2D2E83; --proex-verm:#E30613;
  --proex-90:#3d3e94; --proex-70:#6c6db0; --proex-45:#a3a4d0; --proex-15:#e4e4f2; --proex-06:#f3f3fa;
  --bg:#f6f6fb; --panel:#ffffff; --panel-2:#f3f3fa; --line:#dcdde8;
  --txt:#1b1c3a; --muted:#5d6070; --heading:#2D2E83; --kpi-val:#2D2E83;
  --input-bg:#ffffff; --menu-bg:#ffffff; --accent:#2D2E83; --accent-2:#6c6db0;
  --scroll-thumb:#a3a4d0;
  --esp-fonte:'Saira','Sora',-apple-system,'Segoe UI',sans-serif;
  --esp-cond:'Saira Semi Condensed','Saira','Sora',sans-serif;
  --esp-ode:#094454; --esp-ode-escuro:#052630; --esp-ode-accent:#4fd1c5;
}
/* a navbar do ODE dá lugar à faixa de volta (.esp-ponte) */
:root[data-espaco="proex"] .navbar{display:none;}
:root[data-espaco="proex"] .shell{min-height:100vh;}
:root[data-espaco="proex"],:root[data-espaco="proex"] body{font-family:var(--esp-fonte); background:var(--bg);}
/* âncoras param abaixo das abas + atalhos fixos (~104 px) */
:root[data-espaco="proex"] [id]{scroll-margin-top:118px;}

/* sangra sobre o padding do .content, como o hero da home (mapa 01) */
.espaco-proex{margin:-24px calc(-1 * var(--pad-x, 28px)) -72px;}
/* só as laterais: o shorthand `padding` aqui (0,2,0) apagava o padding de cima e de
   baixo do corpo e do rodapé, que têm especificidade menor (28/10/2026) */
.espaco-proex .esp-in{max-width:1240px; margin:0 auto;
  padding-left:var(--pad-x, 28px); padding-right:var(--pad-x, 28px);}

/* ---------- faixa de volta ---------- */
.esp-ponte{background:var(--esp-ode-escuro); color:#cfe0e4; font-size:12.5px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:0 var(--pad-x, 28px); min-height:36px;}
.esp-voltar{display:flex; align-items:center; gap:8px; color:#cfe0e4;}
.esp-voltar:hover,.esp-equipe:hover{color:#fff;}
.esp-voltar img{height:20px; width:auto;}
.esp-voltar-curto{display:none;}
.esp-voltar .esp-seta{width:15px; height:15px; transform:rotate(180deg);}
.esp-ponte-dir{display:flex; align-items:center; gap:14px;}
.esp-ponte-txt::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--esp-ode-accent); margin-right:7px; vertical-align:1px;}
.esp-equipe{display:inline-flex; align-items:center; gap:6px; color:#cfe0e4; padding:3px 11px;
  border:1px solid rgba(255,255,255,.22); border-radius:99px; font-size:12px;}

/* ---------- cabeçalho PROEX ---------- */
.esp-cab{background:#fff; border-bottom:1px solid var(--line);}
.esp-cab .esp-in{display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding-top:16px; padding-bottom:16px;}
/* área de proteção do manual (item 6.1): nada encosta no logo */
.esp-logo{height:56px; width:auto; margin:4px 0;}
.esp-sep{width:1px; height:46px; background:var(--line);}
.esp-titulo-box{flex:1; min-width:220px;}
.esp-titulo-box small{font-family:var(--esp-cond); letter-spacing:3px; text-transform:uppercase;
  color:var(--proex-verm); font-weight:600; font-size:12px;}
.esp-titulo{font-family:var(--esp-fonte); font-weight:700; color:var(--proex); font-size:26px; line-height:1.1;}
.esp-selo{display:flex; align-items:center; gap:10px; padding:8px 14px 8px 10px; border:1px solid var(--line);
  border-radius:12px; background:linear-gradient(180deg,#fff,#f7fafb); color:var(--txt);}
.esp-selo:hover{border-color:var(--esp-ode);}
.esp-selo img{width:34px; height:34px;}
.esp-selo-1{font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);}
.esp-selo-2{font-family:var(--esp-fonte); font-weight:700; color:var(--esp-ode); font-size:15px; line-height:1.1;}
.esp-selo-2 span{color:var(--esp-ode-accent);}

/* ---------- abas e atalhos (fixos no topo) ---------- */
.esp-abas{background:var(--proex); border-top:4px solid var(--proex-verm); position:sticky; top:0; z-index:20;}
.esp-abas .esp-in{display:flex; gap:4px; overflow-x:auto;}
.esp-aba{color:#d9daf0; font-family:var(--esp-cond); font-weight:600; font-size:15.5px; letter-spacing:.3px;
  padding:13px 18px; border-bottom:3px solid transparent; white-space:nowrap;}
.esp-aba:hover{color:#fff; background:rgba(255,255,255,.06);}
.esp-aba--atual{color:#fff; border-bottom-color:#fff;}
.esp-atalhos{background:#fff; border-bottom:1px solid var(--line); position:sticky; top:52px; z-index:19;}
.esp-atalhos .esp-in{display:flex; gap:8px; overflow-x:auto; padding-top:9px; padding-bottom:9px;}
.esp-atalho{white-space:nowrap; font-size:13px; padding:5px 12px; border-radius:99px;
  border:1px solid var(--line); color:var(--muted);}
.esp-atalho:hover{border-color:var(--proex); color:var(--proex); background:var(--proex-06);}

/* ---------- faixa azul (título + números da página) ---------- */
.esp-heroi{background:var(--proex); color:#fff; position:relative; overflow:hidden;
  /* a malha lembra o "emaranhado" do símbolo (manual, item 1) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.13' stroke-width='5' stroke-linecap='round'%3E%3Ccircle cx='100' cy='100' r='92'/%3E%3Cpath d='M20 70Q90 55 150 20M60 15Q40 110 110 190M130 12Q170 90 140 175M12 105Q100 140 192 90M45 165Q95 120 185 140M95 10Q70 80 165 160'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:620px; background-position:right -120px top -160px;}
.esp-heroi .esp-in{padding-top:28px; padding-bottom:30px;}
.esp-heroi .page-head h1{color:#fff; font-family:var(--esp-fonte); font-size:28px; line-height:1.15;}
.esp-heroi .lead,.esp-heroi .painel-frase{color:rgba(255,255,255,.88);}
.esp-heroi .painel-frase strong,.esp-heroi .painel-frase b{color:#fff;}
/* Botões de ação no espaço (28/10/2026, "sem contraste e o hover com a cor antiga"): o fundo
   vinha de theme.css (--accent = azul PROEX) e a LETRA e o HOVER de ode-brand.css (azul-escuro e
   #3DB8B0 do ODE) — azul sobre azul, e turquesa ao passar o mouse. Aqui, com :root no seletor
   para vencer o ode-brand: azul PROEX com letra branca; na faixa azul do herói, o inverso. */
:root[data-espaco="proex"] .btn-accent{background:var(--proex); color:#fff; box-shadow:none;}
:root[data-espaco="proex"] .btn-accent:hover:not(:disabled),
:root[data-espaco="proex"] .btn-accent:focus-visible{background:var(--proex-90); color:#fff;
  box-shadow:0 2px 8px rgba(45,46,131,.25); filter:none;}
:root[data-espaco="proex"] .esp-heroi .btn-accent{background:#fff; color:var(--proex);}
:root[data-espaco="proex"] .esp-heroi .btn-accent:hover:not(:disabled),
:root[data-espaco="proex"] .esp-heroi .btn-accent:focus-visible{background:var(--proex-15); color:var(--proex);}
/* seletor de semestre e botões de CSV na mesma linha e na mesma altura (28/10/2026) */
.esp-heroi .export-botoes{align-items:center;}
.esp-heroi .export-botoes .exportar-caixa{justify-content:center;}
.esp-heroi .export-botoes .btn-mini{min-height:38px; padding:0 16px;
  display:inline-flex; align-items:center;}
.esp-heroi .export-botoes .filtro .Select-control{border-radius:9999px; border-color:#fff;}
/* seletor dentro do card (semestre dos tipos de ação, 28/10/2026) */
.espaco-proex .card-title-row{flex-wrap:wrap; justify-content:space-between;}
.espaco-proex .card-title-row .card-title{white-space:normal;}
.esp-heroi .kpi-row{margin:20px 0 0;}
.espaco-proex .esp-heroi .kpi-row .kpi-card{background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);}  /* vence os .kpi-card:nth-child coloridos */
.espaco-proex .esp-heroi .kpi-row .kpi-card:first-child{background:#fff; border-color:#fff;}
.esp-heroi .kpi-card .kpi-title,.esp-heroi .kpi-card .kpi-sub{color:rgba(255,255,255,.8);}
.esp-heroi .kpi-card .kpi-value{color:#fff; font-family:var(--esp-fonte);}
.esp-heroi .kpi-card:first-child .kpi-title,.esp-heroi .kpi-card:first-child .kpi-sub{color:var(--muted);}
.esp-heroi .kpi-card:first-child .kpi-value{color:var(--proex);}

/* ---------- corpo ---------- */
/* coluna com gap: cada bloco (grade de gráficos, card solto, lista) fica a 20 px
   do vizinho sem depender da margem de cada um — os cards soltos da
   implementação encostavam (28/10/2026). Blocos com display:none saem do gap. */
.espaco-proex .esp-corpo{padding-top:26px; padding-bottom:40px;
  display:flex; flex-direction:column; gap:20px;}
.espaco-proex .esp-corpo > .grid-2,.espaco-proex .esp-corpo > .grid-1,
.espaco-proex .esp-corpo > .card{margin-top:0; margin-bottom:0;}
.esp-secao{display:flex; align-items:baseline; gap:12px; margin:12px 0 -6px;}
.esp-secao:first-child{margin-top:0;}
.esp-secao h2{margin:0; font-family:var(--esp-fonte); font-weight:700; color:var(--proex); font-size:22px;}
.esp-secao span{font-size:13px; color:var(--muted);}
.esp-secao::after{content:""; flex:1; height:1px; background:var(--line); align-self:center;}
.espaco-proex .card{border-radius:14px;}
.espaco-proex .card-title{font-family:var(--esp-cond); font-weight:700; color:var(--proex); font-size:17px;}
.espaco-proex .kpi-row .kpi-card{border-left-color:var(--proex);}
.espaco-proex h1,.espaco-proex h2,.espaco-proex h3{font-family:var(--esp-fonte);}

/* lista lateral: a coluna de componentes quebra linha (28/10/2026) */
.espaco-proex .lista-lateral td.col-texto{white-space:normal; min-width:280px; text-align:left;}
.espaco-proex .comp-lista{display:flex; flex-wrap:wrap; gap:4px;}
.espaco-proex .comp-lista span{font-size:11.5px; line-height:1.3; padding:2px 8px; border-radius:99px;
  background:var(--proex-06); border:1px solid var(--proex-15); color:var(--txt);}

/* ---------- rodapé assinado pelos dois ---------- */
.espaco-proex .esp-rod{background:#fff; border-top:1px solid var(--line); color:var(--muted);
  font-size:13px; padding:8px 0 16px;}
.espaco-proex .esp-rod .esp-rod-grade{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:28px; padding-top:32px; padding-bottom:28px;}
.esp-rod h4{font-family:var(--esp-cond); color:var(--proex); font-size:14px; letter-spacing:1px;
  text-transform:uppercase; margin:0 0 6px;}
.esp-rod p{margin:0; line-height:1.6;}
.esp-rod a{color:var(--proex);}
.esp-rod-logo{height:42px; width:auto; margin-bottom:10px;}
.esp-rod-col-ode h4{color:var(--esp-ode);}
.esp-rod-ode{display:flex; gap:10px; align-items:flex-start;}
.esp-rod-ode img{width:40px; height:40px;}
.esp-rod-ode strong{color:var(--esp-ode);}
.esp-rod-barra{grid-column:1/-1; border-top:1px solid var(--line); padding-top:14px; font-size:12px;}

/* ---------- transição de entrada (assets/espaco_proex.js) ---------- */
.esp-portal{position:fixed; inset:0; z-index:5000; pointer-events:none;}
.esp-portal .esp-disco{position:absolute; inset:0; background:#2D2E83;
  clip-path:circle(0 at var(--x,50%) var(--y,30px)); transition:clip-path .75s cubic-bezier(.7,0,.2,1);}
.esp-portal.on .esp-disco{clip-path:circle(150% at var(--x,50%) var(--y,30px));}
.esp-portal .esp-portal-c{position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  color:#fff; opacity:0; transition:opacity .3s .35s; font-family:'Saira','Sora',sans-serif;}
.esp-portal.on .esp-portal-c{opacity:1;}
.esp-portal img.esp-simb{width:132px; height:132px; margin:0 auto 20px; display:block;
  animation:esp-gira 1.1s cubic-bezier(.3,.6,.2,1) both;}
@keyframes esp-gira{from{transform:scale(.3) rotate(-120deg); opacity:0;} to{transform:none; opacity:1;}}
.esp-portal .k1{font-family:'Saira Semi Condensed','Saira',sans-serif; letter-spacing:4px; font-size:13px;
  text-transform:uppercase; opacity:.8;}
.esp-portal .k2{font-weight:700; font-size:32px; line-height:1.15; margin:6px 0 14px;}
.esp-portal .k3{display:inline-flex; align-items:center; gap:8px; font-size:13px; opacity:.85;
  border:1px solid rgba(255,255,255,.3); padding:6px 14px; border-radius:99px;}
.esp-portal .k3 img{height:20px;}
/* chegada: o azul já cobre a tela e se desfaz quando a página nova aparece */
.esp-portal.chegada .esp-disco{clip-path:none; transition:opacity .45s ease; }
.esp-portal.chegada.sai .esp-disco,.esp-portal.chegada.sai .esp-portal-c{opacity:0; transition:opacity .45s ease;}

/* ---------- celular ---------- */
@media (max-width:820px){
  .esp-ponte-txt,.esp-equipe-txt,.esp-sep,.esp-voltar-longo{display:none;}
  .esp-voltar-curto{display:inline;}
  .esp-logo{height:44px;}
  .esp-titulo{font-size:22px;}
  .esp-heroi .page-head h1{font-size:23px;}
  .esp-atalhos{top:48px;}
  .esp-aba{padding:11px 14px; font-size:14.5px;}
  .espaco-proex .esp-rod .esp-rod-grade{grid-template-columns:1fr;}
}

/* ---------- gestão no espaço (28/10/2026) ---------- */
/* a faixa leva o menu do usuário (a navbar some): um pouco mais alta, avatar menor */
.esp-ponte--gestao{min-height:44px;}
.esp-ponte--gestao .nav-avatar{width:28px; height:28px; font-size:11px;}
.esp-ponte--gestao .nav-user-botao{color:#cfe0e4;}
.esp-ponte--gestao .nav-menu-lista{top:calc(100% + 8px);}
.esp-ponte--gestao .nav-entrar{color:#cfe0e4; font-size:12.5px;}
.espaco-proex .esp-gestao{padding-top:22px;}
.espaco-proex .esp-gestao .page-head h1{font-family:var(--esp-fonte); color:var(--proex);}
/* "Acesso restrito": o botão Entrar esticava na coluna flex do corpo */
.espaco-proex .esp-corpo .page-head{display:block;}
.espaco-proex .esp-corpo .page-head > .btn{display:inline-block; width:auto; margin-top:8px;}
.esp-ponte--gestao .nav-entrar{padding:4px 14px; border-radius:99px; background:#fff;
  color:var(--proex); font-weight:600;}
/* Gestão: a tela inteira é UM filho do corpo, então o gap de 20 px do corpo não
   chegava aos cards dela, que encostavam (28/10/2026). Mesma régua, um nível abaixo:
   só entre IRMÃOS diretos da tela — cards dentro de uma grade não ganham margem. */
.espaco-proex .esp-gestao > * > :is(.card, .grid-1, .grid-2, .quadro, .painel)
  + :is(.card, .grid-1, .grid-2, .quadro, .painel){margin-top:20px;}
.espaco-proex .esp-gestao > * > :is(.grid-1, .grid-2){margin-bottom:0;}
/* 28/10/2026: os títulos de seção (`.esp-secao`, implementação em 4 seções) não estavam na
   régua acima e o card seguinte encostava neles. Mesmas distâncias da pública (gap 20 px +
   margem da seção 12/-6): 32 px antes do título, 14 px entre o título e o card. */
.espaco-proex .esp-gestao > * > :is(.card, .grid-1, .grid-2, .quadro, .painel) + .esp-secao{margin-top:32px;}
.espaco-proex .esp-gestao > * > .esp-secao + :is(.card, .grid-1, .grid-2, .quadro, .painel){margin-top:14px;}
/* o cabeçalho das telas de lista (título + "Baixar esta lista" / "Baixar Excel") encostava na
   tabela: o .page-head não está na régua de irmãos acima (28/10/2026) */
.espaco-proex .esp-gestao .page-head--acao{margin-bottom:20px;}

/* ---------- topo fixo (28/10/2026) ----------
 * Faixa de volta + cabeçalho PROEX + abas + atalhos num bloco sticky só (Adriell: "manter esse
 * header fixo ao rolar"). Antes só abas e atalhos eram sticky, cada um com o seu `top` à mão.
 * Depois de rolar, assets/espaco_proex.js põe `esp-topo--compacto`: o cabeçalho encolhe para
 * não comer a tela. `--esp-topo-alt` (medido no JS) afasta o alvo dos atalhos do topo fixo. */
.esp-topo{position:sticky; top:0; z-index:30; background:#fff; box-shadow:0 1px 0 var(--line);}
.esp-topo .esp-abas,.esp-topo .esp-atalhos{position:static;}
.esp-topo--compacto{box-shadow:0 4px 14px rgba(9,30,40,.10);}
.esp-cab .esp-in,.esp-logo,.esp-sep,.esp-titulo,.esp-selo,.esp-selo img{transition:all .18s ease;}
.esp-topo--compacto .esp-cab .esp-in{padding-top:6px; padding-bottom:6px; gap:16px;}
.esp-topo--compacto .esp-logo{height:34px; margin:0;}
.esp-topo--compacto .esp-sep{height:28px;}
.esp-topo--compacto .esp-titulo-box small{display:none;}
.esp-topo--compacto .esp-titulo{font-size:19px;}
.esp-topo--compacto .esp-selo{padding:4px 10px 4px 8px;}
.esp-topo--compacto .esp-selo img{width:24px; height:24px;}
.esp-topo--compacto .esp-selo-1{display:none;}
.esp-topo--compacto .esp-aba{padding-top:9px; padding-bottom:9px;}
.esp-secao,[id^="curr-s-"],[id^="impl-s-"]{scroll-margin-top:calc(var(--esp-topo-alt, 200px) + 12px);}
@media (max-width: 700px){
  /* no celular o cabeçalho sai ao rolar: ficam a faixa de volta e as abas */
  .esp-topo--compacto .esp-cab{display:none;}
}

/* ícones SVG no lugar de emoji (28/10/2026) */
.esp-cadeado{width:13px; height:13px;}
.esp-ponte-txt--restrito{display:inline-flex; align-items:center; gap:6px;}
.esp-ponte-txt--restrito::before{display:none;}