/* ── 00-tokens.css ── */
/* ═══════════════════════════════════════════════════════════════════════════
   GESTOR DELIVERY — casca dos 4 modelos de dashboard
   Herdada do Gestor Beleza (app/static/css/app.css): mesma nomenclatura de
   token, mesma escala fluida, mesmos breakpoints, mesmo alvo de toque.

   O QUE MUDOU DE PROPÓSITO
   1. O token da marca deixou de se chamar --vinho e passou a se chamar
      --marca. Nome de cor amarra o token ao nicho; quando isso virar módulo
      do gestor-core, o Beleza define --marca:#9B2C55 e o Delivery define
      --marca:#B85C38 sem renomear uma linha de CSS.
      (corrigido 31/08: este comentário ainda citava o azul #0F5FA6 da proposta
      inicial, e era a última sobra dela no repositório.)
   2. A cor é azul de chama de fogão. Vinho é do Beleza; verde, âmbar e
      vermelho são SINAL e não podem ser marca, senão "positivo" e "nossa
      cor" viram a mesma coisa na tela.
   3. Entrou --peso e --num: no delivery metade dos números é grama e a outra
      metade é real. Os dois precisam alinhar em coluna.

   A REGRA HERDADA, QUE NÃO SE MEXE: cor forte só em traço, texto e ponto.
   Campo grande sempre no tom lavado da mesma cor.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   PALETA — Sabor & Afeto (recebida do dono em 29/08/2026, 13:02)

     🌾 Creme Baunilha  #FFF3DF → fundos
     🤎 Cacau Escuro    #35231B → textos
     🧡 Terracota Afeto #B85C38 → botões principais
     🌿 Oliva Afeto     #6B7043 → indicadores secundários
     🍯 Dourado Mel     #D4A24C → destaques

   ⭐ A troca custou UM bloco de tokens. Nenhuma linha de componente mudou —
   é a prova de que renomear `--vinho` para `--marca` valeu a pena.

   ⚠️ DUAS COISAS QUE A MEDIÇÃO DE CONTRASTE OBRIGOU A MUDAR (WCAG 2.2, medido):

   1. **O Dourado Mel tem 2,11:1 sobre o creme — reprova para texto.**
      Ele fica como PREENCHIMENTO e destaque (faixa, barra, selo), nunca como
      letra nem traço fino. Onde o dourado precisa virar palavra, entra o
      `--ambar` #7D5A15 (5,72:1), que é o mesmo mel escurecido.
   2. **A Terracota tem 4,14:1 sobre o creme** — passa em botão preenchido com
      branco em cima (4,54:1) e em texto grande, mas reprova em texto pequeno.
      Por isso existem DOIS tokens onde o Beleza tinha um: `--marca` (superfície)
      e `--marca-tinta` #A34E2C (5,20:1, para letra, ícone e traço).
      No Beleza o vinho tinha ~7:1 e um token bastava. Aqui não basta.

   E o vermelho de perigo NÃO é a terracota: se a cor do botão principal for a
   mesma do alerta, "nossa cor" e "cuidado" viram a mesma coisa. O perigo é o
   tijolo #9B2F22 (6,78:1), mais escuro e mais vermelho, para o olho separar.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── superfícies ─────────────────────────────────────────────────────── */
  --fundo:#FFF3DF;                 /* 🌾 Creme Baunilha */
  --cartao:#FFFBF3;
  --cartao-2:#F6E9D3;

  /* ── texto ───────────────────────────────────────────────────────────── */
  --tinta:#35231B;                 /* 🤎 Cacau Escuro — 13,6:1 sobre o creme */
  --tinta-2:#6A5346;
  --tinta-3:#7E6757;               /* 4,9:1 — é o piso, não desça daqui */

  /* ── traço ───────────────────────────────────────────────────────────── */
  --linha:#EFDFC6;
  --linha-2:#DFCBAC;

  /* ── marca ───────────────────────────────────────────────────────────── */
  --marca:#B85C38;                 /* 🧡 Terracota — SUPERFÍCIE (botão cheio) */
  --marca-tinta:#A34E2C;           /*    a mesma cor, para LETRA e traço      */
  --marca-lav:#F7E4DA;             /*    campo grande usa ESTE               */
  --marca-med:#EFD1C2;
  --sobre-marca:#FFFFFF;

  /* ── sinal (nunca decoração) ─────────────────────────────────────────── */
  --verde:#5A5E38;   --verde-lav:#EDEFE0;    /* 🌿 Oliva, escurecida p/ texto */
  --verde-cheio:#6B7043;                     /*    a Oliva original, preenchimento */
  --ambar:#7D5A15;   --ambar-lav:#FBEFD6;    /* 🍯 Mel escurecido p/ texto    */
  --ouro:#D4A24C;                            /*    o Dourado Mel, SÓ preenchimento */
  --vermelho:#9B2F22; --vermelho-lav:#F8E2DE;
  --perigo-fundo:#9B2F22; --sobre-perigo:#FFFFFF;

  /* ── faixas do real: para onde vai cada R$ 1,00 vendido ──────────────── */
  /* Só as faixas com contraste ≥4,5:1 contra o branco carregam rótulo:
     embalagem (3,3) e imposto (4,4) ficam mudas de propósito. */
  --fx-insumo:#B85C38;
  --fx-embal:#C87A50;
  --fx-canal:#6F4E37;
  --fx-imposto:#8A7466;
  --fx-lucro:#6B7043;

  /* ── tipografia ──────────────────────────────────────────────────────── */
  --f:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --f-t:'Bricolage Grotesque','Archivo',system-ui,sans-serif;

  /* Escala fluida entre 360px e 1280px, sem degrau — igual ao Beleza.
     CAMPO DE FORMULÁRIO nunca abaixo de 16px: o Safari do iPhone dá zoom
     ao focar e desalinha a tela inteira. */
  --t-xs:  clamp(10.5px, 0.163vw +  9.91px, 12px);
  --t-sm:  clamp(12px,   0.217vw + 11.22px, 14px);
  --t-base:clamp(14.5px, 0.272vw + 13.52px, 17px);
  --t-md:  clamp(15.5px, 0.380vw + 14.13px, 19px);
  --t-lg:  clamp(18px,   0.652vw + 15.65px, 24px);
  --t-xl:  clamp(21px,   1.196vw + 16.70px, 32px);
  --t-2xl: clamp(27px,   1.848vw + 20.35px, 44px);

  --e-1: clamp(4px,  0.109vw +  3.61px,  6px);
  --e-2: clamp(8px,  0.435vw +  6.44px, 12px);
  --e-3: clamp(12px, 0.652vw +  9.65px, 18px);
  --e-4: clamp(16px, 0.870vw + 12.87px, 24px);
  --e-5: clamp(20px, 1.304vw + 15.30px, 32px);

  --r-1:8px; --r-2:12px; --r-3:16px;
  --toque:44px;
  --barra:59px;
  /* A seta do `select`, desenhada aqui e não deixada por conta do navegador:
     a nativa muda de forma em cada sistema, e é o detalhe que mais entrega
     "página" no lugar de "aplicativo". Vira token porque precisa CLAREAR no
     tema escuro — como background-image ela não herda `currentColor`, e um
     `stroke` fixo ficaria invisível sobre o cacau. */
  --seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%236A5346' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sombra:0 1px 2px rgba(53,35,27,.06), 0 4px 14px rgba(53,35,27,.05);
  --pct:0%;
}

