/* Fox · Codex · Lucius 04 */
.comparisonPrepared .produtoQuadro{height:500px}
@media(max-width:760px){.comparisonPrepared .produtoQuadro{height:360px}}
.flowEntrada{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:24px 0 32px}.flowEntrada small{font:11px var(--wb-mono);color:var(--wb-dim);overflow-wrap:anywhere}
.flowEntradaLink{background:none;cursor:pointer;transition:color .2s var(--wb-ease),border-color .2s var(--wb-ease)}.flowEntradaLink:hover{color:var(--wb-text);border-color:var(--wb-text)}
.flowBadge{font:11px var(--wb-mono);display:inline-block;border:1px solid var(--wb-line-2);padding:4px 8px;color:var(--wb-soft);border-radius:3px}
.flowAcoes{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:28px 0 20px}.flowAcoes .btn{height:auto;min-height:36px}
.flowCard{padding:24px;border:1px solid var(--wb-line);margin:16px 0;min-width:0}.resumoColuna .flowCard{margin:0}.flowCard h2{font-size:16px;font-weight:500;margin-bottom:16px}.flowCard h3{font-size:14px;font-weight:500;margin:18px 0 10px}.flowCard p{font-size:13px;color:var(--wb-soft);max-width:var(--medida-texto);margin:10px 0;text-wrap:pretty}
.flowFont{font-size:22px;line-height:1.4;overflow-wrap:anywhere;margin:20px 0}.flowType{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--wb-line)}.flowType>span:first-child{font-size:12px;color:var(--wb-dim)}
.flowPalette{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px}.flowPalette>div{min-width:0}.flowPalette i{display:block;height:40px;border:1px solid var(--wb-line-2);border-radius:2px}.flowPalette small,.flowPalette code{display:block;font:10px var(--wb-mono);overflow-wrap:anywhere;margin-top:5px;color:var(--wb-dim)}
.flowTableWrap{overflow-x:auto}.flowTable{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed;margin:20px 0}.flowTable th,.flowTable td{padding:12px 10px 12px 0;border-bottom:1px solid var(--wb-line);text-align:left;vertical-align:top;overflow-wrap:anywhere}.flowTable th{font-weight:500}.flowTable small{display:block;font-size:11px;font-weight:400;color:var(--wb-dim);margin-top:5px}.flowTable code{font:11px var(--wb-mono)}
.flowNumbers{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--wb-soft);flex-wrap:wrap;margin-bottom:24px}.flowNumbers span:nth-child(2){color:var(--wb-text)}
.flowLink{display:inline-block;border:0;background:none;color:var(--wb-text);text-align:left;text-decoration:underline;text-underline-offset:4px;font-size:13px;margin-top:16px}
.flowNota{margin:24px 0;font-size:13px;max-width:var(--medida-texto);color:var(--wb-soft);text-wrap:pretty}
/* Percurso informativo compartilhado: só a posição atual recebe destaque. */
.flowStages{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 24px;padding:20px 0;border-top:1px solid var(--wb-line);border-bottom:1px solid var(--wb-line)}
.flowStages li{display:flex;align-items:center;gap:10px;min-width:0;color:var(--wb-dim)}.flowStages .wbIcon{width:22px;height:22px;flex:none;fill:currentColor}.flowStages b{font-size:14px;line-height:20px;font-weight:400;overflow-wrap:anywhere}
.flowStages li[aria-current="step"]{color:var(--wb-text)}.flowStages li[aria-current="step"] b{font-weight:500}
@media(max-width:760px){.flowStages{gap:18px 16px}.flowStages li{gap:8px}.flowStages b{font-size:12px}.flowStages .wbIcon{width:20px;height:20px}}

.flowDecision{padding:16px 0;border-top:1px solid var(--wb-line);font-size:13px}.flowDecision .flowBadge{float:right}.flowDecision p{margin-top:10px;font-size:13px;color:var(--wb-soft);text-wrap:pretty;clear:both}
.flowFilters{display:flex;flex-wrap:wrap;gap:16px;margin:24px 0}.flowFilters label{display:grid;gap:6px;font-size:12px;color:var(--wb-soft)}.flowFilters select{min-height:36px;min-width:100px;background:var(--wb-panel);border:1px solid var(--wb-line-2);border-radius:3px;padding:6px 10px}
.flowCompare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}.flowCompare>section{min-width:0}.flowCompare h2{font-size:14px;font-weight:500;margin:12px 0}.flowCapture{height:500px;overflow:auto;border:1px solid var(--wb-line);background:var(--wb-panel)}.flowCapture img{display:block;width:100%;height:auto;margin:0 auto}.flowCapture iframe{display:block}.flowScaled{position:relative;margin:0 auto}.flowCapture .lede{padding:24px}.flowImport{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;height:auto!important;padding:12px!important;max-width:100%}.flowImport input{font-size:12px;max-width:100%;min-width:0}
.flowRole{border-top:1px solid var(--wb-line);padding:14px 0;font-size:13px}.flowRole summary{cursor:pointer}.flowRole small{color:var(--wb-dim);margin-left:8px}.flowRules{padding-top:12px;display:grid;gap:8px}.flowRules code{font:11px var(--wb-mono);overflow-wrap:anywhere;color:var(--wb-soft)}
.flowLeak{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:14px 0;border-top:1px solid var(--wb-line);font-size:13px}.flowLeak b{font-weight:400;overflow-wrap:anywhere}.flowLeak span{font:12px var(--wb-mono);color:var(--wb-warn)}.flowLeak code{grid-column:1/-1;font-size:11px;color:var(--wb-dim);overflow-wrap:anywhere}
@media(max-width:760px){.flowCompare{grid-template-columns:1fr}.flowStages{grid-template-columns:repeat(2,minmax(0,1fr))}.flowCard{padding:20px}.flowTable{font-size:12px}.flowNumbers{gap:6px}.flowEntrada{padding:16px}.flowCapture{height:360px}.flowAcoes .btn{white-space:normal}.flowPalette{grid-template-columns:repeat(3,minmax(0,1fr))}}

