/* Cadastro — layout do fluxo, painel de marca, telas, andamento e perfil guiado. Só lê variáveis --ihit-* (tokens.css). */

/* ------------------------------------------------------------------ casca */
.shell { display: block; min-height: 100vh; }
.flow { display: flex; flex-direction: column; min-height: 100vh; width: 100%; max-width: 40rem; margin: 0 auto; }
.flow__header { display: flex; align-items: center; justify-content: space-between; gap: var(--ihit-space-3); padding: var(--ihit-space-3) var(--ihit-space-4); }
/* cabeçalho comum da Parte A (anexo §2.3): a linha de cima, o “Voltar” à esquerda, o “Passo n de 7” e a barra de progresso */
.flow__bar { display: grid; gap: var(--ihit-space-1); padding: 0 var(--ihit-space-4); }
.flow__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--ihit-space-3); min-height: 2.75rem; }
.flow__step { margin: 0 0 0 auto; font-family: var(--ihit-font-mono); font-size: var(--ihit-size-mono); color: var(--ihit-color-text-secondary); white-space: nowrap; }
.flow__progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--ihit-space-1); height: 0.375rem; margin: 0; }
.flow__progress span { background: var(--ihit-color-divider); border-radius: var(--ihit-radius-full); transition: background-color var(--ihit-duration-base) var(--ihit-ease-standard); }
.flow__progress span.is-done { background: var(--ihit-color-action); }
.flow__main { flex: 1; padding: var(--ihit-space-5) var(--ihit-space-4) var(--ihit-space-8); }
.flow__footer { display: grid; gap: var(--ihit-space-4); justify-items: start; padding: var(--ihit-space-6) var(--ihit-space-4) var(--ihit-space-10); border-top: 1px solid var(--ihit-color-divider); }
.flow__footer p { margin: 0; }
.flow__footer a { color: var(--ihit-color-link); }
.logo--assinatura { width: 9.25rem; }    /* 148 px: o mínimo da assinatura IHIT IA */

/* o símbolo de acessibilidade em destaque, com o texto “Acessibilidade” (LBI, art. 63, § 1º) — rodapé de toda tela */
.a11y-btn {
  display: inline-flex; align-items: center; gap: var(--ihit-space-3); min-height: 3rem; padding: 0.25rem var(--ihit-space-5) 0.25rem var(--ihit-space-3);
  border: 2px solid var(--ihit-color-control-border); border-radius: var(--ihit-radius-full); background: var(--ihit-color-surface); color: var(--ihit-color-text);
  font-weight: var(--ihit-weight-bold); font-size: var(--ihit-size-body); cursor: pointer;
}
.a11y-btn .icon { width: 1.75rem; height: 1.75rem; color: var(--ihit-color-action); }
@media (hover: hover) { .a11y-btn:hover { background: var(--ihit-color-surface-raised); } }

.brand-panel { display: none; }

@media (min-width: 960px) {
  .shell { display: grid; grid-template-columns: minmax(21rem, 30rem) 1fr; }
  .brand-panel {
    display: flex; flex-direction: column; justify-content: space-between; gap: var(--ihit-space-8);
    position: sticky; top: 0; height: 100vh; align-self: start; overflow: auto;
    padding: var(--ihit-space-10) var(--ihit-space-8);
    background: var(--ihit-color-heritage); color: var(--ihit-color-text);
  }
  .flow { max-width: 46rem; margin-inline: auto; padding-inline: var(--ihit-space-10); }
  .flow__header { padding-inline: 0; }
  .flow__bar { padding-inline: 0; }
  .flow__main { padding-inline: 0; }
  .flow__footer { padding-inline: 0; }
  .flow__header .logo-link { visibility: hidden; }   /* a assinatura já está no painel de marca */
}
.brand-panel .logo--assinatura { width: 15rem; }
.brand-panel__pitch { font-family: var(--ihit-font-display); font-weight: var(--ihit-weight-extrabold); font-stretch: var(--ihit-width-display); font-size: var(--ihit-size-display-2); line-height: 1.05; letter-spacing: var(--ihit-tracking-display-2); margin-top: var(--ihit-space-10); }
.brand-panel__symbol { width: 9rem; height: 9rem; }

