/* Estilos exclusivos da vitrine (não usados no produto). */
.lab {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--esp-6);
  align-items: start;
}

.lab__indice {
  position: sticky;
  top: calc(var(--altura-topo) + var(--esp-4));
  max-height: calc(100dvh - var(--altura-topo) - var(--esp-4) * 2);
  overflow-y: auto;
  scrollbar-width: thin;
  padding: var(--esp-2);
}

.lab__matriz {
  display: grid;
  grid-template-columns: 7rem repeat(4, max-content);
  gap: var(--esp-3) var(--esp-4);
  align-items: center;
  overflow-x: auto;
}

.lab__estreito {
  max-width: 18rem;
}

.lab__esqueleto-60 { width: 60%; }
.lab__esqueleto-80 { width: 80%; }

@media (max-width: 1023.98px) {
  .lab { grid-template-columns: minmax(0, 1fr); }
  .lab__indice { display: none; }
}

@media (max-width: 767.98px) {
  .lab__matriz { grid-template-columns: 6rem repeat(4, max-content); }
}

/* ---- Laboratório de conceitos (só na vitrine) ---- */
.lab__conceito-titulo {
  margin-bottom: var(--esp-3);
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
}

.lab__opcoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-4);
}

.lab__opcoes--largas {
  grid-template-columns: minmax(0, 1fr);
}

.lab__opcao {
  padding: var(--esp-4);
  border: 1px dashed var(--cor-borda-forte);
  border-radius: var(--raio-lg);
}

.lab__opcao--escolhida {
  border: 1px solid var(--cor-marca-borda);
  background: var(--cor-marca-fundo);
}

.lab__opcao-rotulo {
  margin-bottom: var(--esp-3);
  font-size: var(--texto-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--rastreio-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}

.lab__opcao--escolhida .lab__opcao-rotulo {
  color: var(--cor-marca-texto);
}

.lab__opcao--escolhida .lab__opcao-rotulo::after {
  content: " · escolhida";
}

.lab__opcao-nota {
  margin-top: var(--esp-3);
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}

.lab__escuro {
  padding: var(--esp-4);
  border-radius: var(--raio-lg);
  background: var(--shell-cabecalho-fundo-escuro);
  color: var(--cor-texto-inverso);
}

.lab__escuro-rotulo { color: var(--cor-texto-inverso-sutil); }
.lab__link-claro { color: var(--dourado-300); }

/* Conceitos descartados (ficam só aqui, para registro). */
.lab-botao-progresso { background: linear-gradient(90deg, var(--cor-marca-fundo) 60%, var(--cor-superficie) 60%); }
.lab-campo-tingido { background: var(--cor-superficie-sutil); }
.lab-campo-linha { border-radius: 0; border-width: 0 0 1px; background: transparent; padding-left: 0; }
.lab-tabela-densa td, .lab-tabela-densa th { padding: var(--esp-1) var(--esp-2); }
.lab-progresso-larga { width: 100%; }
.lab-tempo-compacta { font-size: var(--texto-sm); color: var(--cor-texto-secundario); }

@media (max-width: 767.98px) {
  .lab__opcoes { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Catálogo: componentes do Design System ainda sem uso nas telas do produto ----
   Ficam só na vitrine para não pesar no CSS compartilhado; ao usar numa tela, mova o bloco
   de volta para components.css. ---- */
/* .filtros-ativos e .ficha saíram daqui: viraram componentes de listas.css (Lote 2, D6). */

.tabela__ordenar {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
}

.tabela th[aria-sort="ascending"],
.tabela th[aria-sort="descending"] {
  color: var(--cor-marca-texto);
}

.tabela__secundario {
  display: block;
  font-size: var(--texto-xs);
  color: var(--cor-texto-secundario);
}

/* Linha da tabela inteira clicável sem quebrar semântica:
   o link principal estende a área com ::after. */
.tabela--linhas-clicaveis tbody tr {
  position: relative;
}

.tabela--linhas-clicaveis .tabela__principal::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tabela--linhas-clicaveis .tabela__acao {
  position: relative;
  z-index: 1;
}

/* Grupo de rádios/caixas: uma opção por linha; `--linha` lado a lado quando couber. */
.escolhas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-2);
}

.escolhas--linha {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-6);
}

fieldset.grupo-campos {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

fieldset.grupo-campos > legend {
  padding: 0;
  margin-bottom: var(--esp-2);
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
}

/* Ação direcional ("Avançar", "Entrar"): a seta anda e o rótulo fica. */
.botao--avancar > .icone:last-child {
  margin-right: calc(-1 * var(--esp-1));
}

/* Título de seção institucional: ícone dourado + caixa alta (DNA). */
.cartao__titulo--institucional {
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--rastreio-rotulo);
  text-transform: uppercase;
  color: var(--cor-texto-secundario);
}

.cartao__titulo--institucional .icone {
  color: var(--cor-marca-texto);
}

/* A prévia de documento (.previa-documento) mora em documento.css: a folha do ofício a usa. */

