/* ===========================================================================
   MÓDULO PESSOAS — Pessoas — clientes, fornecedores e colaboradores
   ---------------------------------------------------------------------------
   Este arquivo veio do `public/styles.css` na CS2 do `CSS_POR_MODULO_LOOP.md`
   (item 35): são as regras que só esta tela usa. O que é de TODOS (a casca, os
   primitivos, o BI) continua em `styles.css`/sdk-ui, e o mapa de donos é
   `scripts/lib/modulos-do-front.js`. Carregado no `index.html` logo DEPOIS de
   `styles.css` — a ordem é o que preserva a cascata de antes da mudança.
   Regra nova de tela daqui nasce AQUI, não no `styles.css`.
   =========================================================================== */

/* Cadastro de Clientes — campos e seções colapsáveis (painel de pessoas) */
.cf-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
}

/* Mesma armadilha do `.zr-btn[hidden]`/`.zr-alert[hidden]` (ver sdk-ui/components.css):
   `display:flex` acima é regra de AUTOR e vence o `[hidden] { display:none }` do
   navegador — sem este override, `.cf-field[hidden]` continuaria ocupando espaço
   como uma caixa vazia. Usado pelo campo Código (preenchido sozinho a partir do
   CNPJ/CPF, não precisa mais aparecer no formulário). */
.cf-field[hidden] { display: none; }

/* `.cf-field` é exclusivo do #clientes-panel (48 usos, todos lá) — por isso
   migrou junto com ele para os tokens do E-Store na sessão 101, enquanto o
   restante deste arquivo segue no MD3 antigo. Peso 500 e 12px são o papel
   "metadado/rótulo" do DESIGN.md, não 600/0.72rem herdados do MD3. */
.cf-field label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
}

/* A ficha de pessoa — as TRÊS LINHAS do bloco da identidade (PS2 do loop de pessoas,
   mockup aprovado em 12/10/2026): Natureza e documento primeiro; depois razão/fantasia
   (Jurídica) ou o Nome único (Física); depois IE/RG e Saudação. Quem mostra, esconde e
   move o Tipo de IE é o aplicarNatureza() — sempre por style.display, nunca por [hidden]
   (`.cf-field` fixa o display e venceria o atributo). Só tokens do DESIGN.md. */
.cf-ident-linha1,
.cf-ident-linha2,
.cf-ident-linha3 {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.6rem;
  align-items: start;
}

/* Abaixo de 900 px: natureza e documento em 2 colunas, o Tipo de IE embaixo, em linha própria. */
.cf-ident-linha1 { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); }

.cf-ident-linha1 > .cf-ident-ie { grid-column: 1 / -1; }

@media (min-width: 900px) {
  /* Na Jurídica (linha1--ie, posto pelo app.js) o Tipo de IE é a 3ª coluna da 1ª linha. */
  .cf-ident-linha1--ie { grid-template-columns: 220px minmax(0, 1fr) 240px; }
  .cf-ident-linha1--ie > .cf-ident-ie { grid-column: auto; }
}

.cf-ident-linha2,
.cf-ident-linha3 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

.collapsible-section {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.collapsible-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--muted);
  border: none;
  color: var(--foreground);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.collapsible-arrow {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.15s;
  color: var(--primary);
}

/* Diálogo "Importar certificado" (NF2). O `display` vem DAQUI, nunca inline: com o
   `display:flex` inline que existia no `index.html`, `modal.hidden = true` não escondia
   nada e o diálogo ficava aberto desde que a aba Fiscal abria (defeito AJ2 de
   `docs/specs/ORDENS_SERVICO_AJUSTES.md`). `z-index: 55` o põe deterministicamente
   ABAIXO do `.reaut-overlay` (60) — que precisa ficar por cima enquanto pede a senha. */
.cert-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 55;
}

.cert-modal[hidden] {
  display: none;
}

/* Diálogo "Alterar" da aba Acesso e sigilo do colaborador (OC3 do onboarding; mockup
   colaborador-mockup.html, Tela 4). Mesmo desenho do diálogo do certificado, e `z-index: 55`
   pelo MESMO motivo: o modal da senha de ação sensível (`.reaut-overlay`, 60) abre POR CIMA
   enquanto o PUT não sai. (`.os-modal-fundo` seria 1000 e cobriria o da senha.) A caixa interna
   usa as classes `.os-modal` / `.os-modal--estreito`, que já existem no repositório. */
.colab-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 55;
}

.colab-modal[hidden] {
  display: none;
}

/* A aba "Acesso e sigilo" (OC3 do onboarding): cartões de vínculo/multa, os três cartões de
   nível e o histórico. Tudo com tokens do design system — a ponte de vocabulário do
   `styles.css` resolve os nomes. */
.colab-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }

.colab-bloco { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; }

.colab-rotulo { font-size: 0.78rem; font-weight: 600; color: var(--muted-foreground); }

.colab-leitura { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; font-size: 0.95rem; flex-wrap: wrap; }

.colab-niveis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.5rem; }