/* ------------------------------------------------------------------ telas */
.screen { max-width: 34rem; animation: screen-in var(--ihit-duration-base) var(--ihit-ease-exit) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
.screen__head { display: grid; gap: var(--ihit-space-3); margin-bottom: var(--ihit-space-6); }
.screen__title { font-size: clamp(var(--ihit-size-title-2), 6.5vw, var(--ihit-size-title-1)); }
.screen__lead { color: var(--ihit-color-text-secondary); font-size: var(--ihit-size-body-lg); line-height: 1.5; }
.screen__lead strong { color: var(--ihit-color-text); }
.form > * + * { margin-top: var(--ihit-space-5); }
.screen > * + * { margin-top: var(--ihit-space-5); }
.screen > .screen__head { margin-top: 0; }
.screen > .back-button + .screen__head { margin-top: var(--ihit-space-2); }

.actions {
  position: sticky; bottom: 0; z-index: 5; display: flex; gap: var(--ihit-space-3); flex-wrap: wrap;
  margin: var(--ihit-space-8) calc(-1 * var(--ihit-space-4)) 0; padding: var(--ihit-space-3) var(--ihit-space-4) calc(var(--ihit-space-3) + env(safe-area-inset-bottom, 0px));
  background: var(--ihit-color-background); border-top: 1px solid var(--ihit-color-divider);
}
.actions .btn { flex: 1 1 10rem; }
.actions .btn--ghost { flex: 0 1 auto; }
/* uma coluna, celular primeiro (anexo §7): abaixo de 640 px nada fica lado a lado — os botões se empilham, na ordem em que se leem.
   A barra que fica colada embaixo é só a de UM botão; com dois ou mais, ela rola junto com a tela (não cobre as opções, WCAG 2.4.11). */
@media (max-width: 639px) {
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { flex: 0 0 auto; width: 100%; }
  .actions:has(> .btn ~ .btn) { position: static; margin-inline: 0; padding-inline: 0; border-top: 0; background: none; }
  .row--col-sm { flex-direction: column; align-items: stretch; }
  .row--col-sm > .btn { width: 100%; }
}
@media (min-width: 960px) {
  .actions { position: static; margin: var(--ihit-space-8) 0 0; padding: 0; border: 0; background: none; }
  .actions .btn { flex: 0 0 auto; min-width: 9rem; }     /* três botões (Voltar · Pular · Continuar) cabem na mesma linha */
}

.actions--static { position: static; margin: var(--ihit-space-6) 0 0; padding: 0; border: 0; background: none; }
.actions--static .btn { flex: 0 1 auto; min-width: 11rem; }
.choice-group-label { font-weight: var(--ihit-weight-bold); }
/* o botão que parece texto, dentro da frase (a alternativa de endereço); a linha de 24 px dá o alvo mínimo (WCAG 2.5.8) */
.link-inline { display: inline-block; min-height: 1.5rem; padding: 0 0.125rem; border: 0; background: none; color: var(--ihit-color-link); font: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.field__error .link-inline { color: var(--ihit-color-link); }
.why { display: grid; grid-template-columns: auto 1fr; gap: var(--ihit-space-3); padding: var(--ihit-space-3) var(--ihit-space-4); border-radius: var(--ihit-radius-md); background: var(--ihit-color-surface); color: var(--ihit-color-text); font-size: var(--ihit-size-body-sm); line-height: 1.45; }
.why .icon { color: var(--ihit-color-info); margin-top: 0.1rem; }
.status-line { display: flex; gap: var(--ihit-space-2); align-items: center; color: var(--ihit-color-text-secondary); font-size: var(--ihit-size-body-sm); min-height: 1.5rem; }
.status-line .icon { color: var(--ihit-color-info); }
.status-line.is-busy .icon { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ dados da empresa (Receita) */
.company { padding: var(--ihit-space-5); }
.company .kv dd { font-weight: var(--ihit-weight-regular); }
.company .kv dd.company__name { font-weight: var(--ihit-weight-bold); }
.company__source { margin-top: var(--ihit-space-4); padding-top: var(--ihit-space-3); border-top: 1px solid var(--ihit-color-divider); }
.edit-grid { display: grid; gap: var(--ihit-space-4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.edit-grid .field + .field { margin-top: 0; }
.edit-grid > .field { grid-column: span 12; }      /* celular: um campo por linha (anexo §7) */
@media (min-width: 640px) {
  .edit-grid .span-cep { grid-column: span 3; }
  .edit-grid .span-rua { grid-column: span 6; }
  .edit-grid .span-num { grid-column: span 3; }
  .edit-grid .span-compl, .edit-grid .span-bairro { grid-column: span 6; }
  .edit-grid .span-cidade { grid-column: span 8; }
  .edit-grid .span-uf { grid-column: span 4; }
}
.row--stack { display: grid; gap: var(--ihit-space-3); }
@media (min-width: 640px) { .row--stack { display: flex; flex-wrap: wrap; } }

/* ------------------------------------------------------------------ códigos (e-mail e WhatsApp) */
.code-meta { display: grid; gap: var(--ihit-space-3); }
.mock { display: grid; gap: var(--ihit-space-2); }
.mock__title { margin: 0; }
.bubble { display: inline-block; max-width: 100%; padding: var(--ihit-space-3) var(--ihit-space-4); background: var(--ihit-color-surface-raised); border-radius: var(--ihit-radius-encounter); color: var(--ihit-color-text); }
.bubble__code { display: block; margin-top: var(--ihit-space-1); font-family: var(--ihit-font-mono); font-size: var(--ihit-size-title-2); letter-spacing: 0.25em; font-weight: var(--ihit-weight-regular); }
.mail-mock { padding: var(--ihit-space-3) var(--ihit-space-4); border-radius: var(--ihit-radius-md); background: var(--ihit-color-surface-raised); }
.mail-mock dl { display: grid; gap: var(--ihit-space-1); margin: 0 0 var(--ihit-space-2); font-size: var(--ihit-size-body-sm); }
.mail-mock dl div { display: flex; gap: var(--ihit-space-2); }
.mail-mock dt { color: var(--ihit-color-text-secondary); min-width: 4rem; }
.mail-mock dd { margin: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ aceites (A7) */
.checks { display: grid; gap: var(--ihit-space-3); }

/* ------------------------------------------------------------------ andamento: recebemos → montando → pronto */
.status-symbol { width: 7.5rem; height: 7.5rem; }
.symbol { display: block; width: 100%; height: 100%; overflow: visible; }
.symbol .ihit-peca { fill: var(--ihit-pecas); transform-box: view-box; }
.symbol .ihit-ponto { fill: var(--ihit-ponto); transform-box: fill-box; transform-origin: center; }
.symbol .ihit-giro { transform-box: view-box; transform-origin: 120px 120px; }
.symbol[data-estado="conectando"] .ihit-peca-a { animation: ihit-encontro-a calc(var(--ihit-duration-encounter) * 2.5) var(--ihit-ease-exit) infinite; }
.symbol[data-estado="conectando"] .ihit-peca-b { animation: ihit-encontro-b calc(var(--ihit-duration-encounter) * 2.5) var(--ihit-ease-exit) infinite; }
.symbol[data-estado="pronto"] .ihit-ponto { animation: ihit-batida var(--ihit-duration-beat) var(--ihit-ease-beat) 1; }
@keyframes ihit-encontro-a { 0% { transform: translate(-36px, -36px); opacity: 0; } 40% { transform: translate(0, 0); opacity: 1; } 85% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(0, 0); opacity: 0; } }
@keyframes ihit-encontro-b { 0% { transform: translate(36px, 36px); opacity: 0; } 40% { transform: translate(0, 0); opacity: 1; } 85% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(0, 0); opacity: 0; } }
@keyframes ihit-batida { 0% { transform: scale(1); } 50% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes ihit-piscada { 0% { opacity: 1; } 100% { opacity: 0.45; } }
/* movimento reduzido: nada gira nem se desloca; o Ponto pisca devagar enquanto há trabalho (guia da marca, seção 9) */
@media (prefers-reduced-motion: reduce) {
  .symbol .ihit-peca-a, .symbol .ihit-peca-b { animation: none !important; opacity: 1 !important; transform: none !important; }
  .symbol[data-estado="conectando"] .ihit-ponto { animation: ihit-piscada var(--ihit-duration-blink) steps(2, jump-none) infinite !important; }
  .symbol[data-estado="pronto"] .ihit-ponto { animation: none !important; }
}
html[data-motion="reduce"] .symbol .ihit-peca-a, html[data-motion="reduce"] .symbol .ihit-peca-b { animation: none !important; opacity: 1 !important; transform: none !important; }
html[data-motion="reduce"] .symbol[data-estado="conectando"] .ihit-ponto { animation: ihit-piscada var(--ihit-duration-blink) steps(2, jump-none) infinite !important; }
html[data-motion="reduce"] .symbol[data-estado="pronto"] .ihit-ponto { animation: none !important; }

.timeline { list-style: none; display: grid; gap: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--ihit-space-3); padding-bottom: var(--ihit-space-5); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 1rem; top: 2.1rem; bottom: 0.1rem; width: 2px; background: var(--ihit-color-divider); }
.timeline li:last-child::before { display: none; }
.timeline__dot { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 2px solid var(--ihit-color-control-border); border-radius: 50%; background: var(--ihit-color-background); color: var(--ihit-color-text-secondary); }
.timeline li.is-done .timeline__dot { background: var(--ihit-color-success); border-color: var(--ihit-color-success); color: var(--ihit-color-on-success); }
.timeline li.is-current .timeline__dot { border-color: var(--ihit-color-action); color: var(--ihit-color-action); }
.timeline li.is-current .timeline__dot::after { content: ""; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--ihit-color-action); }
.timeline__title { font-weight: var(--ihit-weight-bold); }
.timeline__text { color: var(--ihit-color-text-secondary); font-size: var(--ihit-size-body-sm); line-height: 1.45; }
.link-card__url { display: block; margin: var(--ihit-space-2) 0 var(--ihit-space-4); padding: var(--ihit-space-3) var(--ihit-space-4); border: 2px solid var(--ihit-color-control-border); border-radius: var(--ihit-radius-md); background: var(--ihit-color-background); font-family: var(--ihit-font-mono); font-size: var(--ihit-size-body); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ perfil guiado (Parte B) */
.meter { height: 0.5rem; border-radius: var(--ihit-radius-full); background: var(--ihit-color-surface); box-shadow: inset 0 0 0 1px var(--ihit-color-control-border); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--ihit-color-action); border-radius: var(--ihit-radius-full); transition: width var(--ihit-duration-base) var(--ihit-ease-standard); }
.profile-head { display: grid; gap: var(--ihit-space-2); margin-bottom: var(--ihit-space-5); }
.profile-head__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ihit-space-3); flex-wrap: wrap; }
.saved { display: inline-flex; align-items: center; gap: var(--ihit-space-1); color: var(--ihit-color-success); font-weight: var(--ihit-weight-bold); font-size: var(--ihit-size-body-sm); min-height: 1.25rem; }
.choices-set legend { display: block; width: 100%; }
.choices-set legend .screen__title { display: block; }

.doc-text { max-height: 40vh; overflow: auto; padding: var(--ihit-space-3) var(--ihit-space-4); border: 1px solid var(--ihit-color-divider); border-radius: var(--ihit-radius-md); background: var(--ihit-color-background); }