/*
 * calc-styles.css — folha de estilo compartilhada pelas paginas de calculadora tematica
 * (calculadora-tesouro-selic, calculadora-tesouro-ipca, calculadora-tesouro-prefixado).
 *
 * NAO e a folha de estilo da home (index.html / app.js), que esta sendo reformulada
 * em paralelo por outro agente no mesmo diretorio beta_v06. Este arquivo tem nome
 * proprio (calc-styles.css, nao styles.css) exatamente para nao colidir com o que a
 * home venha a criar. Se a home decidir padronizar um styles.css global depois,
 * as 3 paginas de calculadora podem migrar para ele — por ora cada pagina referencia
 * "../calc-styles.css" de forma independente e autocontida.
 *
 * Sem Tailwind CDN, sem Font Awesome remoto, sem Google Fonts remoto (fonte de sistema).
 * Mobile-first. Suporta tema claro/escuro via prefers-color-scheme e [data-theme].
 */

:root {
	--cor-fundo: #f8fafc;
	--cor-superficie: #ffffff;
	--cor-superficie-alt: #f1f5f9;
	--cor-borda: #e2e8f0;
	--cor-texto: #0f172a;
	--cor-texto-suave: #475569;
	--cor-texto-fraco: #64748b;
	--cor-primaria: #4338ca;
	--cor-primaria-hover: #3730a3;
	--cor-primaria-texto: #ffffff;
	--cor-sucesso: #15803d;
	--cor-sucesso-fundo: #f0fdf4;
	--cor-alerta: #b45309;
	--cor-alerta-fundo: #fffbeb;
	--cor-erro: #b91c1c;
	--cor-erro-fundo: #fef2f2;
	--cor-link: #4338ca;
	--fonte-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--raio: 10px;
	--sombra: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--cor-fundo: #0f172a;
		--cor-superficie: #1e293b;
		--cor-superficie-alt: #263449;
		--cor-borda: #334155;
		--cor-texto: #f1f5f9;
		--cor-texto-suave: #cbd5e1;
		--cor-texto-fraco: #94a3b8;
		--cor-primaria: #818cf8;
		--cor-primaria-hover: #a5b4fc;
		--cor-primaria-texto: #0f172a;
		--cor-sucesso: #4ade80;
		--cor-sucesso-fundo: #052e1a;
		--cor-alerta: #fbbf24;
		--cor-alerta-fundo: #3a2a06;
		--cor-erro: #f87171;
		--cor-erro-fundo: #3a0d0d;
		--cor-link: #a5b4fc;
	}
}

:root[data-theme="dark"] {
	--cor-fundo: #0f172a;
	--cor-superficie: #1e293b;
	--cor-superficie-alt: #263449;
	--cor-borda: #334155;
	--cor-texto: #f1f5f9;
	--cor-texto-suave: #cbd5e1;
	--cor-texto-fraco: #94a3b8;
	--cor-primaria: #818cf8;
	--cor-primaria-hover: #a5b4fc;
	--cor-primaria-texto: #0f172a;
	--cor-sucesso: #4ade80;
	--cor-sucesso-fundo: #052e1a;
	--cor-alerta: #fbbf24;
	--cor-alerta-fundo: #3a2a06;
	--cor-erro: #f87171;
	--cor-erro-fundo: #3a0d0d;
	--cor-link: #a5b4fc;
}

* { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
	margin: 0;
	font-family: var(--fonte-base);
	background: var(--cor-fundo);
	color: var(--cor-texto);
	line-height: 1.55;
	font-size: 16px;
}

.container {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 16px;
}

/* Cabecalho e navegacao */
.site-header {
	background: var(--cor-superficie);
	border-bottom: 1px solid var(--cor-borda);
	padding: 14px 0;
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.marca {
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--cor-texto);
	text-decoration: none;
}

.marca:hover { color: var(--cor-primaria); }

.nav-curta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 0.9rem;
}

.nav-curta a {
	color: var(--cor-texto-suave);
	text-decoration: none;
}

.nav-curta a:hover { color: var(--cor-primaria); text-decoration: underline; }

/* Breadcrumb */
.breadcrumb {
	font-size: 0.85rem;
	color: var(--cor-texto-fraco);
	margin: 16px 0 8px;
}

