/* Páginas públicas (início, conteúdo, calculadoras, entrada, painel, link
   compartilhado e páginas da conta): tokens de cor e regras de base comuns.
   Escopo em body.publica com :where() (especificidade zero): o simulador
   (app.css) tem tokens próprios, e cada página pode sobrescrever o que quiser. */
:where(body.publica) {
    --bg: #f6f6f3; --surface: #ffffff; --surface-2: #efeee9; --text: #1a1a19; --muted: #5d5c57;
    --primary: #256abf; --primary-ink: #1c5cab; --on-primary: #ffffff; --border: #e1e0d9;
    --compra: #2a78d6; --aluguel: #d95926; --ok: #0a7f0a; --success: #1f7a3f; --warning: #8a5a00; --danger: #b42318;
    /* Séries do histórico dos índices: significado fixo no gráfico */
    --serie-selic: #2a78d6; --serie-ipca: #cf3b3b; --serie-igpm: #b26a00; --serie-fipezap: #0f9d6b; --serie-incc: #7a5af8;
    --chart-grid: #e1e0d9; --chart-axis: #5d5c57;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] :where(body.publica) {
        --bg: #111110; --surface: #1c1c1a; --surface-2: #262624; --text: #f1f0ec; --muted: #b5b3ac;
        --primary: #6da7ec; --primary-ink: #86b6ef; --on-primary: #111110; --border: #33332f;
        --compra: #5598e7; --aluguel: #eb6834; --ok: #4fbf7a; --success: #4fbf7a; --warning: #f0b440; --danger: #f97066;
        --serie-selic: #5598e7; --serie-ipca: #f08a8a; --serie-igpm: #f0b440; --serie-fipezap: #4fbf7a; --serie-incc: #a78bfa;
        --chart-grid: #3b3b37; --chart-axis: #d0cec6;
    }
}
:where(body.publica), :where(body.publica) *, :where(body.publica) *::before, :where(body.publica) *::after { box-sizing: border-box; }
:where(body.publica) a { color: var(--primary-ink); }

/* Cabeçalho comum a todas as páginas (src/Layout.php). Usa os tokens de cor
   da página (app.css ou o :root das páginas públicas), com fallback. */
