/* Tá Lançado — CSS comum do padrão visual (projetos/PADRAO_VISUAL.md): cores, sidebar, topbar, cartões, botões, mensagens, selos.
 Usado por templates/_base_hub.html. CSS específico de uma tela fica no template dela.
 Estrutura (sidebar + topbar + cartões) da Carga Tributária; paleta verde-água, cartões brancos, sombras e mensagens com borda lateral
 da Prestação de Contas. Texto pequeno só sobre branco/tinta clara (contraste >= 4,5:1).
 Mudou este arquivo? Troque o "?v=" do link em _base_hub.html (senão o navegador guarda a versão antiga) e rode o collectstatic. */
:root{
  --bg:#00897B; --faixa:#006e62; --canvas:#e3f1ee;
  --card:#ffffff; --tinta:#e2f3ee; --tinta2:#f1faf7;
  --borda:rgba(28,165,147,0.32); --borda-suave:rgba(28,165,147,0.20);
  --texto:#0e2b26; --texto2:#14675c; --texto3:#3c766c;
  --azul:#1477C4; --azul-texto:#0f63a8;
  --ok:#2E8B4F; --ok-texto:#1b6b38; --ok-fundo:#e6f4ea;
  --corr:#C2831A; --corr-texto:#8a5700; --corr-fundo:#fbf1dc;
  --pend:#C23B3B; --pend-texto:#a52a2a; --pend-fundo:#fbe9e9;
  --sombra:0 2px 10px rgba(15,60,55,0.10); --sombra-forte:0 3px 8px rgba(15,60,55,0.25);
  --font:'Inter', ui-sans-serif, system-ui, sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--canvas); color-scheme:light; }
body{ font-family:var(--font); background:var(--canvas); color:var(--texto); min-height:100vh; overflow-x:hidden; font-size:14.5px; line-height:1.5; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible{ outline:3px solid #ffb300; outline-offset:2px; }
[hidden]{ display:none !important; }
.app-shell{ display:flex; align-items:stretch; min-height:100vh; }
.rail{ width:240px; flex:none; background:linear-gradient(180deg,var(--bg),var(--faixa)); display:flex; flex-direction:column;
       padding:22px 14px 18px; position:sticky; top:0; align-self:flex-start; height:100vh; overflow-y:auto; transition:width .18s ease; }
.marca{ display:flex; align-items:center; gap:10px; padding:2px 8px 18px; border-bottom:1px solid rgba(255,255,255,.18); margin-bottom:16px; }
.marca-link{ display:flex; align-items:center; gap:10px; min-width:0; color:inherit; text-decoration:none; border-radius:10px; }
.marca-link:focus-visible{ outline-offset:3px; }
.marca-icone{ width:36px; height:36px; border-radius:10px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.22); display:flex; align-items:center; justify-content:center; flex:none; }
.marca-icone img{ width:24px; height:24px; object-fit:contain; }
.marca-texto{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.marca-texto strong{ font-size:14px; color:#fff; font-weight:700; }
.marca-texto span{ font-size:11px; color:rgba(255,255,255,.8); }
.rail-toggle{ margin-left:auto; width:24px; height:24px; border-radius:7px; border:none; flex:none; background:rgba(255,255,255,.16); color:#fff;
              display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease, transform .18s ease; }
.rail-toggle:hover{ background:rgba(255,255,255,.28); }
.rail-toggle svg{ width:14px; height:14px; }
.app-shell.rail-mini .rail-toggle{ transform:rotate(180deg); }
.rail-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.rail-nav a, .rail-exit{ display:flex; align-items:center; gap:11px; padding:10px 10px 10px 12px; border-radius:9px; color:rgba(255,255,255,.86);
      text-decoration:none; font-size:13px; font-weight:600; border-left:3px solid transparent; transition:background .15s ease, color .15s ease; }
.rail-nav a svg, .rail-exit svg{ width:18px; height:18px; flex:none; }
.rail-nav a:hover, .rail-exit:hover{ background:rgba(255,255,255,.12); color:#fff; }
.rail-nav a.ativo{ background:rgba(255,255,255,.2); color:#fff; border-left-color:#fff; }
.rail-rodape{ display:flex; flex-direction:column; gap:2px; margin-top:10px; }
.rail-rodape .rail-exit{ margin-top:0; }
.app-shell.rail-mini .rail{ width:72px; padding:20px 8px 16px; align-items:center; }
.app-shell.rail-mini .rail-nav, .app-shell.rail-mini .rail-rodape{ align-items:center; }
.app-shell.rail-mini .marca{ justify-content:center; padding-left:0; padding-right:0; }
.app-shell.rail-mini .marca-texto, .app-shell.rail-mini .rail-nav a .nome, .app-shell.rail-mini .rail-exit .nome{ display:none; }
.app-shell.rail-mini .rail-nav a, .app-shell.rail-mini .rail-exit{ justify-content:center; padding:10px; }
@media(max-width:860px){
  .rail{ width:72px; padding:20px 8px 16px; align-items:center; }
  .marca{ justify-content:center; padding-left:0; padding-right:0; }
  .marca-texto, .rail-nav a .nome, .rail-exit .nome, .rail-toggle{ display:none; }
  .rail-nav a, .rail-exit{ justify-content:center; padding:10px; }
  .rail-nav, .rail-rodape{ align-items:center; }
}

.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{ position:sticky; top:0; z-index:40; min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
         padding:0 30px; background:rgba(244,251,249,0.96); backdrop-filter:blur(12px); border-bottom:1px solid var(--borda); }
.topbar-titulo{ font-size:17px; font-weight:700; color:var(--texto); padding:12px 0; }
.topbar-titulo small{ display:block; font-size:12px; font-weight:500; color:var(--texto3); }
.topbar-direita{ display:flex; align-items:center; gap:10px; padding:10px 0; flex-wrap:wrap; }
.topbar-usuario{ font-size:12.5px; color:var(--texto2); white-space:nowrap; }
.topbar-usuario strong{ color:var(--texto); }
.canvas{ padding:24px 30px 60px; flex:1; max-width:1280px; width:100%; margin:0 auto; }
@media(max-width:760px){ .canvas{ padding:18px 16px 40px; } .topbar{ padding:0 16px; } }
.card{ background:var(--card); border-radius:16px; box-shadow:var(--sombra); border:1px solid var(--borda-suave); padding:20px 22px; margin-bottom:16px; }
.card-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.card-h .ct{ font-size:15px; font-weight:700; color:var(--texto); }
.card-h .cs{ font-size:12.5px; color:var(--texto3); margin-top:1px; }
.pill{ display:inline-flex; align-items:center; gap:8px; border-radius:9999px; padding:8px 16px; font-size:13px; font-weight:600; font-family:var(--font);
       background:#fff; color:var(--texto); border:1px solid var(--borda); text-decoration:none; cursor:pointer; transition:background .15s, border-color .15s, box-shadow .15s;
       box-shadow:0 2px 5px rgba(15,60,55,0.18); }
.pill:hover{ background:var(--tinta2); border-color:var(--texto3); box-shadow:var(--sombra-forte); }
.pill.filled{ background:var(--azul); border-color:var(--azul); color:#fff; }
.pill.filled:hover{ background:#0f63a8; }
.pill.filled:disabled{ opacity:0.45; cursor:not-allowed; }
.pill.small{ padding:4px 12px; font-size:12px; box-shadow:0 1px 3px rgba(15,60,55,0.16); }
.pill.perigo{ color:var(--pend-texto); border-color:rgba(194,59,59,.4); }

/* Botão de aprovar a publicação do fechamento para a The Boss: o passo final, em destaque (verde, com o ✓). */
.btn-aprovar{ display:inline-flex; align-items:center; gap:10px; border:0; border-radius:9999px; padding:12px 26px; font-family:var(--font); font-size:14.5px; font-weight:700;
  letter-spacing:.2px; color:#fff; cursor:pointer; background:linear-gradient(135deg,#34a862,var(--ok) 55%,#1f7a42);
  box-shadow:0 6px 16px rgba(46,139,79,.38), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.btn-aprovar::before{ content:"✓"; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,.22); font-size:13px; }
.btn-aprovar:hover{ transform:translateY(-1px); filter:brightness(1.06); box-shadow:0 9px 22px rgba(46,139,79,.45), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-aprovar:active{ transform:translateY(0); box-shadow:0 3px 8px rgba(46,139,79,.4); }
.btn-aprovar:focus-visible{ outline:3px solid rgba(46,139,79,.35); outline-offset:2px; }
.btn-aprovar:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.msg-error, .msg-success, .msg-warn, .msg-warning, .msg-info{ background:#fff; color:var(--texto); border-radius:12px; padding:12px 18px; font-size:13.5px; margin-bottom:12px;
        line-height:1.5; box-shadow:var(--sombra); border-left:5px solid var(--azul); }
.msg-error{ border-left-color:var(--pend); } .msg-success{ border-left-color:var(--ok); } .msg-warn, .msg-warning{ border-left-color:var(--corr); }
.selo{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:700; border-radius:9999px; padding:2px 10px; background:var(--tinta); color:var(--texto2); white-space:nowrap; }
.selo.aviso{ background:var(--corr-fundo); color:var(--corr-texto); }
.selo.ok{ background:var(--ok-fundo); color:var(--ok-texto); }
.selo.azul{ background:#e3effa; color:var(--azul-texto); }
.vazio{ background:#fff; border-radius:16px; padding:32px 24px; text-align:center; color:var(--texto2); font-size:14px; line-height:1.6; box-shadow:var(--sombra); }