/* =============================================================
   SEMOG · Admin Tahoe — Onboarding (camada do Onboarding)

   USE: depois de tokens.css, pills.css e tahoe.css. Tudo aqui vive sob
   `.tahoe-shell` — e sob `.tahoe-portal`, o contêiner de portal de menu,
   popover e diálogo —, como o resto do kit. Comportamento em
   onboarding.js; contas (progresso, urgência, o que está à vista) em
   onboarding-core.js.

   O Onboarding é montado com os componentes do kit (.tk-*, em
   componentes.css): lista agrupada, etapas, diálogo → sheet, botão,
   pílula, status, esqueleto e estados de tela. Este arquivo IMPORTA
   componentes.css, como prestacao.css faz. Aqui fica só o que é do
   Onboarding: marca e progresso do condomínio, a fila "Próximas ações" ao
   lado de "Em implantação", o detalhe com a lista de departamentos e a
   navegação em pilha do celular, a faixa da data de corte, o fluxo "Novo
   onboarding", o quadro, a dupla checagem da convenção, a régua de
   comunicação e a barra de estados do protótipo.

   As mesmas duas regras de componentes.css: tipografia só pelos papéis
   --type-*, cor só por token semântico (Tier 3), sem literal nenhum —
   hover e pressionado usam os lavados --tk-lavado*.

   Prefixo .onb-*: o tahoe.css já tem .onb-item, .onb-tick, .onb-section,
   .onb-progress, .onb-type, .onb-cutover e .onb-choice (o checklist da
   0.17.0, que outras telas ainda usam). Nenhuma classe daqui repete um
   desses nomes.

   CLASSE DOBRADA (`.onb-st.onb-st`): componentes.css pode ser importado
   mais de uma vez (prestacao.css também o importa); a cópia que chega
   depois destas regras ganharia um empate pela ordem. Regra daqui que
   sobrescreve um componente dobra a própria classe e vence por
   especificidade, em qualquer ordem — tests/camadas-especificidade.test.js
   trava.
   ============================================================= */
@import "./componentes.css";

/* ─────────── Sprite de ícones ───────────
   O <svg> com os <symbol> fica no fim do .tahoe-shell. Sem caixa, mas não
   display:none — <use> precisa do símbolo renderizável. */
:is(.tahoe-shell,.tahoe-portal) .onb-sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* ─────────── Marca, avatar e ícone de estado ─────────── */
/* Sigla do condomínio na coluna de avatar (32px) das .tk-linha. */
:is(.tahoe-shell,.tahoe-portal) .onb-marca,
:is(.tahoe-shell,.tahoe-portal) .onb-av{
  width:32px;height:32px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--type-num-font);font-size:var(--type-meta-size);font-weight:600;
}
:is(.tahoe-shell,.tahoe-portal) .onb-marca{border-radius:var(--radius-sm);background:var(--link-soft);color:var(--link);}
:is(.tahoe-shell,.tahoe-portal) .onb-av{border-radius:var(--radius-pill);background:var(--bg);color:var(--fg-muted);box-shadow:inset 0 0 0 1px var(--border);}

/* Ícone de estado na coluna .ic da linha: a cor é o estado. */
:is(.tahoe-shell,.tahoe-portal) .tk-linha > .ic[data-onb-estado="feito"]{color:var(--success);}
:is(.tahoe-shell,.tahoe-portal) .tk-linha > .ic[data-onb-estado="pendente"],
:is(.tahoe-shell,.tahoe-portal) .tk-linha > .ic[data-onb-estado="normal"]{color:var(--fg-subtle);}
:is(.tahoe-shell,.tahoe-portal) .tk-linha > .ic[data-onb-estado="atrasado"]{color:var(--danger-fg);}
:is(.tahoe-shell,.tahoe-portal) .tk-linha > .ic[data-onb-estado="andamento"],
:is(.tahoe-shell,.tahoe-portal) .tk-linha > .ic[data-onb-estado="hoje"]{color:var(--info-fg);}
:is(.tahoe-shell,.tahoe-portal) .tk-linha > .ic[data-onb-estado="revisar"],
:is(.tahoe-shell,.tahoe-portal) .tk-linha > .ic[data-onb-estado="atencao"],
:is(.tahoe-shell,.tahoe-portal) .tk-linha > .ic[data-onb-estado="desconhecido"]{color:var(--warning-fg);}
/* Item feito: o nome esmaece, o check verde diz o resto. */
:is(.tahoe-shell,.tahoe-portal) .tk-linha[data-onb-estado="feito"] .tk-linha-nome{color:var(--fg-muted);}
/* O chevron de "abre" aponta para a direita. */
:is(.tahoe-shell,.tahoe-portal) .tk-linha-fim .onb-seta{transform:rotate(-90deg);}

