/* =========================================================================
   base.css — reset, tokens estruturais e layout do app shell
   Nenhuma cor literal aqui. Cor vive apenas em temas.css.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* ---- tokens estruturais (invariantes entre temas) ---- */
  --raio: 6px;
  --raio-p: 3px;
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;

  --largura-lateral: 248px;
  --altura-topo: 60px;

  /* alvo de toque mínimo — luva de raspa em campo */
  --toque: 44px;

  --fonte-ui: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: var(--fonte-ui);
  --fonte-mono: "Cascadia Mono", Consolas, "SF Mono", monospace;

  --t-xs: 11px;
  --t-sm: 13px;
  --t-md: 15px;
  --t-lg: 19px;
  --t-xl: 25px;
  --t-2xl: 33px;

  --transicao: 140ms ease;

  /* tokens de aparência declarados aqui apenas para documentar o contrato;
     os valores reais são atribuídos por [data-tema] em temas.css */
  --bisel: none;
  --grad-topo: none;
  --grad-titulo: none;
  --textura: none;
}

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-ui);
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo);
  background-image: var(--textura);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

h1, h2, h3, h4 { font-family: var(--fonte-titulo); margin: 0 0 var(--esp-3); line-height: 1.2; }
p { margin: 0 0 var(--esp-3); }
hr { border: 0; border-top: 1px solid var(--borda); margin: var(--esp-3) 0; }
code { font-family: var(--fonte-mono); font-size: .92em; }

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

/* ============================ APP SHELL ============================ */

#app {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.topo {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  min-height: var(--altura-topo);
  padding: var(--esp-2) var(--esp-4);
  background: var(--topo-fundo);
  background-image: var(--grad-topo);
  color: var(--topo-tinta);
  border-bottom: 2px solid var(--acento);
  box-shadow: var(--sombra-topo);
  position: sticky;
  top: 0;
  z-index: 30;
}

.topo-marca { display: flex; align-items: center; gap: var(--esp-3); }

.marca-sigla {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--raio);
  background: var(--acento);
  color: var(--acento-tinta);
  font-weight: 800;
  letter-spacing: .5px;
  font-size: var(--t-sm);
  box-shadow: var(--bisel);
}
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-texto strong { font-size: var(--t-md); }
.marca-texto small { font-size: var(--t-xs); opacity: .78; }

.topo-controles { display: flex; gap: var(--esp-4); margin-left: auto; flex-wrap: wrap; }
.topo-estado { display: flex; align-items: center; gap: var(--esp-2); }

.corpo {
  display: grid;
  grid-template-columns: var(--largura-lateral) 1fr;
  min-height: 0;
}

.lateral {
  background: var(--superficie-2);
  border-right: 1px solid var(--borda);
  padding: var(--esp-4) var(--esp-3);
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  position: sticky;
  top: var(--altura-topo);
  height: calc(100dvh - var(--altura-topo));
  overflow-y: auto;
}

.lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: var(--esp-2); }
.lateral-nota { font-size: var(--t-xs); color: var(--tinta-fraca); margin: var(--esp-2) 0 0; }

.painel {
  padding: var(--esp-5) var(--esp-6);
  max-width: 1180px;
  width: 100%;
}

.secao { display: none; animation: surgir 160ms ease both; }
.secao.ativa { display: block; }

@keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.secao-titulo { font-size: var(--t-xl); border-bottom: 2px solid var(--acento); padding-bottom: var(--esp-2); }
.secao-ajuda { font-size: var(--t-sm); color: var(--tinta-fraca); max-width: 72ch; }
.secao-ajuda.aviso {
  border-left: 4px solid var(--atencao);
  background: var(--superficie-2);
  padding: var(--esp-3);
  border-radius: var(--raio-p);
  color: var(--tinta);
}

.grade { display: grid; gap: var(--esp-3); }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo-largo { grid-column: 1 / -1; }

/* ============================ RESPONSIVO ============================ */

@media (max-width: 1000px) {
  .corpo { grid-template-columns: 1fr; }
  .lateral {
    position: static; height: auto; border-right: 0;
    border-bottom: 1px solid var(--borda);
  }
  .nav-etapas { display: flex; overflow-x: auto; gap: var(--esp-2); }
  .nav-etapas li { flex: 0 0 auto; }
  .painel { padding: var(--esp-4); }
  .grade-2, .grade-3 { grid-template-columns: 1fr; }
  .topo { flex-wrap: wrap; }
  .topo-controles { width: 100%; margin-left: 0; }
}

/* Tela de campo sob sol: aumenta o corpo e o alvo de toque */
@media (pointer: coarse) {
  :root { --t-md: 16px; --toque: 48px; }
}