/* ============================================================
   Meu negócio v3 - o que é NOVO nesta proposta.
   Os tokens e a família visual vivem em styles.css (cópia do
   dinheiro-v3). Aqui só entra o que a tela nova precisa.

   ESCALA (vale pra este arquivo e pros dois HTML - sem meio pixel,
   sem número ímpar solto):
     fonte    11 · 12 · 13 · 14 · 15 · 18 · 21 · 26
     peso     500 · 600 · 700
     raio     8 · 12 · 16 · 999
     espaço   4 · 8 · 12 · 16 · 20 · 24
   ============================================================ */

/* Tokens locais desta feature. Viram token global quando entrar no
   app. Todos medidos: passam em AA no fundo em que são usados. */
:root {
  --go: #6E8580;         /* chevron e seta - 3,9:1 no branco (UI pede 3:1) */
  --hair: #E4EDE9;       /* filete entre linhas de lista */
  --teal-txt: #0B6D64;   /* texto e fundo de estado - 6,2:1 com branco */
  --ambar-txt: #7A5600;  /* texto âmbar - 6,1:1 no #FFF4E0 */
  --perigo-linha: #E9C4BE;
  --ambar-linha: #F2DCAE;
  --ambar-hover: #F7E9C9;
  --teal-linha: #BFE8E2;
}

/* ---------- troca de tela (navegação por ?tela=) ---------- */
.tela { display: none; }
.tela.on { display: block; }

/* ---------- filtro por papel (?papel=) ----------------------
   Cada item e cada bloco declara em data-papeis quem enxerga.
   Bloco sem item visível some junto com o título (negocio.js). */
body[data-papel="dono"]       [data-papeis]:not([data-papeis~="dono"])       { display: none !important; }
body[data-papel="padeiro"]    [data-papeis]:not([data-papeis~="padeiro"])    { display: none !important; }
body[data-papel="atendente"]  [data-papeis]:not([data-papeis~="atendente"])  { display: none !important; }
body[data-papel="financeiro"] [data-papeis]:not([data-papeis~="financeiro"]) { display: none !important; }

/* ---------- estado dos dados (?estado=) ---------------------
   Toda tela tem quatro vidas: cheia, carregando, com erro e vazia.
   O mockup mostra as quatro em vez de fingir que só existe a cheia. */
body[data-estado="cheio"]      [data-estados]:not([data-estados~="cheio"])      { display: none !important; }
body[data-estado="carregando"] [data-estados]:not([data-estados~="carregando"]) { display: none !important; }
body[data-estado="erro"]       [data-estados]:not([data-estados~="erro"])       { display: none !important; }
body[data-estado="vazio"]      [data-estados]:not([data-estados~="vazio"])      { display: none !important; }

/* esqueleto de carregamento */
.sk {
  display: inline-block;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #EDF3F0, #F7FAF9, #EDF3F0);
  background-size: 200% 100%;
  animation: sk 1.1s linear infinite;
  vertical-align: middle;
}
.sk.w1 { width: 92px; }
.sk.w2 { width: 130px; }
.sk.w3 { width: 170px; }
.sk.alto { height: 16px; }
@keyframes sk { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

.sub.falhou, .det.falhou { color: var(--ambar-txt); font-weight: 600; }

/* ---------- cabeçalho do hub ---------- */
.neg-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 16px;
}
.neg-head .logo {
  width: 48px; height: 48px;
  border-radius: 16px;
  background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex: 0 0 auto;
  border: 1px solid rgba(12, 29, 27, .06);
}
.neg-head h1 {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.neg-head .verloja {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: -12px 0 -12px -4px;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal-txt);
  text-decoration: none;
}
.neg-head .verloja:hover { text-decoration: underline; }
.neg-head .verloja i { font-size: 14px; }

/* ---------- blocos com nome curto ---------- */
.bloco { margin-top: 16px; }
.bloco.primeiro { margin-top: 4px; }
.bloco.vazio { display: none; }
.bloco.solo .bloco-tit { display: none; }

.bloco-tit {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 6px;
}