/* Texto de status dentro da meta de uma linha. */
:is(.tahoe-shell,.tahoe-portal) .onb-st.onb-st{color:var(--fg-muted);}
:is(.tahoe-shell,.tahoe-portal) .onb-st[data-tom="erro"]{color:var(--danger-fg);}
:is(.tahoe-shell,.tahoe-portal) .onb-st[data-tom="aviso"]{color:var(--warning-fg);}
:is(.tahoe-shell,.tahoe-portal) .onb-st[data-tom="info"]{color:var(--info-fg);}
:is(.tahoe-shell,.tahoe-portal) .onb-st[data-tom="sucesso"]{color:var(--success-fg);}

/* ─────────── Progresso ───────────
   Barra fina (processo) e anel (departamento). O anel é SVG: o arco é um
   círculo com pathLength=100 e stroke-dasharray="<pct> 100". */
:is(.tahoe-shell,.tahoe-portal) .onb-pct{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-barra{display:inline-block;width:120px;max-width:100%;height:4px;flex:none;border-radius:var(--radius-pill);background:var(--border);overflow:hidden;}
:is(.tahoe-shell,.tahoe-portal) .onb-barra > i{display:block;height:100%;border-radius:inherit;background:var(--link);}
:is(.tahoe-shell,.tahoe-portal) .onb-barra[data-completo] > i{background:var(--success);}
:is(.tahoe-shell,.tahoe-portal) .onb-anel{width:20px;height:20px;flex:none;transform:rotate(-90deg);}
:is(.tahoe-shell,.tahoe-portal) .onb-anel circle{fill:none;stroke-width:3;}
:is(.tahoe-shell,.tahoe-portal) .onb-anel .trilho{stroke:var(--border);}
:is(.tahoe-shell,.tahoe-portal) .onb-anel .arco{stroke:var(--success);stroke-linecap:round;}
/* 0%: sem arco (o linecap desenharia um ponto). */
:is(.tahoe-shell,.tahoe-portal) .onb-anel[data-vazio] .arco{display:none;}

/* ─────────── Cabeçalho de bloco dentro de card ─────────── */
:is(.tahoe-shell,.tahoe-portal) .onb-bloco-h.onb-bloco-h{display:flex;flex-direction:column;gap:2px;min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-bloco-h > .tk-t-title{overflow-wrap:anywhere;}
:is(.tahoe-shell,.tahoe-portal) .onb-bloco-h > .tk-pill{align-self:flex-start;margin-top:var(--space-1);}
:is(.tahoe-shell,.tahoe-portal) .onb-cab-hub{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3) var(--space-4);flex-wrap:wrap;}
:is(.tahoe-shell,.tahoe-portal) .onb-cab-hub .onb-bloco-h{flex:1 1 280px;}

/* Selo "Dados de demonstração" no toolbar. */
:is(.tahoe-shell,.tahoe-portal) .onb-demo{flex:none;}

/* Filtro de tipo (lente): .seg do kit, com a contagem ao lado do rótulo. Numa
   pilha (flex em coluna) ela esticaria: fica na largura do conteúdo. */
:is(.tahoe-shell,.tahoe-portal) .onb-lente{align-self:flex-start;max-width:100%;}
:is(.tahoe-shell,.tahoe-portal) .onb-lente button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
:is(.tahoe-shell,.tahoe-portal) .onb-lente button:focus-visible{outline:2px solid var(--link);outline-offset:1px;}
:is(.tahoe-shell,.tahoe-portal) .onb-lente button:active{background:var(--tk-lavado-forte);}
:is(.tahoe-shell,.tahoe-portal) .onb-lente .tk-num{color:var(--fg-muted);}
:is(.tahoe-shell,.tahoe-portal) .onb-lente button.on .tk-num{color:var(--fg);}

/* ─────────── Hub: Próximas ações ao lado de Em implantação ─────────── */
:is(.tahoe-shell,.tahoe-portal) .onb-hub{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--tk-v-secao);align-items:start;}
:is(.tahoe-shell,.tahoe-portal) .onb-hub > .onb-lista-ios,
:is(.tahoe-shell,.tahoe-portal) .onb-cartao-bloco{padding:var(--space-5);}
/* Linha de processo: prazo e progresso na meta; a barra ocupa a largura da meta. */
:is(.tahoe-shell,.tahoe-portal) .onb-proc .onb-pct{margin-top:2px;}
:is(.tahoe-shell,.tahoe-portal) .onb-proc .onb-pct .tk-num{font-size:var(--type-meta-size);line-height:var(--type-meta-leading);color:var(--fg-muted);}
/* Filtro sem resultado dentro de um bloco. */
:is(.tahoe-shell,.tahoe-portal) .onb-nada{margin:0;padding:var(--space-3);}
@media (max-width:1099.98px){
  :is(.tahoe-shell,.tahoe-portal) .onb-hub{grid-template-columns:minmax(0,1fr);}
}

