/* Página inicial no estilo do portal V2.0: cabeçalho com marca, faixa de aviso, hero, faixa de números e cartões por matéria.
   Tema claro (padrão) e escuro (botão ◐ ou preferência do sistema). Só vale para body.pg-inicio. */
:root {
  --i-bg:#f6f5f1; --i-surface:#fff; --i-surface2:#faf9f5; --i-text:#18202f; --i-muted:#555d6e; --i-borda:rgba(20,33,61,.14);
  --i-navy:#14213d; --i-navy2:#1f2f52; --i-ouro:#c9a227; --i-ouro-tx:#7a5d00; --i-ouro-fundo:#f6edcf;
  --i-ok:#1b6e45; --i-ok-bg:#e1f2e8; --i-warn:#8a5c00; --i-warn-bg:#fbefcf; --i-info:#1d4f91; --i-info-bg:#e5eefb;
  --i-aviso-bg:#fbe7e7; --i-aviso-tx:#7d1313;
  --i-sombra:0 1px 2px rgba(20,33,61,.06),0 8px 24px -14px rgba(20,33,61,.22);
  --i-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
}
html[data-tema="escuro"] {
  --i-bg:#0d1322; --i-surface:#141d33; --i-surface2:#18233d; --i-text:#e8ecf5; --i-muted:#9fa9c0; --i-borda:rgba(255,255,255,.13);
  --i-ouro-tx:#e6c75a; --i-ouro-fundo:#2a2410; --i-ok:#6fd1a0; --i-ok-bg:#12301f; --i-warn:#f0c15a; --i-warn-bg:#33270c;
  --i-info:#8bb8f5; --i-info-bg:#14233f; --i-aviso-bg:#3a1414; --i-aviso-tx:#ffb4b4;
  --i-sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px -14px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark) {
  html:not([data-tema="claro"]) {
    --i-bg:#0d1322; --i-surface:#141d33; --i-surface2:#18233d; --i-text:#e8ecf5; --i-muted:#9fa9c0; --i-borda:rgba(255,255,255,.13);
    --i-ouro-tx:#e6c75a; --i-ouro-fundo:#2a2410; --i-ok:#6fd1a0; --i-ok-bg:#12301f; --i-warn:#f0c15a; --i-warn-bg:#33270c;
    --i-info:#8bb8f5; --i-info-bg:#14233f; --i-aviso-bg:#3a1414; --i-aviso-tx:#ffb4b4;
    --i-sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px -14px rgba(0,0,0,.6);
  }
}
body.pg-inicio { background: var(--i-bg); color: var(--i-text); margin: 0; font-size: 1rem; line-height: 1.55; }
body.pg-inicio a { text-decoration: none; }

