/* ============================================================================
 * Simuladores públicos: páginas HTML estáticas, fora do Angular, para o buscador ler o conteúdo
 * inteiro sem executar nada. Por isso elas não enxergam o src/styles.css e repetem aqui os
 * papéis da paleta que usam — os mesmos valores, claro e escuro, sem cor nova.
 * ========================================================================= */

:root {
  color-scheme: light;
  --fundo: #e3e7ee;
  --pagina: #d9dee7;
  --texto: #041b3c;
  --apagado: #434654;
  --regua: #bfc6d3;
  --acento: #003d9b;
  --sobre-acento: #ffffff;
  --sucesso: #006c47;
  --alerta: #ba1a1a;
  --campo: #edf0f4;
  --entrada: #f8f9fb;
  --superficie-baixa: #e3e7ee;
  --superficie: #d1d8e4;
  --acento-suave: #dae2ff;
  --sucesso-suave: #82f9be;
  --atencao: #7d5200;
  /* o âmbar não tem par de fundo na paleta: sai do próprio âmbar sobre o cartão, nos dois temas */
  --atencao-suave: color-mix(in oklab, var(--atencao) 16%, var(--campo));
  --alerta-suave: #ffdad6;
  --sobre-alerta: #93000a;
  --cabeca-tabela: #1d3052;
  --sobre-cabeca-tabela: #ffffff;
  --capa: #003d9b;
  --sobre-capa: #ffffff;
  --sobre-capa-suave: #b2c5ff;
  --raio: 6px;
  --lateral: clamp(16px, 5vw, 64px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema='claro']) {
    color-scheme: dark;
    --fundo: #0c1322; --pagina: #0c1322; --texto: #dce2f7; --apagado: #c1c7d3; --regua: #414751;
    --acento: #a4c9ff; --sobre-acento: #00315d; --sucesso: #4edea3; --alerta: #ffb4ab;
    --campo: #191f2f; --entrada: #191f2f; --superficie-baixa: #232a3a; --superficie: #2e3545;
    --acento-suave: #00315d; --sucesso-suave: #003824; --atencao: #f59e0b;
    --alerta-suave: #93000a; --sobre-alerta: #ffdad6; --cabeca-tabela: #2e3545; --sobre-cabeca-tabela: #dce2f7;
    --capa: #003a6b; --sobre-capa: #d4e3ff; --sobre-capa-suave: #a4c9ff;
  }
}
:root[data-tema='escuro'] {
  color-scheme: dark;
  --fundo: #0c1322; --pagina: #0c1322; --texto: #dce2f7; --apagado: #c1c7d3; --regua: #414751;
  --acento: #a4c9ff; --sobre-acento: #00315d; --sucesso: #4edea3; --alerta: #ffb4ab;
  --campo: #191f2f; --entrada: #191f2f; --superficie-baixa: #232a3a; --superficie: #2e3545;
  --acento-suave: #00315d; --sucesso-suave: #003824; --atencao: #f59e0b;
  --alerta-suave: #93000a; --sobre-alerta: #ffdad6; --cabeca-tabela: #2e3545; --sobre-cabeca-tabela: #dce2f7;
  --capa: #003a6b; --sobre-capa: #d4e3ff; --sobre-capa-suave: #a4c9ff;
}

* { box-sizing: border-box; }
/* o atributo hidden vence os display: flex e grid das classes (.campo, .cartao…) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pagina);
  color: var(--texto);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
a { color: var(--acento); }
.num, .val, td { font-variant-numeric: tabular-nums; }

/* --- topo e rodapé, os mesmos da página pública da carteira ------------------------------- */
.cabecalho {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 0 var(--lateral); background: var(--capa); color: var(--sobre-capa);
}
/* travado no topo como o do app: sticky no computador; no celular fixed, porque o sticky acompanha o
   quique da rolagem do iPhone e o topo parece solto. O recuo de cima cobre o entalhe. */