/* ─────────── Detalhe: cabeçalho, fases e data de corte ─────────── */
:is(.tahoe-shell,.tahoe-portal) .onb-det{display:flex;flex-direction:column;gap:var(--tk-v-secao);min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-det-topo{display:flex;flex-direction:column;gap:var(--tk-v-bloco);min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-fases{padding:var(--space-4) var(--space-5);}
:is(.tahoe-shell,.tahoe-portal) .onb-cab-prog{display:inline-flex;align-items:center;gap:var(--space-2);}

/* Data de corte (só na transição): dois lados e a seta no meio. */
:is(.tahoe-shell,.tahoe-portal) .onb-corte{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--space-4);
  padding:var(--space-4) var(--space-5);
}
:is(.tahoe-shell,.tahoe-portal) .onb-corte-lado{display:flex;flex-direction:column;gap:2px;min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-corte-lado .quem{
  font-size:var(--type-body-size);line-height:var(--type-body-leading);font-weight:600;overflow-wrap:anywhere;
}
:is(.tahoe-shell,.tahoe-portal) .onb-corte-lado .data{
  font-family:var(--type-num-font);font-size:var(--type-page-size);line-height:var(--type-page-leading);
  font-weight:500;font-variant-numeric:var(--type-num-variant);
}
:is(.tahoe-shell,.tahoe-portal) .onb-corte-lado.nosso .data{color:var(--link);}
:is(.tahoe-shell,.tahoe-portal) .onb-corte-seta{
  width:32px;height:32px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;
  background:var(--bg-soft);color:var(--fg-muted);
}
:is(.tahoe-shell,.tahoe-portal) .onb-corte-seta .tk-i{width:16px;height:16px;}

/* ─────────── Detalhe: departamentos × checklist ───────────
   Desktop: a lista de departamentos à esquerda e o departamento aberto à
   direita. Abaixo de 768px, pilha: sem departamento no hash a tela é a
   lista; com ele, a tela é o departamento — e o título dele vira o título
   da página. O `data-dep` na raiz diz qual das duas está à vista. */
:is(.tahoe-shell,.tahoe-portal) .onb-det-corpo{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--tk-v-secao);align-items:start;}
:is(.tahoe-shell,.tahoe-portal) .onb-deps{padding:var(--space-4);position:sticky;top:var(--space-4);}
:is(.tahoe-shell,.tahoe-portal) .onb-painel{padding:var(--space-5);min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-painel-h{display:flex;flex-direction:column;gap:2px;min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-painel-t{
  margin:0;font-family:var(--type-title-font);font-size:var(--type-title-size);font-weight:var(--type-title-weight);
  line-height:var(--type-title-leading);letter-spacing:var(--type-title-tracking);overflow-wrap:anywhere;
}
:is(.tahoe-shell,.tahoe-portal) .onb-painel-h .tk-t-meta{max-width:620px;}
/* O departamento aberto, na lista do desktop. */
:is(.tahoe-shell,.tahoe-portal) .onb-dep-linha[data-atual]{background:var(--bg);box-shadow:inset 0 0 0 1px var(--border-strong);}
:is(.tahoe-shell,.tahoe-portal) .onb-dep-linha[data-atual] .tk-linha-nome{font-weight:600;}
:is(.tahoe-shell,.tahoe-portal) .tk-linhas > .onb-dep-linha[data-atual]::before,
:is(.tahoe-shell,.tahoe-portal) .tk-linhas > .onb-dep-linha[data-atual] + .tk-linha::before{opacity:0;}

/* Regras lidas pela IA, dentro da linha do item. */
:is(.tahoe-shell,.tahoe-portal) .onb-regras{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-1);}
:is(.tahoe-shell,.tahoe-portal) .onb-regras .tk-pill{white-space:normal;}

@media (max-width:1023.98px){
  :is(.tahoe-shell,.tahoe-portal) .onb-det-corpo{grid-template-columns:260px minmax(0,1fr);}
}
@media (max-width:767.98px){
  :is(.tahoe-shell,.tahoe-portal) .onb-det-corpo{display:block;}
  :is(.tahoe-shell,.tahoe-portal) .onb-deps{position:static;}
  :is(.tahoe-shell,.tahoe-portal) .onb-det:not([data-dep]) .onb-painel,
  :is(.tahoe-shell,.tahoe-portal) .onb-det[data-dep] .onb-det-topo,
  :is(.tahoe-shell,.tahoe-portal) .onb-det[data-dep] .onb-deps{display:none;}
  :is(.tahoe-shell,.tahoe-portal) .onb-dep-linha[data-atual]{background:transparent;box-shadow:none;}
  :is(.tahoe-shell,.tahoe-portal) .onb-dep-linha[data-atual] .tk-linha-nome{font-weight:500;}
  :is(.tahoe-shell,.tahoe-portal) .tk-linhas > .onb-dep-linha.onb-dep-linha[data-atual]::before,
  :is(.tahoe-shell,.tahoe-portal) .tk-linhas > .onb-dep-linha[data-atual] + .tk-linha::before{opacity:1;}
  :is(.tahoe-shell,.tahoe-portal) .onb-det[data-dep] .onb-painel-t{
    font-family:var(--type-page-font);font-size:var(--type-page-size);font-weight:var(--type-page-weight);
    line-height:var(--type-page-leading);letter-spacing:var(--type-page-tracking);
  }
  :is(.tahoe-shell,.tahoe-portal) .onb-fases{padding:var(--space-4);}
  :is(.tahoe-shell,.tahoe-portal) .onb-corte{grid-template-columns:minmax(0,1fr);gap:var(--space-2);padding:var(--space-4);}
  :is(.tahoe-shell,.tahoe-portal) .onb-corte-seta{transform:rotate(90deg);}
}

/* ─────────── Celular: listas agrupadas no estilo iOS ───────────
   O grupo é a superfície branca sobre a página, sem o card em volta (que
   roubava 32px de largura em cada lado). Vale para os blocos do hub, a
   lista de departamentos e o departamento aberto. */
@media (max-width:767.98px){
  :is(.tahoe-shell,.tahoe-portal) .card.onb-lista-ios{padding:0;background:transparent;box-shadow:none;border-radius:0;}
  :is(.tahoe-shell,.tahoe-portal) .onb-lista-ios .tk-linhas{background:var(--bg);box-shadow:0 0 0 1px var(--hairline-section), var(--shadow-1);}
  :is(.tahoe-shell,.tahoe-portal) .onb-lista-ios .tk-grupo-h,
  :is(.tahoe-shell,.tahoe-portal) .onb-lista-ios > .onb-bloco-h,
  :is(.tahoe-shell,.tahoe-portal) .onb-lista-ios > .onb-painel-h{padding:0 var(--space-3);}
  :is(.tahoe-shell,.tahoe-portal) .onb-lista-ios .onb-sk-lista{background:var(--bg);border-radius:var(--radius-md);box-shadow:0 0 0 1px var(--hairline-section), var(--shadow-1);}
  :is(.tahoe-shell,.tahoe-portal) .onb-lente button{min-height:var(--tk-alvo);height:auto;}
  /* Toolbar da lista: "Novo onboarding" vira só o ícone (44×44). */
  :is(.tahoe-shell,.tahoe-portal) .onb-novo-btn{width:44px;padding:0;justify-content:center;}
  :is(.tahoe-shell,.tahoe-portal) .onb-novo-btn > .rot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}

/* Esqueleto do hub: a caixa do grupo com linhas na altura das reais (74px
   a ação, com três linhas de texto; 95px o processo, com a barra), para
   nada saltar quando os dados chegam. */
:is(.tahoe-shell,.tahoe-portal) .onb-sk-lista{padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);background:var(--bg-soft);}
:is(.tahoe-shell,.tahoe-portal) .onb-sk-lista .tk-sk-item{min-height:74px;}
:is(.tahoe-shell,.tahoe-portal) .onb-sk-lista.alto .tk-sk-item{min-height:95px;}
:is(.tahoe-shell,.tahoe-portal) .onb-sk-lista .tk-sk-marca{background:var(--tk-lavado-forte);}
:is(.tahoe-shell,.tahoe-portal) .tk-sk-linha.onb-sk-resumo.onb-sk-resumo{display:block;width:240px;max-width:100%;}

/* ─────────── Diálogo do item ─────────── */
:is(.tahoe-shell,.tahoe-portal) .onb-dlg-contexto{margin:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-opcoes{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:2px;min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-opcoes > legend{
  padding:0;margin-bottom:var(--space-1);
  font-size:var(--type-meta-size);line-height:var(--type-meta-leading);font-weight:600;color:var(--fg-muted);
}
:is(.tahoe-shell,.tahoe-portal) .onb-opcao{
  display:flex;align-items:center;gap:var(--space-3);min-height:var(--tk-alvo);padding:0 var(--space-2);
  border-radius:var(--radius-sm);cursor:pointer;-webkit-tap-highlight-color:transparent;
  font-size:var(--type-body-size);line-height:var(--type-body-leading);
}
:is(.tahoe-shell,.tahoe-portal) .onb-opcao:hover{background:var(--tk-lavado);}
:is(.tahoe-shell,.tahoe-portal) .onb-opcao:active{background:var(--tk-lavado-forte);}
:is(.tahoe-shell,.tahoe-portal) .onb-opcao:has(input:focus-visible){outline:2px solid var(--link);outline-offset:-2px;}
:is(.tahoe-shell,.tahoe-portal) .onb-opcao input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--link);}
/* Campo com sufixo ("de cada mês", "%"). */
:is(.tahoe-shell,.tahoe-portal) .onb-sufixo{display:flex;align-items:center;gap:var(--space-2);min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-sufixo .tk-input{max-width:160px;}
:is(.tahoe-shell,.tahoe-portal) .onb-sufixo > span{color:var(--fg-muted);font-size:var(--type-body-size);}
/* Credencial guardada: chave e valor. */
:is(.tahoe-shell,.tahoe-portal) .onb-kv{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-1) var(--space-3);}
:is(.tahoe-shell,.tahoe-portal) .onb-kv dt{color:var(--fg-muted);font-size:var(--type-meta-size);line-height:var(--type-body-leading);}
:is(.tahoe-shell,.tahoe-portal) .onb-kv dd{margin:0;font-size:var(--type-body-size);line-height:var(--type-body-leading);overflow-wrap:anywhere;}
/* Formulários dos diálogos: duas colunas no desktop. */
:is(.tahoe-shell,.tahoe-portal) .onb-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);}
:is(.tahoe-shell,.tahoe-portal) .onb-campos > .largo{grid-column:1 / -1;}
@media (max-width:767.98px){
  :is(.tahoe-shell,.tahoe-portal) .onb-campos{grid-template-columns:minmax(0,1fr);}
}

