/*
 * CSS do benefit-builder: só o que o shell.css ainda não tem.
 *
 * Antes de acrescentar algo aqui, procure no shell.css — a maior parte do que
 * este protótipo usa já existe lá (card-option, catalog-*, depara*, chat-panel,
 * matricula-tester, rpa-steps, spec-grid, code-box, bento-notes). Duplicar uma
 * regra aqui faz a versão do shell parar de fazer efeito nestas telas: mesma
 * especificidade, carrega depois, vence a cascata.
 *
 * Todo valor sai de token do ben-10. Nada de cor, espaço ou raio escrito à mão.
 */

/* ------------------------------------------------- abas que trocam de painel */
/* As abas de 01-lista mostram duas listas no mesmo lugar. Radio nativo dentro
   do label + :has() no container — sem JS, e o estado ativo da aba já vem do
   shell.css (.tab:has(input:checked)). */

.tab-panel {
	display: none;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-2xl);
}

.tabbed:has(#aba-info:checked) .tab-panel--info,
.tabbed:has(#aba-behavior:checked) .tab-panel--behavior {
	display: flex;
}

/* ------------------------------------------- trilha que muda com a escolha */
/* Em 02-tipo o primeiro passo é comum, mas o resto do caminho não. As duas
   trilhas ficam montadas e a escolha decide qual aparece — assim a pessoa vê,
   antes de continuar, quantos passos cada caminho tem. */

.trail-slot--behavior {
	display: none;
}

body:has([data-value='behavior'][aria-checked='true']) .trail-slot--info {
	display: none;
}

body:has([data-value='behavior'][aria-checked='true']) .trail-slot--behavior {
	display: block;
}

/* ---------------------------------------------------- CTA que muda de destino */
/* A bifurcação de 02-tipo precisa de dois botões "Continuar" apontando pra
   telas diferentes, e só um visível por vez. */

.branch-cta {
	display: none;
}

/* enquanto nada foi escolhido, o que aparece é o botão desabilitado */
.branch-cta--vazio {
	display: inline-flex;
}

/* dica do porquê o botão está bloqueado — aparece só no estado vazio, ao lado
   do botão desabilitado, e some quando uma opção é escolhida */
.branch-hint {
	align-self: center;
	margin-right: var(--benup-semantic-spacing-general-md);
}

.branch:has([data-value='info'][aria-checked='true']) .branch-cta--info,
.branch:has([data-value='behavior'][aria-checked='true']) .branch-cta--behavior {
	display: inline-flex;
}

.branch:has([data-choice-group='natureza'][aria-checked='true']) .branch-cta--vazio {
	display: none;
}

/* -------------------------------------------- editor por tipo de resposta */
/* Mesmo mecanismo do .uso-state do shell.css, mas indexado pelo tipo de
   resposta escolhido em 04-config-respostas. */

.resposta-editor {
	display: none;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-xl);
}

/* Só três formas de resposta têm editor próprio. As outras são formulário
   simples e não precisam de nada além do preview — ver FLUXO.md, simplificações. */
.respostas:has([data-value='lista-fechada'][aria-checked='true']) [data-editor='lista'],
.respostas:has([data-value='multipla'][aria-checked='true']) [data-editor='lista'],
.respostas:has([data-value='depara'][aria-checked='true']) [data-editor='depara'],
.respostas:has([data-value='folha'][aria-checked='true']) [data-editor='folha'] {
	display: flex;
}

/* "Essa pergunta sempre aparece?" — o corpo só existe na resposta condicional */
.condicional-corpo {
	display: none;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-lg);
}

.detalhes:has([data-value='condicional'][aria-checked='true']) .condicional-corpo {
	display: flex;
}

/* O preview de quem preenche muda junto com a escolha: cada forma de resposta
   tem o seu controle montado, e só o da escolha atual aparece. */

.preview-controle {
	display: none;
}

.respostas:has([data-value='texto'][aria-checked='true']) [data-preview='texto'],
.respostas:has([data-value='sim-nao'][aria-checked='true']) [data-preview='sim-nao'],
.respostas:has([data-value='numero'][aria-checked='true']) [data-preview='numero'],
.respostas:has([data-value='lista-fechada'][aria-checked='true']) [data-preview='lista-fechada'],
.respostas:has([data-value='multipla'][aria-checked='true']) [data-preview='multipla'],
.respostas:has([data-value='lista-livre'][aria-checked='true']) [data-preview='lista-livre'],
.respostas:has([data-value='depara'][aria-checked='true']) [data-preview='depara'],
.respostas:has([data-value='endereco'][aria-checked='true']) [data-preview='endereco'],
.respostas:has([data-value='campos-acao'][aria-checked='true']) [data-preview='campos-acao'],
.respostas:has([data-value='folha'][aria-checked='true']) [data-preview='folha'] {
	display: flex;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-sm);
}

/* Cartão que imita a tela de preenchimento do for-us (BenBook → Benefícios →
   Opções). Fundo branco sobre o painel cinza pra parecer outra tela. */

.preview-frame {
	display: flex;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-lg);
	padding: var(--benup-semantic-spacing-general-xl);
	border: 1px solid var(--benup-semantic-color-border-neutral-primary);
	border-radius: var(--benup-semantic-spacing-radius-xl);
	background: var(--benup-semantic-color-background-neutral-primary);
}