/* Seção de formulário em foco: trilho dourado à esquerda diz "você está aqui". */
.layout-formulario .cartao:focus-within {
  box-shadow: var(--sombra-cartao-hover), inset var(--filete) 0 0 var(--cor-marca);
}

.layout-formulario .cartao:focus-within .cartao__numero {
  background: var(--cor-marca);
  color: var(--grafite-950);
}

/* Arquétipo de formulário com índice lateral (templates/arquetipos/formulario.html; o produto usa a folha única). */
/* Formulário longo: índice de seções + seções. */
.layout-formulario {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--esp-6);
  align-items: start;
}

.layout-formulario__indice {
  position: sticky;
  top: calc(var(--altura-topo) + var(--esp-4));
}

@media (max-width: 1023.98px) {
  .layout-formulario { grid-template-columns: minmax(0, 1fr); }
  .layout-formulario__indice { display: none; }
}

/* ---- Catálogo sem uso no produto (V2, 2ª leva): variantes mostradas só no UI Lab ---- */
.botao--perigo-contorno {
  --botao-texto: var(--cor-perigo);
  --botao-borda: var(--cor-perigo-borda);
  --botao-fundo-hover: var(--cor-perigo-fundo);
}

.campo--sucesso .entrada {
  border-color: var(--cor-sucesso-solida);
}

.cartao__numero {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 var(--esp-1);
  border-radius: var(--raio-pilula);
  background: var(--cor-marca-fundo);
  border: 1px solid var(--cor-marca-borda);
  color: var(--cor-marca-texto);
  font-size: var(--texto-sm);
  font-weight: var(--peso-forte);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

.cartao__corpo--sem-respiro {
  padding: 0;
}

.subtitulo-secao {
  margin-bottom: var(--esp-3);
  font-size: var(--texto-md);
  font-weight: var(--peso-semi);
}

.selo--marca {
  --selo-fundo: var(--cor-marca-fundo);
  --selo-texto: var(--cor-marca-texto);
  --selo-borda: var(--cor-marca-borda);
}

/* Carimbo: entrada enfática para "Emitido" recém-confirmado. */
.selo--carimbo {
  animation: carimbar var(--duracao-enfase) var(--curva-expressiva) both;
}

.etapas__item--pendente .etapas__marcador {
  border-color: var(--cor-aviso-solida);
  color: var(--cor-aviso);
}

.superficie-escura {
  --foco-cor: var(--foco-cor-inverso);
  --foco-contraste: var(--foco-contraste-inverso);
}

/* Seção 21: casos do selo de tempo em grade (rótulo em cima, selo embaixo). */
.lab__casos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--esp-3) var(--esp-4);
  margin: 0;
}

.lab__casos dd {
  margin: var(--esp-1) 0 0;
}

/* Abas num trilho estreito, para a fileira transbordar e mostrar o indício de rolagem. */
.lab__abas-estreitas {
  max-width: 28rem;
}

