/* Semana de C,T&I 2026 — plataforma de gestão.
   Estrutura copiada da INPACTAS Central (porta de entrada + faixa + barra com
   abas), trocando a paleta orquídea pelo verde da SEMCTI. VERSÃO CLARA: não há
   bloco de tema escuro, por decisão do Pedro em 13/09/2026 — a plataforma é
   usada em sala, em projetor e no celular sob sol, onde o escuro atrapalha. */

:root{
  --verde:#0F6E5B; --verde-forte:#0B5546; --verde-suave:#DCEDE6; --verde-nevoa:#F0F7F4;
  --mata:#16281F; --mata-80:#244134; --mist:#6E7B76; --line:#DAE5E0;
  --paper:#F2F6F4; --card:#FFFFFF;
  --ok:#1F7A3F; --ok-soft:#DDF0E1;
  --warn:#9A5B00; --warn-soft:#F6E8CF;
  --wait:#3C5C8A; --wait-soft:#E2EAF5;
  --erro:#C43D3D;
  --ouro:#C9A35C;
  --shadow:rgba(22,40,31,.09);
  --grad:linear-gradient(180deg,#5CC6A9 0%,#199C7F 38%,#0F6E5B 72%,#16281F 100%);
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
/* O atributo `hidden` do HTML esconde por `display:none` na folha do navegador,
   que QUALQUER `display` declarado depois derruba. Sem esta linha a paleta do
   modo montar (`display:grid`) e o formulário de despesa apareciam mesmo com
   `hidden` ligado — visto na captura de 13/09. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--paper);color:var(--mata);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--verde);text-decoration:underline;text-underline-offset:2px}
.mono{font-family:var(--mono)}

/* ===================== PORTA: a entrada, antes de qualquer coisa ===================== */
.porta{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.palco{background:var(--grad);color:#fff;padding:54px 48px;display:flex;
  flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.palco::after{content:"";position:absolute;inset:0;
  background:radial-gradient(1000px 500px at 15% 8%,rgba(255,255,255,.20),transparent 60%);
  pointer-events:none}
.palco .marca{display:flex;align-items:center;gap:16px;position:relative;z-index:1}
.palco .marca img{height:44px;width:auto;background:#fff;border-radius:8px;padding:6px 9px}
.palco h1{font-family:var(--display);font-size:clamp(28px,3.6vw,44px);font-weight:800;
  letter-spacing:-.025em;line-height:1.08;max-width:16ch;margin-bottom:16px;position:relative;z-index:1}
.palco p{font-size:17px;color:rgba(255,255,255,.92);max-width:42ch;position:relative;z-index:1}
.palco .pes{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  color:rgba(255,255,255,.75);line-height:1.9;position:relative;z-index:1}
.entrada{display:flex;align-items:center;justify-content:center;padding:40px 28px;background:var(--card)}
.forma{width:100%;max-width:400px}
.forma .top{margin-bottom:24px}
.forma h2{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
.forma .top p{color:var(--mist);font-size:15px}
.forma label{display:block;font-size:12.5px;font-weight:600;color:var(--mist);
  margin:14px 0 5px;letter-spacing:.02em}
.forma input{width:100%;font:inherit;font-size:15px;padding:11px 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--paper);color:var(--mata)}
.forma input:focus{outline:2px solid var(--verde);outline-offset:1px;border-color:var(--verde)}
.btn{width:100%;font:inherit;font-size:15px;font-weight:700;padding:12px;border:0;
  border-radius:10px;cursor:pointer;margin-top:20px}
.btn.pri{background:var(--verde);color:#fff}
.btn.pri:hover{background:var(--verde-forte)}
.recado{margin-top:12px;font-size:13.5px;color:var(--erro);min-height:1.2em}
.ajuda{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;color:var(--mist);line-height:1.6}

/* =============================== APP: só depois do login =============================== */
.app{display:none}
.app.on{display:block}
.faixa{position:fixed;left:0;top:0;bottom:0;width:10px;background:var(--grad);z-index:60}
header.barra{position:sticky;top:0;z-index:50;background:var(--card);
  border-bottom:1px solid var(--line);padding:9px 20px 9px 26px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap}
header.barra .marcas{display:flex;align-items:center;gap:10px;flex:0 0 auto}
header.barra .marcas img{height:30px;width:auto}
header.barra .marcas .risco{width:1px;height:24px;background:var(--line)}
nav.abas{display:flex;gap:3px;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
nav.abas::-webkit-scrollbar{display:none}
nav.abas button{border:none;background:none;padding:9px 14px;border-radius:10px;
  font:inherit;font-weight:600;color:var(--mist);font-size:15px;white-space:nowrap;cursor:pointer}
nav.abas button:hover{color:var(--mata)}
nav.abas button.on{background:var(--verde-suave);color:var(--verde-forte)}
nav.abas button .bolha{font-family:var(--mono);font-size:10.5px;background:var(--erro);
  color:#fff;border-radius:99px;padding:1px 6px;margin-left:5px}
.eu-topo{display:flex;align-items:center;gap:9px;flex:0 0 auto;font-size:13px;color:var(--mist)}
.btn-min{font:inherit;font-size:13px;padding:6px 12px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--mata)}
.btn-min:hover{border-color:var(--verde);color:var(--verde)}

.wrap{max-width:1180px;margin:0 auto;padding:24px 22px 70px}
.pane{display:none}
.pane.on{display:block}

/* =================================== blocos comuns =================================== */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--mist);margin-bottom:6px}
h2.t{font-family:var(--display);font-size:1.55rem;font-weight:800;letter-spacing:-.02em;
  color:var(--mata);margin-bottom:6px}
h3.t{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist);margin:22px 0 10px;font-weight:600}
.sub{color:var(--mist);font-size:14.5px;line-height:1.6;max-width:78ch}
.cab{margin-bottom:18px}

.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;margin-bottom:16px;box-shadow:0 1px 2px var(--shadow)}
.proj{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:22px 24px;margin-bottom:16px;box-shadow:0 1px 2px var(--shadow)}
.proj .cab{display:flex;gap:20px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.proj h2{font-family:var(--display);font-size:1.15rem;font-weight:700;color:var(--mata);line-height:1.3}
.valor{text-align:right;flex:0 0 auto}
.valor .n{font-family:var(--mono);font-size:1.4rem;font-weight:600;color:var(--mata)}
.valor .d{font-size:12px;color:var(--mist);max-width:22ch;margin-top:2px}
.cols{display:grid;grid-template-columns:1fr 1.05fr;gap:30px;margin-top:18px}

.totais{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.tot{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.tot .l{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mist)}
.tot .v{font-family:var(--display);font-size:1.6rem;font-weight:800;color:var(--mata);margin:5px 0 3px}
.tot .s{font-size:12px;color:var(--mist);line-height:1.45}

.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;
  letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:99px;font-weight:500}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.wait{background:var(--wait-soft);color:var(--wait)}
.pill.quem{background:var(--paper);border:1px solid var(--line);color:var(--mist)}
.pill.mono{background:var(--paper);border:1px solid var(--line);color:var(--mist)}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.legenda{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}

.bar{height:7px;border-radius:99px;background:var(--verde-suave);overflow:hidden}
.bar i{display:block;height:100%;background:var(--verde);border-radius:99px}

table.rub,table.met,table.desp{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
table.rub th,table.met th,table.desp th{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mist);text-align:left;font-weight:500;
  padding-bottom:7px;border-bottom:1px solid var(--line)}
table.rub td,table.met td,table.desp td{padding:8px 8px 8px 0;border-bottom:1px solid var(--line);
  vertical-align:top;color:var(--mata);overflow-wrap:anywhere}
td.k{width:38%}
td.k small{display:block;font-size:12px;color:var(--mist);margin-top:2px;line-height:1.35}
td.v{text-align:right;font-family:var(--mono);white-space:nowrap;width:15%}
td.v.zero{color:var(--mist)}
td.v.usado{color:var(--verde);font-weight:600}
table.rub tfoot td{border-top:2px solid var(--mata);border-bottom:0;font-weight:700;padding-top:9px}
table.met td.alvo{font-family:var(--mono);font-size:12.5px;width:30%}
input.mini{font:inherit;font-size:13px;width:100%;padding:5px 8px;border:1px solid var(--line);
  border-radius:7px;background:var(--paper);color:var(--mata)}

.vazio{color:var(--mist);font-style:italic;padding:12px 0}
.fontes,.lacunas{margin-top:14px;padding-top:11px;border-top:1px solid var(--line);
  font-size:12px;color:var(--mist);line-height:1.55}
.lacunas{color:var(--warn)}

/* ============================ portão que destrava o dinheiro ============================ */
.portao{margin:16px 0 4px;padding:14px 16px;border-radius:12px;background:var(--verde-suave);
  border:1px solid var(--verde);border-left-width:4px}
.portao-r{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--verde-forte);margin-bottom:5px}
.portao-o{font-size:15.5px;font-weight:600;line-height:1.35}
.portao-m{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:7px;font-size:13px;color:var(--mata-80)}
.portao-m b{color:var(--mist);font-weight:500}
.portao-b{margin-top:7px;font-size:13px;color:var(--warn);font-style:italic}

ul.marcos,ul.riscos,ul.lista{list-style:none}
.marco{padding:8px 0;border-bottom:1px solid var(--line)}
.marco label{display:flex;align-items:flex-start;gap:9px}
.marco input{margin-top:3px;accent-color:var(--verde);width:16px;height:16px;flex:0 0 auto}
.marco-data{font-family:var(--mono);font-size:12px;color:var(--mist);flex:0 0 auto;min-width:5.6em}
.marco-t{font-size:14px;line-height:1.4}
.marco.feito .marco-t{color:var(--mist);text-decoration:line-through}
.marco.atrasado .marco-data{color:var(--warn);font-weight:600}
.marco .fonte{margin:3px 0 0 calc(25px + 5.6em);font-size:11.5px;color:var(--mist);font-family:var(--mono)}
.risco{padding:10px 0 10px 12px;border-left:3px solid var(--line);margin-bottom:8px}
.risco.g-alta{border-left-color:var(--warn);background:linear-gradient(90deg,var(--warn-soft),transparent 70%)}
.risco.g-media{border-left-color:var(--wait)}
.risco b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.risco span{display:block;font-size:13.5px;color:var(--mata-80);margin-top:3px;line-height:1.45}
.risco em{display:block;font-size:11.5px;color:var(--mist);font-family:var(--mono);margin-top:4px;font-style:normal}

textarea.nota,textarea.campo{width:100%;font:inherit;font-size:14px;padding:10px 12px;
  border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--mata);resize:vertical}
textarea.nota:focus,textarea.campo:focus{outline:2px solid var(--verde);outline-offset:1px}
.nota-ro{font-size:14px;color:var(--mata-80);line-height:1.5}

#calendario li{display:grid;grid-template-columns:6.4em 1fr auto auto;gap:5px 14px;
  align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);list-style:none}