.cabecalho {
    --cab-texto: var(--text, #1a1a19);
    --cab-suave: var(--text-muted, var(--muted, #5d5c57));
    --cab-fundo: var(--surface, #ffffff);
    --cab-borda: var(--border, #e1e0d9);
    --cab-destaque: var(--primary, #256abf);
    position: relative;
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 8px 20px;
    flex-wrap: wrap;
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 16px;
    font: inherit;
    color: var(--cab-texto);
}
.cab-marca { display: inline-flex; align-items: center; gap: 10px; color: var(--cab-texto); text-decoration: none; font-weight: 700; margin-right: auto; }
.cab-marca svg { width: 32px; height: 32px; flex: none; }
.cab-nav { display: flex; align-items: center; gap: 4px; }
.cab-conta { display: flex; align-items: center; gap: 8px; }
.cab-link { color: var(--cab-texto); text-decoration: none; font-weight: 600; padding: 8px 10px; border-radius: 8px; }
.cab-link:hover, .cab-link.ativo { background: color-mix(in oklab, var(--cab-destaque) 12%, transparent); }
.cab-entrar { border: 1px solid var(--cab-borda); }
.cab-assistente { display: inline-flex; align-items: center; gap: 6px; }
.cab-tag { padding: 1px 6px; border-radius: 999px; background: var(--cab-destaque); color: var(--on-primary, #fff); font-size: .62rem; font-weight: 800; letter-spacing: .05em; }

.menu-grupo { position: relative; }
.menu-grupo > summary { list-style: none; cursor: pointer; font-weight: 600; padding: 8px 10px; border-radius: 8px; color: var(--cab-texto); user-select: none; }
.menu-grupo > summary::-webkit-details-marker { display: none; }
.menu-grupo > summary::after { content: "▾"; font-size: .8em; margin-left: 6px; color: var(--cab-suave); }
.menu-grupo > summary:hover, .menu-grupo[open] > summary, .menu-grupo > summary.ativo { background: color-mix(in oklab, var(--cab-destaque) 12%, transparent); }
.menu-grupo > summary:focus-visible, .cab-link:focus-visible, .cab-marca:focus-visible, .cab-menu-movel > summary:focus-visible { outline: 2px solid var(--cab-destaque); outline-offset: 2px; }
.menu-grupo > ul {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 280px; max-width: min(360px, 90vw);
    margin: 0; padding: 6px; list-style: none; background: var(--cab-fundo); border: 1px solid var(--cab-borda);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    /* Menus longos (ex.: Calculadoras) não podem passar da tela: rola dentro */
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.menu-conta > ul { left: auto; right: 0; min-width: 220px; }
/* "Minha compra" fica perto da borda direita: o menu abre para a esquerda */
.menu-compra > ul { left: auto; right: 0; }
.menu-grupo li a, .menu-grupo li button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; color: var(--cab-texto); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.menu-grupo li a:hover, .menu-grupo li button:hover, .menu-grupo li a:focus-visible, .menu-grupo li button:focus-visible { background: color-mix(in oklab, var(--cab-destaque) 12%, transparent); outline: none; }
/* "Feedback" só aparece com a função ligada (feedback.js remove o .hidden) */
.menu-grupo li button.menu-feedback.hidden { display: none; }
.menu-grupo li a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--cab-destaque); }
.menu-titulo { display: block; font-weight: 600; }
.menu-resumo { display: block; font-size: .85em; color: var(--cab-suave); margin-top: 1px; }
.menu-email { padding: 8px 12px 6px; font-size: .85em; color: var(--cab-suave); overflow-wrap: anywhere; border-bottom: 1px solid var(--cab-borda); margin-bottom: 4px; }
.menu-conta > summary { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 50%; background: var(--cab-destaque); color: var(--on-primary, #fff); }
.menu-conta > summary::after { content: none; }
.menu-conta[open] > summary, .menu-conta > summary:hover { background: var(--cab-destaque); filter: brightness(1.1); }

/* Telas médias: só o ícone da marca, para os menus e os atalhos da conta
   caberem numa linha (U5) */
@media (max-width: 1080px) {
    .cab-marca span { display: none; }
}

/* Celular: o menu vira uma lista que abre pelo botão "Menu" */
.cab-menu-movel { display: none; }
.cab-menu-movel > summary { list-style: none; cursor: pointer; font-weight: 600; padding: 8px 12px; border: 1px solid var(--cab-borda); border-radius: 8px; }
.cab-menu-movel > summary::-webkit-details-marker { display: none; }
@media (max-width: 860px) {
    .cab-menu-movel { display: block; order: 2; }
    .cab-conta { order: 1; }
    .cab-nav { display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px; padding-top: 6px; border-top: 1px solid var(--cab-borda); }
    .cab-menu-movel[open] ~ .cab-nav { display: flex; }
    .menu-grupo > ul { position: static; min-width: 0; max-width: none; box-shadow: none; border: 0; padding: 0 0 6px 8px; max-height: none; overflow: visible; }
    .menu-conta > ul { position: absolute; right: 0; left: auto; min-width: 220px; border: 1px solid var(--cab-borda); box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
    .cab-marca span { display: none; }
    .cabecalho { gap: 8px; }
    .cab-tag { display: none; }
    .cab-assistente { padding: 8px; }
    .cab-entrar { padding: 8px 10px; }
    /* Os atalhos da conta continuam no menu da inicial; o assistente fica
       visível porque é uma porta de entrada do produto. */
    .cab-conta .cab-link:not(.cab-entrar):not(.cab-assistente), .cab-conta .menu-compra { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .menu-grupo > ul { animation: menu-abrir .12s ease-out; }
    @keyframes menu-abrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}
/* Alto contraste: texto secundário mais forte e foco reforçado */
@media (prefers-contrast: more) {
    body.publica { --muted: var(--text); }
    :focus-visible { outline-width: 3px; }
}
/* Modo de cores forçadas do sistema (Windows Alto Contraste) */
@media (forced-colors: active) {
    .card, .config-geral, dialog.dialogo { border: 1px solid CanvasText; }
    .skip-link { position: static; }
}

/* Tema escolhido nas Configurações (sobrepõe o do sistema) */
:root[data-theme="light"] body.publica {
    --bg: #f6f6f3; --surface: #ffffff; --surface-2: #efeee9; --text: #1a1a19; --muted: #5d5c57;
    --primary: #256abf; --primary-ink: #1c5cab; --on-primary: #ffffff; --border: #e1e0d9;
    --compra: #2a78d6; --aluguel: #d95926; --ok: #0a7f0a; --success: #1f7a3f; --warning: #8a5a00; --danger: #b42318;
    --serie-selic: #2a78d6; --serie-ipca: #cf3b3b; --serie-igpm: #b26a00; --serie-fipezap: #0f9d6b; --serie-incc: #7a5af8;
    --chart-grid: #e1e0d9; --chart-axis: #5d5c57;
}
:root[data-theme="dark"] body.publica {
    --bg: #111110; --surface: #1c1c1a; --surface-2: #262624; --text: #f1f0ec; --muted: #b5b3ac;
    --primary: #6da7ec; --primary-ink: #86b6ef; --on-primary: #111110; --border: #33332f;
    --compra: #5598e7; --aluguel: #eb6834; --ok: #4fbf7a; --success: #4fbf7a; --warning: #f0b440; --danger: #f97066;
    --serie-selic: #5598e7; --serie-ipca: #f08a8a; --serie-igpm: #f0b440; --serie-fipezap: #4fbf7a; --serie-incc: #a78bfa;
    --chart-grid: #3b3b37; --chart-axis: #d0cec6;
}

/* Janela de configurações do cabeçalho (fora do simulador) */
.config-geral { width: min(440px, calc(100vw - 32px)); margin: auto; padding: 0; border: 1px solid var(--border, #e1e0d9); border-radius: 16px; background: var(--surface, #fff); color: var(--text, #1a1a19); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
.config-geral::backdrop { background: rgba(0, 0, 0, .45); }

/* Atalho "pular para o conteúdo" (visível só no foco por teclado) */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 10px 16px; background: var(--primary, #256abf); color: var(--on-primary, #fff); border-radius: 0 0 8px 0; text-decoration: none; font-weight: 600; }
.skip-link:focus { left: 0; outline: 3px solid var(--on-primary, #fff); outline-offset: -4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Tabela ignora height: 1px e cresce com as linhas (esticava a página com espaço vazio) */
table.sr-only { display: block; }
.hidden { display: none; }

/* Janela de pergunta genérica (perguntarDialogo em ux.js) */
dialog.dialogo { width: min(440px, calc(100vw - 32px)); margin: auto; padding: 0; border: 1px solid var(--border, #e1e0d9); border-radius: 16px; background: var(--surface, #fff); color: var(--text, #1a1a19); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); }
dialog.dialogo::backdrop { background: rgba(0, 0, 0, .45); }
dialog.dialogo form { padding: 22px 22px 18px; margin: 0; }
dialog.dialogo h2 { margin: 0 0 8px; font-size: 1.15rem; }
dialog.dialogo p { margin: 0; color: var(--text-muted, var(--muted, #5d5c57)); overflow-wrap: anywhere; }
dialog.dialogo label { display: block; margin-top: 14px; }
/* .hidden sozinho perde para a regra acima: sem isso o campo aparece em toda pergunta */
dialog.dialogo label.hidden { display: none; }
dialog.dialogo input { width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--border, #e1e0d9); border-radius: 8px; background: var(--surface, #fff); color: var(--text, #1a1a19); font: inherit; }
/* Janela de feedback (assets/feedback.js), em todas as páginas */
dialog.dialogo select, dialog.dialogo textarea { width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--border, #e1e0d9); border-radius: 8px; background: var(--surface, #fff); color: var(--text, #1a1a19); font: inherit; }
dialog.dialogo .fb-incluir { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; }
dialog.dialogo .fb-incluir input { width: auto; margin-top: 3px; }
.fb-sem-simulacao dialog.dialogo .fb-incluir { display: none; }
dialog.dialogo .dialogo-acoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
dialog.dialogo .dialogo-acoes button { padding: 8px 16px; border-radius: 8px; border: 1px solid var(--border, #e1e0d9); background: var(--surface, #fff); color: var(--text, #1a1a19); cursor: pointer; font: inherit; }
dialog.dialogo .dialogo-acoes button[value="ok"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); }
dialog.dialogo .dialogo-acoes button.excluir { background: var(--danger, #b42318); border-color: var(--danger, #b42318); color: #fff; }
.config-geral-topo { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border, #e1e0d9); }
.config-geral-topo h2 { margin: 0; font-size: 1.15rem; }
.config-geral-fechar { border: 0; background: none; color: inherit; font-size: 1.1rem; cursor: pointer; padding: 6px 10px; border-radius: 8px; }
.config-geral-fechar:hover, .config-geral-fechar:focus-visible { background: var(--surface-2, #efeee9); outline: none; }
.config-geral-grupo { padding: 14px 20px; }
.config-geral-grupo + .config-geral-grupo { border-top: 1px solid var(--border, #e1e0d9); }
.config-geral-grupo h3 { margin: 0 0 8px; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted, var(--text-muted, #5d5c57)); }
.config-geral-grupo label { display: block; font-weight: 600; margin-bottom: 6px; }
.config-geral-grupo select { width: 100%; font: inherit; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border, #e1e0d9); background: var(--bg, #f6f6f3); color: inherit; }
.config-geral-email { margin: 0 0 6px; font-weight: 600; overflow-wrap: anywhere; }
.config-geral-botao { margin-top: 8px; font: inherit; font-weight: 700; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border, #e1e0d9); background: transparent; color: inherit; cursor: pointer; }

/* O cabeçalho não herda estilos genéricos das páginas (details, summary, nav) */
.cabecalho :where(details, summary, nav) { border: 0; margin: 0; }
.cabecalho :where(details) { padding: 0; }
.config-geral-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.config-geral-acoes .config-geral-botao { margin-top: 0; }
.config-geral-det { margin-top: 12px; border-top: 1px solid var(--border, #e1e0d9); padding-top: 10px; }
.config-geral-det > summary { cursor: pointer; font-weight: 600; }
.config-geral-det.perigo > summary { color: var(--danger, #b42318); }
.config-geral-det form { display: grid; gap: 6px; margin-top: 10px; }
.config-geral-det form p { margin: 0; color: var(--muted, #5d5c57); font-size: .95rem; }
.config-geral-det input { font: inherit; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border, #e1e0d9); background: var(--bg, #f6f6f3); color: inherit; }
.config-geral-det label { font-weight: 600; font-size: .95rem; margin: 4px 0 0; }
.config-geral-det .config-geral-botao { justify-self: start; }
.config-geral-botao.perigo { background: var(--danger, #b42318); border-color: var(--danger, #b42318); color: #fff; }
.config-geral-botao:disabled { opacity: .6; cursor: progress; }
.config-geral-msg { margin: 10px 0 0; min-height: 1.2em; font-size: .95rem; }
.config-geral-msg.erro { color: var(--danger, #b42318); }
.config-geral-msg.ok { color: var(--success, #1f7a3f); }
.config-geral-rodape { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--border, #e1e0d9); font-size: .9rem; color: var(--muted, #5d5c57); }
.config-geral-rodape a { color: inherit; }

/* Índice de acessibilidade (/indice-de-acessibilidade): tabela por cidade */
body.publica .table-container { overflow-x: auto; }
body.publica .indice-tabela { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: 12px; }
body.publica .indice-tabela th, body.publica .indice-tabela td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
body.publica .indice-tabela th:first-child, body.publica .indice-tabela td:first-child { text-align: left; }
body.publica .indice-tabela th { font-size: .85rem; color: var(--muted); }
body.publica .indice-tabela small { color: var(--muted); }
/* Celular: cada cidade vira um cartão com os rótulos das colunas no lugar de
   uma tabela de 6 colunas que só cabia rolando para o lado */
@media (max-width: 760px) {
    body.publica .indice-tabela,
    body.publica .indice-tabela tbody,
    body.publica .indice-tabela tr,
    body.publica .indice-tabela td { display: block; width: 100%; }
    body.publica .indice-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    body.publica .indice-tabela tr { padding: 10px 0; border-bottom: 1px solid var(--border); }
    body.publica .indice-tabela td,
    body.publica .indice-tabela th { border: 0; padding: 3px 0; }
    body.publica .indice-tabela td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; text-align: right; white-space: normal; }
    body.publica .indice-tabela td::before { content: attr(data-label); font-weight: 600; color: var(--muted); text-align: left; }
    body.publica .indice-tabela td:first-child { font-weight: 700; }
}

/* Histórico dos índices (/historico-dos-indices): cartões + gráfico */
body.publica .indices-intro { max-width: 70ch; }
body.publica .indices-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 18px 0 28px; }
body.publica .indice-card { display: flex; flex-direction: column; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--indice-cor, var(--primary)); border-radius: 12px; }
body.publica .indice-card__topo { display: flex; align-items: center; gap: 8px; }
body.publica .indice-ponto { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--indice-cor, var(--primary)); }
body.publica .indice-card__rotulo { font-weight: 600; font-size: .9rem; color: var(--muted); }
body.publica .indice-card__valor { margin-top: 2px; font-size: 1.6rem; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
body.publica .indice-card__dica { color: var(--muted); font-size: .8rem; }
body.publica .indice-card__explicacao { margin: 8px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
@media (max-width: 900px) { body.publica .indices-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { body.publica .indices-cartoes { grid-template-columns: 1fr; } }

body.publica .indices-painel { margin-top: 8px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
body.publica .indices-painel h2 { margin: 0; font-size: 1.15rem; }
body.publica .indices-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
body.publica .indices-periodos { display: inline-flex; gap: 6px; }
body.publica .indice-periodo { font: inherit; font-size: .85rem; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; }
body.publica .indice-periodo:hover { background: var(--surface-2); }
body.publica .indice-periodo[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); }
body.publica .indices-chart { position: relative; height: 360px; }
body.publica .indices-fonte { color: var(--muted); font-size: .8rem; }

/* Prazos de guarda na /privacidade (PRIV3): tabela de texto */
body.publica .tabela-rolagem { overflow-x: auto; }
body.publica .tabela-retencao { width: 100%; border-collapse: collapse; font-size: .9rem; }
body.publica .tabela-retencao caption { padding-bottom: 8px; text-align: left; color: var(--muted); font-size: .8rem; }
body.publica .tabela-retencao th, body.publica .tabela-retencao td { padding: 8px 10px; text-align: left; white-space: normal; vertical-align: top; border-bottom: 1px solid var(--border); }
body.publica .tabela-retencao td:first-child { width: 40%; font-weight: 600; }