/* Campo — PWA da fazenda.
   Sistema visual do design-handoff: Bitter nos títulos e números, fonte do
   sistema no corpo, toda cor vinda de tokens.css. Nenhum hex solto aqui. */

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

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

body {
  margin: 0;
  /* 100dvh e não 100vh: no celular a barra do navegador entra e sai, e com
     vh o conteúdo fica cortado atrás dela. */
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  overscroll-behavior-y: none;
}

h1, h2, h3, .numero {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0; }
a { color: var(--link); text-decoration: none; }

button, a, input, select, textarea {
  font-family: inherit;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Movimento: só transform e opacity. `transition: all` animaria propriedade
   de layout e forçaria reflow a cada quadro. */
button, a, .pressionavel {
  transition:
    transform 160ms var(--ease-out),
    background-color 160ms var(--ease-out),
    filter 160ms var(--ease-out),
    color 160ms var(--ease-out);
}
button:active, a:active, .pressionavel:active { transform: scale(.97); }

/* Hover só com ponteiro de verdade: em tela de toque ele gruda depois do
   toque e o estado fica preso.
   No celular o dedo cobre o botao e o `:active` basta como resposta. No
   computador o cursor paira sobre as coisas o tempo todo e precisa de uma
   resposta ANTES do clique -- sem ela o usuario nao sabe o que e clicavel.
   Sutil e rapido de proposito: sao elementos vistos dezenas de vezes por dia,
   e nessa frequencia o movimento tem de ser quase imperceptivel.
   `filter` em vez de uma cor de hover por tema: escurece igual no claro e no
   escuro, sem precisar de um token novo para cada superficie, e e composto na
   GPU como transform e opacity. */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--link-hover); }

  .botao.primario:hover,
  .fab:hover { filter: brightness(.93); }

  .botao.secundario:hover,
  .botao-redondo:hover { background: var(--fill); }

  .segmentado button:not(.on):hover { color: var(--text); }

  /* o cursor so vira mao onde ha de fato o que clicar */
  button:not([disabled]):hover { cursor: pointer; }
}

/* A linha do formulario inteira acusa o campo ativo, nao so o cursor piscando.
   No computador o formulario e largo e o cursor e um tracinho de 1px; sem
   isto, quem usa Tab perde de vista em que campo esta. */
/* Sem arredondar as pontas: `.campos` ja tem overflow hidden e corta o fundo
   na curva do cartao sozinho. */
.campo:focus-within { background: var(--fill); }

/* Movimento reduzido significa MENOS e mais suave, nao zero.
   Quem liga essa preferencia costuma faze-lo por enjoo ou vertigem, causados
   por deslocamento na tela -- nao por mudanca de opacidade. Entao sai tudo que
   se move (o press, a folha subindo, a pastilha deslizando, o toast vindo de
   baixo) e fica tudo que apenas aparece ou muda de cor, porque e isso que
   continua explicando ao usuario o que aconteceu. Apagar as duas coisas
   deixaria a interface trocando de estado sem aviso nenhum, que e pior. */
@media (prefers-reduced-motion: reduce) {
  button:active, a:active, .pressionavel:active { transform: none; }

  .seg-ind { transition: none; }

  /* A folha e o toast passam a so aparecer, sem percorrer caminho. O transform
     CONTINUA -- e ele que tira a folha da tela; so deixa de ser animado, entao
     salta direto para a posicao final enquanto a opacidade faz a transicao.
     Zerar o transform deixaria a folha invisivel por cima do app, comendo todo
     toque da tela. */
  .sheet { opacity: 0; transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms; }
  .sheet.on { opacity: 1; transition: opacity 200ms var(--ease-out), visibility 0s; }
  .toast { transform: translateX(-50%); }
  .toast.on { transform: translateX(-50%); }
}

:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 8px; }

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

.app { display: flex; flex-direction: column; min-height: 100dvh; }

/* Esconder por CLASSE, nunca por `style.display` no JS.
   Um display inline vence qualquer folha de estilo: com `style="display:flex"`
   gravado no elemento, o `display: grid` do layout de computador nunca pegava
   -- a tela larga continuava desenhando a coluna unica do celular por mais
   media query que existisse. O !important aqui e proposital e tem alcance de
   uma linha: garante que esconder ganha de qualquer display declarado depois,
   inclusive o do breakpoint. */