.flowHoje{display:block;font:10px var(--wb-mono);color:var(--wb-dim);margin-top:4px;overflow-wrap:anywhere}.flowTokenInput{grid-column:1/-1;display:block;font:10px var(--wb-mono);color:var(--wb-dim);overflow-wrap:anywhere;max-width:100%}

/* Entrega por versão. Mesmas linhas, contraste e espaçamento da Workbench. */
.deliveryFamilies{border-top:1px solid var(--wb-line)}.deliveryFamily{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:14px 0;border:0;border-bottom:1px solid var(--wb-line);background:none;text-align:left;font:400 14px/20px var(--wb-sans)}.deliveryFamily>span:last-child{font-size:13px;color:var(--wb-dim);text-align:right}.deliveryFamily:hover>span:first-child{text-decoration:underline;text-underline-offset:4px}
.deliveryVersion{display:grid;gap:8px;max-width:500px;margin:28px 0;font:400 13px/20px var(--wb-sans);color:var(--wb-dim)}.deliveryVersion .wbSelect{width:100%}
/* Filtros e fonte da comparação compartilham uma faixa, com campos pelo conteúdo. */
.comparisonControls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--wb-section-gap);margin:var(--wb-section-gap) 0}
.comparisonControls .flowFilters{display:flex;flex-wrap:wrap;margin:0;gap:var(--wb-section-gap);min-width:0;max-width:100%}
.comparisonControls .flowFilters label,.comparisonControls .deliveryVersion{display:grid;gap:8px;min-width:0;max-width:100%;font:400 12px/20px var(--wb-sans);color:var(--wb-soft)}
.comparisonControls .deliveryVersion{width:max-content;margin:0}
.comparisonControls label .wbSelect{width:auto;max-width:100%;justify-self:start}
.comparisonControls .wbSelectTrigger{width:auto;max-width:100%}
#flowMeasures:has(.flowTable)+.flowDetails{border-top:0;margin-top:0;padding-top:var(--wb-section-gap)}
.flowDetails{margin:24px 0;border-top:1px solid var(--wb-line);padding:16px 0;min-width:0}.flowDetails>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;font:400 14px/22px var(--wb-sans);color:var(--wb-text)}.flowDetails>summary::-webkit-details-marker{display:none}.flowDetails>summary::after{content:'';width:14px;height:14px;flex:none;background:currentColor;mask:url('../identidade/icones/baixo.svg') center/contain no-repeat}.flowDetails[open]>summary::after{transform:rotate(180deg)}.flowDetails[open]>summary{margin-bottom:24px}.flowDetails p{font-size:13px;line-height:20px;max-width:var(--medida-texto);margin:12px 0;color:var(--wb-soft);text-wrap:pretty}.flowDetails code{font:12px/20px var(--wb-mono);color:var(--wb-dim);overflow-wrap:anywhere}
.deliverySystem .resumoGrid{margin-top:24px}.deliveryHistory h3{font-size:14px;font-weight:500;margin:24px 0 12px}#decFamilias>.dec,#decHistorico>.dec{display:block}.deliveryHistory .flowDecision>p{margin-bottom:0}.deliveryHistory .flowDecision small{display:block;font:400 12px/20px var(--wb-sans);color:var(--wb-dim);margin-top:8px}
.flowColorRole{display:block;font:400 13px/18px var(--wb-sans);margin-top:8px;overflow-wrap:anywhere}.flowPalette small,.flowPalette code{font-size:11px;line-height:17px}
/* O sistema num relance: telas genéricas no topo do Sistema proposto. Fox · Claude Code · Lucius 04 */
.vitrine{margin:40px 0 8px}
.vtCab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:24px}.vtCab h2{font-size:16px;font-weight:500}.vtCab p{font-size:13px;color:var(--wb-soft);max-width:var(--medida-texto);margin-top:6px;text-wrap:pretty}
.vtControles{display:flex;gap:12px;flex-wrap:wrap}
.vtSeg{display:inline-flex;border:1px solid var(--wb-line-2);border-radius:4px;padding:2px;gap:2px}
.vtOp{border:0;background:none;color:var(--wb-soft);font-size:12px;padding:6px 12px;border-radius:3px;display:inline-flex;align-items:center;gap:8px;min-height:28px}
.vtOp[aria-pressed=true]{background:var(--wb-line);color:var(--wb-text)}.vtOp:not(:disabled):not([aria-pressed=true]):hover{color:var(--wb-text)}.vtOp:disabled{cursor:default;opacity:.7}
.vtTelas{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;align-items:start}
.vtFig{margin:0;min-width:0}.vtFig figcaption{font-size:12px;color:var(--wb-dim);margin-bottom:8px}
.vtTela{overflow:hidden;display:grid;align-content:start}.vtTela span{overflow-wrap:anywhere}
.vtMetricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.vtBotao{display:inline-flex;align-items:center;white-space:nowrap}
.vtMedidas{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;margin:20px 0 32px;padding:14px 0;border-top:1px solid var(--wb-line);border-bottom:1px solid var(--wb-line)}
.vtMedidas li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--wb-soft)}.vtMedidas code{font:11px var(--wb-mono);color:var(--wb-text)}
.vtMedidas i{display:block;flex:none}.vtEsp{background:var(--wb-line-2)}.vtRaio{width:20px;height:20px;border:1px solid var(--wb-soft);border-right:0;border-bottom:0}.vtCtrl{width:6px;border:1px solid var(--wb-soft);border-left:0;max-height:48px}
.vtCores{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px 24px;align-items:start}
.vtMapa{position:relative;aspect-ratio:100/62;border:1px solid var(--wb-line-2);overflow:hidden}
.vtBloco{position:absolute;box-shadow:inset 0 0 0 1px rgba(127,127,127,.18);padding:8px;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;overflow:hidden}
.vtBloco b{font-size:12px;font-weight:500;line-height:1.2}.vtBloco small{font:11px var(--wb-mono)}
.vtDetalhe{padding:0}
.vtFaixa,.vtFaixaV{display:flex;width:100%}.vtFaixa{height:40px;border:1px solid var(--wb-line-2)}.vtFaixaV{flex-direction:column;height:100%}.vtFaixa i,.vtFaixaV i{display:block;min-width:2px;min-height:2px}
.vtRotulo{font-size:12px;color:var(--wb-dim);margin:16px 0 8px}
.vtLegenda{list-style:none;display:grid;gap:0;font-size:12px}
.vtLegenda li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--wb-line)}
.vtLegenda i{width:16px;height:16px;border:1px solid var(--wb-line-2);border-radius:2px}.vtLegenda small{display:inline;margin-left:8px;font:10px var(--wb-mono);color:var(--wb-dim)}.vtLegenda code{font:11px var(--wb-mono);color:var(--wb-soft)}
.vtCoresFig .flowDetails{margin-top:16px}
@media (max-width:760px){.vtTelas,.vtCores{grid-template-columns:minmax(0,1fr)}.vtCab{align-items:flex-start}}
.vtOp .selo{font-size:11px;color:var(--wb-dim)}
/* Clareza de Uso: o caminho de volta na Entrega e a nota do preparo da entrada. Fox · Claude Code · Lucius 04 */
/* Entrada: composição da Luma, com os componentes da bancada. Fox · Codex. */
.paginaCalma .paginaCorpo{max-width:1236px;padding:48px 48px 80px}
.inCab{margin-bottom:32px}.inCab .pgSub{margin-top:8px}
/* O título recebe foco após a troca de produto; não é um controle interativo. */
.inCab .pgTitulo:focus{outline:none}
.inRot{font:400 12px/16px var(--wb-mono);text-transform:uppercase;color:var(--wb-dim);letter-spacing:0}
.inPreparo{padding-bottom:var(--wb-section-gap);min-width:0}
/* Uma coluna: orientação, registro com a ação e os três detalhes recolhidos. */
.inEntradaLayout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "registro" "dados";row-gap:var(--wb-section-gap);max-width:880px}
.inEntradaLayout .inCab{grid-area:intro;margin:0}
.inEntradaLayout>.inRegistro,.inCatalogo{grid-area:registro}
.inCatalogo{display:grid;gap:var(--wb-section-gap);min-width:0}
/* Padrão de registro (Entrada e Entrega): ícone sem contorno, ações a 64px do texto e 12px entre si. */
:root{--wb-registro-gap:64px;--wb-registro-acoes-gap:12px}
/* Registro da entrada: primeiro item da lista, só com a divisória de baixo; o mesmo molde nas duas telas. */
.inRegistro{display:grid;grid-template-columns:minmax(0,max-content) auto;justify-content:start;align-items:center;column-gap:var(--wb-registro-gap);row-gap:var(--wb-section-gap);min-width:0;padding:var(--wb-section-gap) 0;background:none;border:0;border-bottom:1px solid var(--wb-line)}
.inIdentidade{min-width:0}
.inOculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.inContextoAcao{display:flex;gap:var(--wb-registro-acoes-gap);max-width:100%}
#paginaInput .btn{max-width:100%;white-space:normal;height:auto;min-height:var(--wb-control-h);padding-top:7px;padding-bottom:7px}
#paginaInput .btn.grande{min-height:48px;padding-top:12px;padding-bottom:12px}
.inDados{grid-area:dados;min-width:0}
.inNumeros dd{font-variant-numeric:tabular-nums}
/* As divisórias seguem a página; só o corpo aberto limita a medida de leitura. */
.inDetalhes{margin:0;padding:0;border-top:0;border-bottom:1px solid var(--wb-line)}
.inDetalhes>summary{min-height:56px;padding:16px 0;font:400 14px/22px var(--wb-sans);color:var(--wb-soft)}.inDetalhes[open]>summary{margin-bottom:0}
.inDetalhesCorpo{padding:8px 0 24px}
/* Dois níveis comuns aos detalhes e ao preparo: leitura 14/22, rótulos 12/18. */
.inLeitura{display:grid;gap:16px;min-width:0;max-width:var(--medida-texto);font:400 14px/22px var(--wb-sans);color:var(--wb-soft)}
.inLeitura p,.inLeitura code{font:inherit;color:inherit}.inLeitura p{margin:0;max-width:none}.inLeitura code{overflow-wrap:anywhere}
.inFatos{display:grid;gap:12px;margin:0}.inFatos>div{display:grid;grid-template-columns:160px minmax(0,1fr);align-items:baseline;column-gap:24px}.inFatos dd{margin:0;overflow-wrap:anywhere;font:400 14px/22px var(--wb-sans);color:var(--wb-text)}
.inFatos dt,.inLeitura .inRotulo{font:500 12px/18px var(--wb-sans);color:var(--wb-dim);margin:0}
.inPreparo h2{font-size:20px;line-height:28px;font-weight:500;margin-bottom:12px}
.inInstrucaoGrupo{display:grid;gap:8px;min-width:0}
/* Instrução: o card de código do Design System (borda, raio 4, 16 de respiro) com o copiar 40×40 no canto. */
#paginaInput .inInstrucaoCard{position:relative;min-width:0;border:1px solid var(--wb-line);border-radius:4px;padding:16px 64px 16px 16px}
#paginaInput .inInstrucao{margin:0;font:400 14px/22px var(--wb-sans);color:var(--wb-text);user-select:text;overflow-wrap:anywhere}
#paginaInput .dsdCopiarCodigo{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:40px;height:40px;padding:0;background:none;border:1px solid var(--wb-line-2);border-radius:4px;color:var(--wb-soft)}
#paginaInput .dsdCopiarCodigo:hover{border-color:var(--wb-soft);color:var(--wb-text)}
#paginaInput .dsdCopiarCodigo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#paginaInput .dsdCopiarCodigo .wbIcon{fill:currentColor;stroke:none;width:14px;height:14px}
#paginaInput .inCopiaFalha{margin:0;font:400 14px/22px var(--wb-sans);color:var(--wb-text)}
/* Entrada limpa: primeiro acesso, entrada disponível e orientação em três tópicos. Fox · Claude Code · 0.9. */
#paginaInput .inCab .pgSub{max-width:none}
#paginaInput .inMeta{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:8px;font:400 12px/18px var(--wb-sans);color:var(--wb-dim)}
.inVazioIdentidade{display:flex;align-items:center;gap:var(--wb-section-gap)}
.inPasta{display:grid;place-items:center;flex:none;width:48px;height:48px;color:var(--wb-soft)}.inPasta .wbIcon{width:24px;height:24px;fill:currentColor}
.inPasta.inRegistroEstado{color:var(--wb-good)}
.inVazioTitulo{overflow-wrap:anywhere}
.inVazioTitulo{font-size:20px;line-height:28px;font-weight:500}
/* Carregar: uma linha fina corre na borda de baixo do registro; sem animação, fica só o texto do botão. */
.inRegistro.carregando{position:relative;overflow:hidden}
.inRegistro.carregando::after{content:"";position:absolute;left:0;bottom:0;width:40%;height:2px;background:var(--wb-acento);animation:inCarregando 900ms var(--wb-ease) infinite}
@keyframes inCarregando{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@media(prefers-reduced-motion:reduce){.inRegistro.carregando::after{display:none}}
:root[data-movimento=reduzido] .inRegistro.carregando::after{display:none}
/* Como funciona: pop-up de três passos, imagem em cima e texto embaixo. */
dialog.inComo{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;overflow:auto;background:var(--wb-bg);border:1px solid var(--wb-line-2);border-radius:var(--wb-panel-radius)}
dialog.inComo::backdrop{background:rgba(0,0,0,.6)}
dialog.inComo:focus{outline:none}
.inComoFechar{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:var(--wb-control-radius);background:none;color:var(--wb-soft)}.inComoFechar:hover{color:var(--wb-text);background:var(--wb-panel)}.inComoFechar .wbIcon{width:14px;height:14px;fill:currentColor}
.inComoImagem{display:grid;place-items:center;aspect-ratio:1/1;width:100%;background:var(--wb-panel);border-bottom:1px solid var(--wb-line)}
.inComoImagem span{font:400 12px/18px var(--wb-mono);color:var(--wb-dim)}
.inComoTexto{padding:var(--wb-section-gap) var(--wb-section-gap) 0}
.inComoPasso{margin:0 0 8px;font:400 12px/18px var(--wb-mono);color:var(--wb-dim)}
dialog.inComo h2{margin:0 0 8px;font-size:20px;line-height:28px;font-weight:500}
/* Três textos sempre em duas linhas equilibradas: a janela não muda de altura entre os passos. */
dialog.inComo .inComoTexto>p:last-child{margin:0;max-width:var(--medida-texto);min-height:44px;text-wrap:balance;font-size:14px;line-height:22px;color:var(--wb-soft)}
.inComoRodape{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:var(--wb-section-gap)}
.inComoProgresso{display:flex;gap:6px}.inComoProgresso i{width:16px;height:2px;background:var(--wb-line-2)}.inComoProgresso i.atual{background:var(--wb-text)}
.inComoAcoes{display:flex;gap:var(--wb-control-gap)}
@media(max-width:760px){.inVazioIdentidade{gap:16px}.inComoAcoes .btn{min-height:44px}}
@media(max-width:760px){.paginaCalma .paginaCorpo{padding:32px 16px 64px}.inCab .pgSub{font-size:17px;line-height:1.45}.inRegistro{grid-template-columns:minmax(0,1fr)}.inFatos>div{grid-template-columns:minmax(0,1fr);gap:4px}}
.semProduto .versoes{display:none}
.item.espera{color:var(--wb-dim);cursor:default}.item.espera:hover{background:none}
.flowGrupo{margin-top:40px}.flowGrupo h2{font-size:16px;font-weight:500;margin-bottom:16px}
/* Entrega no molde da Entrada: registro sem moldura, listas com divisórias e duas colunas sem cards. Fox · Claude Code · 0.9. */
.dvRegistro{display:grid;grid-template-columns:minmax(0,max-content) auto;justify-content:start;align-items:center;column-gap:var(--wb-registro-gap);row-gap:var(--wb-section-gap);min-width:0;padding:var(--wb-section-gap) 0;margin:0 0 48px;border-bottom:1px solid var(--wb-line)}
.dvIdentidade{display:flex;align-items:center;gap:var(--wb-section-gap);min-width:0}.dvTexto{min-width:0}
.dvQuadro{display:grid;place-items:center;flex:none;width:48px;height:48px;color:var(--wb-soft)}.dvQuadro .wbIcon{width:24px;height:24px;fill:currentColor}.dvQuadro.ok{color:var(--wb-good)}
.dvTitulo{font-size:20px;line-height:28px;font-weight:500;overflow-wrap:anywhere}
#fluxoResultado .dvMeta{margin:8px 0 0;max-width:none;font:400 12px/18px var(--wb-sans);color:var(--wb-dim)}
.dvTexto .deliveryVersion{margin:12px 0 0;max-width:360px}
.dvAcao{display:flex;gap:var(--wb-registro-acoes-gap);max-width:100%}
#fluxoResultado .btn.grande{height:auto;min-height:48px;padding-top:12px;padding-bottom:12px;white-space:normal}
.dvSecao{margin:0;padding-bottom:16px;font-size:16px;line-height:24px;font-weight:500}
.deliveryProgress{margin:0 0 48px}
.deliveryFamilyEstado{display:inline-flex;align-items:center;gap:8px}.deliveryFamilyEstado.ok{color:var(--wb-soft)}.deliveryFamilyEstado .wbIcon{width:14px;height:14px;fill:var(--wb-good)}
.deliveryProof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin:0 0 48px}.deliveryProof>*{min-width:0}
.deliveryProof .dvSecao{border-bottom:1px solid var(--wb-line)}
.deliveryChange{padding:16px 0;border-bottom:1px solid var(--wb-line)}.deliveryChange h3{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;margin:0;font-size:14px;line-height:20px;font-weight:500}.deliveryChange p{margin:4px 0 0;font-size:13px;line-height:20px;color:var(--wb-soft)}
#fluxoResultado .dvEstado{margin:16px 0 4px;max-width:none;font-size:16px;line-height:24px;color:var(--wb-text)}
#fluxoResultado .dvNota{margin:0;max-width:var(--medida-texto);font-size:13px;line-height:20px;color:var(--wb-soft)}
.dvNumeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0 12px}.dvNumeros dt{font-size:12px;line-height:18px;color:var(--wb-dim)}.dvNumeros dd{margin:4px 0 0;font-size:24px;line-height:32px;font-variant-numeric:tabular-nums}
.dvAcoes{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wb-control-gap);margin:20px 0 0}
.deliveryImplementation .flowNota:empty{display:none}.deliveryImplementation .flowNota{margin:12px 0 0}.deliveryImplementation .flowDetails{margin:20px 0 0;padding-bottom:0}
.dvAnteriores{margin:0 0 var(--wb-section-gap)}.dvAnteriores .deliveryVersion{margin:12px 0}
.dvMesa{margin:-24px 0 var(--wb-section-gap)!important}.dvMesa .linkBtn{margin-left:8px}
.dvAnteriores>summary{font-size:13px;color:var(--wb-soft)}
.dvDobras{border-top:1px solid var(--wb-line)}.dvDobras>.flowDetails{margin:0;padding:16px 0;border-top:0;border-bottom:1px solid var(--wb-line)}.dvDobras>.flowDetails>summary{font-weight:500}
@media(max-width:760px){.dvRegistro{grid-template-columns:minmax(0,1fr)}.dvIdentidade{gap:16px}.deliveryProof{grid-template-columns:minmax(0,1fr);gap:32px}.deliveryImplementation{order:-1}.dvNumeros{gap:12px}.dvAcoes .btn,.dvAcoes .flowImport{min-height:44px}.deliveryFamily{min-height:48px}}