.breadcrumb a {
	color: var(--cor-texto-fraco);
	text-decoration: none;
}

.breadcrumb a:hover { text-decoration: underline; color: var(--cor-primaria); }

.breadcrumb .separador { margin: 0 6px; }

.breadcrumb [aria-current="page"] { color: var(--cor-texto-suave); }

/* Tipografia geral */
main { padding-bottom: 48px; }

h1 {
	font-size: 1.65rem;
	line-height: 1.25;
	margin: 8px 0 12px;
	color: var(--cor-texto);
}

h2 {
	font-size: 1.25rem;
	margin: 32px 0 12px;
	padding-top: 8px;
	border-top: 1px solid var(--cor-borda);
	color: var(--cor-texto);
}

h2:first-of-type { border-top: none; padding-top: 0; }

h3 {
	font-size: 1.05rem;
	margin: 18px 0 8px;
	color: var(--cor-texto);
}

p { margin: 0 0 12px; color: var(--cor-texto-suave); }

a { color: var(--cor-link); }

.intro {
	font-size: 1.05rem;
	color: var(--cor-texto-suave);
	margin-bottom: 20px;
}

.selo-privacidade {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--cor-superficie-alt);
	border: 1px solid var(--cor-borda);
	border-radius: 999px;
	padding: 6px 12px;
	font-size: 0.82rem;
	color: var(--cor-texto-suave);
	margin-bottom: 20px;
}

.selo-privacidade svg { flex-shrink: 0; width: 14px; height: 14px; }

.data-referencia {
	font-size: 0.85rem;
	color: var(--cor-texto-fraco);
	margin-bottom: 20px;
}

/* Cartao / calculadora */
.cartao {
	background: var(--cor-superficie);
	border: 1px solid var(--cor-borda);
	border-radius: var(--raio);
	box-shadow: var(--sombra);
	padding: 20px;
	margin-bottom: 24px;
}

.calculadora-titulo {
	font-size: 1.1rem;
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.campo {
	margin-bottom: 16px;
}

.campo label {
	display: block;
	font-weight: 600;
	font-size: 0.88rem;
	margin-bottom: 6px;
	color: var(--cor-texto);
}

.campo .ajuda {
	font-size: 0.78rem;
	color: var(--cor-texto-fraco);
	margin-top: 4px;
}

.campo input,
.campo select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--cor-borda);
	border-radius: 8px;
	font-size: 1rem;
	background: var(--cor-fundo);
	color: var(--cor-texto);
	font-family: inherit;
}

.campo input:focus,
.campo select:focus {
	outline: 3px solid color-mix(in srgb, var(--cor-primaria) 35%, transparent);
	outline-offset: 1px;
	border-color: var(--cor-primaria);
}

.campo-erro {
	color: var(--cor-erro);
	font-size: 0.8rem;
	margin-top: 4px;
	display: none;
}

.campo.invalido input,
.campo.invalido select { border-color: var(--cor-erro); }

.campo.invalido .campo-erro { display: block; }

.linha-campos {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 16px;
}

@media (min-width: 640px) {
	.linha-campos.duas-colunas { grid-template-columns: 1fr 1fr; }
}

.botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--cor-primaria);
	color: var(--cor-primaria-texto);
	border: none;
	border-radius: 8px;
	padding: 12px 20px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	font-family: inherit;
}

.botao:hover { background: var(--cor-primaria-hover); }

.botao:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--cor-primaria) 45%, transparent);
	outline-offset: 2px;
}

@media (min-width: 480px) {
	.botao { width: auto; }
}

.botao-secundario {
	background: transparent;
	color: var(--cor-primaria);
	border: 1px solid var(--cor-primaria);
}

.botao-secundario:hover { background: var(--cor-superficie-alt); }

/* Resultado */
.resultado {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px dashed var(--cor-borda);
}

.resultado[hidden] { display: none; }

.resposta-natural {
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--cor-texto);
	margin-bottom: 16px;
	padding: 14px;
	background: var(--cor-superficie-alt);
	border-radius: 8px;
	border-left: 4px solid var(--cor-primaria);
}

.grade-resultado {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 16px;
}

@media (min-width: 640px) {
	.grade-resultado { grid-template-columns: repeat(3, 1fr); }
}