/* ── tema escuro ─────────────────────────────────────────────────────────
   Não é o creme invertido: é cacau profundo com o creme virando a tinta.
   :not([data-theme="light"]) para a escolha explícita vencer o sistema
   operacional nos dois sentidos. Nenhuma cor nasce só aqui dentro. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fundo:#1E1410; --cartao:#2A1C15; --cartao-2:#37251C;
    --tinta:#FFF3DF; --tinta-2:#C9B39F; --tinta-3:#A08D7C;
    --linha:#3B2921; --linha-2:#4E372C;
    --marca:#E39070; --marca-tinta:#E39070;
    --marca-lav:#33201A; --marca-med:#4A2E23;
    --sobre-marca:#2A1C15;
    --verde:#A9B36E;  --verde-lav:#242618;  --verde-cheio:#A9B36E;
    --ambar:#E5BC72;  --ambar-lav:#2E2415;  --ouro:#E5BC72;
    --vermelho:#E58A78; --vermelho-lav:#311B17;
    --perigo-fundo:#9B2F22; --sobre-perigo:#FFFFFF;
    --fx-insumo:#E39070; --fx-embal:#C87A50; --fx-canal:#A97F5E;
    --fx-imposto:#9A8478; --fx-lucro:#A9B36E;
    --seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%23C9B39F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --sombra:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  --fundo:#1E1410; --cartao:#2A1C15; --cartao-2:#37251C;
  --tinta:#FFF3DF; --tinta-2:#C9B39F; --tinta-3:#A08D7C;
  --linha:#3B2921; --linha-2:#4E372C;
  --marca:#E39070; --marca-tinta:#E39070;
  --marca-lav:#33201A; --marca-med:#4A2E23;
  --sobre-marca:#2A1C15;
  --verde:#A9B36E;  --verde-lav:#242618;  --verde-cheio:#A9B36E;
  --ambar:#E5BC72;  --ambar-lav:#2E2415;  --ouro:#E5BC72;
  --vermelho:#E58A78; --vermelho-lav:#311B17;
  --perigo-fundo:#9B2F22; --sobre-perigo:#FFFFFF;
  --fx-insumo:#E39070; --fx-embal:#C87A50; --fx-canal:#A97F5E;
  --fx-imposto:#9A8478; --fx-lucro:#A9B36E;
  --seta:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4l5-4.8' fill='none' stroke='%23C9B39F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sombra:0 1px 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.28);
}

/* ═══ base ═══════════════════════════════════════════════════════════════ */