/* ─────────── Novo onboarding ─────────── */
:is(.tahoe-shell,.tahoe-portal) .onb-novo{max-width:840px;}
:is(.tahoe-shell,.tahoe-portal) .onb-novo.onb-novo > .card{padding:var(--space-5);}
:is(.tahoe-shell,.tahoe-portal) .onb-fs{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:var(--tk-v-item);min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-fs > legend{padding:0;margin-bottom:var(--tk-v-item);}
:is(.tahoe-shell,.tahoe-portal) .onb-radio .ic input{width:20px;height:20px;margin:0;accent-color:var(--link);}
:is(.tahoe-shell,.tahoe-portal) .onb-radio:has(input:checked){background:var(--link-soft);}
:is(.tahoe-shell,.tahoe-portal) .onb-radio:has(input:focus-visible){outline:2px solid var(--link);outline-offset:-2px;}
:is(.tahoe-shell,.tahoe-portal) .onb-radio .tk-linha-alvo{cursor:pointer;}
:is(.tahoe-shell,.tahoe-portal) .onb-passo[hidden]{display:none;}
/* Seção de formulário (passo 2): o título do grupo é título, não rótulo
   de campo — corpo 14/600 na cor do texto do título do passo (herdada,
   não o cinza meta) e 16px até os campos (regra G:
   16 entre blocos; os rótulos ficam a 8 do campo). Entre seções, os 24 do
   .tk-pilha.larga. O .tk-grupo das listas continua com o rótulo meta. */
:is(.tahoe-shell,.tahoe-portal) .onb-form-grupo.onb-form-grupo{gap:var(--tk-v-bloco);}
:is(.tahoe-shell,.tahoe-portal) .onb-form-grupo > .tk-grupo-h .tk-grupo-t{
  font-size:var(--type-body-size);line-height:var(--type-body-leading);letter-spacing:var(--type-body-tracking);
  font-weight:600;color:inherit;
}
/* Mês e ano lado a lado, também no celular (dois seletores curtos). */
:is(.tahoe-shell,.tahoe-portal) .onb-mes-ano{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-2);}
@media (max-width:767.98px){
  :is(.tahoe-shell,.tahoe-portal) .onb-novo.onb-novo > .card{padding:var(--space-4);}
}

