/* Cadastrar unidade (09/10/2026) — /nova-unidade.html.

   Nenhuma fonte nem cor nova: tudo sai dos tokens de v31.css, como a
   Administração. Três decisões de desenho:

   1. Os quatro passos aparecem desde o início, os de baixo apagados. Quem
      chega vê o caminho inteiro e sabe quanto falta antes de começar.
   2. O resumo à direita responde as duas perguntas de quem preenche: "o que
      falta?" e "o que vai acontecer quando eu clicar?". O botão mora nele.
   3. Pendência é âmbar, nunca vermelho (mesma régua da Administração):
      "falta completar" é trabalho a fazer, não erro. Vermelho só para o que
      impede de salvar. */

/* O atributo hidden tem de vencer os display: flex/grid desta folha — sem
   isto, o cartão de sugestão de dono continuava na tela depois de escolhido. */
.nu-layout[hidden], .nu-layout [hidden], .nu-sucesso [hidden] { display: none !important; }

.nu-voltar {
  display: inline-block; font-size: .82rem; color: var(--tinta-2);
  text-decoration: none; margin-bottom: 6px;
}
.nu-voltar:hover { color: var(--marca); }

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

/* ---------- Layout: passos + resumo ---------- */
.nu-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px; align-items: start; max-width: 1120px;
}
/* minmax(0, ...) e nao 1fr: com 1fr a coluna cresce ate o nome de loja mais
   comprido da lista (que nao quebra linha) e o celular ganha rolagem lateral. */
@media (max-width: 1000px) {
  .nu-layout { grid-template-columns: minmax(0, 1fr); }
}
.nu-passos, .nu-resumo { min-width: 0; }

/* ---------- Passo ---------- */
.nu-passo {
  background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio-md);
  padding: 20px 22px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(11, 11, 11, .04);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.nu-passo[data-estado="atual"] { border-color: var(--marca); box-shadow: var(--sombra); }