/* ── 01-base.css ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fundo);color:var(--tinta);
  font-family:var(--f);font-size:var(--t-base);line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* rótulo: a caixa-alta pequena que nomeia todo bloco */
.rot{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.09em;
  font-weight:600;color:var(--tinta-3)}
.serif{font-family:var(--f-t);font-weight:600;letter-spacing:-.02em}
/* número: tabular sempre, senão a coluna de reais dança a cada centavo */
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ═══ casca ══════════════════════════════════════════════════════════════ */

/* ── 02-casca.css ── */
.app{display:grid;grid-template-columns:1fr;min-height:100vh;min-height:100dvh}
.conteudo{
  width:100%;margin-inline:auto;max-width:1600px;
  padding-bottom:calc(var(--barra) + 54px + 16px + env(safe-area-inset-bottom,0px));
}
/* sem barra embaixo (tela de entrar, offline): o espaço reservado para ela
   sobraria como uma faixa vazia no fim da tela */
.conteudo.sem-barra{padding-bottom:0}
@media(min-width:700px) and (max-width:999px){ .conteudo{max-width:760px} }
@media(min-width:1100px){
  .app{grid-template-columns:226px 1fr}
  .conteudo{padding-bottom:var(--e-5)}
}

.topo{background:var(--cartao);border-bottom:1px solid var(--linha);
  padding:var(--e-4) var(--e-4) var(--e-3);position:relative}
.topo::after{content:'';position:absolute;left:var(--e-4);right:var(--e-4);
  bottom:-1px;height:2px;background:var(--marca);opacity:.85}
.topo-linha{display:flex;align-items:flex-start;gap:var(--e-2)}
.topo h1{font-family:var(--f-t);font-size:var(--t-xl);line-height:1.1;
  margin-top:4px;font-weight:600}
.topo-linha .cresce{flex:1;min-width:0}

.avatar{width:var(--toque);height:var(--toque);border-radius:50%;
  background:var(--marca-lav);color:var(--marca-tinta);display:grid;place-items:center;
  font-weight:700;border:1px solid var(--marca-med);flex:0 0 auto}

/* ── navegação: barra embaixo no celular, coluna no PC ────────────────── */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--cartao);
  border-top:1px solid var(--linha);display:flex;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.nav a{flex:1;min-width:0;min-height:var(--barra);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--tinta-3);font-size:var(--t-sm);font-weight:500}
.nav a.on{color:var(--marca-tinta)}
.nav .ic{width:24px;height:24px;flex:0 0 auto}
.nav-marca{display:none}
/* 🪤 `.nav a` (0-0-1-1) é MAIS específico que `.fab` (0-0-1-0) e sobrescrevia a
   cor da letra: o rótulo saía em `--tinta-3` sobre a terracota — 1,6:1, quase
   invisível. Por isso o seletor aqui é `.nav a.fab`, que empata em elemento e
   ganha em classe. O defeito só aparecia no computador, onde o rótulo existe. */