/* Exploração de composições no UI Lab. Dados sintéticos, sem operações. */
.exploracao__navegacao { display: flex; flex-wrap: wrap; gap: var(--esp-3) var(--esp-6); padding: var(--esp-4) 0; font-size: var(--texto-sm); }
.exploracao__navegacao a { color: var(--cor-marca-texto); text-decoration: underline; text-underline-offset: .2em; }
.exploracao__navegacao [aria-current] { font-weight: var(--peso-forte); }
.exploracao { border: var(--borda); background: var(--cor-superficie); border-radius: var(--raio-lg); overflow: hidden; }
.exploracao__hero { display: flex; align-items: center; gap: var(--esp-10); padding: var(--esp-8); border-bottom: var(--borda); }
.exploracao__identidade { display: grid; gap: var(--esp-2); }
.exploracao__identidade > strong { font-size: var(--texto-4xl); letter-spacing: var(--rastreio-display); }
.exploracao__identidade p, .exploracao__titulo > p, .exploracao__rotulo { font-size: var(--texto-2xs); letter-spacing: var(--rastreio-rotulo); font-weight: var(--peso-semi); text-transform: uppercase; margin: 0 0 var(--esp-2); }
.exploracao__titulo h1 { margin-bottom: var(--esp-2); font-size: var(--texto-4xl); }
.exploracao__composicao { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); padding: var(--esp-8); gap: var(--esp-8); }
.exploracao__composicao > section { min-width: 0; }
.exploracao h2 { font-size: var(--texto-xl); line-height: var(--altura-linha); margin-bottom: var(--esp-4); }
.exploracao__missao { grid-column: 1; }
.exploracao__arquivos { grid-column: 2; grid-row: 1; }
.exploracao__roteiro, .exploracao__equipe { grid-column: 1; }
.exploracao__conferencia { grid-column: 2; grid-row: 2 / span 2; padding: var(--esp-6); background: var(--cor-superficie-sutil); border-top: var(--filete) solid var(--cor-marca); }
.exploracao__metadados { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-4); padding-top: var(--esp-4); border-top: var(--borda); }
.exploracao dt, .exploracao__peca > span { font-size: var(--texto-xs); color: var(--cor-texto-secundario); }
.exploracao dd { margin: var(--esp-1) 0 var(--esp-3); font-weight: var(--peso-semi); }
.exploracao__pecas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-3); }
.exploracao__peca { display: grid; gap: var(--esp-3); border: var(--borda); padding: var(--esp-4); background: var(--cor-superficie); border-radius: var(--raio-md); }
.exploracao__peca > .icone { width: var(--esp-8); height: var(--esp-10); color: var(--cor-marca-texto); }
.exploracao__arquivos > p:last-child { font-size: var(--texto-xs); margin-top: var(--esp-3); }
.exploracao__percurso { margin: 0; padding: 0; list-style: none; }
.exploracao__percurso li { display: flex; gap: var(--esp-6); padding: var(--esp-4) 0; border-bottom: var(--borda-sutil); }
.exploracao__percurso time { flex: none; font-size: var(--texto-sm); color: var(--cor-marca-texto); }
.exploracao__percurso li div { display: grid; gap: var(--esp-1); }
.exploracao__pessoas { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-3) 0; }
.exploracao__pessoas p { font-size: var(--texto-sm); margin: var(--esp-1) 0 0; color: var(--cor-texto-secundario); }
.exploracao__valor { display: block; font-size: var(--texto-4xl); letter-spacing: var(--rastreio-display); }
.exploracao__acoes { display: flex; justify-content: space-between; align-items: center; gap: var(--esp-4); padding: var(--esp-4) var(--esp-8); background: var(--cor-superficie-sutil); border-top: var(--borda); font-size: var(--texto-xs); }
.exploracao--documento { max-width: 66rem; margin: 0 auto; border-top: var(--filete) solid var(--cor-marca); }
.exploracao--documento .exploracao__hero { flex-direction: column; align-items: flex-start; gap: var(--esp-4); }
.exploracao--documento .exploracao__identidade { grid-template-columns: auto auto auto; align-items: center; gap: var(--esp-6); width: 100%; }
.exploracao--documento .exploracao__identidade > strong { font-size: var(--texto-xl); }
.exploracao--documento .exploracao__composicao { grid-template-columns: minmax(0, 1fr); }
.exploracao--documento .exploracao__composicao > section { grid-column: 1; grid-row: auto; }
.exploracao--documento .exploracao__arquivos { order: 5; }
.exploracao--documento .exploracao__conferencia { order: 4; }
.exploracao--mesa .exploracao__hero { background: var(--cor-primaria); color: var(--cor-texto-inverso); }
.exploracao--mesa .exploracao__identidade { border-right: var(--filete-fino) solid var(--cor-marca); padding-right: var(--esp-10); }
.exploracao--mesa .exploracao__titulo > p, .exploracao--mesa .exploracao__identidade p { color: var(--cor-texto-inverso-sutil); }
.exploracao--registro .exploracao__identidade > strong { font-size: calc(var(--texto-4xl) * 1.7); font-weight: var(--peso-medio); }
.exploracao--registro .exploracao__hero { border-top: var(--esp-2) solid var(--cor-marca); padding: var(--esp-10); }
.exploracao--registro .exploracao__composicao { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--esp-10); }
.exploracao--registro .exploracao__missao { grid-column: 1 / -1; }
.exploracao--registro .exploracao__arquivos { grid-column: 2; grid-row: 3; }
.exploracao--registro .exploracao__conferencia { grid-column: 2; grid-row: 2; background: transparent; border-left: var(--borda); border-top: 0; }
.exploracao--registro .exploracao__pecas { grid-template-columns: minmax(0, 1fr); }
.exploracao--registro .exploracao__peca { display: flex; align-items: center; border: 0; border-bottom: var(--borda); border-radius: 0; padding: var(--esp-3) 0; }
@media (max-width: 767.98px) {
  .exploracao__hero, .exploracao--registro .exploracao__hero { flex-direction: column; align-items: flex-start; gap: var(--esp-4); padding: var(--esp-5); }
  .exploracao__titulo h1 { font-size: var(--texto-3xl); }
  .exploracao__composicao, .exploracao--registro .exploracao__composicao { grid-template-columns: minmax(0, 1fr); gap: var(--esp-6); padding: var(--esp-5); }
  .exploracao__composicao > section, .exploracao--registro .exploracao__composicao > section { grid-column: 1; grid-row: auto; }
  .exploracao--mesa .exploracao__arquivos { grid-row: 1; }
  .exploracao__metadados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exploracao__acoes { flex-wrap: wrap; padding: var(--esp-4) var(--esp-5); }
  .exploracao--mesa .exploracao__identidade { border: 0; padding: 0; }
  .exploracao--documento .exploracao__identidade { grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-2); }
  .exploracao--documento .exploracao__identidade .selo { grid-column: 1; }
  .exploracao--registro .exploracao__identidade > strong { font-size: var(--texto-4xl); }
}