/* ---------- item do hub no celular: LINHA, não quadrado ---------- */
.hub-lista {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.hub-linha {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--hair);
  text-align: left;
  text-decoration: none;
  color: inherit;
  font-family: var(--font-body);
  cursor: pointer;
}
.hub-linha.primeiro { border-top: none; }
.hub-linha:active { background: var(--paper); }

/* trilho único de ícones: 38px em toda a coluna do hub */
.hub-linha .ic,
.indica .ic,
.neg-sessao .ic {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--teal-txt);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex: 0 0 auto;
}
.hub-linha .ic.neutra,
.neg-sessao .ic { background: var(--paper); color: var(--muted); }
.indica .ic { background: var(--tangerina-soft); color: var(--ambar-txt); }

.hub-linha .txt { flex: 1; min-width: 0; }
.hub-linha .tit {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
}
.hub-linha .sub {
  display: block;
  min-height: 16px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}
.hub-linha .sub.pendente { color: var(--ambar-txt); font-weight: 600; }
.go { color: var(--go); font-size: 18px; flex: 0 0 auto; }

/* ---------- indique e ganhe ---------- */
.indica {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
}
.indica strong { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.indica small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.indica .go { margin-left: auto; }

/* ---------- ações de sessão (rodapé do hub) ----------------
   "Minha conta" mora aqui, não no bloco "O negócio": conta é da
   PESSOA, negócio é do negócio. Era o único item que sobrava pra
   padeiro, atendente e financeiro, e fazia o título mentir.
   "Ocultar valores" saiu: não há valor nenhum nesta tela. */
.neg-sessao {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.neg-sessao a,
.neg-sessao button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 4px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.neg-sessao .ic { font-size: 18px; }
.neg-sessao .txt { flex: 1; min-width: 0; color: var(--ink); font-size: 14px; }
.neg-sessao .txt small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.neg-sessao a:active, .neg-sessao button:active { background: var(--surface); }

/* ---------- tela vazia de verdade (papel financeiro) -------- */
.vazio-tela {
  text-align: center;
  padding: 24px 20px;
}
.vazio-tela .ic {
  width: 56px; height: 56px;
  margin: 0 auto 12px;
  border-radius: 16px;
  background: var(--paper);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
}
.vazio-tela strong { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.vazio-tela p { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 8px; }
.vazio-tela .btn { margin-top: 16px; }

/* ============================================================
   TELAS QUE SAÍRAM DA CONFIG
   ============================================================ */

.cardlbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.linha-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.linha-topo .grow { flex: 1; min-width: 0; }

.no-ar-tit {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
}
.no-ar-tit i { color: var(--teal-txt); font-size: 18px; }

.badge.fora { background: var(--paper); color: var(--muted); }
[data-loja].fora .no-ar-tit i { color: var(--muted); }

/* endereço: é pra copiar e mandar, não é campo desativado */
.endereco-box {
  margin-top: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}
.endereco {
  display: block;
  font-size: 12px;
  color: var(--muted);
  word-break: break-all;
  line-height: 1.4;
}
.endereco b { color: var(--ink); font-family: var(--font-display); font-weight: 600; }
.end-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.endereco-box.previa { border-style: dashed; opacity: .8; }

.explica { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 8px; }

.aviso-email {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-size: 13px;
  cursor: pointer;
}
.aviso-email input { margin-top: 4px; width: 20px; height: 20px; accent-color: var(--teal-txt); flex: 0 0 auto; }
.aviso-email em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* linha que abre outra tela de dentro de um card */
.card-link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 12px 0 0;
  margin-top: 12px;
  border: none;
  border-top: 1px solid var(--hair);
  background: transparent;
  color: inherit;
  font-family: var(--font-body);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.card-link-row .ic {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex: 0 0 auto;
}
.card-link-row .txt { flex: 1; min-width: 0; }
.card-link-row .tit { display: block; font-weight: 600; font-size: 14px; }
.card-link-row .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ---------- ação destrutiva ---------------------------------
   Tirar a loja do ar e tirar o acesso de alguém não podem ter o
   mesmo peso do link mais inócuo da tela. Cor de perigo em repouso
   (celular não tem hover), lugar próprio e confirmação sempre. */
.zona-perigo {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
}
.btn-perigo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  margin-left: -12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--danger);
  cursor: pointer;
}
.btn-perigo:hover { background: var(--danger-soft); }
.btn-perigo i { font-size: 18px; }
.zona-perigo .dica-campo { margin-top: 0; }

.confirma {
  margin-top: 12px;
  padding: 16px;
  border-radius: 12px;
  background: var(--danger-soft);
  border: 1px solid var(--perigo-linha);
}
.confirma.aviso { background: var(--amber-soft); border-color: var(--ambar-linha); }
.confirma strong { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); }
.confirma p { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 8px; }
.confirma-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.confirma-acts .btn { flex: 1 1 140px; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #a5301f; }

/* ---------- barra de salvar --------------------------------
   Um modelo de gravação por tela. Só aparece quando você mexeu em
   algo, gruda no rodapé e não deixa sair sem avisar. */
.barra-salvar {
  display: none;
  position: sticky;
  bottom: 0;
  z-index: 5;
  align-items: center;
  gap: 12px;
  margin: 16px -20px -24px;
  padding: 12px 20px 16px;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.tela.sujo .barra-salvar { display: flex; }
.barra-salvar .aviso {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ambar-txt);
  line-height: 1.35;
}
.barra-salvar .btn { flex: 0 0 auto; }

/* ---------- travas de plano ---------- */
.trava {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 720px;
  padding: 12px;
  border-radius: 12px;
  background: var(--tangerina-soft);
  border: 1px solid var(--ambar-linha);
  color: var(--ambar-txt);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 12px;
}
.trava i { font-size: 18px; flex: 0 0 auto; }
.trava .txt { flex: 1 1 200px; min-width: 0; }
.trava .lnk {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--ambar-txt);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: var(--ambar-txt);
  background: transparent;
  font-family: var(--font-body);
  cursor: pointer;
}
.trava .lnk:hover { background: var(--ambar-hover); }

