/* Tokens, reset e layout base — mobile-first, thumb-friendly */

:root {
  /* Paleta calma: fundo neutro, texto escuro, acento verde-azulado */
  --cor-fundo: #f7f7f5;
  --cor-superficie: #ffffff;
  --cor-texto: #1e2422;
  --cor-texto-suave: #5b6560;
  --cor-borda: #e1e4e0;
  --cor-primaria: #1f7a5c;
  --cor-primaria-forte: #155c44;
  --cor-primaria-suave: #e4f3ec;
  --cor-perigo: #b3402f;
  --cor-aviso: #b8862c;

  /* Espaçamento em escala de 4px */
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 24px;
  --esp-6: 32px;
  --esp-7: 48px;

  --raio: 12px;
  --raio-grande: 18px;

  --altura-nav: 64px;
  --altura-header: 56px;

  --fonte-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cor-fundo: #14181a;
    --cor-superficie: #1c2224;
    --cor-texto: #e9ede9;
    --cor-texto-suave: #a3aeaa;
    --cor-borda: #2a3234;
    --cor-primaria: #35c495;
    --cor-primaria-forte: #58d6ad;
    --cor-primaria-suave: #1c3329;
  }
}

/* Reset leve */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--fonte-base);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  -webkit-font-smoothing: antialiased;
  line-height: 1.4;
}
h1, h2, h3, p { margin: 0 0 var(--esp-3); }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }
a { color: var(--cor-primaria); }

/* Layout raiz mobile-first: header fixo no topo, nav fixa embaixo, conteúdo rola no meio */
.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--altura-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--esp-4);
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}

.app-header__titulo {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.app-header__ajustes {
  background: none;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  padding: var(--esp-2);
  cursor: pointer;
  color: var(--cor-texto-suave);
}

.app-main {
  flex: 1;
  overflow-y: auto;
  padding: var(--esp-4) var(--esp-4) calc(var(--altura-nav) + var(--esp-5));
}

/* Barra de navegação inferior fixa — alvos de toque grandes (thumb-friendly) */
.app-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  height: var(--altura-nav);
  background: var(--cor-superficie);
  border-top: 1px solid var(--cor-borda);
  padding-bottom: env(safe-area-inset-bottom);
}

.app-nav__botao {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: none;
  color: var(--cor-texto-suave);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 48px;
}

.app-nav__botao.ativo {
  color: var(--cor-primaria);
}

.app-nav__icone {
  font-size: 1.2rem;
}

.aba {
  display: none;
}

.aba.ativa {
  display: block;
}