/* ============================================================
   buuuuuci · base
   Reset, shell (navegação lateral no desktop, barra inferior no
   celular) e componentes compartilhados entre seções.
   Nenhum valor visual aqui: tudo vem de tokens.css.
   (Exceção inevitável: os breakpoints, porque CSS não aceita
   variáveis dentro de @media. Estão todos em 900px.)
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-md2);
  line-height: var(--altura-corpo);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body.travado { overflow: hidden; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-bold);
  line-height: var(--altura-titulo);
  letter-spacing: var(--espaco-letra-titulo);
  text-wrap: balance;
}

p { margin: 0; }
img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: var(--anel-foco) solid var(--cor-acento);
  outline-offset: var(--anel-foco);
}

[hidden] { display: none !important; }

.num { font-variant-numeric: tabular-nums; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

svg.i {
  width: var(--icone); height: var(--icone);
  stroke: currentColor; fill: none;
  stroke-width: var(--traco-icone); stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
svg.i.sm { width: var(--icone-sm); height: var(--icone-sm); }

/* ---------- shell ---------- */

.app { min-height: 100%; }

.topo {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: var(--z-barra);
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-5);
  min-height: var(--topo-altura);
  padding-left: max(var(--calha), env(safe-area-inset-left, 0px));
  padding-right: max(var(--calha), env(safe-area-inset-right, 0px));
  padding-block: var(--esp-3);
  background: var(--cor-barra);
  -webkit-backdrop-filter: blur(var(--desfoque-barra)) saturate(var(--saturacao-barra));
  backdrop-filter: blur(var(--desfoque-barra)) saturate(var(--saturacao-barra));
}

body::before {
  content: "";
  position: fixed; inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: var(--z-barra);
  background: var(--cor-fundo);
}

.marca {
  display: inline-flex; align-items: center; gap: var(--esp-4);
  color: var(--cor-texto); text-decoration: none;
}
.marca-face {
  width: var(--marca); height: var(--marca);
  border-radius: var(--raio-md);
  background: var(--cor-destaque); color: var(--cor-destaque-tinta);
  display: grid; place-items: center;
  font-family: var(--fonte-titulo); font-weight: var(--peso-extra);
  font-size: var(--texto-lg); line-height: var(--altura-display);
  box-shadow: var(--sombra-leve);
}
.marca-nome {
  font-family: var(--fonte-titulo); font-weight: var(--peso-extra);
  font-size: var(--texto-lg); letter-spacing: var(--espaco-letra-display);
  line-height: var(--altura-display);
}
.marca-sub {
  display: block;
  font-family: var(--fonte-corpo);
  font-size: var(--texto-xs); font-weight: var(--peso-semi);
  letter-spacing: var(--espaco-letra-caps); text-transform: uppercase;
  color: var(--cor-texto-2);
  margin-top: var(--esp-1);
}

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

.icone-btn {
  appearance: none; border: 0;
  width: var(--toque-min); height: var(--toque-min);
  border-radius: var(--raio-redondo);
  background: transparent; color: var(--cor-texto);
  display: grid; place-items: center;
  transition: background var(--dur-rapida) var(--curva-saida);
}
.icone-btn:hover { background: var(--cor-superficie-2); }

.secao-troca {
  appearance: none; border: var(--borda) solid var(--cor-linha);
  background: var(--cor-superficie); color: var(--cor-texto);
  border-radius: var(--raio-pilula);
  min-height: var(--toque-min);
  padding-inline: var(--esp-6) var(--esp-4);
  display: inline-flex; align-items: center; gap: var(--esp-2);
  font-weight: var(--peso-semi); font-size: var(--texto-md);
}

.menu-secoes {
  position: absolute;
  top: calc(100% + var(--esp-1));
  right: max(var(--calha), env(safe-area-inset-right, 0px));
  min-width: calc(var(--nav-largura) - var(--esp-9));
  background: var(--cor-superficie);
  border: var(--borda) solid var(--cor-linha);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-flutuante);
  padding: var(--esp-2);
  display: grid; gap: var(--esp-1);
  animation: sobe var(--dur-folha) var(--curva-folha);
}