/* Result: registro da versão e seções editoriais na mesma ordem em todas as larguras. */
#fluxoResultado{--delivery-column-gap:40px}
#fluxoResultado .dvRegistro{grid-template-columns:repeat(2,minmax(0,1fr));justify-items:start;justify-content:start;gap:var(--wb-section-gap) var(--delivery-column-gap);margin:0 0 32px;padding:var(--wb-section-gap) 0}
#fluxoResultado .dvAcao{justify-content:flex-start;min-width:0}
#fluxoResultado .deliveryVersion{margin:0;max-width:280px;gap:8px}
#fluxoResultado .deliveryVersion .wbSelect{min-width:0;max-width:100%}
#fluxoResultado .dvAnterior{margin:8px 0 0;font:400 12px/18px var(--wb-sans);color:var(--wb-soft)}
#fluxoResultado .dvVersao{margin-bottom:32px;padding-bottom:var(--wb-section-gap);border-bottom:1px solid var(--wb-line)}
#fluxoResultado .dvVersao .dvRegistro{margin:0;padding-bottom:0;border:0}
#fluxoResultado .dvMesa{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px var(--wb-section-gap);margin:16px 0 0!important;padding:0;border:0}
#fluxoResultado .dvMesa .linkBtn{margin:0;font-size:13px}
#fluxoResultado .deliveryProof{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;margin:0 0 32px}
#fluxoResultado .deliveryImplementation{order:0}
#fluxoResultado .dvSecao{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:0;border:0;font-size:20px;line-height:28px}
#fluxoResultado .dvSemResumo{padding:0}
#fluxoResultado .deliveryImplementation{padding-top:var(--wb-section-gap);border-top:1px solid var(--wb-line)}
#fluxoResultado .dvEstado{margin:0 0 4px;font-size:14px;line-height:22px}
#fluxoResultado .deliveryImplementation>.flowDetails{width:fit-content;max-width:100%;margin-top:16px;padding:0;border:0}
#fluxoResultado .deliveryImplementation>.flowDetails>summary{justify-content:flex-start;gap:12px;font-size:13px;color:var(--wb-soft)}
#fluxoResultado .deliveryImplementation>.flowDetails[open]>summary{margin-bottom:12px}
#fluxoResultado .deliveryChange{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,3fr);gap:var(--wb-section-gap);padding:16px 0}
#fluxoResultado .deliveryChangeHead{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,3fr);gap:var(--wb-section-gap);margin-bottom:8px;font:400 12px/18px var(--wb-sans);color:var(--wb-dim)}
#fluxoResultado .deliveryChangeHead+.deliveryChange{padding-top:0}
#fluxoResultado .deliveryChange:last-child{padding-bottom:0;border-bottom:0}
#fluxoResultado .deliveryChange h3{gap:8px;align-items:center}
#fluxoResultado .deliveryChange h3>span{display:flex;flex:none;color:var(--wb-soft)}
#fluxoResultado .deliveryChange .wbIcon{width:16px;height:16px;fill:currentColor}
#fluxoResultado .deliveryChange p{margin:0;max-width:var(--medida-texto);overflow-wrap:anywhere}
#fluxoResultado .dvNumeros{max-width:560px;margin:var(--wb-section-gap) 0 16px;gap:var(--wb-section-gap)}
#fluxoResultado .dvConformidade{margin-top:8px}
#fluxoResultado .dvAcoes{gap:12px;margin-top:var(--wb-section-gap)}
#fluxoResultado .dvAcoes .btn{height:auto;min-height:var(--wb-control-h);padding-top:7px;padding-bottom:7px;white-space:normal}
#fluxoResultado .dvAcoes>[data-flow="comparar"]{border-color:var(--wb-soft)}
@media(max-width:760px){
 #fluxoResultado .dvRegistro{grid-template-columns:minmax(0,1fr)}
 #fluxoResultado .dvAcao{justify-content:flex-start}
 #fluxoResultado .dvAcoes{display:grid;grid-template-columns:minmax(0,1fr)}
 #fluxoResultado .dvAcoes>.btn{width:100%;justify-content:center;text-align:center}
 #fluxoResultado .deliveryChange{grid-template-columns:minmax(0,1fr);gap:8px}
 #fluxoResultado .deliveryChangeHead{display:none}
 #fluxoResultado .dvAcoes>.btn{min-height:44px}
 #fluxoResultado .dvNumeros{gap:12px}
}