.colab-nivel {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.colab-nivel:hover { border-color: var(--muted-foreground); }

.colab-nivel--atual { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

.colab-nivel b { font-size: 0.85rem; }

.colab-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.75rem 0.9rem; margin-top: 0.25rem; }

.colab-card-titulo { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.5rem; }

/* Bloco "Prestador (pessoa jurídica)" (PJ5 do onboarding de colaborador; Tela 1 do mockup do
   prestador). O `[hidden]` é explícito: a classe do card não fixa `display`, mas o bloco nasce
   escondido e a regra de autor vence o `[hidden]` do navegador se um `display` entrar aqui.
   A linha do CNPJ quebra em coluna a 390 px (`flex-wrap`), que é o que mantém a aba sem rolagem
   lateral. */
.colab-prestador[hidden] { display: none; }

.colab-prestador-acoes { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* Aba "Assinatura de e-mail" (OC5 do onboarding de colaborador; mockup Tela 5): duas colunas —
   o formulário e a prévia. `minmax(320px, 1fr)` + `overflow: auto` na prévia mantêm a Tela 5 sem
   rolagem lateral a 390 px. */
.assina-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; align-items: start; }

.assina-coluna { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }

.assina-previa { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.9rem; background: var(--background); overflow: auto; }

/* A leitura do termo na ficha (dentro do modal do painel do colaborador). */
.termo-leitura { max-height: 50vh; overflow-y: auto; white-space: pre-wrap; font-size: 0.84rem; line-height: 1.45; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.75rem; }

/* ── Conversas (T-A4): timeline em coluna única na ficha da pessoa ───────── */

.crm-conversas-timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; position: relative; }

.crm-conversas-timeline::before {
  content: ""; position: absolute; left: 0.25rem; top: 0.3rem; bottom: 0.3rem; width: 1px; background: var(--border);
}

/* O fio do cabeçalho da ficha: separa a AÇÃO irreversível (Excluir), que fica por último. */
.fio { width: 1px; align-self: stretch; background: var(--border); }

/* ===========================================================================
   "TIPOS DO CADASTRO" (item 57; mockup tipos-pessoa-mockup.html, aprovado pelo Thiago em
   21/10/2026). Só esta tela usa — regra nova daqui nasce aqui, não no styles.css.
   =========================================================================== */
.pessoa-tipos-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 900px) {
  .pessoa-tipos-grade { grid-template-columns: minmax(0, 1fr); }
}

.pessoa-tipos-grupo { border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 0.8rem; }
.pessoa-tipos-grupo-cab { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--border); }
.pessoa-tipos-grupo-cab h4 { margin: 0; font-size: 0.95rem; }
.pessoa-tipos-grupo-corpo { padding: 0.4rem 0.9rem 0.7rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 1.25rem; }

.pessoa-tipos-tipo { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--border); cursor: pointer; }
.pessoa-tipos-tipo input { margin: 0.2rem 0 0; width: 1rem; height: 1rem; accent-color: var(--primary); }
.pessoa-tipos-tipo b { font-weight: 600; }
.pessoa-tipos-dep { font-size: 0.72rem; color: var(--muted-foreground); font-weight: 400; }
.pessoa-tipos-ajuda { display: block; font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.1rem; }
.pessoa-tipos-motivo { display: block; font-size: 0.75rem; color: var(--warning-strong); margin-top: 0.15rem; }
/* Regra de autor com display vence o [hidden] do navegador — o override é obrigatório. */
.pessoa-tipos-motivo[hidden] { display: none; }
.pessoa-tipos-travado { cursor: not-allowed; }
.pessoa-tipos-travado b { color: var(--muted-foreground); }

.pessoa-tipos-lateral { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.9rem; position: sticky; top: 0.5rem; }
.pessoa-tipos-lateral h4 { margin: 0 0 0.4rem; font-size: 0.9rem; display: flex; align-items: center; gap: 0.3rem; }
.pessoa-tipos-lateral .zr-btn { width: 100%; justify-content: center; margin-top: 0.5rem; }
.pessoa-tipos-lateral hr { border: 0; border-top: 1px solid var(--border); margin: 0.7rem 0; }

.pessoa-tipos-selos { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.pessoa-tipos-selo { display: inline-flex; align-items: center; gap: 0.2rem; border-radius: var(--radius-md); padding: 0.1rem 0.5rem; font-size: 0.75rem; font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.pessoa-tipos-selo--mais { background: var(--success-bg-soft); color: var(--success-strong); border-color: var(--success-strong); }
.pessoa-tipos-selo--menos { background: var(--error-bg-soft); color: var(--error-strong); border-color: var(--error-strong); text-decoration: line-through; }

.pessoa-tipos-hist { list-style: none; margin: 0; padding: 0; font-size: 0.8rem; }
.pessoa-tipos-hist li { padding: 0.35rem 0; border-bottom: 1px dashed var(--border); }
.pessoa-tipos-hist li:last-child { border-bottom: 0; }
.pessoa-tipos-fraco { color: var(--muted-foreground); }