/*
  BASE: reset + componentes usados por todos os projetos.
  Depende de tokens.css (importar antes).
  Veja tudo funcionando em design-system/componentes.html
*/

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100dvh;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: var(--altura-linha);
  -webkit-font-smoothing: antialiased;
}
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--cor-marca); text-underline-offset: 0.2em; }
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  line-height: var(--altura-linha-titulo);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-h4); }
p { text-wrap: pretty; max-width: var(--largura-texto); }

:focus-visible { outline: 3px solid var(--cor-foco); outline-offset: 2px; border-radius: var(--raio-p); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--margem-lateral), var(--largura-max)); margin-inline: auto; }
.secao { padding-block: clamp(var(--e-8), 10vw, var(--e-10)); }
.pilha { display: flex; flex-direction: column; gap: var(--pilha-gap, var(--e-4)); }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: var(--linha-gap, var(--e-3)); }
.grade { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grade-min, 260px)), 1fr)); }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Texto ---------- */
.sobretitulo { font-size: var(--t-pequeno); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cor-marca); }
.texto-suave { color: var(--cor-texto-suave); }
.texto-grande { font-size: var(--t-grande); }
.mono { font-family: var(--fonte-mono); font-size: 0.9em; }

/* ---------- Botão ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: var(--toque-min); padding: var(--e-2) var(--e-5);
  border: 1px solid transparent; border-radius: var(--raio-m);
  background: var(--cor-marca); color: var(--cor-sobre-marca);
  font-weight: 600; text-decoration: none; line-height: 1.2;
  transition: background var(--duracao) var(--curva), transform var(--duracao) var(--curva), border-color var(--duracao);
}
.botao:hover { background: var(--cor-marca-forte); }
.botao:active { transform: translateY(1px); }
.botao--secundario { background: transparent; color: var(--cor-texto); border-color: var(--cor-borda); }
.botao--secundario:hover { background: var(--cor-superficie-2); }
.botao--fantasma { background: transparent; color: var(--cor-marca); }
.botao--fantasma:hover { background: var(--cor-superficie-2); }
.botao--perigo { background: var(--cor-erro); color: #fff; }
.botao--perigo:hover { background: var(--cor-erro); filter: brightness(0.92); }
.botao--grande { min-height: 52px; padding-inline: var(--e-6); font-size: var(--t-grande); }
.botao--pequeno { min-height: 36px; padding-inline: var(--e-3); font-size: var(--t-pequeno); }
.botao[disabled] { opacity: 0.5; pointer-events: none; }

/* ---------- Card ---------- */
.card {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-g); padding: var(--e-5);
}
.card--elevado { border-color: transparent; box-shadow: var(--sombra-2); }

/* ---------- Formulário ---------- */
.campo { display: flex; flex-direction: column; gap: var(--e-1); }
.campo label { font-weight: 600; font-size: var(--t-pequeno); }
.campo input, .campo select, .campo textarea, .entrada {
  min-height: var(--toque-min); padding: var(--e-2) var(--e-3);
  background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-m);
  transition: border-color var(--duracao);
}
.campo textarea { min-height: 96px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .entrada:focus { border-color: var(--cor-marca); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cor-marca) 25%, transparent); }
.campo .ajuda { font-size: var(--t-pequeno); color: var(--cor-texto-suave); }
.campo .erro { font-size: var(--t-pequeno); color: var(--cor-erro); }
.campo[data-erro] input, .campo[data-erro] select { border-color: var(--cor-erro); }

/* ---------- Selo ---------- */
.selo {
  display: inline-flex; align-items: center; gap: var(--e-1);
  padding: 2px var(--e-2); border-radius: var(--raio-total);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.5;
  background: var(--cor-superficie-2); color: var(--cor-texto-suave);
}
.selo--sucesso { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.selo--alerta { background: var(--cor-alerta-fundo); color: var(--cor-alerta); }
.selo--erro { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.selo--marca { background: color-mix(in srgb, var(--cor-marca) 14%, transparent); color: var(--cor-marca); }

/* ---------- Tabela (vira cards no celular) ---------- */
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-pequeno); }
.tabela th { text-align: left; font-weight: 600; color: var(--cor-texto-suave); padding: var(--e-3); border-bottom: 1px solid var(--cor-borda); white-space: nowrap; }
.tabela td { padding: var(--e-3); border-bottom: 1px solid var(--cor-borda); }
.tabela tbody tr:hover { background: var(--cor-superficie-2); }
@media (max-width: 640px) {
  .tabela thead { display: none; }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: 100%; }
  .tabela tr { padding: var(--e-3) 0; border-bottom: 1px solid var(--cor-borda); }
  .tabela td { border: 0; padding: 2px var(--e-3); }
  .tabela td[data-rotulo]::before { content: attr(data-rotulo) ": "; color: var(--cor-texto-suave); }
}

/* ---------- Número de painel ---------- */
.kpi { display: flex; flex-direction: column; gap: var(--e-1); }
.kpi__rotulo { font-size: var(--t-pequeno); color: var(--cor-texto-suave); }
.kpi__valor { font-family: var(--fonte-titulo); font-size: var(--t-h3); font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi__variacao { font-size: var(--t-pequeno); font-weight: 600; }

/* ---------- Perguntas frequentes ---------- */
.faq details { border-bottom: 1px solid var(--cor-borda); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e-4);
  padding: var(--e-4) 0; font-weight: 600; font-size: var(--t-grande); min-height: var(--toque-min);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5em; line-height: 1; color: var(--cor-marca); transition: transform var(--duracao) var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > *:not(summary) { padding-bottom: var(--e-4); color: var(--cor-texto-suave); }

/* ---------- Estado vazio ---------- */
.vazio { text-align: center; padding: var(--e-8) var(--e-4); color: var(--cor-texto-suave); }

/* ---------- Diálogo (modal nativo) ---------- */
dialog.dialogo {
  width: min(100% - 32px, 520px); margin: auto; padding: var(--e-6); border: 0; border-radius: var(--raio-g);
  background: var(--cor-superficie); color: var(--cor-texto); box-shadow: var(--sombra-3);
}
dialog.dialogo::backdrop { background: rgb(0 0 0 / 0.45); }

/* ---------- Aviso rápido (toast) ---------- */
.aviso {
  position: fixed; left: 50%; bottom: var(--e-5); translate: -50% 0; z-index: 100;
  padding: var(--e-3) var(--e-5); border-radius: var(--raio-m);
  background: var(--cor-texto); color: var(--cor-fundo); box-shadow: var(--sombra-3);
  font-weight: 600; font-size: var(--t-pequeno);
  animation: aviso-entra var(--duracao) var(--curva);
}
@keyframes aviso-entra { from { opacity: 0; translate: -50% 8px; } }

/* ---------- Revelar ao rolar (opcional: classe .revelar + design-system/revelar.js) ---------- */
.js .revelar { opacity: 0; translate: 0 16px; transition: opacity 600ms var(--curva), translate 600ms var(--curva); }
.js .revelar.visivel { opacity: 1; translate: 0 0; }

/* ---------- Selo de portfólio no rodapé ---------- */
.selo-portfolio { font-size: var(--t-pequeno); color: var(--cor-texto-suave); }