/* 0.10, rodada 2: a Entrega do Design System. O documento vem de pagina-design-system.js */
#pagina:has(#fluxoDesignSystem:not([hidden])) .paginaCorpo{padding-top:80px}
#fluxoDesignSystem{--ds-cab-gap:32px;--ds-divisor-gap:48px;--ds-marca-gap:40px}
.dsdEntrega{display:grid;gap:12px;margin:32px 0 0}
/* A tinta da marca começa abaixo da caixa tipográfica: o respiro até a caixa
   é um passo menor que o das ações, equilibrando os dois lados visualmente. */
.dsdNaPagina .dsdCapa{padding-top:var(--ds-marca-gap)}
@media(max-width:760px){
 #pagina:has(#fluxoDesignSystem:not([hidden])) .paginaCorpo{padding-top:40px}
 #fluxoDesignSystem{--ds-divisor-gap:40px;--ds-marca-gap:32px}
}
.dsdEstado{margin:0;color:var(--wb-soft);max-width:640px}.dsdEstado b{color:var(--wb-text);font-weight:500}
.dsdAcoes{margin:0}
.dsdEntrega .dsdAnteriores{margin:8px 0 0;padding-bottom:0}
.dsdAnteriores[open]>summary{margin-bottom:0}
.dsdAnteriores ul{list-style:none;margin:16px 0 0;padding:0;display:grid}
.dsdAnteriores li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding:12px 0;border-top:1px solid var(--wb-line);font:13px/1.5 var(--wb-mono);color:var(--wb-soft)}
.dsdAnteriorAcoes{display:flex;flex-wrap:wrap;gap:8px 16px}
.dsdPaginaVazia{display:grid;gap:16px;justify-items:start}