/* Cabeçalho */
.topo { background: var(--i-navy); border-bottom: 1px solid rgba(255,255,255,.12); position: sticky; top: 0; z-index: 40; }
.topo-in { max-width: 1180px; margin: 0 auto; padding: .55rem 1.25rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: .65rem; color: #fff; }
.marca-ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(201,162,39,.18); color: var(--i-ouro); display: grid; place-items: center; font-size: 1.3rem; }
.marca-tx { display: flex; flex-direction: column; line-height: 1.15; }
.marca-tx strong { font-family: var(--i-serif); font-size: 1.1rem; }
.marca-tx small { color: var(--i-ouro); letter-spacing: .12em; font-size: .66rem; }
.topo-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: .1rem .3rem; }
.topo-nav a { color: #d8e0f2; padding: .5rem .7rem; border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center; font-size: .93rem; }
.topo-nav a:hover, .topo-nav a:focus-visible { background: rgba(255,255,255,.1); color: #fff; }
.tema-btn { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: transparent; color: #fff; font-size: 1.15rem; cursor: pointer; }
.tema-btn:hover { background: rgba(255,255,255,.1); }

/* Faixa de aviso */
.faixa-aviso { background: var(--i-aviso-bg); color: var(--i-aviso-tx); border-bottom: 1px solid var(--i-borda); }
.faixa-aviso p { max-width: 1180px; margin: 0 auto; padding: .7rem 1.25rem; font-size: .93rem; }

/* Hero */
.hero { background: linear-gradient(135deg, #101c33 0%, #1B2A4A 62%, #162440 100%); color: #fff; border-bottom: 4px solid var(--i-ouro); }
.hero-in { max-width: 1180px; margin: 0 auto; padding: 3rem 1.25rem 3.2rem; }
.eyebrow { color: var(--i-ouro); letter-spacing: .16em; text-transform: uppercase; font-size: .76rem; font-weight: 700; margin: 0 0 .7rem; display: flex; align-items: center; gap: .6rem; }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.eyebrow-esc { color: var(--i-ouro-tx); }
.hero h1 { font-family: var(--i-serif); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; margin: 0 0 1rem; max-width: 18ch; color: #fff; }
.lead { color: #dbe3f5; font-size: 1.08rem; max-width: 62ch; margin: 0 0 1.2rem; }
.chips { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li { border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: .25rem .8rem; font-size: .82rem; color: #e8eefb; }
.cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .6rem 1.2rem; border-radius: 10px; font-weight: 700; font-size: .95rem; cursor: pointer; border: 1px solid transparent; font-family: inherit; }
.btn-ouro { background: var(--i-ouro); color: #17213a; }
.btn-ouro:hover { filter: brightness(1.06); }
.btn-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn-claro:hover { background: rgba(255,255,255,.1); }
.btn-contorno { background: transparent; color: var(--i-text); border-color: var(--i-borda); }
.btn-contorno:hover { background: var(--i-surface2); }
.arquivo input { display: none; }

/* Miolo */
.miolo { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem 3rem; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); background: var(--i-surface); border: 1px solid var(--i-borda); border-radius: 14px; box-shadow: var(--i-sombra); margin-top: -1.6rem; position: relative; overflow: hidden; }
.kpi { padding: 1.1rem 1.3rem; border-right: 1px solid var(--i-borda); }
.kpi:last-child { border-right: 0; }
.kpi .n { font-family: var(--i-serif); font-size: 1.9rem; line-height: 1.1; display: block; color: var(--i-text); }
.kpi .l { font-size: .86rem; color: var(--i-muted); display: block; margin-top: .15rem; }
.secao { margin-top: 2.6rem; }
.secao h2 { font-family: var(--i-serif); font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 .4rem; color: var(--i-text); border: 0; padding: 0; }
.sub { color: var(--i-muted); max-width: 70ch; margin: 0 0 1rem; }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.filtro { border: 1px solid var(--i-borda); background: var(--i-surface); color: var(--i-text); border-radius: 999px; padding: .45rem 1rem; min-height: 40px; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.filtro[aria-pressed="true"] { background: var(--i-navy); color: #fff; border-color: var(--i-navy); }
html[data-tema="escuro"] .filtro[aria-pressed="true"] { background: var(--i-ouro); color: #17213a; border-color: var(--i-ouro); }
body.pg-inicio .campo label { color: var(--i-text); }
body.pg-inicio .campo input { background: var(--i-surface); color: var(--i-text); border: 1px solid var(--i-borda); border-radius: 10px; }
.pequeno { color: var(--i-muted); font-size: .88rem; }

/* Cartões */
.mods { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.mod { background: var(--i-surface); border: 1px solid var(--i-borda); border-radius: 14px; box-shadow: var(--i-sombra); display: flex; flex-direction: column; overflow: hidden; }
.mod[hidden] { display: none; }
.mod-top { padding: 1.1rem 1.2rem .3rem; display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.bloco { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--i-muted); font-weight: 700; }
.selo { font-size: .74rem; font-weight: 700; padding: .18rem .6rem; border-radius: 999px; white-space: nowrap; }
.selo-val { background: var(--i-warn-bg); color: var(--i-warn); }
.selo-aud { background: var(--i-ok-bg); color: var(--i-ok); }
.selo-par { background: var(--i-info-bg); color: var(--i-info); }
.mod h3 { font-family: var(--i-serif); font-size: 1.35rem; margin: 0 1.2rem .5rem; color: var(--i-text); }
.mod h3 a { color: inherit; }
.mod h3 a:hover { color: var(--i-ouro-tx); }
.mod-body { padding: 0 1.2rem; flex: 1; }
.lbl { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--i-muted); margin: .7rem 0 .3rem; }
.recorte { background: var(--i-surface2); border: 1px solid var(--i-borda); border-radius: 10px; padding: .6rem .8rem; font-size: .88rem; color: var(--i-text); margin: 0; }
.mod-n { font-size: .95rem; margin: .8rem 0 .3rem; }
.mod .barra { height: 8px; background: var(--i-borda); border-radius: 99px; overflow: hidden; }
.mod .barra span { display: block; height: 100%; background: var(--i-ouro); }
.mod-foot { padding: .9rem 1.2rem 1.1rem; display: flex; gap: .6rem; align-items: center; justify-content: space-between; }
.mod-foot .pequeno { margin: 0; }
body.pg-inicio .tabela, body.pg-inicio .tab-erros th, body.pg-inicio .tab-erros td { color: var(--i-text); }
body.pg-inicio .vazio { background: var(--i-surface); border: 1px dashed var(--i-borda); color: var(--i-muted); border-radius: 10px; padding: 1rem; }
body.pg-inicio .secao p { color: var(--i-text); }
body.pg-inicio .secao .sub, body.pg-inicio .secao .pequeno { color: var(--i-muted); }
@media (max-width: 640px) {
  .topo-nav { order: 3; width: 100%; margin-left: 0; }
  .hero-in { padding: 2rem 1rem 2.4rem; }
  .miolo, .topo-in { padding-left: 1rem; padding-right: 1rem; }
  .kpi { border-right: 0; border-bottom: 1px solid var(--i-borda); }
  .kpi:last-child { border-bottom: 0; }
}

/* Cartão de diagnóstico */
.diagnostico { background: var(--i-surface); border: 1px solid var(--i-borda); border-left: 5px solid var(--i-ouro); border-radius: 12px; padding: 1rem 1.2rem; margin: 0 0 1.2rem; box-shadow: var(--i-sombra); }
.diagnostico h3 { margin: 0 0 .4rem; font-family: var(--i-serif); color: var(--i-text); }
.diagnostico p, .diagnostico li { color: var(--i-text); }
.diagnostico a { color: var(--i-ouro-tx); font-weight: 700; }

/* Minha evolução */
.evo-grade-cartoes { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-top: 1.1rem; }
.evo-cartao { background: var(--i-surface); border: 1px solid var(--i-borda); border-radius: 14px; box-shadow: var(--i-sombra); padding: 1rem 1.2rem; }
.evo-cartao h3 { margin: 0 0 .2rem; font-family: var(--i-serif); color: var(--i-text); }
.evo-kpis { margin-top: 1rem; }
.evo-svg, .evo-rosca { width: 100%; height: auto; display: block; }
.evo-rosca { max-width: 200px; margin: 0 auto; }
.evo-t { fill: var(--i-text); font-size: 12px; font-family: inherit; }
.pequeno-svg { font-size: 11px; fill: var(--i-muted); }
.evo-fundo { fill: var(--i-borda); }
.evo-meta { stroke: var(--i-ouro-tx); stroke-width: 1.5; stroke-dasharray: 5 4; }
.evo-grade { stroke: var(--i-borda); stroke-width: 1; }
.evo-linha { fill: none; stroke: #1d6fb8; stroke-width: 2.5; }
.evo-ponto { fill: var(--i-surface); stroke: #1d6fb8; stroke-width: 2.5; }
.evo-centro { fill: var(--i-text); font-size: 22px; font-weight: 700; font-family: var(--i-serif); }
.evo-leg { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .25rem; font-size: .88rem; color: var(--i-text); }
.evo-chip { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .5rem; vertical-align: middle; }
.evo-agora { padding-left: 1.2rem; color: var(--i-text); }
.evo-agora a { color: var(--i-ouro-tx); font-weight: 700; }
.evo-cartao .vazio { margin: .6rem 0 0; }