.nu-passo-topo { display: flex; align-items: flex-start; gap: 14px; }
.nu-passo-topo h2 {
  margin: 1px 0 0; font-size: 1.02rem; font-weight: 700; letter-spacing: -.005em;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.nu-passo-sub { margin: 4px 0 0; color: var(--tinta-2); font-size: .84rem; line-height: 1.45; }
.nu-passo-corpo { margin-top: 18px; padding-left: 42px; }

.nu-num {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: .82rem; font-weight: 700;
  background: var(--plano); color: var(--tinta-muda); border: 1px solid var(--linha);
}
.nu-passo[data-estado="atual"] .nu-num { background: var(--marca); color: #fff; border-color: var(--marca); }
.nu-passo[data-estado="feito"] .nu-num { background: var(--bom); color: #fff; border-color: var(--bom); font-size: 0; }
.nu-passo[data-estado="feito"] .nu-num::after { content: "✓"; font-size: .85rem; }

/* Bloqueado: visível (o caminho inteiro à vista), mas sem convite a clicar.
   O `inert` no corpo é o que de fato impede o foco — isto é só a aparência. */
.nu-passo[data-estado="bloqueado"] h2,
.nu-passo[data-estado="bloqueado"] .nu-passo-sub { color: var(--tinta-muda); }
.nu-passo[data-estado="bloqueado"] .nu-passo-corpo { opacity: .4; filter: grayscale(.4); }

/* Passo opcional: um <details>, fechado. Abrir é escolha de quem tem o dado. */
.nu-opcional details > summary { list-style: none; cursor: pointer; }
.nu-opcional details > summary::-webkit-details-marker { display: none; }
.nu-opcional .nu-abrir {
  margin-left: auto; align-self: center; color: var(--tinta-2); font-size: .8rem;
}
.nu-opcional .nu-abrir::before { content: "abrir ▾"; }
.nu-opcional details[open] .nu-abrir::before { content: "fechar ▴"; }
.nu-opcional details > summary:focus-visible { outline: 2px solid var(--marca); outline-offset: 4px; border-radius: 6px; }

/* ---------- Campos ---------- */
.nu-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px;
}
.nu-largo { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .nu-grid { grid-template-columns: 1fr; }
  .nu-segmento { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .nu-segmento span { text-align: center; height: 100%; display: grid; place-items: center; }
  .nu-passo { padding: 16px; }
  .nu-passo-corpo { padding-left: 0; }
}

.nu-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nu-rotulo { font-size: .8rem; font-weight: 600; color: var(--tinta-2); }
.nu-rotulo i { font-style: normal; font-weight: 400; color: var(--tinta-muda); }
.nu-input {
  width: 100%; background: var(--sup); border: 1px solid var(--linha);
  border-radius: var(--raio-sm); padding: 10px 12px; font-size: .9rem;
  color: var(--tinta); font-family: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.nu-input:hover { border-color: var(--eixo); }
.nu-input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-clara); }
.nu-input[aria-invalid="true"] { border-color: var(--critico); }
.nu-input-grande { font-size: 1rem; padding: 13px 16px; }
select.nu-input { cursor: pointer; }
.nu-dica { font-size: .76rem; color: var(--tinta-muda); line-height: 1.4; }
.nu-dica.atencao { color: var(--atencao); }
.nu-dica.erro { color: var(--critico); }
.nu-data { max-width: 320px; margin-top: 18px; }

.nu-check {
  display: flex; align-items: center; gap: 8px; font-size: .84rem;
  color: var(--tinta-2); cursor: pointer; margin-top: 10px;
}
.nu-check input { width: 16px; height: 16px; accent-color: var(--marca); }

.nu-link {
  background: none; border: none; padding: 0; font: inherit; font-size: .84rem;
  color: var(--marca); cursor: pointer; text-decoration: none; font-weight: 600;
}
.nu-link:hover { text-decoration: underline; }

/* ---------- Resultados de busca (loja e dono) ---------- */
.nu-resultados:empty { display: none; }
.nu-resultados { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.nu-grupo {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-2); font-weight: 700; margin: 12px 0 4px;
  display: flex; align-items: baseline; gap: 8px;
}
.nu-grupo:first-child { margin-top: 2px; }
.nu-grupo span { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--tinta-muda); }
.nu-res {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio-sm);
  padding: 10px 12px; cursor: pointer; font: inherit; color: var(--tinta);
}
.nu-res:hover, .nu-res:focus-visible { border-color: var(--marca); background: var(--marca-clara); outline: none; }
.nu-res[aria-disabled="true"] { cursor: default; background: var(--plano); }
.nu-res[aria-disabled="true"]:hover { border-color: var(--linha); background: var(--plano); }
.nu-res-txt { flex: 1; min-width: 0; }
.nu-res-txt b { display: block; font-size: .9rem; font-weight: 600; }
.nu-res-txt span { display: block; font-size: .78rem; color: var(--tinta-muda); margin-top: 2px; }
.nu-res-txt b, .nu-res-txt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nu-ver-todas { align-self: flex-start; margin: 4px 2px 0; }
.nu-vazio { font-size: .84rem; color: var(--tinta-2); padding: 8px 2px; line-height: 1.5; }

/* ---------- Etiquetas de situação ---------- */
.nu-tag {
  display: inline-block; flex: none; font-size: .7rem; font-weight: 700;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
  background: var(--plano); color: var(--tinta-2); border: 1px solid var(--linha);
}
.nu-tag:empty { display: none; }
.nu-tag.nova      { background: var(--marca-clara); color: var(--marca-escura); border-color: transparent; }
.nu-tag.completar { background: var(--atencao-clara); color: var(--atencao); border-color: transparent; }
.nu-tag.reativar  { background: var(--plano); color: var(--tinta-2); }
.nu-tag.cliente   { background: var(--bom-clara); color: var(--bom); border-color: transparent; }
.nu-tag.neutra    { font-weight: 500; }