.nav a.fab{color:var(--sobre-marca)}
.fab{position:fixed;z-index:21;
  right:calc(var(--e-4) + env(safe-area-inset-right,0px));
  bottom:calc(var(--barra) + 16px + env(safe-area-inset-bottom,0px));
  width:58px;height:58px;border-radius:19px;cursor:pointer;
  background:var(--marca);color:var(--sobre-marca);border:3px solid var(--fundo);
  display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28),0 2px 4px rgba(0,0,0,.18)}
.fab .ic{width:28px;height:28px;stroke-width:2.6}
.fab-rotulo{display:none}
@media(min-width:1100px){
  .nav{position:sticky;top:0;bottom:auto;height:100vh;height:100dvh;
    flex-direction:column;gap:3px;padding:var(--e-5) 12px 0;border-top:0;
    border-right:1px solid var(--linha);overflow-y:auto}
  .nav a{flex:0;min-height:44px;flex-direction:row;justify-content:flex-start;
    gap:12px;padding:0 13px;font-size:var(--t-base);border-radius:var(--r-1)}
  .nav a.on{background:var(--marca-lav)}
  .nav .ic{width:1.25em;height:1.25em}
  .nav-marca{display:block;font-family:var(--f-t);font-size:var(--t-lg);
    padding:0 13px var(--e-4);color:var(--tinta);font-weight:600}
  /* 🪤 `flex:none` e NÃO herdar o `flex:0` de `.nav a`: em coluna flex, `flex:0`
     quer dizer `flex-basis:0%`, que zera a ALTURA-BASE do item. Nos links de uma
     linha o `min-height:44px` disfarça; aqui, com o rótulo quebrando em duas
     linhas, a caixa não crescia e o texto vazava por fora do botão. */
  .fab{position:static;width:auto;height:auto;flex:none;margin:var(--e-3) 12px 0;
    padding:12px 14px;display:flex;align-items:center;gap:9px;box-shadow:none;
    font-size:var(--t-base);font-weight:600;line-height:1.25;text-align:left}
  .fab .ic{width:1.3em;height:1.3em}
  .fab-rotulo{display:inline}
}

/* ═══ componentes ════════════════════════════════════════════════════════ */

/* ── 03-componentes.css ── */
.cartao{background:var(--cartao);border:1px solid var(--linha);
  border-radius:var(--r-3);padding:var(--e-4);box-shadow:var(--sombra);
  margin:var(--e-3) var(--e-4) 0}
.cartao > h2{font-family:var(--f-t);font-size:var(--t-lg);margin-bottom:var(--e-2)}
.cartao .v{font-size:var(--t-xl);font-weight:600;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;display:block;line-height:1.1}
.v.pos{color:var(--verde)} .v.ate{color:var(--ambar)}
.v.neg{color:var(--vermelho)} .v.mar{color:var(--marca-tinta)}
.obs{font-size:var(--t-sm);color:var(--tinta-2);margin-top:4px;line-height:1.35}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:var(--toque);padding:0 var(--e-3);border-radius:var(--r-1);
  border:1px solid transparent;background:var(--marca);color:var(--sobre-marca);
  font-weight:600;font-size:var(--t-base);cursor:pointer}
.btn.fantasma{background:transparent;color:var(--marca-tinta);border-color:var(--marca-tinta)}
.btn.discreto{background:transparent;color:var(--tinta-2);border-color:var(--linha-2)}
.btn.bloco{width:100%}
.btn.pequeno{min-height:38px;font-size:var(--t-sm);padding:0 var(--e-2)}