/* ─────────── Quadro (kanban) ───────────
   As colunas rolam de lado DENTRO do quadro, no celular também (é
   intencional: cada coluna mantém a largura de leitura). A página não rola
   de lado. */
:is(.tahoe-shell,.tahoe-portal) .onb-quadro{
  display:flex;align-items:flex-start;gap:var(--space-4);overflow-x:auto;overscroll-behavior-x:contain;
  padding-bottom:var(--space-2);scroll-snap-type:x proximity;
}
:is(.tahoe-shell,.tahoe-portal) .onb-quadro:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:var(--radius-md);}
:is(.tahoe-shell,.tahoe-portal) .onb-coluna{
  flex:1 0 240px;min-width:0;display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-2);border-radius:var(--radius-md);background:var(--bg-soft);scroll-snap-align:start;
}
:is(.tahoe-shell,.tahoe-portal) .onb-coluna-h{
  display:flex;align-items:center;gap:var(--space-2);min-height:36px;padding:0 var(--space-2);margin:0;
  font-size:var(--type-meta-size);line-height:var(--type-meta-leading);font-weight:600;color:var(--fg-muted);
}
:is(.tahoe-shell,.tahoe-portal) .onb-coluna-h .tk-num{margin-left:auto;}
:is(.tahoe-shell,.tahoe-portal) .onb-ponto{width:8px;height:8px;flex:none;border-radius:var(--radius-pill);background:var(--fg-subtle);}
:is(.tahoe-shell,.tahoe-portal) .onb-ponto[data-tom="info"]{background:var(--info);}
:is(.tahoe-shell,.tahoe-portal) .onb-ponto[data-tom="aviso"]{background:var(--warning);}
:is(.tahoe-shell,.tahoe-portal) .onb-ponto[data-tom="sucesso"]{background:var(--success);}
:is(.tahoe-shell,.tahoe-portal) .onb-cartoes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-2);}
:is(.tahoe-shell,.tahoe-portal) .onb-cartao{
  position:relative;display:flex;flex-direction:column;gap:var(--space-2);min-height:44px;padding:var(--space-3);
  border-radius:var(--radius-sm);background:var(--bg);color:inherit;text-decoration:none;
  box-shadow:0 0 0 1px var(--hairline-section), var(--shadow-1);
  transition:background-color 120ms ease;-webkit-tap-highlight-color:transparent;
}
:is(.tahoe-shell,.tahoe-portal) .onb-cartao:hover{background:var(--bg-soft);}
:is(.tahoe-shell,.tahoe-portal) .onb-cartao:active{background:var(--tk-lavado-forte);}
:is(.tahoe-shell,.tahoe-portal) .onb-cartao:focus-visible{outline:2px solid var(--link);outline-offset:2px;}
/* Impedimento: um traço de erro à esquerda, sem borda dura em volta. */
:is(.tahoe-shell,.tahoe-portal) .onb-cartao[data-tom="erro"]{box-shadow:inset 3px 0 0 var(--danger), 0 0 0 1px var(--hairline-section), var(--shadow-1);}
:is(.tahoe-shell,.tahoe-portal) .onb-cartao-topo{display:flex;align-items:center;gap:var(--space-3);min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-cartao-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-cartao-nome{font-size:var(--type-body-size);line-height:var(--type-body-leading);font-weight:500;color:var(--fg);overflow-wrap:anywhere;}
:is(.tahoe-shell,.tahoe-portal) .onb-cartao-pe{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-1) var(--space-2);min-width:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-cartao-pe .onb-av{width:24px;height:24px;}
:is(.tahoe-shell,.tahoe-portal) .onb-cartao .onb-barra{flex:1;width:auto;}
@media (max-width:767.98px){
  :is(.tahoe-shell,.tahoe-portal) .onb-coluna{flex:0 0 min(280px, calc(100vw - 64px));}
}
@media (prefers-reduced-motion:reduce){
  :is(.tahoe-shell,.tahoe-portal) .onb-cartao{transition:none;}
}

/* ─────────── Dupla checagem da convenção ───────────
   Desktop: as regras à esquerda e o documento à direita, preso ao rolar.
   Celular: as regras primeiro; o documento num disclosure abaixo. */
:is(.tahoe-shell,.tahoe-portal) .onb-conv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--tk-v-secao);align-items:start;}
:is(.tahoe-shell,.tahoe-portal) .onb-conv-doc{position:sticky;top:var(--space-4);padding:var(--space-5);max-height:calc(100vh - 32px);overflow:auto;}
:is(.tahoe-shell,.tahoe-portal) .onb-doc.onb-doc{display:flex;flex-direction:column;gap:var(--space-3);font-size:var(--type-body-size);line-height:var(--type-body-leading);}
:is(.tahoe-shell,.tahoe-portal) .onb-doc h3{margin:var(--space-2) 0 0;font-size:var(--type-body-size);line-height:var(--type-body-leading);font-weight:600;}
:is(.tahoe-shell,.tahoe-portal) .onb-doc p{margin:0;}
:is(.tahoe-shell,.tahoe-portal) .onb-doc .onb-doc-falta{color:var(--danger-fg);}
:is(.tahoe-shell,.tahoe-portal) .onb-trecho{
  border-radius:4px;padding:0 2px;background:var(--warning-soft);box-shadow:0 0 0 1px var(--warning-border);
  transition:background-color 180ms ease, box-shadow 180ms ease;
}
:is(.tahoe-shell,.tahoe-portal) .onb-trecho[data-ativo]{background:var(--link-soft);box-shadow:0 0 0 2px var(--link);}
:is(.tahoe-shell,.tahoe-portal) .onb-conv-doc-cel{display:none;}
@media (max-width:1099.98px){
  :is(.tahoe-shell,.tahoe-portal) .onb-conv{grid-template-columns:minmax(0,1fr);}
  :is(.tahoe-shell,.tahoe-portal) .onb-conv-doc{position:static;max-height:none;}
}
@media (max-width:767.98px){
  :is(.tahoe-shell,.tahoe-portal) .onb-conv-doc{padding:var(--space-4);}
}
@media (prefers-reduced-motion:reduce){
  :is(.tahoe-shell,.tahoe-portal) .onb-trecho{transition:none;}
}