.cabecalho { position: sticky; top: 0; z-index: 10; }
/* âncora e foco do teclado não ficam escondidos atrás do topo */
html { scroll-padding-top: 72px; }
@media (max-width: 900px) {
  .cabecalho { position: fixed; left: 0; right: 0; padding-top: env(safe-area-inset-top, 0px); min-height: calc(56px + env(safe-area-inset-top, 0px)); }
  body { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }
}
.cabecalho .marca { display: flex; }
.cabecalho .marca img { height: 22px; width: auto; display: block; }
.cabecalho nav { display: flex; align-items: center; gap: 18px; font-size: 13.5px; white-space: nowrap; }
@media (max-width: 400px) { .cabecalho nav { gap: 12px; font-size: 13px; } }
.cabecalho nav a { color: inherit; text-decoration: none; opacity: .9; }
.cabecalho nav a:hover { opacity: 1; text-decoration: underline; }
.cabecalho nav .botao {
  opacity: 1; background: var(--sobre-capa); color: var(--capa); padding: 7px 14px; border-radius: 8px; font-weight: 600;
}
.cabecalho nav .botao:hover { text-decoration: none; }
@media (max-width: 560px) { .cabecalho nav .some { display: none; } }

.pe {
  padding: 28px var(--lateral); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--apagado); border-top: 1px solid var(--regua); background: var(--fundo);
}
.pe a { color: inherit; }
.pe .links { display: flex; gap: 16px; flex-wrap: wrap; }

/* --- miolo -------------------------------------------------------------------------------- */
.miolo { max-width: 1120px; margin: 0 auto; padding: 20px var(--lateral) 56px; display: flex; flex-direction: column; gap: 24px; }
.trilha { font-size: 13px; color: var(--apagado); }
.trilha ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.trilha li + li::before { content: '›'; margin-right: 6px; }
.trilha a { color: inherit; }

.chapeu { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); }
h1 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.15; margin-top: 6px; }
h2 { font-size: 1.15rem; }
.lead { color: var(--apagado); max-width: 66ch; margin-top: 10px; font-size: 1.02rem; }
.atualizado { color: var(--apagado); font-size: 12.5px; margin-top: 10px; }

.formula {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .86rem;
  background: var(--campo); border: 1px solid var(--regua); border-radius: var(--raio); padding: 8px 12px;
  margin-top: 14px; display: inline-block; max-width: 100%; overflow-x: auto; white-space: nowrap;
}
/* no celular a fórmula quebra linha em vez de ganhar barra de rolagem */
@media (max-width: 560px) { .formula { white-space: normal; } }

.cartao {
  background: var(--campo); border: 1px solid var(--regua); border-radius: 10px; padding: 20px;
  display: flex; flex-direction: column; gap: 18px; min-width: 0;
}
.rotulo { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); font-weight: 600; }
.dica { color: var(--apagado); font-size: .8rem; }
.regua { border: 0; border-top: 1px solid var(--regua); margin: 0; }

/* --- o índice de simuladores -------------------------------------------------------------- */
.lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.item { text-decoration: none; color: inherit; gap: 10px; }
.item:hover { border-color: var(--acento); }
.item h2 { color: var(--acento); }
.item p { color: var(--apagado); }

/* --- texto corrido, para quem quer entender o método -------------------------------------- */
.texto { max-width: 76ch; display: flex; flex-direction: column; gap: 14px; }
.texto h2 { font-size: 1.3rem; margin-top: 18px; }
.texto h3 { font-size: 1.02rem; margin-top: 6px; }
.texto ul, .texto ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.texto .formula { margin-top: 0; }
.perguntas details { border-top: 1px solid var(--regua); padding: 12px 0; }
.perguntas details:last-child { border-bottom: 1px solid var(--regua); }
.perguntas summary { cursor: pointer; font-weight: 600; }
.perguntas details p { margin-top: 8px; color: var(--apagado); }

.chamada {
  background: var(--capa); color: var(--sobre-capa); border-radius: 12px; padding: 24px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.chamada p { color: var(--sobre-capa-suave); margin-top: 4px; max-width: 60ch; }
.chamada a {
  background: var(--sobre-capa); color: var(--capa); text-decoration: none; font-weight: 600;
  padding: 11px 20px; border-radius: 8px; white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }