/* ── Hero moderno CCB (navy + brilho latão) ───────────────────────────────
* Linguagem visual compartilhada pelos módulos (Patrimônio, Obras, RMA).
* Todos os seletores são prefixados por .hero / .hero-page para não vazar
* para o CSS próprio de cada página — e para vencer por especificidade o
* .page-title navy que várias páginas já definem inline.
* Uso mínimo:
*
*
*
*
…
…
…
*
…botões…
*
* ← .kpi b/span
*
* ---------------------------------------------------------------------- */
/* fundo com glows suaves (aplicar a classe no ) */
body.hero-page{
background-image:
radial-gradient(700px 320px at 10% -60px, rgba(154,106,47,.09), transparent 70%),
radial-gradient(900px 480px at 108% 20%, rgba(30,58,95,.06), transparent 70%);
}
.hero{
background:linear-gradient(120deg,#0B1E3F 0%,#1E3A5F 62%,#274a77 100%);
border-radius:20px;padding:20px 24px;color:#fff;position:relative;overflow:hidden;margin-bottom:16px;
box-shadow:0 16px 36px -18px rgba(11,30,63,.45);
}
.hero::before{
content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(380px 180px at 90% -30%, rgba(201,136,59,.26), transparent 70%);
}
.hero > *{position:relative}
.hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hero-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hero .kicker{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#D9A85C}
.hero .page-title{font-family:'IBM Plex Serif',Georgia,serif;font-size:21px;font-weight:700;color:#fff;margin-top:4px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.hero .page-sub{font-size:12px;color:rgba(255,255,255,.62);margin:3px 0 0;max-width:820px}
.hero .page-sub a{color:#e9bd7c}
.hero .page-sub b{color:rgba(255,255,255,.8)}
.hero .back{font-size:11.5px;text-decoration:none;color:rgba(255,255,255,.65);font-weight:600;display:inline-block}
.hero .back:hover{color:#fff}
/* títulos/textos herdados (páginas que usam h1/h2/p no cabeçalho) */
.hero h1,.hero h2{font-family:'IBM Plex Serif',Georgia,serif;font-size:21px;font-weight:700;color:#fff;margin:4px 0 0}
.hero h1 + p,.hero h2 + p,.hero > p{font-size:12px;color:rgba(255,255,255,.62);margin-top:3px;max-width:820px}
.hero p,.hero .muted,.hero small{color:rgba(255,255,255,.62)}
.hero a{color:#e9bd7c}
.hero label{color:rgba(255,255,255,.6)}
.hero input,.hero select,.hero textarea{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:7px 13px}
.hero input::placeholder{color:rgba(255,255,255,.45)}
.hero option{color:#1A2233}
/* KPIs em cartões de vidro */
.hero-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:9px;margin-top:16px}
.hero-kpis .kpi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-radius:13px;padding:10px 12px;backdrop-filter:blur(4px)}
.hero-kpis .kpi b{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1;color:#fff}
.hero-kpis .kpi span{display:block;font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:5px}
.hero-kpis .kpi.gr b{color:#8fd9a8}
.hero-kpis .kpi.am b{color:#f3c969}
.hero-kpis .kpi.rd b{color:#ff9e8e}
.hero-kpis .kpi.br b{color:#e9bd7c}
.hero-kpis .kpi.money b{font-size:15px;padding-top:4px}
/* botões dentro do hero */
.hero .btn,.hero button,.hero a.btn{border-radius:999px}
.hero .btn-outline,.hero .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}
.hero .btn-outline:hover,.hero .btn-ghost:hover{background:rgba(255,255,255,.2)}
.hero .btn-primary{background:#fff;color:#0B1E3F;border:0}
.hero .btn-primary:hover{background:#F3EAD7}
/* controle segmentado em pílula (abas / filtros) */
.seg-tabs{display:inline-flex;gap:4px;flex-wrap:wrap;background:#e5ded0;border-radius:999px;padding:4px;margin-bottom:14px}
.seg-tabs > *{border:0;background:transparent;border-radius:999px;padding:7px 17px;font:inherit;font-size:12.5px;
font-weight:700;cursor:pointer;color:#6b7280;transition:background .15s,color .15s;text-decoration:none}
.seg-tabs > *:hover{color:#1E3A5F}
.seg-tabs > .active{background:#1E3A5F;color:#fff;box-shadow:0 4px 10px -4px rgba(11,30,63,.4)}
/* KPIs/controles que já existem na página, quando movidos para dentro do hero */
.hero .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin-top:16px}
.hero .kpi-grid .kpi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-radius:13px;
padding:11px 13px;backdrop-filter:blur(4px);box-shadow:none}
.hero .kpi-grid .kpi-label{font-size:9px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.hero .kpi-grid .kpi-value{font-size:19px;font-weight:700;letter-spacing:-.02em;color:#fff;margin-top:5px;line-height:1.15}
.hero .kpi-grid .kpi-sub{font-size:10.5px;color:rgba(255,255,255,.5);margin-top:3px}
.hero .controls,.hero .ctl{color:#fff}
.hero .controls label,.hero .ctl label{color:rgba(255,255,255,.6)}
.hero .controls select,.hero .ctl select,.hero .controls input,.hero .ctl input{
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px;padding:7px 13px}
.hero .controls select option,.hero .ctl select option{color:#1A2233}
/* régua de indicadores clicáveis (.stats > .st) dentro do hero */
.hero .stats{background:transparent;border:0;border-radius:0;margin:16px 0 0;gap:9px;overflow:visible}
.hero .stats .st{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-left:1px solid rgba(255,255,255,.10);
border-radius:13px;padding:10px 13px;backdrop-filter:blur(4px);box-shadow:none;transition:background .15s}
.hero .stats .st:hover{background:rgba(255,255,255,.14)}
.hero .stats .st.on{background:rgba(201,136,59,.28);border-color:rgba(233,189,124,.5);box-shadow:none}
.hero .stats .st .k-lbl{color:rgba(255,255,255,.55)}
.hero .stats .st.on .k-lbl{color:#f3d9ae}
.hero .stats .st .k-val{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:20px;color:#fff;letter-spacing:-.02em}
.hero .stats .st .k-sub{color:rgba(255,255,255,.5)}
.hero .stats .st.c-am .k-val{color:#f3c969}
.hero .stats .st.c-vd .k-val{color:#8fd9a8}
.hero .stats .st.c-az .k-val{color:#a8c8ff}
.hero .stats .st.c-vm .k-val{color:#ff9e8e}
/* réguas de números que já existem na página (.stats > .stat-card, .kpis > .kpi)
quando movidas para dentro do hero: viram vidro, mas preservam a cor semântica
que o JS/CSS da página aplica ao número (verde/âmbar/vermelho) */
.hero .stats .stat-card,.hero .kpis .kpi{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
border-radius:13px;padding:10px 12px;backdrop-filter:blur(4px);box-shadow:none;color:#fff}
.hero .stats .stat-card:hover,.hero .kpis .kpi:hover{background:rgba(255,255,255,.14)}
.hero .stats .stat-card.on,.hero .kpis .kpi.on,.hero .kpis .kpi.sel{background:rgba(201,136,59,.28);border-color:rgba(233,189,124,.5)}
.hero .stats .stat-num,.hero .kpis .kpi b,.hero .kpis .kpi .n,.hero .kpis .kpi strong{color:#fff}
.hero .stats .stat-label,.hero .kpis .kpi span,.hero .kpis .kpi small,.hero .kpis .kpi .lbl{color:rgba(255,255,255,.55)}
.hero .kpis{background:transparent;border:0;margin:16px 0 0;gap:9px}
/* ── Variante PÚBLICA: masthead centralizado com o brasão ────────────────
* Para os formulários públicos (sem sidebar), que se apresentam à irmandade.
* Mantém o brasão e a hierarquia editorial do masthead original, só troca o
* papel pela faixa navy. Uso: …
* ---------------------------------------------------------------------- */
.hero-mast{
background:linear-gradient(120deg,#0B1E3F 0%,#1E3A5F 62%,#274a77 100%);
border-radius:20px;padding:22px 24px 20px;color:#fff;position:relative;overflow:hidden;
text-align:center;margin:6px 0 18px;box-shadow:0 16px 36px -18px rgba(11,30,63,.45);
}
/* quando o header é filho direto do (página sem container), evita o
full-bleed que cortaria os cantos arredondados na borda da tela */
body > .hero-mast{max-width:920px;margin-left:auto;margin-right:auto}
@media (max-width:960px){ body > .hero-mast{margin-left:14px;margin-right:14px} }
.hero-mast::before{
content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(340px 160px at 88% -25%, rgba(201,136,59,.26), transparent 70%);
}
.hero-mast > *{position:relative}
/* o brasão é escuro: vai num chip de papel para manter o contraste */
.hero-mast .crest{width:auto;margin:0 auto 10px;display:inline-flex;justify-content:center;
background:#F3EAD7;border-radius:14px;padding:7px 11px}
.hero-mast .crest img{width:auto;height:44px;mix-blend-mode:normal}
.hero-mast .eyebrow{color:#D9A85C;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.hero-mast h1{font-family:'IBM Plex Serif',Georgia,serif;color:#fff;font-weight:600;
font-size:clamp(20px,4.6vw,26px);margin-top:5px;line-height:1.15}
.hero-mast .sub,.hero-mast .lede,.hero-mast p{color:rgba(255,255,255,.62);font-size:12.5px;margin-top:5px}
.hero-mast a{color:#e9bd7c}
.hero-mast .rma-tag,.hero-mast .tag,.hero-mast .badge{background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:999px}
/* cartão de conteúdo moderno */
.card-mod{background:#fff;border:1px solid #e7e1d2;border-radius:18px;overflow:hidden;
box-shadow:0 10px 28px -16px rgba(11,30,63,.14)}