/* ─────────── Régua de comunicação ───────────
   Largura toda, como as outras telas do Onboarding. A partir de 1100px os
   marcos vão em duas colunas, na ordem de leitura (T-30 · T-15 / T-10 ·
   T-5 / T-1 · go-live): cada marco tem uma linha só, e numa coluna única a
   1440 a linha ficava com mais de 1000px e a metade direita vazia. */
@media (min-width:1100px){
  :is(.tahoe-shell,.tahoe-portal) .onb-regua .onb-regua-marcos:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tk-v-secao);align-items:start;}
}
:is(.tahoe-shell,.tahoe-portal) .onb-dlg-msg.onb-dlg-msg{min-height:140px;}

/* ─────────── Barra de estados do protótipo ───────────
   NÃO é produto: faixa escura rotulada "Protótipo · estado", presa embaixo,
   montada pelo onboarding.js a partir de [data-onb-proto]. Mesmo contrato
   da barra da Prestação (docs/prestacao-redesenho.md), com o mesmo recolher
   (TahoeKit.recolheBarra): recolhida, vira um botão no fim da página. */
.tahoe-shell.onb-com-proto .main{padding-bottom:72px;}
.tahoe-shell.onb-com-proto{position:relative;}
:is(.tahoe-shell,.tahoe-portal) .onb-proto{
  position:fixed;left:50%;bottom:16px;z-index:60;transform:translateX(-50%);
  display:flex;align-items:center;gap:var(--space-2);max-width:calc(100vw - 32px);
  padding:6px 6px 6px var(--space-4);border-radius:var(--radius-pill);
  background:var(--bg-inverse);color:var(--fg-inverse);
  box-shadow:var(--shadow-4), 0 0 0 1px var(--tk-veu);
  font-size:var(--type-meta-size);line-height:var(--type-meta-leading);
}
:is(.tahoe-shell,.tahoe-portal) .onb-proto .lbl{font-weight:600;white-space:nowrap;}
:is(.tahoe-shell,.tahoe-portal) .onb-proto select{
  min-height:32px;min-width:0;flex:0 1 auto;padding:0 var(--space-3);border:0;border-radius:var(--radius-pill);
  background:var(--bg);color:var(--link);cursor:pointer;
  font-family:var(--type-label-font);font-size:var(--type-label-size);font-weight:var(--type-label-weight);
}
:is(.tahoe-shell,.tahoe-portal) .onb-proto select:focus-visible{outline:2px solid var(--link-soft);outline-offset:2px;}
:is(.tahoe-shell,.tahoe-portal) .onb-proto .erro{color:var(--danger-soft);font-weight:600;}
:is(.tahoe-shell,.tahoe-portal) .onb-proto .recolhe{
  width:32px;height:32px;flex:none;padding:0;border:0;border-radius:var(--radius-pill);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;background:transparent;color:inherit;
}
:is(.tahoe-shell,.tahoe-portal) .onb-proto .recolhe:hover{background:color-mix(in srgb, var(--fg-inverse) 12%, transparent);}
:is(.tahoe-shell,.tahoe-portal) .onb-proto .recolhe:focus-visible{outline:2px solid var(--link-soft);outline-offset:1px;}
:is(.tahoe-shell,.tahoe-portal) .onb-proto .recolhe svg{width:16px;height:16px;}
/* Recolhida: só o botão, fora do fixo — mora na faixa de 72px do fim da
   página e não cobre o que passa por baixo durante a rolagem. */
:is(.tahoe-shell,.tahoe-portal) .onb-proto.recolhida{position:absolute;left:auto;right:16px;bottom:16px;transform:none;padding:6px;}
:is(.tahoe-shell,.tahoe-portal) .onb-proto.recolhida .lbl,
:is(.tahoe-shell,.tahoe-portal) .onb-proto.recolhida select{display:none;}
@media (max-width:767.98px){
  :is(.tahoe-shell,.tahoe-portal) .onb-proto select{min-height:44px;}
  :is(.tahoe-shell,.tahoe-portal) .onb-proto .recolhe{width:44px;height:44px;}
}
@media (forced-colors:active){
  :is(.tahoe-shell,.tahoe-portal) .onb-proto,
  :is(.tahoe-shell,.tahoe-portal) .onb-cartao,
  :is(.tahoe-shell,.tahoe-portal) .onb-coluna{border:1px solid CanvasText;}
  :is(.tahoe-shell,.tahoe-portal) .onb-dep-linha[data-atual]{outline:2px solid Highlight;outline-offset:-2px;}
}