/* ---------- A loja escolhida ---------- */
.nu-loja-cabeca {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: var(--raio-sm); background: var(--plano);
  border: 1px solid var(--linha); margin-bottom: 16px;
}
.nu-loja-linha1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nu-loja-linha1 b { font-size: 1rem; }
.nu-loja-sub { font-size: .8rem; color: var(--tinta-2); margin-top: 3px; }
.nu-nota {
  font-size: .82rem; line-height: 1.5; color: var(--tinta); margin: -6px 0 16px;
  padding: 9px 12px; border-radius: var(--raio-sm); background: var(--atencao-clara);
  border: 1px solid transparent;
}
/* SULTS (09/10/2026). Campo que veio de lá ganha uma marca âmbar à esquerda
   até alguém mexer nele: a SULTS pode estar desatualizada (Sandro), e a marca
   diz "confira" sem bloquear nada. */
.nu-input.nu-veio-sults { box-shadow: inset 3px 0 0 var(--atencao); }
.nu-sults { font-size: .8rem; color: var(--tinta-2); margin: 6px 0 0; line-height: 1.5; }
.nu-sults.atencao { color: var(--atencao); font-weight: 600; }
.nu-sults.ok { color: var(--tinta-2); }
.nu-nota-sults {
  font-size: .8rem; line-height: 1.5; margin: 0 0 14px; padding: 9px 12px;
  border-radius: var(--raio-sm); background: var(--plano); border: 1px solid var(--linha);
}
.nu-dono-editar {
  margin-top: 12px; padding: 14px 16px; border: 1px dashed var(--eixo);
  border-radius: var(--raio-sm); display: flex; flex-direction: column; gap: 12px;
}
.nu-dono-editar > .nu-link { align-self: flex-start; }
.nu-sults-dif { font-size: .76rem; color: var(--atencao); line-height: 1.4; }
.nu-sults-dif:empty { display: none; }
.nu-escolhido-acoes { display: flex; gap: 14px; flex-wrap: wrap; }
.nu-escolhido small { display: block; font-size: .76rem; color: var(--atencao); margin-top: 3px; }

.nu-maxpan {
  font-size: .8rem; color: var(--tinta-2); margin: 14px 0 0; line-height: 1.5;
  padding-top: 12px; border-top: 1px dashed var(--linha);
}

/* ---------- Dono ---------- */
.nu-segmento {
  display: inline-flex; background: var(--plano); border: 1px solid var(--linha);
  border-radius: var(--raio-sm); padding: 3px; gap: 3px; margin-bottom: 14px; flex-wrap: wrap;
}
.nu-segmento label { position: relative; cursor: pointer; }
.nu-segmento input { position: absolute; opacity: 0; pointer-events: none; }
.nu-segmento span {
  display: block; padding: 7px 14px; border-radius: 6px; font-size: .84rem;
  color: var(--tinta-2); font-weight: 500;
}
.nu-segmento input:checked + span { background: var(--sup); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px rgba(11, 11, 11, .12); }
.nu-segmento input:focus-visible + span { outline: 2px solid var(--marca); outline-offset: 1px; }

.nu-sugestao {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--marca); background: var(--marca-clara);
  border-radius: var(--raio-sm); padding: 10px 14px; margin-bottom: 14px; font-size: .84rem;
}
.nu-sugestao div { flex: 1; min-width: 200px; line-height: 1.45; }
.nu-sugestao small { display: block; color: var(--tinta-2); font-size: .78rem; }

.nu-escolhido {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--bom); background: var(--bom-clara); border-radius: var(--raio-sm);
  padding: 11px 14px;
}
.nu-escolhido b { display: block; font-size: .92rem; }
.nu-escolhido span { font-size: .8rem; color: var(--tinta-2); }