.tela {
  outline: none;
  padding-left: max(var(--calha), env(safe-area-inset-left, 0px));
  padding-right: max(var(--calha), env(safe-area-inset-right, 0px));
  padding-block: var(--esp-5) calc(var(--barra-altura) + var(--esp-10) + env(safe-area-inset-bottom, 0px));
  max-width: var(--conteudo-max);
  margin-inline: auto;
}

.barra {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-barra);
  display: flex; justify-content: space-around; gap: var(--esp-1);
  padding-left: max(var(--esp-3), env(safe-area-inset-left, 0px));
  padding-right: max(var(--esp-3), env(safe-area-inset-right, 0px));
  padding-top: var(--esp-2);
  padding-bottom: calc(var(--esp-2) + env(safe-area-inset-bottom, 0px));
  background: var(--cor-barra);
  -webkit-backdrop-filter: blur(var(--desfoque-barra)) saturate(var(--saturacao-barra));
  backdrop-filter: blur(var(--desfoque-barra)) saturate(var(--saturacao-barra));
  border-top: var(--borda) solid var(--cor-linha);
}

.barra a {
  flex: 1;
  min-height: calc(var(--barra-altura) - var(--esp-5));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-1);
  color: var(--cor-texto-2); text-decoration: none;
  font-size: var(--texto-xs); font-weight: var(--peso-semi);
  border-radius: var(--raio-md);
  transition: color var(--dur-rapida) var(--curva-saida);
}
.barra a[aria-current="page"] { color: var(--cor-texto); }
.barra a[aria-current="page"] svg.i { stroke-width: var(--traco-icone-forte); }
.barra-ponto {
  width: var(--esp-1); height: var(--esp-1);
  border-radius: var(--raio-redondo);
  background: transparent;
}
.barra a[aria-current="page"] .barra-ponto { background: var(--cor-texto); }

/* navegação lateral (desktop) */
.nav-lateral { display: none; }

.nav-lateral .marca { padding: var(--esp-3) var(--esp-4) var(--esp-8); }

.nav-grupo { display: grid; gap: var(--esp-1); }
.nav-grupo + .nav-grupo { margin-top: var(--esp-7); }

.nav-secao {
  display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
  padding: var(--esp-2) var(--esp-4);
  font-size: var(--texto-xs); font-weight: var(--peso-bold);
  letter-spacing: var(--espaco-letra-caps); text-transform: uppercase;
  color: var(--cor-texto-2);
}

.nav-item {
  display: flex; align-items: center; gap: var(--esp-5);
  min-height: var(--toque-min);
  padding-inline: var(--esp-4);
  border-radius: var(--raio-md);
  color: var(--cor-texto); text-decoration: none;
  font-weight: var(--peso-semi); font-size: var(--texto-md);
  transition: background var(--dur-rapida) var(--curva-saida);
}
.nav-item:hover { background: var(--cor-superficie-2); }
.nav-item[aria-current="page"] { background: var(--cor-superficie); box-shadow: var(--sombra-leve); }
.nav-item[aria-disabled="true"] { color: var(--cor-texto-2); pointer-events: none; }

.nav-rodape {
  margin-top: auto;
  display: grid; gap: var(--esp-1);
  padding-top: var(--esp-7);
  border-top: var(--borda) solid var(--cor-linha);
}

.menu-item {
  appearance: none; border: 0; background: transparent;
  display: flex; align-items: center; gap: var(--esp-5);
  width: 100%;
  min-height: var(--toque-min);
  padding-inline: var(--esp-4);
  border-radius: var(--raio-md);
  color: var(--cor-texto); text-decoration: none; text-align: left;
  font-size: var(--texto-md); font-weight: var(--peso-medio);
}
.menu-item:hover { background: var(--cor-superficie-2); }
.menu-item[aria-disabled="true"] { color: var(--cor-texto-2); pointer-events: none; }
.menu-item .tag { margin-left: auto; }
form:has(> .menu-item) { margin: 0; }

@media (min-width: 900px) {
  .app {
    display: grid;
    grid-template-columns: var(--nav-largura) minmax(0, 1fr);
  }
  .topo, .barra { display: none; }
  body::before { display: none; }
  .nav-lateral {
    display: flex; flex-direction: column;
    position: sticky; top: 0;
    height: 100vh; height: 100dvh;
    padding: var(--esp-7) var(--esp-5) var(--esp-7) max(var(--esp-5), env(safe-area-inset-left, 0px));
    border-right: var(--borda) solid var(--cor-linha);
    overflow-y: auto;
  }
  .tela {
    width: 100%;
    padding-left: var(--calha-larga);
    padding-right: max(var(--calha-larga), env(safe-area-inset-right, 0px));
    padding-block: var(--esp-9) var(--esp-12);
  }
}