.item-resultado {
	background: var(--cor-superficie-alt);
	border-radius: 8px;
	padding: 12px;
}

.item-resultado .rotulo {
	font-size: 0.75rem;
	color: var(--cor-texto-fraco);
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.item-resultado .valor {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--cor-texto);
	word-break: break-word;
}

.item-resultado.positivo .valor { color: var(--cor-sucesso); }
.item-resultado.negativo .valor { color: var(--cor-erro); }

/* Aviso / limitacao */
.aviso {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	background: var(--cor-alerta-fundo);
	border: 1px solid color-mix(in srgb, var(--cor-alerta) 40%, transparent);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 0.88rem;
	color: var(--cor-texto);
	margin: 16px 0;
}

.aviso svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--cor-alerta); }

.aviso-erro {
	background: var(--cor-erro-fundo);
	border-color: color-mix(in srgb, var(--cor-erro) 40%, transparent);
}

.aviso-erro svg { color: var(--cor-erro); }

/* Memoria de calculo (detalhes) */
details.memoria {
	margin: 16px 0;
	border: 1px solid var(--cor-borda);
	border-radius: 8px;
	background: var(--cor-superficie);
}

details.memoria summary {
	cursor: pointer;
	padding: 12px 14px;
	font-weight: 600;
	font-size: 0.92rem;
	list-style: revert;
}

details.memoria summary:focus-visible { outline: 3px solid var(--cor-primaria); }

.memoria-conteudo { padding: 0 14px 14px; font-size: 0.85rem; color: var(--cor-texto-suave); }

.memoria-conteudo ul { padding-left: 20px; margin: 8px 0; }
.memoria-conteudo li { margin-bottom: 4px; }
.memoria-conteudo code {
	background: var(--cor-superficie-alt);
	padding: 1px 5px;
	border-radius: 4px;
	font-size: 0.82em;
}

/* Tabelas responsivas */
.tabela-scroll { overflow-x: auto; margin: 16px 0; }

table.tabela-dados {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
	min-width: 480px;
}

table.tabela-dados caption {
	text-align: left;
	font-size: 0.85rem;
	color: var(--cor-texto-fraco);
	margin-bottom: 8px;
}

table.tabela-dados th,
table.tabela-dados td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--cor-borda);
}

table.tabela-dados th {
	background: var(--cor-superficie-alt);
	font-weight: 600;
	color: var(--cor-texto);
}

/* FAQ */
.faq-item {
	border-bottom: 1px solid var(--cor-borda);
	padding: 14px 0;
}

.faq-item:last-child { border-bottom: none; }

.faq-pergunta {
	font-weight: 600;
	margin: 0 0 6px;
	color: var(--cor-texto);
}

.faq-resposta { margin: 0; color: var(--cor-texto-suave); }

/* Links internos / relacionados */
.links-relacionados {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 16px 0;
}

@media (min-width: 640px) {
	.links-relacionados { grid-template-columns: repeat(3, 1fr); }
}

.link-relacionado {
	display: block;
	padding: 14px;
	border: 1px solid var(--cor-borda);
	border-radius: 8px;
	text-decoration: none;
	background: var(--cor-superficie);
	color: var(--cor-texto);
}

.link-relacionado:hover { border-color: var(--cor-primaria); }

.link-relacionado .titulo-link {
	font-weight: 600;
	font-size: 0.92rem;
	margin-bottom: 4px;
	color: var(--cor-primaria);
}

.link-relacionado .descricao-link {
	font-size: 0.82rem;
	color: var(--cor-texto-fraco);
}

/* Rodape */
.site-footer {
	border-top: 1px solid var(--cor-borda);
	background: var(--cor-superficie);
	padding: 24px 0 32px;
	margin-top: 40px;
	font-size: 0.85rem;
	color: var(--cor-texto-fraco);
}

.site-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 12px;
}

.site-footer nav a { color: var(--cor-texto-fraco); text-decoration: none; }
.site-footer nav a:hover { color: var(--cor-primaria); text-decoration: underline; }

.autoria {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--cor-borda);
	font-size: 0.8rem;
}

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.status-carregando,
.status-salvo {
	font-size: 0.82rem;
	color: var(--cor-texto-fraco);
	margin-top: 8px;
}