.preview-frame-bar {
	display: flex;
	align-items: center;
	gap: var(--benup-semantic-spacing-general-sm);
	padding-bottom: var(--benup-semantic-spacing-general-md);
	border-bottom: 1px solid var(--benup-semantic-color-border-neutral-primary);
	color: var(--benup-semantic-color-text-neutral-tertiary);
}

/* --------------------------------------- qual dado muda de comportamento (06) */

.origem-corpo {
	display: none;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-2xl);
}

.origem:has([data-value='fixo'][aria-checked='true']) .origem-corpo--fixo,
.origem:has([data-value='derivado'][aria-checked='true']) .origem-corpo--derivado {
	display: flex;
}

/* ------------------------------------ paleta de transformações disponíveis */
/* `rpa-exemplos` empilha frases longas, uma por linha — é o certo pra descrever
   passo de robô. Aqui os rótulos são curtos ("MAIÚSCULAS", "Tirar acento") e
   viram pastilhas, senão a paleta ocupa meia tela. */

.rpa-exemplos--pastilhas {
	flex-direction: row;
	flex-wrap: wrap;
}

.rpa-exemplos--pastilhas .rpa-exemplo {
	display: inline-block;
	width: auto;
	padding: var(--benup-semantic-spacing-general-sm) var(--benup-semantic-spacing-general-lg);
}

/* --------------------------------------------- transformação: entrada → saída */
/* A pilha de transformações reaproveita .rpa-steps/.rpa-step do shell.css. O que
   falta lá é a linha "valor entra, valor sai" dentro de cada passo. */

.passo-valor {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--benup-semantic-spacing-general-sm);
	margin-top: var(--benup-semantic-spacing-general-xs);
}

/* Régua de posições pra transformação que depende de tamanho (zero à esquerda,
   recorte). Mostra o valor caractere por caractere. */

.reguas {
	display: flex;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-md);
}

.regua {
	display: flex;
	align-items: center;
	gap: var(--benup-semantic-spacing-general-lg);
}

.regua-label {
	flex: none;
	width: var(--benup-semantic-spacing-general-10xl);
	color: var(--benup-semantic-color-text-neutral-tertiary);
}

.regua-chars {
	display: flex;
	gap: var(--benup-semantic-spacing-general-xxs);
}

.regua-char {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--benup-semantic-spacing-general-4xl);
	height: var(--benup-semantic-spacing-general-4xl);
	border: 1px solid var(--benup-semantic-color-border-neutral-primary);
	border-radius: var(--benup-semantic-spacing-radius-xs);
	background: var(--benup-semantic-color-background-neutral-primary);
	font-family: var(--benup-primitive-type-family-mono), ui-monospace, monospace;
	font-size: var(--benup-styles-fontsize-2);
	color: var(--benup-semantic-color-text-neutral-primary);
}

/* caractere acrescentado pela transformação — o zero que não existia no dado */
.regua-char--novo {
	border-color: var(--benup-semantic-color-border-brand-primary);
	background: var(--benup-semantic-color-background-brand-primary);
	color: var(--benup-semantic-color-text-brand-primary);
}

/* ------------------------------------------------- células do de-para (04) */
/* `depara-celula--input` e `--pendente` já aparecem no markup do file-builder e
   no clone de linha do proto.js, mas nunca tiveram estilo. Ficam definidas aqui,
   e não no shell.css, para não mudar a aparência das telas do file-builder — que
   passariam a destacar células que hoje não destacam. */

.depara-celula--input {
	border: 1px dashed var(--benup-semantic-color-border-neutral-secondary);
}

.depara-celula--pendente {
	border-color: var(--benup-semantic-color-border-status-warning-primary);
	background: var(--benup-semantic-color-background-status-warning-subtle);
}

/* -------------------------------------------------------- lista de opções (04) */
/* Editor de "uma opção de uma lista que você define": o par que quem preenche vê
   e o valor que sai pro fornecedor. */

.par-lista {
	display: flex;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-md);
}

.par-linha {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: center;
	gap: var(--benup-semantic-spacing-general-md);
}

/* ------------------------------------------------------- escopo e herança (05) */

.escopo-aviso {
	display: flex;
	gap: var(--benup-semantic-spacing-general-md);
	padding: var(--benup-semantic-spacing-general-xl);
	border: 1px solid var(--benup-semantic-color-border-status-warning-primary);
	border-radius: var(--benup-semantic-spacing-radius-xl);
	background: var(--benup-semantic-color-background-status-warning-subtle);
	color: var(--benup-semantic-color-text-status-warning-primary);
}

/* O JSON da revisão. Herda a moldura do .code-box, mas em bloco, não em linha. */

.json-box {
	display: block;
	padding: var(--benup-semantic-spacing-general-lg);
	border-radius: var(--benup-semantic-spacing-radius-lg);
	background: var(--benup-semantic-color-background-neutral-secondary);
	font-family: var(--benup-primitive-type-family-mono), ui-monospace, monospace;
	font-size: var(--benup-styles-fontsize-1);
	line-height: 1.6;
	color: var(--benup-semantic-color-text-neutral-secondary);
	white-space: pre;
	overflow-x: auto;
}