/* ---------- cabeçalho de tela ---------- */

.cabeca {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--esp-5);
  flex-wrap: wrap;
  margin-bottom: var(--esp-7);
}
.cabeca h1 {
  font-size: var(--texto-3xl);
  letter-spacing: var(--espaco-letra-display);
  font-weight: var(--peso-extra);
}
.cabeca p { color: var(--cor-texto-2); font-size: var(--texto-md); margin-top: var(--esp-1); }

.eyebrow {
  font-size: var(--texto-xs); font-weight: var(--peso-bold);
  letter-spacing: var(--espaco-letra-caps); text-transform: uppercase;
  color: var(--cor-texto-2);
}

/* ---------- botões ---------- */

.btn {
  appearance: none; border: var(--borda) solid transparent;
  min-height: var(--toque-min);
  padding-inline: var(--esp-8);
  border-radius: var(--raio-pilula);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-3);
  font-weight: var(--peso-bold); font-size: var(--texto-md2);
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-rapida) var(--curva-saida), background var(--dur-rapida) var(--curva-saida);
}
.btn:active { transform: scale(var(--escala-toque)); }
.btn[disabled] { opacity: var(--opacidade-desabilitada); pointer-events: none; }

.btn-principal { background: var(--cor-destaque); color: var(--cor-destaque-tinta); }
.btn-escuro { background: var(--cor-texto); color: var(--cor-texto-inverso); }
.btn-contorno { background: transparent; color: var(--cor-texto); border-color: var(--cor-linha); }
.btn-perigo { background: var(--cor-erro); color: var(--cor-texto-inverso); }
.btn-perigo-texto { color: var(--cor-erro); }
.btn-contorno:hover { background: var(--cor-superficie-2); }
.btn-grande { min-height: calc(var(--toque-min) + var(--esp-3)); font-size: var(--texto-base); padding-inline: var(--esp-9); }
.btn-pequeno { min-height: calc(var(--toque-min) - var(--esp-4)); padding-inline: var(--esp-5); font-size: var(--texto-sm2); font-weight: var(--peso-semi); }

/* ---------- campos ---------- */

.campo {
  appearance: none;
  min-height: var(--campo-altura);
  border: var(--borda) solid var(--cor-linha);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-radius: var(--raio-pilula);
  padding-inline: var(--esp-7);
  font-size: var(--texto-base);
  min-width: 0;
}
.campo-texto {
  border-radius: var(--raio-md);
  padding-block: var(--esp-4);
  padding-inline: var(--esp-6);
  font: inherit;
  font-size: var(--texto-base); /* 16px+: o Safari do iPhone não dá zoom ao focar */
  line-height: var(--altura-compacta);
  resize: vertical;
}
.campo::placeholder { color: var(--cor-texto-2); }
.campo:focus { outline: none; border-color: var(--cor-acento); }

.campo-busca {
  position: relative; display: flex; align-items: center; min-width: 0;
}
.campo-busca svg.i {
  position: absolute; left: var(--esp-6);
  color: var(--cor-texto-2); pointer-events: none;
}
.campo-busca .campo { width: 100%; padding-left: calc(var(--esp-6) + var(--icone) + var(--esp-3)); }

select.campo {
  padding-right: var(--esp-10);
  background-image: linear-gradient(45deg, transparent 50%, var(--cor-texto-2) 50%), linear-gradient(135deg, var(--cor-texto-2) 50%, transparent 50%);
  background-position: calc(100% - var(--esp-7)) 55%, calc(100% - var(--esp-6)) 55%;
  background-size: var(--esp-1) var(--esp-1), var(--esp-1) var(--esp-1);
  background-repeat: no-repeat;
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
}
select.campo.ativo { border-color: var(--cor-texto); background-color: var(--cor-texto); color: var(--cor-texto-inverso); }

/* ---------- chips, tags, segmentado ---------- */

