/*
 * Pessoas 360º — a área do Cadastro Mestre (TAR-2026-10-11-002, fatia 3).
 *
 * A cor predominante da área é a cor de destaque que a conta escolheu em
 * Minhas preferências — ordem do proprietário de 13/10/2026, em nota datada na
 * `DEC-SGI-074`, item 22: o anel da Pessoa, a espinha da linha do tempo e o
 * contorno dos quadros. Quem não escolheu cor vê o ouro escovado, que é a cor
 * de destaque padrão do Portal. Usa os tons que a folha aceita já dá a cada
 * cor em cada tema — `--color-accent` e `--color-accent-content` —, sem cor
 * fixa aqui. As cores dos módulos marcam o que eles originam, pelo `data-cor`
 * de cada item, e não mudam com a escolha da conta. Botões e estados são os do
 * padrão de tela do SGI.
 *
 * Nenhum quadro nem linha tem fundo colorido: a cor fica no ícone, na faixa, na
 * etiqueta e no contorno.
 *
 *   --destaque ........ a cor de destaque da conta, no tom do tema — contorno, espinha, anel
 *   --destaque-texto .. o tom dela que se lê sobre a superfície do tema
 *   --destaque-suave .. um véu dela sobre a superfície — fundo de ícone
 *   --destaque-borda .. ela misturada à borda do tema — contorno de quadro
 *
 * `data-cor="destaque"` marca, dentro da área, o que é do próprio núcleo — a
 * origem de relacionamento, o vínculo profissional, o quadro vazio —, como
 * `data-cor="info"` marca o que é do CRM.
 */
.pessoas {
  --destaque: var(--color-accent);
  --destaque-texto: var(--color-accent-content);
  --destaque-suave: color-mix(in srgb, var(--color-accent) 14%, var(--surface));
  --destaque-borda: color-mix(in srgb, var(--color-accent) 55%, var(--border));
}
/* `data-cor="destaque"` mora na paleta do SGI, seção 24.1 de `superadmin.css` (`TAR-2026-10-15-004`). */

/* 1. Quadro da área: o painel do Portal, com o contorno do alto na cor de destaque. */
.p360-quadro { border-top: 0.1875rem solid var(--destaque); }
.p360-quadro .panel__head h2 { display: flex; align-items: center; gap: 0.5rem; }
.p360-quadro .panel__head h2 .icon { color: var(--destaque-texto); }
.p360-quadro + .p360-quadro { margin-top: 1rem; }

/* Os números do alto: os quadros do Painel do Planejamento e Metas, com a cor de cada um. */
.indicador--pessoas { --indicador-cor: var(--color-accent); --indicador-suave: color-mix(in srgb, var(--color-accent) 14%, var(--surface)); }
.indicador--conferencia { --indicador-cor: var(--warning); --indicador-suave: var(--warning-soft); }
.indicador--duplicidade { --indicador-cor: var(--purple); --indicador-suave: var(--purple-soft); }
.indicador--lixeira { --indicador-cor: var(--danger); --indicador-suave: var(--danger-soft); }
.pessoas a.indicador { color: inherit; text-decoration: none; }
.pessoas .indicador__cabecalho > span:last-child { display: grid; min-width: 0; }

/* 2. A Pessoa: as iniciais dentro do anel, na cor de destaque da conta. O núcleo não guarda foto. */
.p360-anel {
  display: grid;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border: 0.125rem solid var(--destaque);
  border-radius: 50%;
  background: var(--destaque-suave);
  color: var(--destaque-texto);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  place-items: center;
}
.p360-anel--grande {
  width: 6.5rem;
  height: 6.5rem;
  border-width: 0.1875rem;
  box-shadow: 0 0 0 0.3125rem var(--surface), 0 0 0 0.375rem var(--destaque-borda);
  font-size: var(--text-2xl);
}
.p360-numero { color: var(--text-muted); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--text-xs); letter-spacing: 0.02em; overflow-wrap: anywhere; }