/* ---------- notas: cada semântica com a sua cor --------------
   .nota      = informação calma (teal)
   .nota.atencao = consequência (âmbar) - triângulo de alerta NUNCA
   dentro de caixa teal, que é a cor de "tudo certo". */
.nota {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--brand-soft);
  border: 1px solid var(--teal-linha);
  color: var(--teal-txt);
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 12px;
}
.nota i { font-size: 18px; flex: 0 0 auto; }
.nota.atencao { background: var(--amber-soft); border-color: var(--ambar-linha); color: var(--ambar-txt); }

/* ---------- dias de venda ---------- */
/* Sete dias, sete colunas iguais. Com flex-wrap o "dom" caía sozinho
   numa segunda linha e cada dia saía com uma largura. */
.dias-semana {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dia-chip {
  min-width: 0;
  min-height: 44px;
  padding: 0 2px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* selecionado: cor COM peso e marca - não só cor.
   branco no --brand dava 2,57:1; no --teal-txt dá 6,2:1. */
.dia-chip.on {
  background: var(--teal-txt);
  border-color: var(--teal-txt);
  color: #fff;
  font-weight: 700;
}
.dia-chip.on::before { content: "\2713"; font-size: 11px; margin-right: 2px; }

/* leitura: é estado, não controle. Sem borda de botão, sem cursor. */
.dias-semana.leitura .dia-chip {
  cursor: default;
  background: var(--paper);
  border-color: transparent;
  color: var(--muted);
  font-weight: 600;
}
.dias-semana.leitura .dia-chip.on {
  background: var(--brand-soft);
  border-color: var(--teal-linha);
  color: var(--teal-txt);
  font-weight: 700;
}

.estado-lig {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--teal-txt);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.estado-lig i { font-size: 15px; }

.selo-agora {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal-txt);
  background: var(--brand-soft);
  border-radius: 999px;
  padding: 2px 8px;
}

/* valor só de leitura: texto inteiro, não input truncado */
.valor-leitura {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}

/* mais e menos, porque "2 dias" nunca foi campo de digitar */
.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 200px;
}
.stepper button {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.stepper button:hover:not(:disabled) { border-color: var(--brand); color: var(--teal-txt); }
.stepper button:disabled { opacity: .4; cursor: default; }
.stepper .valor {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

.prod-disp {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 0;
  border-top: 1px solid var(--hair);
  font-size: 13px;
  text-decoration: none;
  color: inherit;
}
.prod-disp.primeiro { border-top: none; }
.prod-disp .nome { flex: 1; font-weight: 600; }
.prod-disp .quando { font-size: 12px; color: var(--muted); font-weight: 500; text-align: right; }

.rodape-lista { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }

/* ---------- equipe ---------- */
.pessoa {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--hair);
}
.pessoa.primeiro { border-top: none; padding-top: 4px; }
.pessoa .av {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  flex: 0 0 auto;
}
/* três tons da paleta Engrenou (a lavanda #EAE7F8 não existe na marca)
   e todos acima de 4,5:1 no próprio fundo */
.pessoa .av.a1 { background: var(--brand-soft); color: var(--teal-txt); }
.pessoa .av.a2 { background: var(--tangerina-soft); color: var(--ambar-txt); }
.pessoa .av.a3 { background: var(--paper); color: var(--muted); }
.pessoa .nome { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.pessoa .papel { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pessoa .grow { flex: 1; min-width: 0; }

.chips-secoes { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.chip-secao {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 8px;
}

.pessoa-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.mini-btn {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1.5px solid var(--line);
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mini-btn:hover { border-color: var(--brand); color: var(--teal-txt); }
.mini-btn i { font-size: 16px; }

/* acordeão de ajuda (papéis) */
.acc { margin-top: 12px; border-top: 1px solid var(--hair); padding-top: 8px; }
.acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  min-height: 48px;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary .chev { margin-left: auto; transition: transform .15s ease; }
.acc[open] summary .chev { transform: rotate(180deg); }
.acc-body { padding-top: 4px; }
.kv .v.solto { font-size: 12px; font-weight: 500; }

/* ---------- áreas do app ---------- */
.grupo-tit {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 8px;
}
.grupo-tit.primeiro { margin-top: 0; }

.area-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--hair);
}
.area-row.primeiro { border-top: none; }
.area-row .ic {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex: 0 0 auto;
}
.area-row.on .ic { background: var(--brand-soft); color: var(--teal-txt); }
.area-row .grow { flex: 1; min-width: 0; }
.area-row .nome { font-weight: 600; font-size: 14px; }
.area-row .det { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.area-row .det.alerta { color: var(--ambar-txt); font-weight: 600; }
.area-row .fixa { font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* ---------- etapas ---------- */
.etapa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--hair);
}
.etapa.primeiro { border-top: none; }
/* Reordenar é a razão de existir desta tela e acontecia em dois alvos de
   28x24 colados por 2px. Agora são dois de 44x44, encostados como um
   controle segmentado - sem gap pra não sobrar zona morta entre eles. */
.etapa .ord { display: flex; flex-direction: column; flex: 0 0 auto; }
.etapa .ord button {
  width: 44px; height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.etapa .ord button:first-child { border-radius: 12px 12px 0 0; }
.etapa .ord button:last-child { border-radius: 0 0 12px 12px; border-top: none; }
.etapa .ord button:hover:not(:disabled) { border-color: var(--brand); color: var(--teal-txt); }
.etapa .ord button:disabled { opacity: .35; cursor: default; }
.etapa .ic {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--teal-txt);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex: 0 0 auto;
}
.etapa .grow { flex: 1; min-width: 0; }
.etapa .nome { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.etapa .det { font-size: 12px; color: var(--muted); margin-top: 2px; display: flex; gap: 12px; flex-wrap: wrap; }
.etapa .det i { font-size: 13px; }

/* ---------- formulário da cara do negócio ---------- */
.duo { display: flex; gap: 12px; flex-wrap: wrap; }
.duo .field { flex: 1 1 140px; }

.logo-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-prev {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  border: 1px solid var(--line);
  flex: 0 0 auto;
}

.cores { display: flex; gap: 8px; flex-wrap: wrap; }
.cor-amostra {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1.5px var(--line);
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
  position: relative;
}
.cor-amostra.on { box-shadow: 0 0 0 2px var(--ink); }
.cor-amostra.on::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* campo com prefixo fixo (+55, R$) - "DDI" não é palavra de
   confeitaria, e "81.000" sem R$ não é dinheiro */
.campo-prefixo {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.campo-prefixo .pre {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--paper);
  border-right: 1.5px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  flex: 0 0 auto;
}
.campo-prefixo .input {
  border: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.campo-prefixo .input:focus { box-shadow: none; }
.campo-prefixo:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15, 181, 166, .15); }

.dica-campo { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* ---------- migalhas de sistema (sem style inline no HTML) ---------- */
.card + .card { margin-top: 12px; }
.field.fim { margin-bottom: 0; }
.field .lbl { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.lbl-forte { font-size: 14px; font-weight: 600; }
.mini-btn.so-icone { width: 44px; padding: 0; justify-content: center; }
.acoes-bloco { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.sem-topo { margin-top: 0; }
.dica-solta { padding: 0 4px; }

/* loja no ar x fora do ar: um par de botões, um visível por vez */
[data-loja]:not(.fora) [data-quando="fora"] { display: none; }
[data-loja].fora [data-quando="no-ar"] { display: none; }
.lnk-txt {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal-txt);
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: underline;
}

/* ============================================================
   CONTROLES DO MOCKUP (fora do aparelho - não é interface do app)
   ============================================================ */
.mock-ctrl {
  width: 100%;
  max-width: 400px;
  margin-top: 16px;
  background: rgba(255, 255, 255, .72);
  border: 1px dashed rgba(12, 29, 27, .18);
  border-radius: 16px;
  padding: 12px;
}
.mock-ctrl .mk-tit {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.mock-ctrl .mk-linha { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.mock-ctrl .mk-linha:last-of-type { margin-bottom: 0; }
.mock-ctrl a {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  text-decoration: none;
}
.mock-ctrl a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.mock-ctrl .mk-nota { font-size: 11px; color: var(--muted); line-height: 1.45; margin-top: 12px; }

/* ============================================================
   DESKTOP: os itens voltam a ser cards em grade
   ============================================================ */
.migalha {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}
.migalha a { color: var(--teal-txt); text-decoration: none; }
.migalha a:hover { text-decoration: underline; }
.migalha i { font-size: 14px; color: var(--go); }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
/* LINHA, não coluna. O styles.css define .hub-card como
   flex-direction: column (é o card do hub antigo); esta tela redefine
   align-items e gap esperando uma linha - e sem resetar a direção o
   texto caía embaixo do ícone com dois terços do card vazios. */
.hub-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.hub-card:hover { transform: translateY(-2px); border-color: var(--brand); }
.hub-card .ic {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--teal-txt);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex: 0 0 auto;
}
.hub-card .ic.neutra { background: var(--paper); color: var(--muted); }
.hub-card .txt { flex: 1; min-width: 0; }
.hub-card .tit { display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.hub-card .sub { display: block; min-height: 16px; font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.hub-card .sub.pendente { color: var(--ambar-txt); font-weight: 600; }

.bloco-desk { margin-top: 16px; }
.bloco-desk.primeiro { margin-top: 0; }
.bloco-desk.vazio { display: none; }
.bloco-desk.solo .bloco-tit { display: none; }

/* Vence as regras de desktop.css (que ainda pedem 3 colunas fixas de
   118px de altura, desenhadas pro card antigo em coluna). */
.dmain .bloco-desk .hub-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.dmain .bloco-desk .hub-card { min-height: 76px; padding: 12px 16px; }

.desk-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.desk-cols.iguais { align-items: stretch; }
.desk-cols.iguais > .card { height: 100%; }
.desk-cols .col { display: flex; flex-direction: column; min-width: 0; }
.desk-cols.iguais .col > .card.estica { flex: 1 1 auto; }
.col-unica { max-width: 760px; }
/* dentro de coluna única a trava acompanha a largura do card, senão
   sobra um degrau de 40px entre a faixa e a lista */
.col-unica .trava { max-width: none; }
.logo-campo { margin-top: 16px; }
.mock-ctrl-desk { max-width: 1180px; }

body.desk .barra-salvar { margin: 16px -30px -34px; padding: 12px 30px 16px; }

@media (max-width: 1080px) {
  .dmain .bloco-desk .hub-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
  .desk-cols { grid-template-columns: 1fr; }
}