/* ==========================================================================
   Wizard "Prefixo desativado"
   --------------------------------------------------------------------------
   Bloco de perguntas encadeadas usado em DOIS canais web (criação de chamado
   no dashboard e encaminhamento na página de chamados), por isso vive em
   components/ e não em pages/.

   Comportamento em web/static/js/prefixo_desativado_wizard.js.
   Os controles (label, radio, input) são os do design system — aqui só o
   layout do bloco, o aviso e o resumo do desfecho.
   ========================================================================== */

.pgo-pd-wizard {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Aviso de contexto: explica por que essas perguntas apareceram. */
.pgo-pd-wizard__aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    border: 1px solid var(--border-medium);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.pgo-pd-wizard__aviso i {
    color: var(--color-warning);
    font-size: var(--text-md);
    line-height: 1.5;
}

/* Uma pergunta do wizard. Fica oculta até a resposta anterior revelá-la. */
.pgo-pd-wizard__campo {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

/* Oculta de verdade: `display: none` também tira o campo da validação de
   formulário do projeto, que ignora campos invisíveis. Um `required` num
   bloco só transparente travaria o submit sem mensagem. */
.pgo-pd-wizard__campo--oculto {
    display: none;
}

.pgo-pd-wizard__opcoes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

/* Diz, antes do clique, o que o sistema vai fazer. É texto que precisa ser
   lido — daí --text-secondary e não --text-muted, que reprova em AA. */
.pgo-pd-wizard__resumo {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--glass-bg);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Sem resposta ainda: nada a resumir, o bloco não deve ocupar espaço. */
.pgo-pd-wizard__resumo:empty {
    display: none;
}

@media (max-width: 768px) {
    .pgo-pd-wizard__opcoes {
        gap: var(--space-sm);
    }
}