.chip {
  appearance: none;
  border: var(--borda) solid var(--cor-linha);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  border-radius: var(--raio-pilula);
  min-height: calc(var(--toque-min) - var(--esp-3));
  padding-inline: var(--esp-6);
  display: inline-flex; align-items: center; gap: var(--esp-2);
  font-size: var(--texto-sm2); font-weight: var(--peso-semi);
  white-space: nowrap;
}
.chip[aria-pressed="true"] { background: var(--cor-texto); border-color: var(--cor-texto); color: var(--cor-texto-inverso); }

.tag {
  display: inline-flex; align-items: center;
  font-size: var(--texto-xs); font-weight: var(--peso-bold);
  letter-spacing: var(--espaco-letra-caps); text-transform: uppercase;
  padding: var(--esp-1) var(--esp-3);
  border-radius: var(--raio-pilula);
  background: var(--cor-superficie-2); color: var(--cor-texto-2);
  white-space: nowrap;
}
.tag.amarela { background: var(--cor-destaque); color: var(--cor-destaque-tinta); }
.tag.acento { background: var(--cor-acento-fundo); color: var(--cor-acento); }
.tag.aviso { background: var(--cor-aviso-fundo); color: var(--cor-aviso); }

.seg {
  display: inline-flex; gap: var(--esp-1);
  background: var(--cor-superficie-2);
  padding: var(--esp-1);
  border-radius: var(--raio-pilula);
  max-width: 100%;
  overflow-x: auto;
}
.seg button {
  appearance: none; border: 0; background: transparent;
  min-height: calc(var(--toque-min) - var(--esp-3));
  padding-inline: var(--esp-7);
  border-radius: var(--raio-pilula);
  font-weight: var(--peso-semi); font-size: var(--texto-md);
  color: var(--cor-texto-2);
  white-space: nowrap;
}
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] {
  background: var(--cor-superficie); color: var(--cor-texto); box-shadow: var(--sombra-leve);
}

/* ---------- cartões ---------- */

.card {
  background: var(--cor-superficie);
  border-radius: var(--raio-xl);
  padding: var(--esp-7);
  min-width: 0;
}
.card h2 { font-size: var(--texto-lg); }

.nota { font-size: var(--texto-sm2); color: var(--cor-texto-2); line-height: var(--altura-compacta); }

.vazio {
  display: grid; justify-items: center; gap: var(--esp-5);
  text-align: center;
  padding: var(--esp-12) var(--esp-7);
  color: var(--cor-texto-2);
}
.vazio h2 { color: var(--cor-texto); font-size: var(--texto-lg); }

.skeleton {
  border-radius: var(--raio-md);
  background: var(--textura-skeleton);
  background-size: 200% 100%;
  animation: brilhoSkeleton var(--dur-skeleton) linear infinite;
}

/* ---------- camada (véu + folha) ---------- */

.camada:empty { display: none; }

.veu {
  position: fixed; inset: 0;
  z-index: var(--z-veu);
  background: var(--cor-veu);
  -webkit-backdrop-filter: blur(var(--desfoque-veu));
  backdrop-filter: blur(var(--desfoque-veu));
}

.btn-fechar {
  appearance: none; border: 0;
  width: var(--toque-min); height: var(--toque-min);
  border-radius: var(--raio-redondo);
  background: var(--cor-botao-x); color: var(--cor-botao-x-tinta);
  display: grid; place-items: center;
  box-shadow: var(--sombra-leve);
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--barra-altura) + var(--esp-7) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  transform: translateX(-50%);
  max-width: calc(100% - 2 * var(--calha));
  background: var(--cor-texto); color: var(--cor-texto-inverso);
  padding: var(--esp-5) var(--esp-8);
  border-radius: var(--raio-pilula);
  font-size: var(--texto-md); font-weight: var(--peso-semi);
  box-shadow: var(--sombra-flutuante);
  animation: sobe var(--dur-folha) var(--curva-folha);
  text-align: center;
}
@media (min-width: 900px) {
  .toast { bottom: var(--esp-9); left: calc(50% + var(--nav-largura) / 2); }
}

/* ---------- animações compartilhadas ---------- */

@keyframes sobe {
  from { transform: translate(var(--desloca-x, 0), var(--esp-5)); opacity: 0; }
  to { transform: translate(var(--desloca-x, 0), 0); opacity: 1; }
}
.toast { --desloca-x: -50%; }

@keyframes esmaece { from { opacity: 0; } to { opacity: 1; } }

@keyframes brilhoSkeleton {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}