/* 3. Busca e lista da entrada. */
.p360-busca { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; }
.p360-busca .field { flex: 1 1 18rem; }
.p360-busca__termo { flex: 1 1 24rem; }
.p360-vazio-abaixo { margin-top: 1rem; }
.p360-lista { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.p360-linha {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-subtle);
  border-left: 0.1875rem solid var(--destaque-borda);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.p360-linha__texto { display: grid; flex: 1 1 auto; min-width: 0; gap: 0.125rem; }
.p360-linha__texto strong { overflow: hidden; color: var(--text); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.p360-linha__fim { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; }
.p360-paginas { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; color: var(--text-muted); font-size: var(--text-sm); }

/*
 * 4. Ficha 360º — a composição da referência aprovada: a Pessoa é o centro, o
 * ecossistema fica em volta dela, os dados compactos à esquerda e a linha do
 * tempo à direita. A manutenção da identidade fica embaixo, recolhida (seção 8).
 */
.p360-ficha { display: grid; gap: 1.125rem; }
.p360-ficha > * { min-width: 0; }

/* O topo é fino: o caminho de volta, o título e as ações. */
.p360-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 1rem; }
.p360-topo__texto { display: grid; min-width: 0; gap: 0.25rem; }
.p360-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; color: var(--text-muted); font-size: var(--text-sm); }
.p360-trilha .voltar { margin-bottom: 0; }
.p360-trilha > .icon { width: 0.875rem; height: 0.875rem; }
.p360-trilha > span { color: var(--text); overflow-wrap: anywhere; }
.p360-topo h1 { margin: 0; color: var(--text); font-size: calc(1.875rem * var(--type-scale)); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; }
.p360-topo__acoes { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* O selo da condição geral da Pessoa, no cartão dela: contorno e letra na cor de destaque. */
.p360-selo { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border: 1px solid var(--destaque); border-radius: 999px; color: var(--destaque-texto); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.p360-selo .icon { width: 0.9375rem; height: 0.9375rem; }

/* As partes da ficha. No computador, lado a lado; no celular, uma por vez (seção 9). */
.p360-abas { display: none; }
.p360-partes {
  display: grid;
  gap: 1.125rem;
  grid-template-columns: minmax(17rem, 22rem) minmax(40rem, 1fr) minmax(20rem, 27rem);
  grid-template-areas: "dados mapa linha" "identidade identidade identidade";
  align-items: stretch;
}
.p360-partes > * { min-width: 0; }
/* A ordem da marcação é a do celular — o mapa abre primeiro —; no computador a grade põe cada parte no lugar dela. */
.p360-parte--dados { grid-area: dados; }
.p360-parte--mapa { display: grid; grid-area: mapa; }
.p360-parte--linha { grid-area: linha; }
.p360-parte--identidade { grid-area: identidade; }
.p360-parte--dados > .panel, .p360-parte--linha > .panel { height: 100%; }
/* Quem não vê a identificação não tem a coluna dos Dados nem a administração: o mapa ocupa o lugar. */
.p360-partes:not(:has(.p360-parte--dados)) { grid-template-columns: minmax(40rem, 1fr) minmax(20rem, 27rem); grid-template-areas: "mapa linha"; }
.p360-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }

/* 5. Dados — compactos: o que é, e o valor. De onde veio cada um fica na administração (seção 8). */
.p360-parte--dados > .panel { gap: 0.75rem; }
.p360-campos { display: grid; margin: 0; }
.p360-campo { display: grid; gap: 0.5rem; padding: 0.875rem 0; border-top: 1px solid var(--border-subtle); grid-template-columns: 6.75rem minmax(0, 1fr); align-items: center; line-height: 1.4; }
.p360-campo:first-child { padding-top: 0.125rem; border-top: 0; }
.p360-campo dt { display: flex; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.6; }
.p360-campo dt .icon { flex: 0 0 auto; width: 1.375rem; height: 1.375rem; color: var(--destaque-texto); }
.p360-parte--dados .panel__head h2 .icon { width: 1.5rem; height: 1.5rem; }
.p360-campo dd { margin: 0; color: var(--text); font-size: var(--text-sm); font-weight: 500; overflow-wrap: anywhere; }
/* Há mais identificadores do tipo: a pastilha dos contadores, pequena, ao lado do principal. */
.p360-campo__mais { display: inline-flex; padding: 0 0.4375rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: 1.55; white-space: nowrap; }
.p360-campo__falta { color: var(--text-muted); font-weight: 400; }
/* O selo do pé dos Dados: desde quando a Pessoa chegou. */
.p360-selinho { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem 0.625rem; min-width: 0; margin-top: auto; padding: 0.625rem 0.75rem; border: 1px solid var(--destaque-borda); border-radius: var(--radius-lg); }
.p360-selinho__nome { display: flex; flex: 1 1 auto; align-items: center; gap: 0.5rem; }
.p360-selinho__nome .icon { flex: 0 0 auto; width: 1.375rem; height: 1.375rem; color: var(--destaque-texto); }
.p360-selinho strong { color: var(--destaque-texto); font-size: var(--text-sm); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.p360-nota { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }

/* Os fatos, um por linha, com as etiquetas e os atos: é a lista da administração da identidade. */
.p360-dados { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.p360-dado { display: grid; gap: 0.375rem 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--border-subtle); grid-template-columns: 2rem minmax(0, 1fr); align-items: start; }
.p360-dado:first-child { border-top: 0; padding-top: 0; }
.p360-dado__icone { display: grid; width: 2rem; height: 2rem; border-radius: var(--radius-md); background: var(--destaque-suave); color: var(--destaque-texto); place-items: center; }
.p360-dado__icone .icon { width: 1rem; height: 1rem; }
.p360-dado__corpo { display: grid; min-width: 0; gap: 0.25rem; }
.p360-dado__valor { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }
.p360-dado--fora .p360-dado__valor { color: var(--text-muted); text-decoration: line-through; }
.p360-dado__atos { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.25rem; }
.p360-dado__atos form { display: inline-flex; }
.p360-mais > summary { display: inline-flex; list-style: none; cursor: pointer; }
.p360-mais > summary::-webkit-details-marker { display: none; }
.p360-mais[open] > summary { margin-bottom: 0.375rem; }
.p360-grupo { margin: 1rem 0 0.25rem; color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.p360-grupo:first-child { margin-top: 0; }
/* O ícone do nome do grupo é do celular (seção 9): no computador cada linha tem o dela. */
.p360-grupo .icon { display: none; }

/*
 * 6. Mapa 360º — a Pessoa no centro, num cartão alto que toma a altura da
 * ficha, e o que a liga ao ecossistema em volta, dois quadros de cada lado.
 * Não tem moldura de quadro: o mapa é a própria tela.
 */
.p360-mapa {
  display: grid;
  min-height: 34rem;
  gap: 1rem 2rem;
  grid-template-columns: minmax(11.5rem, 1fr) minmax(13rem, 16rem) minmax(11.5rem, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  grid-template-areas: "origens centro modulos" "vinculos centro marcos";
  align-items: stretch;
}
.p360-mapa > * { min-width: 0; }
/* Sem a identificação não há origens nem vínculos profissionais: a Pessoa fica à esquerda dos módulos e dos marcos. */
.p360-mapa:not(:has(.p360-no--origens)) { grid-template-columns: minmax(12.5rem, 16rem) minmax(0, 1fr); grid-template-areas: "centro modulos" "centro marcos"; }

.p360-centro {
  display: grid;
  gap: 1rem;
  padding: 1.5rem 1rem 1rem;
  border: 1px solid var(--destaque);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: 0 0 0 0.25rem var(--destaque-suave), 0 1.25rem 2.5rem -1.5rem color-mix(in srgb, var(--color-accent) 70%, transparent);
  text-align: center;
  grid-area: centro;
  grid-template-rows: minmax(0, 1fr) auto;
}
.p360-centro__pessoa { display: grid; align-content: center; gap: 0.625rem; justify-items: center; }
.p360-centro .p360-anel--grande {
  width: 9.5rem;
  height: 9.5rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 0 0 0.375rem var(--surface), 0 0 0 0.4375rem var(--destaque-borda), 0 0 2.25rem 0.125rem color-mix(in srgb, var(--color-accent) 32%, transparent);
  font-size: calc(2.5rem * var(--type-scale));
}
.p360-centro__nome { color: var(--text); font-size: calc(1.5rem * var(--type-scale)); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.p360-centro__linha { color: var(--text-muted); font-size: var(--text-sm); }
.p360-centro__pessoa > .chip { margin-top: 0.25rem; }
.p360-centro__numero { display: grid; gap: 0.125rem; padding-top: 0.75rem; border-top: 1px solid var(--border-subtle); justify-items: center; }
.p360-centro__numero .p360-numero { font-size: calc(0.6875rem * var(--type-scale)); letter-spacing: 0; }

.p360-no { position: relative; display: flex; flex-direction: column; gap: 0.625rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-soft); }
.p360-no--origens { grid-area: origens; }
.p360-no--vinculos { grid-area: vinculos; }
.p360-no--modulos { grid-area: modulos; }
.p360-no--marcos { grid-area: marcos; }
/* O traço, na cor de destaque, que liga cada quadro à Pessoa, com o ponto de onde ele sai. */
.p360-no::after { position: absolute; top: calc(50% - 0.0625rem); width: calc(2rem + 1px); height: 0.125rem; background: var(--destaque); content: ""; }
.p360-no::before { position: absolute; top: calc(50% - 0.25rem); z-index: 1; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--destaque); content: ""; }
.p360-no--origens::after, .p360-no--vinculos::after { left: 100%; }
.p360-no--modulos::after, .p360-no--marcos::after { right: 100%; }
.p360-no--origens::before, .p360-no--vinculos::before { left: calc(100% - 0.25rem); }
.p360-no--modulos::before, .p360-no--marcos::before { right: calc(100% - 0.25rem); }
.p360-no__cabecalho { display: flex; align-items: center; gap: 0.5rem; min-height: 1.5rem; margin: 0; color: var(--text); font-size: var(--text-sm); font-weight: 600; line-height: 1.5; }
.p360-no__cabecalho .icon { color: var(--destaque-texto); }
.p360-no__conta { margin-left: auto; padding: 0.0625rem 0.5rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.p360-itens { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.p360-item { display: grid; gap: 0 0.625rem; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; }
.p360-item__icone { display: grid; width: 2rem; height: 2rem; border-radius: var(--radius-md); background: color-mix(in srgb, var(--cor, var(--color-accent)) 16%, var(--surface)); color: var(--cor, var(--destaque-texto)); grid-row: 1 / span 2; place-items: center; }
.p360-item__icone .icon { width: 1rem; height: 1rem; }
.p360-item strong { color: var(--text); font-size: var(--text-sm); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.p360-item span.rotulo { grid-column: 2; }
.p360-item:has(span.rotulo + span.rotulo) { align-items: start; }
.p360-no__vazio { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-xs); }
/* No mapa, cada item ganha o contorno dele, e o quadro vazio explica o que virá, no meio. */
.p360-no .p360-item { padding: 0.5rem 0.625rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.p360-no .p360-item { grid-template-columns: 2.25rem minmax(0, 1fr); }
.p360-no .p360-item__icone { width: 2.25rem; height: 2.25rem; }
.p360-no .p360-item__icone .icon { width: 1.25rem; height: 1.25rem; }
.p360-no__cabecalho .icon { width: 1.125rem; height: 1.125rem; }
.p360-no .p360-no__vazio { display: grid; flex: 1 1 auto; align-content: center; gap: 0.5rem; padding: 0.25rem 0.5rem; text-align: center; justify-items: center; }
.p360-no .p360-no__vazio .icon { width: 1.5rem; height: 1.5rem; color: var(--destaque-texto); opacity: 0.75; }

/* O mapa em órbita é só do celular (seção 9): no computador o mapa é o de quadros. */
.p360-orbita { display: none; }

/* 7. Linha do tempo — vertical, com a espinha, na cor de destaque, de um evento ao seguinte. */
.p360-tempo { display: grid; align-content: start; gap: 0.625rem; max-height: 40rem; margin: 0; padding: 0 0.25rem 0 0; overflow-y: auto; list-style: none; scrollbar-width: thin; }
.p360-evento { position: relative; display: grid; gap: 0 0.75rem; grid-template-columns: 4.25rem 2.5rem minmax(0, 1fr); align-items: start; }
.p360-evento:not(:last-child)::before { position: absolute; top: 2.5rem; bottom: -0.625rem; left: 6.1875rem; width: 0.125rem; background: var(--destaque); content: ""; }
.p360-evento__quando { display: grid; padding-top: 0.375rem; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; line-height: 1.35; text-align: right; }
.p360-evento__no { z-index: 1; display: grid; width: 2.5rem; height: 2.5rem; border: 0.125rem solid var(--cor, var(--color-accent)); border-radius: 50%; background: var(--surface); color: var(--cor, var(--destaque-texto)); place-items: center; }
.p360-evento__no .icon { width: 1.25rem; height: 1.25rem; }
.p360-evento__corpo { display: grid; min-width: 0; gap: 0.125rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); }
.p360-evento__corpo strong { color: var(--text); font-size: var(--text-sm); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
/* O nome do módulo, na cor dele: é o que diz de onde veio o evento. */
.p360-evento__modulo { color: var(--cor, var(--destaque-texto)); font-size: var(--text-xs); font-weight: 600; line-height: var(--leading-xs); }
.p360-evento[data-cor="destaque"] .p360-evento__modulo { color: var(--destaque-texto); }
.pessoas [data-cor="destaque"].chip::before { background: var(--color-accent); }

/* 8. Administração da identidade, conferência e as telas de conferir um ato. */

/*
 * A administração da identidade fica embaixo da ficha, recolhida numa barra
 * só: é manutenção, e não domina a tela. Abre com um toque e abre sozinha na
 * volta de um ato. Não leva a cor de destaque dos quadros da ficha.
 */
.p360-admin { border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); }
.p360-admin__barra { display: flex; align-items: center; gap: 0.5rem 0.875rem; padding: 0.75rem 1rem; border-radius: inherit; cursor: pointer; list-style: none; }
.p360-admin__barra::-webkit-details-marker { display: none; }
.p360-admin__barra:hover { background: var(--filled-bg); }
.p360-admin__icone { display: grid; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--filled-bg); color: var(--text-muted); place-items: center; }
.p360-admin__icone .icon { width: 1.125rem; height: 1.125rem; }
.p360-admin__texto { display: grid; flex: 1 1 16rem; min-width: 0; gap: 0.0625rem; }
.p360-admin__texto strong { color: var(--text); font-size: var(--text-base); font-weight: 600; }
.p360-admin__resumo { display: flex; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; }
.p360-admin__seta { display: grid; flex: 0 0 auto; color: var(--text-muted); }
.p360-admin[open] .p360-admin__seta { transform: rotate(180deg); }
.p360-admin[open] > .p360-admin__barra { border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.p360-admin__corpo {
  display: grid;
  gap: 1rem;
  padding: 0.25rem 1rem 1rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "fatos registros unioes" "fatos registros conta";
  align-items: start;
}
.p360-admin__corpo > * { min-width: 0; }
.p360-admin__quadro { box-shadow: none; }
.p360-admin__quadro--fatos { grid-area: fatos; }
.p360-admin__quadro--registros { grid-area: registros; }
.p360-admin__quadro--unioes { grid-area: unioes; }
.p360-admin__quadro--conta { grid-area: conta; }
.p360-admin__quadro .panel__head h2 { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-base); line-height: var(--leading-base, 1.5); }
.p360-admin__quadro .panel__head h2 .icon { color: var(--text-muted); }

.p360-registros { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.p360-registro { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; padding: 0.625rem 0.875rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface); }
.p360-registro__texto { display: grid; flex: 1 1 14rem; min-width: 0; gap: 0.125rem; }
.p360-registro__texto strong { color: var(--text); font-size: var(--text-sm); font-weight: 600; overflow-wrap: anywhere; }
.p360-registro__fim { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.p360-registro details > summary { list-style: none; cursor: pointer; }
.p360-registro details > summary::-webkit-details-marker { display: none; }
.p360-registro details[open] { flex: 1 1 100%; }
.p360-registro details[open] > summary { display: none; }
.p360-motivo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.p360-motivo .field { flex: 1 1 16rem; }

.p360-conferencia { display: grid; gap: 1rem; }
.p360-conferencia__corpo { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; }
.p360-conferencia__parte { display: grid; gap: 0.5rem; padding: 0.875rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.p360-conferencia__parte h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; color: var(--text); font-size: var(--text-sm); font-weight: 600; }
.p360-conferencia__parte h3 .icon { color: var(--cor, var(--destaque-texto)); }
.p360-conferencia__decisoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.p360-conferencia__decisoes form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.p360-escolha { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; color: var(--text); font-size: var(--text-sm); }
.p360-escolha label { display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; }

.p360-duas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.p360-duas__uma { display: flex; align-items: center; gap: 0.875rem; padding: 1rem; border: 1px solid var(--destaque-borda); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; }
.p360-duas__uma:has(input:checked) { border-color: var(--destaque); box-shadow: 0 0 0 0.125rem var(--destaque-suave); }
.p360-o-que-muda { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.p360-o-que-muda li { display: flex; align-items: center; gap: 0.625rem; padding: 0.625rem 0.75rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text); font-size: var(--text-sm); }
.p360-o-que-muda .icon { color: var(--destaque-texto); }
.p360-o-que-muda strong { font-variant-numeric: tabular-nums; }

/* 9. Janelas menores e celular. */

/* Sem largura para as três colunas: os Dados e o mapa ficam lado a lado, e a linha do tempo desce, inteira. */
@media (max-width: 84rem) {
  .p360-partes { grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr); grid-template-areas: "dados mapa" "linha linha" "identidade identidade"; }
  .p360-partes:not(:has(.p360-parte--dados)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mapa" "linha"; }
  .p360-tempo { max-height: none; padding-right: 0; overflow-y: visible; }
}

/* Mais estreito: a Pessoa sobe para o alto do mapa, com os quatro quadros embaixo dela, e a administração empilha. */
@media (max-width: 68rem) {
  .p360-mapa,
  .p360-mapa:not(:has(.p360-no--origens)) { min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; grid-template-areas: "centro centro" "origens modulos" "vinculos marcos"; }
  .p360-mapa:not(:has(.p360-no--origens)) { grid-template-areas: "centro centro" "modulos marcos"; }
  .p360-no::before, .p360-no::after { display: none; }
  .p360-admin__corpo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "fatos" "registros" "unioes" "conta"; }
}

@media (max-width: 56rem) {
  .p360-partes,
  .p360-partes:not(:has(.p360-parte--dados)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mapa" "dados" "linha" "identidade"; }
  .p360-partes:not(:has(.p360-parte--dados)) { grid-template-areas: "mapa" "linha"; }
}

/* Celular — padrão de tela do SGI: um quadro grande só, e o resto em linhas e abas. */
@media (max-width: 40rem) {
  .p360-topo h1 { font-size: var(--text-2xl); }
  .p360-linha { flex-wrap: wrap; gap: 0.625rem; }

  /*
   * Os números do alto viram etiquetas pequenas — ícone, número e o que ele conta —, com o fundo em tom baixo:
   * apoio, não destaque (padrão de tela do SGI, § 5). O único quadro grande da entrada, no celular, é a busca.
   */
  .pessoas .indicadores-planejamento { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1rem; }
  .pessoas .indicador { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 0.3125rem; padding: 0.1875rem 0.625rem 0.1875rem 0.4375rem; border-color: color-mix(in srgb, var(--indicador-cor) 35%, var(--border)); border-radius: 999px; background: color-mix(in srgb, var(--indicador-cor) 9%, var(--surface)); box-shadow: none; }
  .pessoas .indicador__cabecalho { gap: 0.3125rem; }
  .pessoas .indicador__icone { flex: 0 0 1rem; width: 1rem; height: 1rem; background: none; }
  .pessoas .indicador__icone .icon { width: 1rem; height: 1rem; }
  .pessoas .indicador__cabecalho > span:last-child { display: flex; flex-direction: row-reverse; align-items: baseline; gap: 0.3125rem; }
  .pessoas .indicador__numero { font-size: var(--text-xs); line-height: var(--leading-xs); }
  .pessoas .indicador__titulo { font-size: var(--text-xs); font-weight: 400; letter-spacing: 0; line-height: var(--leading-xs); text-transform: none; }
  .pessoas .indicador__legenda,
  .pessoas .indicador__barra { display: none; }

  /* O topo: Unir e a lixeira numa linha só. */
  .p360-topo__acoes { flex: 1 1 100%; flex-wrap: nowrap; }
  .p360-topo__acoes > a.button { flex: 1 1 auto; }

  /*
   * A ficha vira abas: Mapa 360º, Dados, Linha do tempo e a administração — a engrenagem —, uma por vez.
   * Sem endereço de parte, vale a primeira. Quem marca a aba aberta é `pessoas.js`: o navegador não
   * refaz o destaque sozinho quando a âncora muda.
   */
  .p360-abas { display: flex; gap: 0.375rem; overflow-x: auto; }
  .p360-abas a { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 0.4375rem 0.6875rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap; }
  .p360-abas a[aria-current="true"] { border-color: var(--destaque); background: var(--destaque-suave); color: var(--destaque-texto); }
  .p360-abas__admin { margin-left: auto; }
  .p360-partes { display: block; }
  .p360-parte { display: none; scroll-margin-top: 5rem; }
  .p360-parte:target,
  .p360-ficha:not(:has(.p360-parte:target)) .p360-parte:first-child { display: block; }

  /*
   * O Mapa 360º vira órbita, como na referência do celular: a Pessoa no centro — uma vez só — e, em
   * volta, as origens, os módulos, os vínculos e os marcos, cada um ligado a ela por um raio na cor de destaque.
   * O lugar de cada nó vem da página, em porcentagem do mapa.
   */
  .p360-mapa,
  .p360-mapa:not(:has(.p360-no--origens)) { display: none; }
  .p360-parte--mapa:target,
  .p360-ficha:not(:has(.p360-parte:target)) .p360-parte--mapa { display: block; }
  .p360-orbita { display: grid; gap: 0.25rem; }
  .p360-orbita__pessoa { display: grid; gap: 0.5rem; text-align: center; justify-items: center; }
  .p360-orbita__mapa { position: relative; aspect-ratio: 1 / 1.36; }
  .p360-orbita__raios { position: absolute; width: 100%; height: 100%; inset: 0; }
  .p360-orbita__raios line { stroke: var(--destaque); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .p360-orbita__centro { position: absolute; top: 50%; left: 50%; width: 5.75rem; height: 5.75rem; box-shadow: 0 0 0 0.3125rem var(--bg), 0 0 0 0.375rem var(--destaque-borda), 0 0 2rem 0.125rem color-mix(in srgb, var(--color-accent) 34%, transparent); font-size: calc(1.625rem * var(--type-scale)); transform: translate(-50%, -50%); }
  .p360-orbita__nos { margin: 0; padding: 0; list-style: none; }
  .p360-orbita__no { position: absolute; display: grid; gap: 0.0625rem; width: 5.75rem; text-align: center; transform: translate(-50%, -1.5rem); justify-items: center; }
  .p360-orbita__icone { display: grid; width: 3rem; height: 3rem; margin-bottom: 0.1875rem; border: 0.125rem solid var(--cor, var(--color-accent)); border-radius: 50%; background: color-mix(in srgb, var(--cor, var(--color-accent)) 16%, var(--bg)); color: var(--cor, var(--destaque-texto)); place-items: center; }
  .p360-orbita__icone .icon { width: 1.375rem; height: 1.375rem; }
  /* No alto do mapa o nome fica em cima do ícone, para o raio não atravessar o texto. */
  .p360-orbita__no--acima { transform: translate(-50%, calc(-100% + 1.5rem)); }
  .p360-orbita__no--acima .p360-orbita__icone { margin: 0.1875rem 0 0; order: 9; }
  .p360-orbita__no[data-cor="destaque"] .p360-orbita__icone { color: var(--destaque-texto); }
  .p360-orbita__no strong { color: var(--text); font-size: var(--text-xs); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
  .p360-orbita__no .rotulo { font-size: calc(0.6875rem * var(--type-scale)); line-height: 1.25; }
  .p360-orbita__vazio { position: absolute; right: 0; bottom: 8%; left: 0; margin: 0; color: var(--text-muted); font-size: var(--text-xs); text-align: center; }
  .p360-orbita .p360-centro__numero { padding-top: 0.75rem; }

  .p360-evento { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .p360-evento:not(:last-child)::before { left: 1.1875rem; }
  .p360-evento__quando { padding: 0 0 0.25rem; text-align: left; grid-column: 2; grid-row: 1; grid-auto-flow: column; justify-content: start; gap: 0.5rem; }
  .p360-evento__no { grid-column: 1; grid-row: 1 / span 2; }
  .p360-evento__corpo { grid-column: 2; grid-row: 2; }

  /* Contatos e documentos: o ícone do tipo vai uma vez, no nome do grupo, e as linhas ficam sem ele — nada de ícone repetido. */
  .p360-grupo { display: flex; align-items: center; gap: 0.5rem; }
  .p360-grupo .icon { display: block; width: 1.25rem; height: 1.25rem; color: var(--destaque-texto); }
  .p360-grupo + .p360-dados .p360-dado { grid-template-columns: minmax(0, 1fr); }
  .p360-grupo + .p360-dados .p360-dado__icone { display: none; }

  /* A barra da administração: o nome e a seta na primeira linha, as etiquetas embaixo. */
  .p360-admin__barra { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .p360-admin__resumo { justify-content: flex-start; grid-column: 1 / -1; grid-row: 2; }
}

/*
 * 10. Tela ampla — a Ficha 360º usa a largura inteira da janela.
 *
 * Quem pede é a tela, com `tela="ampla"` no layout do Portal. No computador a
 * navegação lateral recolhe para o botão de menu do cabeçalho, e a marca passa
 * para o cabeçalho — o mesmo desenho que o Portal já tem abaixo de 1024 px,
 * onde estas regras nem entram. O botão abre a navegação por cima da tela; o
 * roteiro do menu (`portal.js`) é o mesmo. Ao sair da ficha, a tela seguinte
 * não pede a tela ampla e a navegação volta ao lugar.
 */
@media (min-width: 64rem) {
  html[data-tela="ampla"] .app-shell { display: block; }
  html[data-tela="ampla"] .sidebar {
    position: fixed;
    top: var(--banner-height);
    left: 0;
    width: 20rem;
    box-shadow: 0 1.5rem 3rem -0.75rem rgb(0 0 0 / 45%);
    pointer-events: none;
    transform: translateX(-105%);
    transition: transform 220ms ease, visibility 0s linear 220ms;
    visibility: hidden;
  }
  html[data-tela="ampla"] .nav-open .sidebar { pointer-events: auto; transform: translateX(0); transition-delay: 0s; visibility: visible; }
  html[data-tela="ampla"] .nav-scrim { position: fixed; z-index: 65; inset: var(--banner-height) 0 0; display: block; border: 0; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--transition); }
  html[data-tela="ampla"] .nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  html[data-tela="ampla"] .topbar { grid-template-columns: auto auto minmax(12rem, 1fr) auto auto auto; }
  html[data-tela="ampla"] .menu-button {
    display: inline-flex;
    width: var(--control-h);
    height: var(--control-h);
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border);
    border-bottom-color: var(--input-border-b);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    color: var(--text);
    cursor: pointer;
  }
  html[data-tela="ampla"] .menu-button svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.5; }
  html[data-tela="ampla"] .mobile-brand { display: flex; align-items: center; gap: 0.5rem; margin-right: 0.5rem; color: var(--text); }
  html[data-tela="ampla"] .mobile-brand strong { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.025em; line-height: 1; }
  html[data-tela="ampla"] .mobile-brand strong span { color: var(--brand-mark); }
  html[data-tela="ampla"] .mobile-brand > span { color: var(--text-muted); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; }
}
@media (min-width: 64rem) and (max-width: 80rem) {
  html[data-tela="ampla"] .topbar { grid-template-columns: auto auto minmax(10rem, 1fr) auto auto; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-tela="ampla"] .sidebar { transition: none; }
}