/*
 * DoceLar — entrada da profissional (F6): cadastro 134834:4304, em análise 134834:4327
 * e Documentos enviados [TELA-NOVA:2026-09-24]. Só o layout das telas: campo, upload,
 * aviso, badge e botão vêm de dl-components.css.
 *
 * Distâncias verticais são as do Figma com o texto cortado na maiúscula (text-box),
 * como o DS já faz nos componentes.
 */

@layer dl-telas {

/* ---------------- 134834:4304 ---------------- */

.dl-cad-prof {
    display: flex;
    flex-direction: column;
    padding-top: var(--dl-espaco-6);
    padding-bottom: var(--dl-espaco-5);
}

.dl-cad-prof__topo {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dl-cad-prof__titulo,
.dl-cad-prof__texto,
.dl-cad-prof__secao,
.dl-cad-analise__titulo,
.dl-cad-analise__texto {
    margin: 0;
    text-box: trim-both cap alphabetic;
}

.dl-cad-prof__titulo {
    font-size: var(--dl-h2-tamanho);
    font-weight: var(--dl-h2-peso);
    line-height: var(--dl-h2-lh);
    color: var(--dl-azul-marinho);
}

.dl-cad-prof__texto {
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
}

.dl-cad-prof__form {
    display: flex;
    flex-direction: column;
}

.dl-cad-prof__secao {
    margin-top: 40px;
    font-size: var(--dl-h3-tamanho);
    font-weight: var(--dl-h3-peso);
    line-height: var(--dl-h3-lh);
    color: var(--dl-cinza-50);
}

.dl-cad-prof__card {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-3);
    margin-top: 28px;
    padding: var(--dl-espaco-5);
    background: var(--dl-branco);
    border-radius: var(--dl-radius-card);
}

/* O espaçamento entre campos é o gap do card (12), não a margem do componente (16). */
.dl-cad-prof__card .dl-campo {
    margin-bottom: 0;
}

.dl-cad-prof__linha {
    display: flex;
    gap: 10px;
}

.dl-cad-prof__linha > .dl-campo {
    flex: 1 1 0;
    min-width: 0;
}

/* A UF mostra 2 letras; na metade da linha o nome da cidade truncava ("Campina Gr"). */
.dl-cad-prof__linha--local > .dl-campo:last-child {
    flex-grow: 2;
}

/* C36 [TELA-NOVA:2026-09-25] Experiência e serviços: o grupo de tipos segue o ritmo do
   .dl-campo (rótulo, 8, conteúdo); as opções são a Opção/Seleção do DS. Também na
   edição do perfil profissional (Prestador enfileira esta folha). */
.dl-oferta__tipos {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.dl-oferta__legenda {
    margin-bottom: var(--dl-espaco-2);
    padding: 0;
}

.dl-oferta__tipo .dl-opcao__texto {
    padding-block: 10px;
}

.dl-cad-prof__docs {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-3);
    margin-top: var(--dl-espaco-6);
}

.dl-cad-prof__aviso {
    margin-top: 40px;
}

.dl-cad-prof__aviso-titulo {
    font-weight: var(--dl-body1-tom-peso);
}

/* Aceite (sem desenho em 134834:4304): entre o aviso e o envio, no gap do aviso. */
.dl-cad-prof__termos {
    margin-top: var(--dl-espaco-6);
}

.dl-cad-prof__enviar {
    margin-top: var(--dl-espaco-6);
}

/* [DECISÃO:2026-09-29] Etapas, stepper e Voltar/Continuar só estruturam o desktop
   (dl-desktop-profissional.css): aqui as caixas somem e a tela segue 134834:4304. */
.dl-cad-prof__etapa,
.dl-cad-prof__acoes {
    display: contents;
}

.dl-cad-prof__progresso,
.dl-cad-prof__etapa-sub {
    display: none;
}

/* Voltar/Continuar nascem hidden e o display do .dl-botao venceria o atributo. */
.dl-cad-prof__acoes > [hidden] {
    display: none;
}

/* Ocupado: o spinner de dl-motion.css (qualquer largura) já dá o retorno; sem
   a opacidade .6 que o deixava apagado [TELA-NOVA:2026-09-28]. */

/* ---------------- 134834:4327 ---------------- */

.dl-cad-analise {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--dl-espaco-5);
}