.oculto { display: none !important; }

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 10px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.cabecalho .identidade { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* min-width: 0 em item flex: sem isso o nome da fazenda se recusa a encolher
   abaixo do proprio texto e empurra o sino para fora da tela em vez de cortar
   com reticencias. */
.identidade-texto { min-width: 0; }

.cabecalho img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--separator);
}

.cabecalho h1 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cabecalho .sub { font-size: 12px; color: var(--text-2); }

.botao-redondo {
  position: relative;
  flex-shrink: 0;
  width: 44px; height: 44px;     /* alvo mínimo de toque */
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--card-shadow);
  cursor: pointer;
}

.conteudo {
  flex: 1;
  /* 120px no fim: a tab bar é translúcida e o conteúdo rola POR BAIXO dela.
     Sem a folga, a última linha fica escondida atrás do vidro. */
  padding: 6px 20px 120px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* ---------------------------------------------------------------- tab bar */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  /* safe-area: no iPhone a faixa inferior fica sob o indicador de gestos */
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--nav-bg);
  border-top: 1px solid var(--nav-border);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.tabbar button {
  border: 0;
  background: transparent;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 48px;
  padding: 4px 0;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
}
.tabbar button.on { color: var(--link); }

.fab {
  position: fixed;
  right: 20px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 21;
  width: 58px; height: 58px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  cursor: pointer;
}
/* o rotulo so existe no layout de computador */
.rotulo-acao { display: none; }

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

.cartao {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
/* No escuro a sombra some (--card-shadow: none) e o cartão sumiria no preto. */
:root[data-theme="escuro"] .cartao { box-shadow: inset 0 0 0 1px var(--separator); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) .cartao { box-shadow: inset 0 0 0 1px var(--separator); }
}

.resumo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 18px 6px 16px;
}
.resumo > div { padding: 0 14px; display: flex; flex-direction: column; gap: 6px; }
.resumo > div + div { border-left: 1px solid var(--separator); }

.numero {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  /* tabular-nums: sem isso os dígitos têm larguras diferentes e o número
     "pula" a cada atualização */
  font-variant-numeric: tabular-nums;
}
.numero.destaque { color: var(--accent); }
.rotulo { font-size: 12px; color: var(--text-2); line-height: 1.3; }

.secao { display: flex; flex-direction: column; gap: 10px; }
.secao-cabeca { display: flex; align-items: baseline; justify-content: space-between; }
.secao-cabeca h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; font-family: var(--font-body); }

/* ----------------------------------------------------------------- listas */

.lista { display: flex; flex-direction: column; }
.item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  min-height: 64px;
  color: inherit;
  text-align: left;
  width: 100%;
  border: 0;
  background: transparent;
}
/* Sem `cursor: pointer` no .item generico: as linhas das listas sao <div> e
   nao levam a lugar nenhum. A mao de ponteiro prometia um clique que nao
   existe, e o usuario clicava sem resposta nenhuma. Quando a linha virar
   botao de verdade, ela entra aqui. */
button.item, a.item { cursor: pointer; }
/* Mesma correcao nas listas: a linha comeca depois do icone, mas quem recua e
   ela. Com `margin-left` no item, qualquer fundo (hover, selecao, destaque de
   recusa) nasceria torto, deixando a mesma falha branca na esquerda. */
.item + .item { position: relative; }
.item + .item::before {
  content: "";
  position: absolute;
  top: 0; left: 64px; right: 0;
  height: 1px;
  background: var(--separator);
}

.chip {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--link);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* O chip tambem recebe numero, no passo a passo de instalacao do iPhone. O
   peso e o tamanho vem daqui porque o chip foi feito para icone de 20px e um
   algarismo solto sai miudo demais. */
