/* Painel «A Chave e o Porteiro» — cibersegurança em linguagem simples (tinta da noite, latão da chave)
   Gaspar do Amaral · 27 out 2026 · com recurso a IA · © Aprecisa.com
   Política de segurança estrita (style-src 'self'): nenhum estilo dentro do HTML; tudo aqui. */
@font-face { font-family: "Source Serif 4"; src: url("/fontes/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fontes/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fontes/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fontes/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --tinta: #1D2B3A; --tinta-2: #2A3D51; --latao: #9A6B12; --latao-claro: #E7C677;
  --fundo: #F6F7F9; --cartao: #FFFFFF; --texto: #1F2933; --texto-2: #4E5B68; --texto-3: #66727F;
  --linha: #DDE2E8; --alt: #EEF1F4; --aviso: #FFF8EC; --tit: #1D2B3A;
  --ok: #2F7A52; --ok-fundo: #E6F4EC; --atrasado: #9A4A07; --atrasado-fundo: #FFF0DB; --espera: #55606C; --espera-fundo: #ECEFF3;
  --s-critica: #7E2A1C; --s-alta: #B4452A; --s-media: #DB6A3C; --s-baixa: #EE9A6A; --s-sem: #B7BEC8;
  --barra: #2A3D51; --habitual: #9A6B12;
  --aprecisa: #A12C34;
  --serif: "Source Serif 4", Georgia, serif; --sans: "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif; --raio: 8px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fundo: #11171F; --cartao: #19222D; --texto: #E6EAF0; --texto-2: #B5BFCB; --texto-3: #929DAA;
  --linha: #2C3846; --alt: #151D27; --aviso: #2A2418; --tit: #E7C677; --latao: #E7C677;
  --ok: #6CC895; --ok-fundo: #173323; --atrasado: #F2A65A; --atrasado-fundo: #3A2A14; --espera: #B5BFCB; --espera-fundo: #232D39;
  --s-critica: #F6BC98; --s-alta: #E58A5C; --s-media: #C8603A; --s-baixa: #A0452D; --s-sem: #5B6675;
  --barra: #8FA7C4; --habitual: #E7C677;
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --fundo: #11171F; --cartao: #19222D; --texto: #E6EAF0; --texto-2: #B5BFCB; --texto-3: #929DAA;
  --linha: #2C3846; --alt: #151D27; --aviso: #2A2418; --tit: #E7C677; --latao: #E7C677;
  --ok: #6CC895; --ok-fundo: #173323; --atrasado: #F2A65A; --atrasado-fundo: #3A2A14; --espera: #B5BFCB; --espera-fundo: #232D39;
  --s-critica: #F6BC98; --s-alta: #E58A5C; --s-media: #C8603A; --s-baixa: #A0452D; --s-sem: #5B6675;
  --barra: #8FA7C4; --habitual: #E7C677; color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--sans); font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--latao); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; overflow-wrap: normal; }
p { margin: 0 0 1em; }
.contentor { max-width: 1080px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.estreito { max-width: 780px; }
.salto { position: absolute; left: -9999px; }
.salto:focus { left: 16px; top: 16px; background: #fff; color: var(--tinta); padding: 8px 12px; z-index: 10; }
[hidden] { display: none !important; }

.faixa { background: var(--aprecisa); font-size: .85rem; }
.faixa-in { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.faixa a { color: #F7F0E1; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; }
.faixa a:hover { text-decoration: underline; }
.faixa img { border-radius: 50%; }

.topo { background: var(--tinta); color: #fff; padding: 28px 0 36px; }
.topo-in { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.topo-in > img { border-radius: 10px; flex-shrink: 0; }
.topo-in > div { flex: 1; min-width: 240px; }
.sobretitulo { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--latao-claro); margin-bottom: 8px; }
.sobretitulo a { color: inherit; }
.topo h1 { font-size: clamp(1.8rem, 6vw, 2.9rem); }
.topo .lema { font-size: clamp(1.02rem, 2.4vw, 1.2rem); color: #D5DDE6; max-width: 62ch; margin: 0; }
.topo .subtitulo-painel { font-family: inherit; font-size: clamp(1.15rem, 2.8vw, 1.45rem); color: #E7C46A; margin: 0 0 .6rem; font-weight: 600; }
.versao { display: inline-block; margin-top: 14px; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--latao-claro); border: 1px dashed var(--latao-claro); border-radius: 999px; padding: 3px 12px; }
.fontes-topo { font-size: .85rem; color: #B9C4D0; margin: 12px 0 0; }

.numeros { background: var(--tinta-2); color: #fff; }
.numeros-in { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); padding-block: 18px; }
.numeros-in > div { border-left: 3px solid var(--latao-claro); padding-left: 12px; }
.numeros-in strong { display: block; font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; }
.numeros-in span { font-size: .86rem; color: #D5DDE6; }

.alerta-global { background: var(--atrasado-fundo); color: var(--atrasado); border-bottom: 1px solid var(--linha); padding: 10px 0; font-weight: 600; font-size: .95rem; }

section { padding: 40px 0; }
.alt { background: var(--alt); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
section h2 { font-size: clamp(1.4rem, 4vw, 1.85rem); color: var(--tit); }
section h3 { font-size: 1.15rem; color: var(--tit); }
.intro { color: var(--texto-2); max-width: 70ch; margin-bottom: 22px; }

/* cartões das perguntas */
.perguntas { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .perguntas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pergunta { background: var(--cartao); border: 1px solid var(--linha); border-top: 5px solid var(--latao); border-radius: var(--raio); padding: 18px; display: flex; flex-direction: column; }
.pergunta .cab { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pergunta .num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--tinta); color: #fff; font-family: var(--serif); font-weight: 600; flex-shrink: 0; }
.pergunta h3 { margin: 0; font-size: 1.15rem; }
.pergunta .valor { font-family: var(--serif); font-size: 2.2rem; line-height: 1.05; color: var(--tit); margin: 8px 0 2px; }
.pergunta .valor small { font-family: var(--sans); font-size: .95rem; color: var(--texto-2); font-weight: 400; }
.pergunta .resposta { margin: 6px 0; }
.pergunta .comparar { font-size: .92rem; color: var(--texto-2); margin: 0 0 8px; }
.pergunta .fazer { font-size: .93rem; background: var(--aviso); border-left: 4px solid var(--latao); padding: 8px 12px; border-radius: 4px; margin: 6px 0 12px; flex: 1; }
.pergunta .rodape-cartao { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.ver { font-weight: 600; color: var(--latao); text-decoration: none; }
.ver:hover { text-decoration: underline; }

.selo { display: inline-block; font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 2px 10px; }
.selo.ok { background: var(--ok-fundo); color: var(--ok); }
.selo.atrasado { background: var(--atrasado-fundo); color: var(--atrasado); }
.selo.aguardar { background: var(--espera-fundo); color: var(--espera); }

/* resposta curta nas páginas das perguntas */
.curta { background: var(--cartao); border: 1px solid var(--linha); border-left: 5px solid var(--latao); border-radius: var(--raio); padding: 18px 20px; }
.curta .grande { font-family: var(--serif); font-size: clamp(1.25rem, 3.4vw, 1.6rem); line-height: 1.3; color: var(--tit); margin-bottom: 10px; }
.fazer-caixa { background: var(--aviso); border: 1px solid var(--linha); border-left: 5px solid var(--latao); border-radius: var(--raio); padding: 14px 18px; margin-top: 16px; }
.fazer-caixa h3 { margin: 0 0 6px; }
.fazer-caixa ul { margin: 0; padding-left: 20px; }

.imagem-dia { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .imagem-dia { grid-template-columns: 1fr 1fr; } }
.imagem-dia > div { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px 18px; }

.glossario { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0; }
.glossario div { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; }
.glossario dt { font-family: var(--serif); font-weight: 600; color: var(--tit); }
.glossario dd { margin: 4px 0 0; color: var(--texto-2); font-size: .95rem; }

/* gráficos (SVG sem estilos embutidos: as cores vêm daqui) */
.grafico-cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; }
.grafico-cartao h3 { margin-bottom: 4px; }
.grafico-rolar { overflow-x: auto; }
svg.graf { width: 100%; height: auto; display: block; }
@media (max-width: 640px) { svg.graf { min-width: 560px; } .grafico-rolar::after { content: "Deslize para os lados para ver o gráfico inteiro."; display: block; font-size: .8rem; color: var(--texto-3); padding: 4px 2px 0; } }
svg.graf text { font-family: var(--sans); font-size: 12px; fill: var(--texto-3); }
svg.graf .grelha { stroke: var(--linha); stroke-width: 1; }
svg.graf .eixo { stroke: var(--texto-3); stroke-width: 1; }
svg.graf .habitual { stroke: var(--habitual); stroke-width: 2; stroke-dasharray: 6 4; fill: none; }
svg.graf text.habitual-txt { fill: var(--habitual); font-weight: 600; paint-order: stroke; stroke: var(--cartao); stroke-width: 5px; stroke-linejoin: round; }
svg.graf rect { stroke: var(--cartao); stroke-width: 1; }
svg.graf rect.zona { stroke: none; fill: transparent; }
svg.graf g.dia:hover rect:not(.zona) { opacity: .8; }
svg.graf .barra { fill: var(--barra); }
svg.graf .s-critica { fill: var(--s-critica); } svg.graf .s-alta { fill: var(--s-alta); } svg.graf .s-media { fill: var(--s-media); }
svg.graf .s-baixa { fill: var(--s-baixa); } svg.graf .s-sem_nota { fill: var(--s-sem); }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .9rem; color: var(--texto-2); margin: 10px 0 0; padding: 0; list-style: none; }
.legenda li::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--barra); }
.legenda li.l-critica::before { background: var(--s-critica); } .legenda li.l-alta::before { background: var(--s-alta); }
.legenda li.l-media::before { background: var(--s-media); } .legenda li.l-baixa::before { background: var(--s-baixa); }
.legenda li.l-sem_nota::before { background: var(--s-sem); }
.legenda li.l-habitual::before { height: 0; border-top: 2px dashed var(--habitual); background: none; width: 18px; vertical-align: middle; }

/* régua 0–10 */
.regua { display: grid; grid-template-columns: 39fr 30fr 20fr 11fr; gap: 3px; margin: 12px 0 4px; }
.regua span { padding: 8px 6px; border-radius: 4px; font-size: .85rem; font-weight: 600; text-align: center; color: #fff; }
.regua .r-baixa { background: var(--s-baixa); color: #3A1A10; } .regua .r-media { background: var(--s-media); color: #2A0E05; }
.regua .r-alta { background: var(--s-alta); } .regua .r-critica { background: var(--s-critica); }
.regua-num { display: grid; grid-template-columns: 39fr 30fr 20fr 11fr; gap: 3px; font-size: .78rem; color: var(--texto-3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .regua .r-alta, :root:not([data-theme="light"]) .regua .r-critica, :root:not([data-theme="light"]) .regua .r-media { color: #2A0E05; } :root:not([data-theme="light"]) .regua .r-baixa { color: #fff; } }

.como-ler { background: var(--aviso); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 16px; margin: 12px 0 16px; font-size: .96rem; }
.como-ler p { margin: 0 0 6px; } .como-ler p:last-child { margin: 0; }
.como-ler .parabola { font-style: italic; color: var(--texto-2); }
.como-ler .parabola strong { font-style: normal; color: var(--texto); }
details.conta { margin: 10px 0 4px; font-size: .92rem; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 8px 14px; }
details.conta summary { cursor: pointer; font-weight: 600; color: var(--latao); }
details.conta ol { margin: 8px 0 4px; padding-left: 20px; display: grid; gap: 6px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
details.conta .lista-num { font-size: .82rem; color: var(--texto-3); word-spacing: 2px; }

table.tab { width: 100%; border-collapse: collapse; background: var(--cartao); font-size: .93rem; }
table.tab th, table.tab td { border-bottom: 1px solid var(--linha); padding: 9px 8px; text-align: left; vertical-align: top; }
table.tab th { background: var(--tinta); color: #fff; font-weight: 600; }
table.tab td.n, table.tab th.n { text-align: right; font-variant-numeric: tabular-nums; }
table.tab caption { text-align: left; font-weight: 600; padding: 6px 0; color: var(--texto-2); }
@media (max-width: 680px) {
  table.tab thead { display: none; }
  table.tab tr { display: block; border-bottom: 2px solid var(--linha); padding: 8px 0; }
  table.tab td { display: block; border: 0; padding: 3px 8px; }
  table.tab td.n { text-align: left; }
  table.tab td[data-r]::before { content: attr(data-r) ": "; font-weight: 600; color: var(--texto-2); }
}
.tabela-rolar { overflow-x: auto; }
.cve { font-size: .82rem; color: var(--texto-3); }
table.tab td.data { white-space: nowrap; }

.avisos { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.avisos li { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; }
.avisos .quando { font-size: .82rem; color: var(--texto-3); }
.avisos .titulo { font-weight: 600; display: block; margin: 2px 0; }
.avisos .resumo { color: var(--texto-2); font-size: .95rem; margin: 0; }
.fonte-bloco { margin-bottom: 26px; }
.fonte-bloco .cab-fonte { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.fonte-bloco .cab-fonte h3 { margin: 0; }
.vazio { color: var(--texto-2); font-style: italic; }

.cartoes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-top: 4px solid var(--tinta-2); border-radius: var(--raio); padding: 18px; display: flex; flex-direction: column; }
.cartao p { color: var(--texto-2); flex: 1; }

.navegar { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.navegar a { font-weight: 600; color: var(--latao); }

.rodape { background: var(--tinta); color: #C5CFDA; font-size: .86rem; padding: 26px 0; }
.rodape a { color: #fff; }
.rodape .aviso { font-size: .78rem; color: #9DAAB8; }
.rodape p { margin: 0 0 .7em; }