/* Largura cheia de 375 com cantos de baixo 24: sai do respiro lateral do container. */
.dl-cad-analise__hero {
    position: relative;
    overflow: hidden;
    height: 574px;
    margin-inline: calc(var(--dl-respiro-lateral) * -1);
    border-radius: 0 0 24px 24px;
    background: var(--dl-degrade-marca);
}

/* Enquadramento do Figma (Rectangle 134834:4330): 177,12% × 77,15%, a -52,72% / 33,09%. */
.dl-cad-analise__foto {
    position: absolute;
    left: -52.72%;
    top: 33.09%;
    width: 177.12%;
    max-width: none;
    height: auto;
    pointer-events: none;
    user-select: none;
}

.dl-cad-analise__cabeca {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dl-espaco-4);
    padding-top: 56px;
    padding-inline: var(--dl-respiro-lateral);
    text-align: center;
    color: var(--dl-branco);
}

.dl-cad-analise__selo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 44px;
    background: var(--dl-branco);
    color: var(--dl-azul);
}

.dl-cad-analise__selo .dl-icone {
    width: 40px;
    height: 40px;
}

/* Cor explícita: o h1 do tema pinta azul-marinho e venceria a herança do bloco. */
.dl-cad-analise__titulo,
.dl-cad-analise__texto {
    color: var(--dl-branco);
}

.dl-cad-analise__titulo {
    font-size: var(--dl-h2-tamanho);
    font-weight: var(--dl-h2-peso);
    line-height: var(--dl-h2-lh);
}

.dl-cad-analise__texto {
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
    line-height: var(--dl-body2-lh);
}

.dl-cad-analise__rodape {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-3);
    margin-top: 86px;
}

.dl-cad-analise__rodape .dl-cad-prof__aviso {
    margin-top: 0;
}

/* [TELA-NOVA] estado recusado: o hero encolhe o respiro para caber o que precisa de ação. */
.dl-cad-analise:has([data-dl-recusados]) .dl-cad-analise__rodape {
    margin-top: var(--dl-espaco-6);
}

/* [TELA-NOVA:2026-10-01] fora do ar (C14 [DECISÃO:2026-10-01] D9): o suporte é a ação; o selo não pulsa, nada aguarda análise. */
.dl-cad-analise--fora .dl-cad-analise__rodape {
    margin-top: var(--dl-espaco-6);
}

.dl-cad-analise.dl-cad-analise--fora .dl-cad-analise__selo,
.dl-cad-analise.dl-cad-analise--fora .dl-cad-analise__selo::after {
    animation: none;
}

.dl-cad-analise__recusados {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-3);
}

/* ---- Motion no mobile (docs/21 §4 ⑤) [TELA-NOVA:2026-09-28] ---------- */
/* Mesmo desenho do desktop (dl-desktop-profissional.css): arquivo novo
   (DL.motion.pulsar 'is-novo') dá pop no ícone e no selo, e o nome aparece
   em fade; o selo do "em análise" pulsa ~2s a cada 6s. Com reduce, nada. */
@keyframes dl-cad-pulso {
    0%,
    34%,
    100% {
        transform: scale(1);
    }

    17% {
        transform: scale(1.06);
    }
}

@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
    .dl-upload.is-novo .dl-upload__icone,
    .dl-upload.is-novo .dl-badge {
        animation: dl-d-pop var(--dl-dur-lenta) var(--dl-ease-mola);
    }

    .dl-upload.is-novo .dl-upload__sub {
        animation: dl-m-so-fade var(--dl-dur-lenta) var(--dl-ease-saida);
    }

    .dl-cad-analise .dl-cad-analise__selo {
        animation: dl-cad-pulso 6s var(--dl-ease-troca) 1s infinite;
    }
}

}