.chip { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip.ok { background: var(--success-bg); color: var(--success); }
.chip.alerta { background: var(--warning-bg); color: var(--warning); }
.chip.perigo { background: var(--danger-bg); color: var(--danger); }

.item .texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item .t1 { font-size: 15px; font-weight: 500; }
.item .t2 { font-size: 13px; color: var(--text-2); }
.item .valor { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ segmentado */

.segmentado {
  position: relative;
  display: flex;
  padding: 2px;
  background: var(--fill);
  border-radius: 11px;
}

/* A pastilha e UM elemento que desliza, nao um fundo que acende em cada botao.
   Acendendo, o selecionado teleporta de um lado ao outro e o olho perde de
   vista o que mudou; deslizando, ele acompanha. Por isso --ease-in-out: a
   pastilha ja esta na tela e esta se MOVENDO, nao entrando nem saindo.
   O transform vai direto neste elemento (o JS o posiciona). Dirigi-lo por uma
   variavel no pai recalcularia o estilo de todos os botoes a cada quadro. */
.seg-ind {
  position: absolute;
  top: 2px; bottom: 2px; left: 2px;
  border-radius: 9px;
  background: var(--selected);
  box-shadow: var(--card-shadow);
  pointer-events: none;
  transition: transform 250ms var(--ease-in-out);
}

.segmentado button {
  position: relative;   /* acima da pastilha */
  z-index: 1;
  flex: 1;
  min-height: 34px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 250ms var(--ease-in-out);
}
.segmentado button.on { color: var(--text); }

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

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 22px;
  border: 0;
  border-radius: 27px;          /* pílula */
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
.botao.primario { background: var(--accent); color: var(--on-accent); }
.botao.secundario { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1.5px currentColor; }
.botao[disabled] { opacity: .5; cursor: default; }

/* ------------------------------------------------------------ formulários */

.campos { background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: var(--card-shadow); }
:root[data-theme="escuro"] .campos { box-shadow: inset 0 0 0 1px var(--separator); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) .campos { box-shadow: inset 0 0 0 1px var(--separator); }
}

.campo { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 16px; }
/* A divisoria comeca recuada (o alinhamento que o iOS usa em formulario), mas
   o RECUO E DA LINHA, nao do campo.
   Antes isso era `margin-left: 16px` no proprio campo, que empurra o elemento
   inteiro -- e junto com ele o fundo. Com o destaque de foco, sobrava uma
   faixa branca de 16px na esquerda do campo cinza, como se o preenchimento
   nao coubesse na linha. Agora a linha e um pseudo-elemento posicionado, e o
   campo ocupa a largura toda em qualquer estado. */
.campo + .campo { position: relative; }
.campo + .campo::before {
  content: "";
  position: absolute;
  top: 0; left: 16px; right: 0;
  height: 1px;
  background: var(--separator);
}
.campo > span:first-child { width: 78px; flex-shrink: 0; font-size: 15px; font-weight: 500; }

.campo input, .campo select {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  /* 16px é o que impede o iOS de dar zoom ao focar o campo. Abaixo disso o
     Safari amplia a página e o usuário perde o contexto da tela. */
  font-size: 16px;
  outline: none;
  height: 100%;
}

/* O campo recusado fica marcado ate a pessoa mexer nele. So a mensagem
   embaixo do formulario nao diz QUAL campo esta errado quando ha cinco. */
.campo.invalido { background: var(--danger-bg); }
.campo.invalido > span:first-child { color: var(--danger); }

.ajuda { margin: 6px 16px 0; font-size: 13px; color: var(--text-2); }
/* 13px, o mesmo corpo de `.ajuda`: aviso e texto de apoio, nao manchete. A
   14px competia com o conteudo do formulario e fazia o erro parecer maior do
   que e. A cor ja carrega a urgencia -- o tamanho nao precisa repetir. */
.erro {
  margin: 2px 2px 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--danger);
  min-height: 18px;
}

/* ------------------------------------------------------------------ login */

.login { display: flex; flex-direction: column; min-height: 100dvh; }
.login main { flex: 1; padding: 72px 24px 0; display: flex; flex-direction: column; gap: 28px; }
.login .marca { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.login .marca img {
  width: 96px; height: 96px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.08);
}
.login h1 { font-size: 28px; font-weight: 700; }
.login .marca p { font-size: 15px; color: var(--text-2); }
.login form { display: flex; flex-direction: column; gap: 18px; }
.login footer { padding: 0 24px 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; }

.selo-offline {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2);
}

/* Discreto de proposito: quem ja usa o app pelo navegador nao precisa ser
   empurrado para instalar, e o botao fica no rodape justamente para nao
   disputar atencao com Entrar, que e o que a pessoa veio fazer. */