.dsdAnteriorDados{display:flex;flex-wrap:wrap;gap:4px 16px;min-width:0}
.dsdAnteriorDados>span{display:block}
.dsdAnteriores li:first-child{border-top:0;padding-top:0}
@media(max-width:760px){.dsdAnteriores li{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.dsdAnteriorDados{display:grid;gap:4px}}

/* Entrega orienta; o Design System mantém documento e downloads em sua própria rota. */
@media(max-width:1100px){#fluxoResultado .dvRegistro{grid-template-columns:minmax(0,1fr)}}

.dsdHistorico{margin-top:32px;border-top:1px solid var(--wb-line)}
.dsdHistorico .dsdAnteriores{margin:0;border-top:0;padding:24px 0 0}
/* Os dois lados da Review compartilham altura útil; Original já está ao lado. */
.comparisonPrepared .qEntrada{display:none}

/* Exemplo carregado (30/10): "Demo" pequeno à direita do nome, centrado na mesma linha. */
.inProdutoLinha{display:flex;align-items:center;gap:8px;min-width:0}
.inProdutoLinha .inSelo{flex:none;font:400 12px/16px var(--wb-sans);color:var(--wb-dim)}
/* Quarto Ato, Lote 3 (Luma, C1 e C2; ajuste do Lucas na 0.14.6): um esqueleto só, nos dois estados.
   Linha 1: ícone de 40px e título de 24px, centrados entre si; Fechar à direita (seção H). Tudo abaixo da linha 1
   (apoio, descrição, botões e números) começa na borda do ícone (Lucas, 0.14.6).
   Linha 2: os botões, na borda do ícone; depois a linha de números (só com produto) e o divisor. */
.inRegistro,.inRegistro[data-estado=carregada]{display:block;padding:var(--wb-section-gap) 0 32px}
/* As três medidas da casca (seção I2; a regra inteira entra no Lote 4). Aqui usadas pela Entrada e pelo parágrafo de abertura. */

.inRegistro{container:inColuna/inline-size}
/* O bloco tem a largura do próprio conteúdo (até a coluna): o Fechar acompanha o fim do conteúdo, não a borda da página. */
#paginaInput .inVazioIdentidade{display:grid;grid-template-columns:40px minmax(0,1fr) 44px;gap:0 16px;align-items:center;width:fit-content;max-width:100%}
#paginaInput .inVazioIdentidade>div{display:contents}
#paginaInput .inRegistro .inPasta{grid-column:1;grid-row:1;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--wb-line-2);border-radius:10px}
#paginaInput .inRegistro .inPasta .wbIcon{width:20px;height:20px}
#paginaInput .inVazioIdentidade :is(.inVazioTitulo,.inProdutoLinha){grid-column:2;grid-row:1;min-width:0}
#paginaInput .inVazioIdentidade .inVazioTitulo{font-size:24px;line-height:32px;max-width:var(--medida-texto)}
/* Texto de apoio do bloco (descrição, apoio do vazio, aviso de fechado): um peso só, 14/22, medida curta e balance (I4). */
#paginaInput .inVazioIdentidade .inMeta{display:block;grid-column:1/-1;margin-top:12px;max-width:var(--medida-curta);font-size:14px;line-height:22px;text-wrap:balance}
/* Seção H (Luma) e ajuste do Lucas: Fechar só com o ícone, fantasma, alvo de 44px, na linha 1, no fim do bloco. */
#paginaInput .inVazioIdentidade .inFechar{grid-column:3;grid-row:1;justify-self:end;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:999px;background:none;color:var(--wb-soft)}
#paginaInput .inVazioIdentidade .inFechar:hover{color:var(--wb-text);background:var(--wb-menu-hover)}
#paginaInput .inVazioIdentidade .inFechar .wbIcon{width:14px;height:14px;fill:currentColor}
/* Selo "Demo" no centro ótico do nome (Lucas, 0.14.6): as duas palavras na mesma linha de base e o selo sobe metade
   da diferença entre as faixas das letras, medidas como a média de cap e ex de cada fonte. Sem px fixo: acompanha
   fonte e tamanho. --nome-faixa é registrada como <length> para guardar a medida da fonte do nome. */
@property --nome-faixa{syntax:'<length>';inherits:true;initial-value:0px}
#paginaInput .inVazioIdentidade .inProdutoLinha{align-items:baseline;font-size:24px;line-height:32px;--nome-faixa:.6em;--nome-faixa:calc((1cap + 1ex)/2)}
#paginaInput .inProdutoLinha .inSelo{position:relative;top:calc((.6em - var(--nome-faixa))/2);top:calc(((1cap + 1ex)/2 - var(--nome-faixa))/2)}
#paginaInput .inVazioIdentidade>div>:is(.inContextoAcao,.inNumeros){grid-column:1/-1}
.inRegistro .inContextoAcao{margin-top:24px}
/* C2: a linha de números sob os botões, sem ícone, sem caixa e sem fio. Número de 28px em cima, rótulo de 12px embaixo;
   quatro colunas de no mínimo 96px, 2 por 2 quando as quatro não cabem (4 x 96 + 3 x 32 = 480px de coluna). A marcação segue dt e depois dd. */
.inConteudo.inFatos{display:grid;grid-template-columns:repeat(4,minmax(96px,1fr));gap:16px 32px;max-width:560px;margin:32px 0 0}
.inConteudo.inFatos>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:2px;min-width:0}
.inConteudo.inFatos dd{font:400 28px/36px var(--wb-sans);font-variant-numeric:tabular-nums;color:var(--wb-text)}
.inConteudo.inFatos dt{font:400 12px/18px var(--wb-sans);color:var(--wb-dim)}
@container inColuna (max-width:479px){.inConteudo.inFatos{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Terceiro ato, item 7: as imagens do tutorial ocupam o quadrado inteiro */
.inComoImagem img{display:block;width:100%;height:100%;object-fit:cover}
/* Lote 5 (item 8): a Review abre pelo valor gerado e pela versão; a ação final é o Design System, com o resto ao lado */
#reviewTopo{margin:0 0 32px}#reviewTopo:empty{display:none}
.dvValor{margin:0 0 24px;font:500 16px/24px var(--wb-sans);color:var(--wb-text);text-wrap:pretty}
#fluxoResultado #reviewTopo .dvRegistro{margin:0;padding-top:24px;border-top:1px solid var(--wb-line);border-bottom:0}
.dvObter{flex-direction:column;align-items:flex-start;gap:12px}
.dvObterMais{margin:0;font:400 13px/20px var(--wb-sans);color:var(--wb-soft)}.dvObterMais .linkBtn{font-size:13px}
#fluxoResultado .dvProximo{margin-top:16px}
/* Quarto Ato, Lote 4 (Luma, D2 e D3): a Conferência avalia o trabalho atual. Placar, "O que mudou" com as linhas da Proposta,
   o antes e depois, as versões recolhidas num details só e o fecho vazado. Nenhum azul. */
#fluxoResultado .dvVazio{margin:0}
#fluxoResultado .dvMudou{margin:-12px 0 24px}
.dvMudancas .preparedTitle{margin:0;padding-bottom:16px;border-bottom:1px solid var(--wb-line)}
.dvMudancas .preparedTitle+.preparedAreas{margin-top:0}
#fluxoResultado .dvVersoes{margin:32px 0 0;padding:16px 0;border-top:1px solid var(--wb-line);border-bottom:1px solid var(--wb-line)}
#fluxoResultado .dvVersoes>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:0 12px;font-weight:500;color:var(--wb-text)}
#fluxoResultado .dvVersoes>summary::after{align-self:center}
.dvVersoesEstado{min-width:0;font-weight:400;color:var(--wb-soft)}
.dvVersoesCorpo{padding-top:24px}
#fluxoResultado .dvVersoesCorpo .dvVersaoBloco{display:block;margin:0 0 32px;padding:0;border:0}
#fluxoResultado .dvVersaoBloco .dvObterMais{margin-top:12px}
#fluxoResultado .dvVersoesCorpo .deliveryProof{margin-bottom:32px}
#fluxoResultado .dvFecho{margin-top:32px}
.dsdEntrega .dsdApoio{margin:0;max-width:var(--medida-curta);font:400 14px/22px var(--wb-sans);color:var(--wb-dim);text-wrap:balance}
/* Quinto Ato, 4.6: o JSON é a ação pequena no fim da linha (12px de gap + 12px = 24px); empilhada, fica à esquerda na linha de baixo */
.dsdEntrega .dsdAcoes>.dsdJson{margin-left:12px;align-self:center}
.dsdEntrega .dsdAcoes.empilhada>.dsdJson{width:auto;align-self:flex-start;margin-left:0}

/* Quarto Ato, Lote 3 (Luma, C3): uma regra para toda linha de ações. Lado a lado, na largura natural, enquanto couberem;
   quando não cabem, todas empilham na largura da coluna, na ordem do DOM. Nunca uma ao lado e outra embaixo.
   linhas-acoes.js liga .empilhada medindo a linha; os botões continuam .btn grande. */
:is(.inContextoAcao,.propostaBotoes,.propostaSaidas,.dvAcao,.dsdAcoes){display:flex;flex-wrap:nowrap;align-items:stretch;gap:12px;min-width:0;max-width:100%}
:is(.inContextoAcao,.propostaBotoes,.propostaSaidas,.dvAcao,.dsdAcoes)>.btn{flex:none;width:auto;white-space:nowrap}
:is(.inContextoAcao,.propostaBotoes,.propostaSaidas,.dvAcao,.dsdAcoes).empilhada{flex-direction:column}
:is(.inContextoAcao,.propostaBotoes,.propostaSaidas,.dvAcao,.dsdAcoes).empilhada>.btn{width:100%;white-space:normal}

/* Seção I4: o primeiro parágrafo depois de um título ou summary quebra equilibrado; os longos seguem com pretty.
   Na Entrada, a abertura do preparo ("Compartilhe…") fica na medida de texto. */
:is(h2,h3,summary)+p,.inLeitura>p:first-child{text-wrap:balance}
#paginaInput .inLeitura>p:first-child{max-width:var(--medida-texto)}

/* 0.15.5 · acordeão da Entrada: o chevron fica legível também aberto (QA 0.15.4) */
.inDetalhes>summary{color:var(--wb-text)}
.flowDetails.inDetalhes>summary::after{width:16px;height:16px;background-color:var(--wb-text)}

.inDetalhes>summary:focus-visible{outline:2px solid var(--wb-text);outline-offset:2px}

/* LC05: downloads à esquerda; texto editorial à direita. */
.dsdEntrega{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:48px;margin:64px 0 0;padding:64px 0 48px;border-top:1px solid var(--wb-line)}
.dsdEntregaTexto{display:grid;gap:24px;min-width:0}
.dsdEntregaTitulo{margin:0;max-width:22ch;font:500 clamp(32px,3.4vw,48px)/1.1 var(--wb-sans);letter-spacing:-.03em;text-wrap:balance}
.dsdEntrega .dsdApoio{font-size:18px;line-height:1.5}
.dsdEntrega .dsdAcoes{margin:0;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:16px}
@media(max-width:760px){.dsdEntrega{grid-template-columns:minmax(0,1fr);margin-top:40px;padding:40px 0;gap:32px}}