/* ---------- Canais ---------- */
.nu-canais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
@media (max-width: 760px) { .nu-canais { grid-template-columns: 1fr; } }
.nu-canal {
  border: 1px solid var(--linha); border-radius: var(--raio-sm); background: var(--sup);
  transition: border-color .12s ease;
}
.nu-canal:has(.nu-canal-topo input:checked) { border-color: var(--marca); }
.nu-canal-topo {
  display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center;
  padding: 13px 14px; cursor: pointer; border-radius: var(--raio-sm);
}
.nu-canal-topo:hover { background: var(--plano); }
.nu-canal-topo input { grid-row: span 2; width: 18px; height: 18px; accent-color: var(--marca); }
.nu-canal-nome { font-weight: 700; font-size: .95rem; }
.nu-canal-sub { font-size: .78rem; color: var(--tinta-muda); }
.nu-canal-corpo { padding: 12px 14px 14px; border-top: 1px solid var(--linha); }

.nu-conta-res:empty { display: none; }
.nu-conta-res {
  margin-top: 10px; font-size: .82rem; line-height: 1.5; border-radius: var(--raio-sm);
  padding: 10px 12px; border: 1px solid var(--linha); background: var(--plano);
}
.nu-conta-res b { font-size: .86rem; }
.nu-conta-res.ok { border-color: var(--bom); background: var(--bom-clara); }
.nu-conta-res.erro { border-color: var(--critico); background: var(--critico-clara); color: var(--critico); }
.nu-conta-res .aviso { display: block; margin-top: 6px; color: var(--atencao); font-weight: 600; }
/* 29/10/2026: loja principal da conta compartilhada — rádio por loja */
.nu-principal {
  display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--linha);
}
.nu-principal .nu-check { align-items: flex-start; margin-top: 0; color: var(--tinta); }

/* ---------- Avisos de contato (mesmas 3 reações da Administração) ---------- */
.nu-aviso {
  font-size: .8rem; line-height: 1.5; border-radius: var(--raio-sm);
  padding: 9px 12px; margin-top: 10px; border: 1px solid var(--linha);
  background: var(--plano); color: var(--tinta);
}
.nu-aviso.aviso { border-color: var(--atencao); background: var(--atencao-clara); color: var(--atencao); }
.nu-aviso.erro  { border-color: var(--critico); background: var(--critico-clara); color: var(--critico); }

/* ---------- Resumo ---------- */
.nu-resumo {
  position: sticky; top: 24px; background: var(--sup); border: 1px solid var(--linha);
  border-radius: var(--raio-md); padding: 20px; box-shadow: var(--sombra);
}
@media (max-width: 1000px) { .nu-resumo { position: static; } }
.nu-resumo h2 { margin: 0 0 14px; font-size: .95rem; }
.nu-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.nu-checklist li { display: flex; gap: 10px; align-items: flex-start; }
.nu-checklist b { display: block; font-size: .84rem; }
.nu-checklist span:not(.nu-marca) { display: block; font-size: .8rem; color: var(--tinta-2); line-height: 1.4; overflow-wrap: anywhere; }
.nu-marca {
  flex: none; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
  border: 2px solid var(--eixo); display: grid; place-items: center;
}
.nu-checklist li[data-ok="1"] .nu-marca { background: var(--bom); border-color: var(--bom); }
.nu-checklist li[data-ok="1"] .nu-marca::after { content: "✓"; color: #fff; font-size: .62rem; font-weight: 800; }
.nu-checklist li[data-opcional="1"]:not([data-ok="1"]) .nu-marca { border-style: dashed; }

.nu-acontece { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linha); }
.nu-acontece h3 {
  margin: 0 0 8px; font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--tinta-2);
}
.nu-acontece ul { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 6px; }
.nu-acontece li { font-size: .8rem; line-height: 1.45; color: var(--tinta); }