.botao.instalar {
  min-height: 44px;
  width: auto;
  padding: 0 18px;
  font-size: 15px;
  background: var(--fill);
  color: var(--text);
  margin-bottom: 4px;
}

/* ------------------------------------------------------------------ telas */

.tela { display: none; }
.tela.on {
  display: flex; flex-direction: column; gap: 26px;
  /* 140ms e so opacidade, de proposito. Trocar de aba e a acao mais repetida
     do app, e a skill e explicita: nessa frequencia ou o movimento e quase
     imperceptivel ou nao existe. O fade cobre o salto de conteudo sem colocar
     espera entre o toque e a tela nova; um slide lateral, por mais bonito,
     faria a navegacao principal parecer lenta depois do decimo uso. */
  animation: tela-entra 140ms var(--ease-out);
}
@keyframes tela-entra { from { opacity: 0; } }

.vazio {
  padding: 32px 16px;
  text-align: center;
  color: var(--text-2);
  font-size: 14px;
}

/* -------------------------------------------------------------- status  */

.status-sync {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-control);
  background: var(--fill);
  font-size: 13px;
  color: var(--text-2);
}
.status-sync.pendente { background: var(--warning-bg); color: var(--warning); }
.status-sync.offline { background: var(--fill); color: var(--text-2); }

.ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Enquanto sincroniza, o ponto respira. E o unico lugar do app onde uma
   animacao roda sozinha, e se justifica: o usuario precisa saber que o
   aparelho esta falando com o servidor AGORA, e nao parado num aviso velho.
   Keyframes aqui e o certo -- movimento continuo e previsto, que roda fora da
   thread principal justamente quando ela esta ocupada com a requisicao.
   So opacidade: nada se move, entao sobrevive ao prefers-reduced-motion. */
.status-sync.rodando .ponto { animation: pulso 1.2s ease-in-out infinite; }
@keyframes pulso { 50% { opacity: .3; } }

/* ------------------------------------------------------------------ sheet */

/* O fundo escurece JUNTO com a folha, no mesmo tempo e na mesma curva: as
   duas coisas precisam ler como uma superficie so. Com `display: none` nao
   havia transicao nenhuma -- o escuro aparecia de uma vez enquanto a folha
   ainda estava subindo, e o olho via dois eventos separados.
   `visibility` em vez de `display` justamente porque display nao transiciona. */
.sheet-fundo {
  position: fixed; inset: 0; z-index: 40;
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--ease-drawer), visibility 0s linear 420ms;
}
.sheet-fundo.on {
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms var(--ease-drawer), visibility 0s;
}

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 41;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-radius: 22px 22px 0 0;
  /* transform, não `bottom`: animar posição força o navegador a recalcular
     layout a cada quadro; transform roda na composição.
     translateY(100%) e nao uma altura em pixels: a porcentagem e relativa ao
     proprio elemento, entao a folha some por inteiro seja qual for o conteudo.
     --ease-drawer e a curva de gaveta do iOS; 420ms porque gaveta e o unico
     componente onde a skill abre a faixa ate 500ms -- ela cobre uma distancia
     grande, e no orcamento de 250ms o movimento vira um salto. */
  transform: translateY(100%);
  /* FECHADA, A FOLHA TEM DE SUMIR DE VERDADE.
     Opacidade zero esconde do olho, mas o elemento continua la: recebe clique,
     recebe foco por Tab e fica na frente do que esta embaixo. No celular isso
     passou porque translateY(100%) joga a folha para fora da tela. No
     computador ela e uma caixa centralizada -- ficava invisivel bem em cima do
     formulario de login, comendo todo clique nos campos. Era por isso que nao
     dava para digitar: o unico elemento que sobrava alcancavel era o botao
     Entrar, fora da area dela.
     `visibility` resolve as tres coisas de uma vez (ponteiro, foco e leitor de
     tela). O `0s linear 420ms` atrasa o desaparecimento ate a animacao acabar;
     sem isso a folha sumiria no primeiro quadro da saida. */
  visibility: hidden;
  transition: transform 420ms var(--ease-drawer), visibility 0s linear 420ms;
}
.sheet.on {
  transform: translateY(0);
  visibility: visible;
  transition: transform 420ms var(--ease-drawer), visibility 0s;
}