/* etiqueta de estado — o "ponto" da regra: cor forte em área mínima */
.selo{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;
  border-radius:999px;font-size:var(--t-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em}
.selo.ok{background:var(--verde-lav);color:var(--verde)}
.selo.atencao{background:var(--ambar-lav);color:var(--ambar)}
.selo.urgente{background:var(--vermelho-lav);color:var(--vermelho)}
.selo.info{background:var(--marca-lav);color:var(--marca-tinta)}

/* ⭐ A RÉGUA DO REAL — o elemento assinatura do Gestor Delivery.
   Mostra para onde vai cada R$ 1,00 vendido. É a resposta visual da pergunta
   que criou o projeto: "quanto eu realmente lucrei?" */
.regua{display:flex;height:34px;border-radius:var(--r-1);overflow:hidden;
  border:1px solid var(--linha);background:var(--cartao-2)}
.regua > span{display:grid;place-items:center;font-size:var(--t-xs);
  font-weight:700;color:#fff;min-width:0;overflow:hidden;white-space:nowrap}
.regua .fx-insumo{background:var(--fx-insumo)}
.regua .fx-embal{background:var(--fx-embal)}
.regua .fx-canal{background:var(--fx-canal)}
.regua .fx-imposto{background:var(--fx-imposto)}
.regua .fx-lucro{background:var(--fx-lucro)}
.regua-legenda{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-3);
  margin-top:var(--e-2);font-size:var(--t-sm);color:var(--tinta-2)}
.regua-legenda i{width:10px;height:10px;border-radius:3px;display:inline-block;
  margin-right:6px;vertical-align:baseline}

/* lista de linhas — o padrão de item do Beleza */
.lista{display:flex;flex-direction:column;border:1px solid var(--linha);
  border-radius:var(--r-2);overflow:hidden;background:var(--cartao)}
.lista .item{display:grid;align-items:center;gap:var(--e-2);
  padding:var(--e-3);border-bottom:1px solid var(--linha);min-height:var(--toque)}
.lista .item:last-child{border-bottom:0}
.lista .item .txt{min-width:0}   /* sem isto o nome longo estoura a coluna do grid */
.item .nm{font-weight:600}
.item .sv{font-size:var(--t-sm);color:var(--tinta-2)}

/* ⭐ Duas colunas: o que é, e o número. É a forma de LISTA que o celular pede —
   `table.dados` tem `min-width:620px` de propósito e rola na horizontal, o que
   serve para conferência no computador e é péssimo com o polegar. A coluna do
   número é `auto`: ela nunca encolhe, então o custo não some da tela. */
.lista .item{grid-template-columns:1fr auto}
.lista a.item{color:inherit}
.lista a.item:active{background:var(--marca-lav)}
.item .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.item .n b{display:block;font-size:var(--t-md);font-weight:600}
.item .n .sv{color:var(--tinta-3)}
/* o cabeçalho de uma lista: diz o que é cada coluna sem virar tabela */
.lista-cab{display:grid;grid-template-columns:1fr auto;gap:var(--e-2);
  padding:0 var(--e-3) 6px}
.lista-cab span{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.09em;
  font-weight:600;color:var(--tinta-3)}
.lista-cab span:last-child{text-align:right}

/* medidor de proporção (estoque, meta) */
.barra-med{height:8px;border-radius:999px;background:var(--cartao-2);overflow:hidden}
.barra-med > i{display:block;height:100%;width:var(--pct);border-radius:999px;
  background:var(--marca)}
.barra-med.ok > i{background:var(--verde-cheio)}
.barra-med.atencao > i{background:var(--ouro)}
.barra-med.urgente > i{background:var(--vermelho)}

.grade{display:grid;gap:var(--e-3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.duas{display:grid;gap:var(--e-3)}
@media(min-width:1000px){ .duas{grid-template-columns:1fr 1.1fr;align-items:start}
  .duas > *{min-width:0} }

.tabela-rolagem{overflow-x:auto;border:1px solid var(--linha);
  border-radius:var(--r-2);background:var(--cartao)}
table.dados{width:100%;min-width:620px;border-collapse:collapse;font-size:var(--t-sm)}
table.dados th,table.dados td{padding:10px 12px;text-align:left;
  border-bottom:1px solid var(--linha)}
table.dados th{background:var(--marca-lav);color:var(--marca-tinta);font-weight:700;
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.06em}
table.dados td.n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
table.dados tbody tr:last-child td{border-bottom:0}

/* ═══ formulário ═════════════════════════════════════════════════════════
   Esta camada nasceu em 01/09, com as telas de cadastro e de compra. A Fase 1
   não tinha UM formulário sequer — a tela era só leitura —, então o CSS foi
   escrito sem ela, e toda tela de lançamento caía no visual cru do navegador.

   Duas medidas vêm dos tokens e não se negociam:
   · altura mínima `--toque` (44px): o alvo aqui é o dedo de quem está com a
     mão ocupada na cozinha, não o cursor de um mouse;
   · `max(16px, …)` no texto do campo. Abaixo de 16px o Safari do iPhone dá
     ZOOM ao focar e desalinha a tela inteira. `--t-base` é um clamp com piso
     de 14,5px, então usar o token puro aqui traria o defeito de volta — é o
     mesmo aviso que está escrito lá no 00-tokens.
   ═════════════════════════════════════════════════════════════════════════ */
form label{display:block;margin:var(--e-3) 0 6px;
  font-size:var(--t-sm);font-weight:600;color:var(--tinta-2)}
form > label:first-of-type{margin-top:0}

input:not([type=checkbox]):not([type=radio]),select,textarea{
  width:100%;min-height:var(--toque);padding:9px var(--e-2);
  border:1px solid var(--linha-2);border-radius:var(--r-1);
  background:var(--cartao);color:var(--tinta);
  font-family:inherit;font-size:max(16px,var(--t-base));line-height:1.3;
  transition:border-color .12s ease,box-shadow .12s ease}

input::placeholder,textarea::placeholder{color:var(--tinta-3);opacity:1}

input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{
  border-color:var(--marca);box-shadow:0 0 0 3px var(--marca-lav)}

input:disabled,select:disabled{background:var(--cartao-2);color:var(--tinta-3)}

/* número tabular: sem isto a coluna de gramas dança a cada dígito digitado */
input[type=number],input[type=date],input[inputmode=decimal]{
  font-variant-numeric:tabular-nums}

select{appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:calc(var(--e-4) + 14px);
  background-image:var(--seta);background-repeat:no-repeat;
  background-position:right var(--e-2) center;background-size:12px 8px}

/* o botão de um formulário ocupa a largura toda no celular — alvo grande é
   o que separa "consegui lançar" de "errei o toque três vezes" */
form .btn{margin-top:var(--e-4);width:100%}
@media(min-width:700px){ form .btn{width:auto;min-width:200px} }
form .obs{margin-top:6px}
form .duas + label{margin-top:var(--e-3)}

/* ═══ a porta ════════════════════════════════════════════════════════════
   A tela de entrar é a única sem a casca (sem barra, sem menu): quem está
   aqui ainda não tem conta resolvida, e uma barra de navegação que leva a
   302 de volta é ruído.
   ═════════════════════════════════════════════════════════════════════════ */
/* flex em vez de `grid + place-items:center` por previsibilidade: com
   `justify-items:center` a célula do grid vira `max-content`, e o `width:100%`
   do cartão passaria a medir contra o próprio conteúdo. Aqui não chegou a dar
   defeito — medido com iframe de 390px, nada vazava —, mas o flex não tem essa
   aresta. `min-width:0` porque item flex não encolhe abaixo do conteúdo. */
.porta{min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:var(--e-4) var(--e-4) calc(var(--e-5) + env(safe-area-inset-bottom,0px))}
.porta-caixa{width:100%;max-width:26rem;min-width:0}
.porta h1{font-family:var(--f-t);font-size:var(--t-2xl);line-height:1;
  letter-spacing:-.03em;margin-bottom:6px}
.porta .sub{color:var(--tinta-2);margin:0 0 var(--e-4);font-size:var(--t-md)}
.porta .cartao{padding:var(--e-4)}

/* A assinatura: a conta que este produto existe para fazer, com os números
   REAIS do cenário que guia o projeto (uma caixa de 27×200 g por R$ 120,00).
   Fica DEPOIS do formulário de propósito — quem só quer entrar não tropeça
   nela, e quem chegou pela primeira vez descobre o que o app faz sem ler
   uma frase de propaganda. */
.assinatura{margin-top:var(--e-4);padding-top:var(--e-3);
  border-top:1px solid var(--linha)}
.conta-viva{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;font-size:var(--t-sm);color:var(--tinta-2);
  margin-top:6px}
.conta-viva b{color:var(--tinta);font-weight:600}
.conta-viva .seta{color:var(--marca-tinta);font-weight:700}

/* ── 04-telas.css ── */
/* ═══ telas ══════════════════════════════════════════════════════════════
   Regra de UMA tela mora aqui, e só quando não couber em componente.
   Vazio no commit 1 de propósito: a Fase 1 não desenha tela. */