.nu-cadastrar { width: 100%; margin-top: 18px; padding: 12px 16px; font-size: .92rem; font-weight: 600; }
.nu-cadastrar:disabled { background: var(--plano); border-color: var(--linha); color: var(--tinta-muda); cursor: not-allowed; }
.nu-falta { margin: 10px 0 0; font-size: .8rem; color: var(--tinta-2); text-align: center; line-height: 1.4; }
.nu-erro-envio {
  margin: 12px 0 0; font-size: .82rem; line-height: 1.5; color: var(--critico);
  background: var(--critico-clara); border-radius: var(--raio-sm); padding: 9px 12px;
}

/* ---------- Depois de cadastrar ---------- */
.nu-sucesso {
  max-width: 720px; background: var(--sup); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra); padding: 32px 34px;
}
.nu-sucesso:focus { outline: none; }
.nu-sucesso-icone {
  width: 48px; height: 48px; border-radius: 50%; background: var(--bom); color: #fff;
  display: grid; place-items: center; font-size: 1.4rem; font-weight: 800; margin-bottom: 14px;
}
.nu-sucesso h2 { margin: 0 0 14px; font-size: 1.3rem; letter-spacing: -.01em; }
.nu-feito { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.nu-feito li { font-size: .88rem; line-height: 1.5; }
.nu-proximo {
  margin-top: 22px; padding: 16px 18px; border-radius: var(--raio-sm);
  background: var(--marca-clara); border: 1px solid transparent;
}
.nu-proximo h3 { margin: 0 0 6px; font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--marca-escura); }
.nu-proximo p { margin: 0 0 12px; font-size: .86rem; line-height: 1.5; }
.nu-proximo .nu-dica { margin: 10px 0 0; }
.nu-sucesso-acoes a.btn-v31 { text-decoration: none; }
/* Planilhas de disparo: estado em uma linha, âmbar só quando falta algo. */
.nu-planilhas { margin: 16px 0 0; font-size: .86rem; line-height: 1.5; padding: 10px 12px;
  border-radius: var(--raio-sm); background: var(--plano); border: 1px solid var(--linha); }
.nu-planilhas.atencao { background: var(--atencao-clara); border-color: transparent; color: var(--atencao); }
.nu-planilhas .nu-link { margin-left: 6px; }
.nu-sucesso-acoes { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
@media (max-width: 640px) { .nu-sucesso { padding: 22px 18px; } }

@media (prefers-reduced-motion: no-preference) {
  .nu-loja, .nu-canal-corpo, .nu-escolhido, .nu-sucesso { animation: nu-entrar .18s ease-out; }
  @keyframes nu-entrar { from { opacity: 0; transform: translateY(-3px); } }
}
@media (prefers-reduced-motion: reduce) {
  .nu-passo, .nu-input, .nu-canal { transition: none; }
}

/* ---------- Sócios e quem recebe os avisos (09/10/2026) ---------- */
.nu-socios { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--linha); display: flex; flex-direction: column; gap: 8px; }
.nu-socios > .nu-link { align-self: flex-start; }
.nu-socio {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.3fr) auto;
  gap: 8px; align-items: center;
}
@media (max-width: 640px) { .nu-socio { grid-template-columns: minmax(0, 1fr); } }
.nu-avisos { border: 0; padding: 0; margin: 8px 0 0; min-width: 0; }
.nu-avisos legend { padding: 0; margin-bottom: 6px; }
.nu-avisos-opcoes { display: flex; flex-direction: column; gap: 6px; }
.nu-aviso-op {
  display: flex; gap: 10px; align-items: center; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--linha); border-radius: var(--raio-sm); background: var(--sup); min-width: 0;
}
.nu-aviso-op input { width: 16px; height: 16px; accent-color: var(--marca); flex: none; margin: 0; }
.nu-aviso-op:has(input:checked) { border-color: var(--marca); background: var(--marca-clara); }
.nu-aviso-op b { font-size: .86rem; overflow-wrap: anywhere; }
.nu-aviso-op small { display: block; font-size: .76rem; color: var(--tinta-2); }
.nu-sugestao .nu-sugestao-acoes { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; min-width: 0; }