.sheet .alca {
  width: 36px; height: 5px;
  border-radius: 3px;
  background: var(--separator);
  margin: 0 auto 14px;
}
.sheet h2 { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.sheet .campos { margin-bottom: 16px; }

/* Empilhados no celular: a largura cheia e o alvo mais facil de acertar com o
   polegar, e o espacamento vem daqui em vez de `style="margin-top"` solto em
   cada botao no HTML. */
.sheet-acoes { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

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

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(110px + env(safe-area-inset-bottom));
  /* Sai pela MESMA borda por onde entrou -- de baixo. Caminho simetrico e o
     que faz o aviso parecer um objeto, e nao dois efeitos diferentes.
     `ease` e 400ms, nao os 200ms de ease-out do resto: o toast nao responde a
     um toque, ele se anuncia. O Sonner soa elegante por essa mesma escolha. */
  transform: translateX(-50%) translateY(100%);
  z-index: 60;
  max-width: calc(100% - 40px);
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease, transform 400ms ease;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================== TABLET =======
   700px a 1023px: ainda e uma coluna so -- um tablet no colo e segurado como
   um celular grande, e a navegacao continua ao alcance do polegar. Muda
   apenas a largura, para a linha de texto nao ficar comprida demais. */

@media (min-width: 700px) and (max-width: 1023px) {
  .conteudo, .cabecalho { max-width: 680px; margin-inline: auto; width: 100%; }
  .tabbar { max-width: 680px; margin-inline: auto; border-radius: 18px 18px 0 0; }
}

/* ========================================================== COMPUTADOR ====

   A partir de 1024px o app deixa de ser um celular esticado.

   O QUE ESTAVA ERRADO: a unica regra de tela grande centralizava 680px e
   parava ai. Numa tela de 1920px isso deixa duas faixas vazias de 620px de
   cada lado, com a navegacao presa no rodape -- a 900px de distancia dos
   olhos, no canto mais longe do cursor -- e um botao flutuante cobrindo o
   conteudo. Tudo isso existe por causa do polegar, que no computador nao
   existe. Quem usa mouse alcanca qualquer ponto da tela com o mesmo esforco.

   ENTAO AQUI:
   - a navegacao vira coluna a esquerda, visivel inteira e sempre no lugar
   - o botao de acao vira um botao de verdade, com rotulo, no topo dessa coluna
   - o conteudo usa a largura em duas colunas em vez de uma fita estreita
   - a folha de baixo vira caixa centralizada, que e o que uma janela faz

   Reorganizado so por grid-template-areas: o HTML e o mesmo nas duas larguras,
   entao nao ha dois layouts para manter em sincronia. */

@media (min-width: 1024px) {
  .app {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "cabecalho cabecalho"
      "acao      conteudo"
      "nav       conteudo";
    column-gap: 28px;
    max-width: 1320px;
    margin-inline: auto;
    width: 100%;
    padding-inline: 28px;
  }

  .cabecalho { grid-area: cabecalho; padding: 22px 0 16px; }
  .cabecalho h1 { font-size: 22px; }

  /* ---- navegacao lateral ---- */
  .tabbar {
    grid-area: nav;
    position: sticky;
    /* Os `left/right/bottom: 0` do celular PRECISAM ser zerados aqui. Em
       `fixed` eles prendem a barra no rodape; em `sticky` viram limiares, e a
       coluna tentaria grudar no topo e no fundo ao mesmo tempo. */
    top: 88px;            /* abaixo do cabecalho grudado */
    left: auto; right: auto; bottom: auto;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    background: none;
    border-top: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .tabbar button {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: var(--radius-control);
    font-size: 15px;
    font-weight: 500;
  }

  /* No celular o item ativo so muda de cor, porque a tab bar e estreita e um
     fundo colorido pesaria. Na coluna larga o fundo cabe e ajuda: a varredura
     e vertical, e so a cor do texto se perde no meio de cinco linhas. */
  .tabbar button.on { background: var(--tint); }

  @media (hover: hover) and (pointer: fine) {
    .tabbar button:not(.on):hover { background: var(--fill); }
  }

  /* ---- o botao + vira "Novo" ---- */
  .fab {
    grid-area: acao;
    position: static;
    width: 100%;
    height: 46px;
    border-radius: var(--radius-control);
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 18px;
    box-shadow: none;
  }
  .fab .rotulo-acao { display: inline; color: inherit; font-size: inherit; }
  .fab svg { width: 20px; height: 20px; }

  /* ---- conteudo em duas colunas ---- */
  .conteudo {
    grid-area: conteudo;
    /* sem a folga do rodape: nao ha mais barra translucida por baixo */
    padding: 0 0 48px;
  }

  /* auto-fit, e nao duas colunas fixas: as telas nao tem todas a mesma
     quantidade de secoes. Com `repeat(2, 1fr)`, Pesagem e Sanidade -- que tem
     uma secao so -- ficariam com metade da tela vazia ao lado.
     O teto de 560px por coluna existe porque uma lista de 1200px de largura
     separa tanto o brinco do peso que o olho perde a linha; ela cresce ate
     caber confortavel e para. */
  .tela.on {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 560px));
    justify-content: start;
    align-content: start;
    align-items: start;
    gap: 22px;
  }
  /* o que e cabecalho da tela atravessa as colunas que existirem */
  .tela.on > .segmentado,
  .tela.on > .resumo,
  .tela.on > .botao { grid-column: 1 / -1; }

  /* O aviso de sincronizacao e irmao das telas, nao filho: fica no .conteudo,
     que segue sendo flex column. Sem align-self ele esticaria pela largura
     inteira por causa do stretch padrao do flex. */
  .status-sync { align-self: start; }
  .segmentado { max-width: 420px; }
  /* `.tela .botao`, e nao `.botao` solto: a regra generica alcancava Salvar e
     Cancelar dentro da folha e os encolhia para 320px encostados na esquerda
     da caixa. Dentro da folha a largura e decidida logo abaixo, em .sheet-acoes. */
  .tela .botao { max-width: 320px; }

  /* ---- a folha vira caixa centralizada ---- */
  .sheet {
    left: 50%; right: auto;
    top: 50%; bottom: auto;
    width: min(460px, calc(100vw - 64px));
    max-height: 86dvh;
    padding: 24px;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    /* Caixa centralizada nao tem gatilho a que se ancorar, entao cresce do
       proprio centro -- e a excecao que a skill abre para modais. scale(.96),
       nunca scale(0): nada no mundo real aparece a partir do nada. */
    transform: translate(-50%, -50%) scale(.96);
    opacity: 0;
    transition:
      opacity 250ms var(--ease-out),
      transform 250ms var(--ease-out),
      visibility 0s linear 250ms;
  }
  .sheet.on {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition:
      opacity 250ms var(--ease-out),
      transform 250ms var(--ease-out),
      visibility 0s;
  }
  .sheet .alca { display: none; }   /* nao ha o que arrastar numa caixa */

  /* row-reverse: o DOM traz Salvar primeiro (ordem do celular e do Tab) e o
     CSS o leva para a direita, que e a convencao de janela no computador. */
  .sheet-acoes {
    flex-direction: row-reverse;
    justify-content: flex-start;
    gap: 12px;
  }
  .sheet-acoes .botao {
    width: auto;
    min-width: 132px;
    min-height: 44px;     /* alvo de mouse, nao de polegar */
    font-size: 15px;
    border-radius: var(--radius-control);
  }
  .sheet-fundo { transition: opacity 250ms var(--ease-out), visibility 0s linear 250ms; }
  .sheet-fundo.on { transition: opacity 250ms var(--ease-out), visibility 0s; }

  /* ---- toast sai do canto, nao do meio da tela ---- */
  .toast {
    left: auto; right: 28px;
    bottom: 28px;
    transform: translateY(100%);
    max-width: 420px;
  }
  .toast.on { transform: translateY(0); }

  /* ---- login centralizado ---- */
  .login main { max-width: 400px; margin-inline: auto; justify-content: center; padding-top: 0; }
  .login { justify-content: center; }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  /* mesma regra da versao de celular: esconde pelo transform, so nao o anima */
  .sheet { transition: opacity 200ms var(--ease-out), visibility 0s linear 200ms; }
  .sheet.on { transition: opacity 200ms var(--ease-out), visibility 0s; }
  .toast, .toast.on { transform: none; }
}