#calendario li.passou{opacity:.5}
#calendario li.perto .cal-d{color:var(--warn);font-weight:700}
.cal-d{font-family:var(--mono);font-size:12px;color:var(--mist)}
.cal-o{font-size:14px;line-height:1.4}
.cal-p{font-family:var(--mono);font-size:11.5px;color:var(--mata-80)}
.cal-r{font-family:var(--mono);font-size:11.5px;color:var(--mist);white-space:nowrap}

footer{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--mist);line-height:1.65}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:99;
  background:var(--mata);color:#fff;padding:11px 18px;border-radius:10px;font-size:14px;
  max-width:90vw;box-shadow:0 8px 26px rgba(0,0,0,.24);overflow-wrap:anywhere;box-sizing:border-box}

@media (max-width:900px){
  .porta{grid-template-columns:1fr}
  .palco{padding:32px 26px;gap:22px}
  .palco h1{font-size:27px}
  /* minmax(0,…): com `1fr` puro a coluna crescia até o min-content das tabelas
     e a aba Projetos rolava de lado no celular (408 px num viewport de 375) */
  .cols{grid-template-columns:minmax(0,1fr);gap:22px}
  .wrap{padding:18px 14px 90px}
  /* Duas linhas de barra, não três: as marcas e quem está logado dividem a
     primeira, e as abas ficam com a segunda inteira, rolando na horizontal. */
  header.barra{padding:8px 12px 8px 18px;gap:8px}
  header.barra .marcas img{height:24px}
  .eu-topo{margin-left:auto}
  nav.abas{order:3;flex-basis:100%;margin:0 -12px 0 -18px;padding:0 12px 0 18px}
  nav.abas button{font-size:14px;padding:8px 11px}
  #calendario li{grid-template-columns:1fr auto}
  .cal-d{grid-column:1/-1}
}