/*
 * F10 — telas do cliente: agendar (134834:3238/3292/3364), profissionais em modo
 * seleção (3524), revisão (3542), confirmado (3628), meus agendamentos (3658/3718/3788)
 * e detalhe (3848/3929/4142). Só var(--dl-*): altura, gap e tipografia em px do Figma,
 * largura pela razão do container. Cor fora das variáveis do Figma (faixas laranja
 * #D49C50 e vermelha #C0271F, feedback/info) cai no token semântico mais próximo.
 */

@layer dl-telas {

/* ---------- comum ---------- */

.dl-ag-tela,
.dl-agendar,
.dl-escolher-prof,
.dl-ag-vazio {
    display: flex;
    flex-direction: column;
    padding-bottom: var(--dl-espaco-5);
}

/* Header 52: a tela ocupa o resto da altura para os botões assentarem no rodapé. */
.dl-agendar,
.dl-escolher-prof {
    min-height: calc(100dvh - 52px);
}

.dl-ag-vazio {
    gap: var(--dl-espaco-6);
    padding-top: var(--dl-espaco-6);
}

.dl-ag-icone {
    display: block;
    flex-shrink: 0;
}

.dl-ag-botao {
    width: 100%;
    height: 52px;
    justify-content: center;
    text-align: center;
}

/* Botão de apoio de 3628: azul claro sólido (mesma pele de 134834:4987). */
.dl-botao.dl-ag-botao--claro {
    background: var(--dl-azul-claro);
    color: var(--dl-branco);
}

.dl-ag-cartao {
    padding: var(--dl-espaco-5);
    background: var(--dl-branco);
    border-radius: var(--dl-radius-card);
}

/* Faixa de título sob o header: 16/20, raio 24 embaixo, largura da tela inteira. */
.dl-ag-faixa {
    box-sizing: border-box;
    width: var(--dl-largura-shell);
    margin-inline: calc(50% - var(--dl-largura-shell) / 2);
    padding: var(--dl-espaco-4) var(--dl-respiro-lateral);
    border-radius: 0 0 var(--dl-espaco-6) var(--dl-espaco-6);
    background: var(--dl-azul);
    text-align: center;
}

.dl-ag-faixa--atencao {
    background: var(--dl-atencao);
}

.dl-ag-faixa--erro {
    background: var(--dl-erro);
}

.dl-ag-faixa__titulo {
    margin: 0;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-branco);
    text-box: trim-both cap alphabetic;
}

/* Seções de 3542/3848: 40 entre seções, 20 do título ao cartão. */
.dl-ag-secoes {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.dl-ag-secao {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-5);
}

.dl-ag-secao__titulo {
    margin: 0;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

/* Linha 9 (cap) → 12 → divisória → 12 → linha. */
.dl-ag-linhas {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-3);
    margin: 0;
}

.dl-ag-linhas__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dl-espaco-3);
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
}

.dl-ag-linhas__linha + .dl-ag-linhas__linha {
    padding-top: var(--dl-espaco-3);
    border-top: 1px solid var(--dl-cinza-10);
}

.dl-ag-linhas dt,
.dl-ag-linhas dd {
    margin: 0;
    text-box: trim-both cap alphabetic;
}

.dl-ag-linhas dt {
    flex-shrink: 0;
    color: var(--dl-cinza-50);
}

/* clip + margem: o corte na altura da maiúscula não pode comer as descendentes. */
.dl-ag-linhas dd {
    min-width: 0;
    overflow: clip;
    overflow-clip-margin: 6px;
    color: var(--dl-azul-claro);
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Profissional" + "Data e horário" [FIGMA:134834:3609]: azul claro a 12%. */
.dl-ag-cartao--azul {
    background: color-mix(in srgb, var(--dl-azul-claro) 12%, transparent);
}

.dl-ag-prof {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-5);
}

.dl-ag-prof__lista {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dl-ag-prof__link {
    display: flex;
    align-items: center;
    gap: var(--dl-espaco-2);
    min-width: 0;
    border-radius: var(--dl-radius-botao);
    color: inherit;
    text-decoration: none;
}

/* Com perfil público, o nome vira link (azul do nome no perfil, 4987). */
a.dl-ag-prof__link .dl-ag-prof__nome {
    color: var(--dl-azul);
}

@media (hover: hover) {
    a.dl-ag-prof__link:hover .dl-ag-prof__nome {
        text-decoration: underline;
    }
}

.dl-ag-prof .dl-avatar__iniciais {
    font-size: var(--dl-body1-tamanho);
}

.dl-ag-prof__identidade {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.dl-ag-prof__nome {
    /* O trim deixa a caixa na altura da maiúscula: com overflow hidden, acento
       (Vânia) e descendente saíam cortados. clip só no eixo x mantém a elipse
       e deixa a tinta passar em cima e embaixo. */
    overflow-x: clip;
    overflow-y: visible;
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-cinza-90);
    text-overflow: ellipsis;
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
}

.dl-ag-prof__nota {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 14px;
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-bold-peso);
    color: var(--dl-cinza-90);
}

.dl-ag-prof__estrela {
    display: block;
    width: 14px;
    height: 14px;
    color: var(--dl-estrela);
}

.dl-ag-prof__estrela svg {
    display: block;
    width: 100%;
    height: 100%;
}

.dl-ag-prof__divisor {
    height: 1px;
    margin: 0;
    border: 0;
    background: color-mix(in srgb, var(--dl-azul-claro) 40%, transparent);
}

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

.dl-ag-prof__data-titulo {
    display: flex;
    align-items: center;
    gap: var(--dl-espaco-2);
    margin: 0;
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: 16px;
    color: var(--dl-azul-marinho);
}

.dl-ag-prof__data-icone {
    width: 16px;
    height: 16px;
}

.dl-ag-prof__data-valor {
    margin: 0;
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

/* Resumo do valor [FIGMA:134834:3552]: 20 entre blocos, 12 entre linhas. */
.dl-ag-resumo {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-5);
    margin-top: 40px;
}

.dl-ag-resumo__topo {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-5);
}

.dl-ag-resumo__titulo {
    display: flex;
    align-items: center;
    gap: var(--dl-espaco-2);
    margin: 0;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: 16px;
    color: var(--dl-cinza-90);
}

.dl-ag-resumo__icone {
    width: auto;
    height: 16px;
}

.dl-ag-resumo__linhas {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-3);
    margin: 0;
}

.dl-ag-resumo__linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dl-espaco-3);
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
}

.dl-ag-resumo__linha dt,
.dl-ag-resumo__linha dd {
    margin: 0;
    text-box: trim-both cap alphabetic;
}

.dl-ag-resumo__linha dt {
    color: var(--dl-cinza-50);
}

.dl-ag-resumo__linha dd {
    color: var(--dl-azul-claro);
    white-space: nowrap;
}

/* [FIGMA-NOTA:134834:4224] "taxa de cancelamento -30%" logo abaixo da taxa de serviço. */
.dl-ag-resumo__linha--taxa dt,
.dl-ag-resumo__linha--taxa dd {
    color: var(--dl-erro);
}

.dl-ag-resumo__divisor {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--dl-cinza-10);
}

.dl-ag-resumo__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dl-espaco-3);
    margin: 0;
    font-weight: var(--dl-body1-tom-peso);
}

.dl-ag-resumo__total span {
    font-size: var(--dl-body1-tamanho);
    line-height: var(--dl-body1-lh);
    color: var(--dl-cinza-90);
    text-box: trim-both cap alphabetic;
}

.dl-ag-resumo__total strong {
    font-size: var(--dl-h3-tamanho);
    font-weight: var(--dl-h3-peso);
    line-height: var(--dl-h3-lh);
    color: var(--dl-azul);
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
}

/* Avisos (Sobre o Cancelamento, INFO): 14/16/14/14, gap 12, corpo 12. */
.dl-ag-aviso {
    gap: var(--dl-espaco-3);
    min-height: 0;
    padding: 14px var(--dl-espaco-4) 14px 14px;
}

.dl-ag-aviso .dl-aviso__icone {
    width: 20px;
    height: 20px;
}

.dl-ag-aviso .dl-aviso__texto {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-2);
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
}

.dl-ag-aviso__titulo,
.dl-ag-aviso__corpo {
    display: block;
    text-box: trim-both cap alphabetic;
}

/* Sem cor própria: vem do Aviso (feedback/info no --info, feedback/warning no --atencao). */
.dl-ag-aviso__titulo {
    font-weight: var(--dl-body2-bold-peso);
    color: inherit;
}

/* ---------- 134834:3238 / 3292 / 3364 — agendar ---------- */

.dl-agendar {
    padding-top: var(--dl-espaco-6);
}

.dl-agendar__cabecalho {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-6);
}

.dl-agendar__titulo {
    display: flex;
    align-items: center;
    gap: var(--dl-espaco-2);
    margin: 0;
    font-family: var(--dl-fonte);
    font-size: var(--dl-h2-tamanho);
    font-weight: var(--dl-h2-peso);
    line-height: 28px;
    color: var(--dl-azul-marinho);
}

.dl-agendar__titulo-icone {
    width: auto;
    height: 28px;
    color: var(--dl-azul-marinho);
}

.dl-agendar__apoio {
    margin: 0;
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

.dl-agendar__acordeoes {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-1);
    margin-top: 40px;
    margin-bottom: 40px;
}

.dl-ag-acordeao {
    padding: var(--dl-espaco-4);
    background: var(--dl-branco);
    border-radius: var(--dl-radius-card);
}

.dl-ag-acordeao__cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dl-espaco-2);
    min-height: 24px;
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-cinza-50);
    cursor: pointer;
}

/* Mesma seta das linhas de Lista/Item (.dl-lista-item__fim). */
.dl-ag-acordeao__seta {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--dl-cinza-30);
}

.dl-ag-acordeao__seta path {
    stroke-width: 2.667;
}

/* Linha que abre a gaveta (C106): o card do acordeão, como botão. Os 24 do cabeçalho
   + 16 de cada lado (335×56 de 134834:3238), agora na mesma caixa border-box. */
.dl-ag-gatilho {
    width: 100%;
    min-height: calc(24px + 2 * var(--dl-espaco-4));
    border: 0;
    font-family: inherit;
    text-align: left;
}

.dl-ag-gatilho:focus-visible {
    outline: none;
    box-shadow: var(--dl-foco-anel);
}

/* Gavetas: itens com título em negrito quebram linha — o ícone fica no topo. */
.dl-ag-info .dl-drawer-info__lista li {
    align-items: flex-start;
}

.dl-ag-info .dl-drawer-info__lista strong {
    font-weight: var(--dl-body2-bold-peso);
    color: var(--dl-azul-marinho);
}

.dl-ag-info__fora .dl-icone {
    color: var(--dl-cinza-30);
}

.dl-ag-acordeao__nota {
    margin: 0;
    padding: 14px var(--dl-espaco-4) 14px 14px;
    border-radius: var(--dl-radius-card);
    background: var(--dl-cinza-claro);
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-70);
}

/* A caixa assenta no rodapé como em 3238 (o miolo cresce), nunca a menos de 40. */
.dl-agendar__form {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-4);
    margin-top: auto;
}

.dl-agendar__caixa {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-4);
}

.dl-agendar__linha {
    display: flex;
    align-items: center;
    gap: var(--dl-espaco-2);
    min-height: 16px;
    margin: 0;
}

/* [DECISÃO:2026-10-01] D3 [TELA-NOVA:2026-10-01]: casa sem a resposta da área externa. */
.dl-agendar__area-externa-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.dl-agendar__icone {
    width: auto;
    height: 16px;
    color: var(--dl-cinza-50);
}

.dl-agendar__texto {
    flex: 1;
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

/* 16 entre os botões de 28 [TELA-NOVA]: cada um ganha 44 de toque sem cobrir o vizinho. */
.dl-agendar__contador {
    gap: var(--dl-espaco-4);
}

.dl-agendar__divisor {
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--dl-cinza-10);
}

.dl-agendar__valor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dl-espaco-3);
    margin: 0;
    font-weight: var(--dl-body1-tom-peso);
    color: var(--dl-azul);
}

.dl-agendar__valor span {
    font-size: var(--dl-body1-tamanho);
    line-height: var(--dl-body1-lh);
    text-box: trim-both cap alphabetic;
}

.dl-agendar__valor strong {
    font-size: var(--dl-h3-tamanho);
    font-weight: var(--dl-h3-peso);
    line-height: var(--dl-h3-lh);
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
}

.dl-agendar__valor .dl-agendar__sem-preco {
    font-size: var(--dl-body1-tamanho);
    color: var(--dl-cinza-50);
}

/* Cotando: o número vira a barra do skeleton na mesma caixa (nada pula); o brilho
   corre por cima (bloco "F16.MM" no fim). [TELA-NOVA:2026-09-28] */
.dl-agendar__valor.is-carregando strong {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: var(--dl-cinza-10);
    color: transparent;
}

/* Kit: Opção/Seleção como caixa de marcar — o marcador redondo do DS fica. */

/* A Opção do DS é de uma linha (59, sem padding vertical); o kit tem três e encostava
   nas bordas. 16 como os acordeões acima; marcado, a borda vai a 2 e o padding cede 1. */
.dl-agendar__kit {
    padding-block: var(--dl-espaco-4);
}

.dl-agendar__kit:has(.dl-opcao__radio:checked) {
    padding-block: calc(var(--dl-espaco-4) - 1px);
}

.dl-agendar__kit .dl-opcao__sub {
    text-box: trim-both cap alphabetic;
}

.dl-agendar__kit:has(.dl-opcao__radio:checked) {
    color: var(--dl-azul);
}

/* C61 [CLIENTE:2026-09-29] [DECISÃO:2026-10-01] D12: o aviso "sem o kit" vale só com o kit desmarcado. */
.dl-agendar__kit:has(.dl-opcao__radio:checked) + .dl-agendar__sem-kit {
    display: none;
}

/* ---------- 134834:3524 em modo seleção ---------- */

.dl-escolher-prof.dl-profissionais {
    padding-top: 0;
    padding-bottom: var(--dl-espaco-5);
}

/* [FIGMA-NOTA:134834:3534] "Barra Fixa": presa logo abaixo do header (52). */
.dl-escolher-prof__barra {
    position: sticky;
    top: 52px;
    z-index: 5;
    box-sizing: border-box;
    width: var(--dl-largura-shell);
    margin-inline: calc(50% - var(--dl-largura-shell) / 2);
    padding: var(--dl-espaco-5) 14px;
    border-top: 1px solid var(--dl-cinza-10);
    border-radius: 0 0 var(--dl-radius-card) var(--dl-radius-card);
    background: var(--dl-branco);
    text-align: center;
}

.dl-escolher-prof__barra-texto {
    margin: 0;
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

.dl-escolher-prof__barra-texto strong,
.dl-escolher-prof__ponto {
    font-weight: var(--dl-body2-bold-peso);
    color: var(--dl-azul);
}

.dl-escolher-prof__ponto {
    font-weight: var(--dl-body2-peso);
}

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

.dl-escolher-prof__grupo {
    min-width: 0;
    margin: var(--dl-espaco-6) 0 0;
    padding: 0;
    border: 0;
}

.dl-card-profissional--escolha {
    cursor: pointer;
}

.dl-card-profissional--escolha:has(.dl-card-profissional__marcador:checked) {
    border: 2px solid var(--dl-azul);
    padding: 16px 16px 16px 14px;
}

.dl-card-profissional--escolha:has(.dl-card-profissional__marcador:focus-visible) {
    box-shadow: var(--dl-foco-anel);
}

/* 3524: com uma escolhida, as outras esmaecem (0,72) e perdem a borda. */
.dl-escolher-prof__grupo:has(:checked) .dl-card-profissional--escolha:not(:has(:checked)) {
    border-color: transparent;
    opacity: 0.72;
}

/* Confirmar assenta no rodapé (3524), a pelo menos 24 da lista. */
.dl-escolher-prof__grupo {
    margin-bottom: var(--dl-espaco-6);
}

.dl-escolher-prof__confirmar {
    margin-top: auto;
}

/* ---------- 134834:3542 — revisão ---------- */

.dl-revisar {
    padding-top: 26px;
}

.dl-revisar__cabecalho {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-3);
    margin-bottom: 40px;
}

.dl-revisar__titulo {
    margin: 0;
    font-family: var(--dl-fonte);
    font-size: var(--dl-h2-tamanho);
    font-weight: var(--dl-h2-peso);
    line-height: var(--dl-h2-lh);
    color: var(--dl-azul-marinho);
    text-box: trim-both cap alphabetic;
}

.dl-revisar__apoio {
    margin: 0;
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

.dl-revisar .dl-ag-botao,
.dl-ag-detalhe .dl-ag-resumo + .dl-ag-botao,
.dl-ag-detalhe__pos {
    margin-top: var(--dl-espaco-5);
}

/* Mesmo respiro entre ações empilhadas do pós-serviço (.dl-ag-detalhe__pos). */
.dl-ag-detalhe__pagar + .dl-ag-botao {
    margin-top: var(--dl-espaco-4);
}

/* ---------- 134834:3628 — confirmado ---------- */

.dl-confirmado__faixa {
    position: relative;
    box-sizing: border-box;
    width: var(--dl-largura-shell);
    height: 452px;
    margin-inline: calc(50% - var(--dl-largura-shell) / 2);
    padding: 28px var(--dl-respiro-lateral) 0;
    overflow: hidden;
    border-radius: 0 0 var(--dl-espaco-6) var(--dl-espaco-6);
    background: var(--dl-degrade-marca);
}

/* Posição do Figma (129,07% × 160,6%, −5% / 30,57%): largura em razão da faixa. */
.dl-confirmado__foto {
    position: absolute;
    left: -5%;
    top: 30.57%;
    width: 129.07%;
    max-width: none;
    height: auto !important;
    pointer-events: none;
}

.dl-confirmado__cabeca {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dl-espaco-4);
    text-align: center;
}

.dl-confirmado__selo {
    width: 60px;
    height: 60px;
    color: var(--dl-branco);
    overflow: visible;
}

/* Check de sucesso desenhado, em qualquer largura: o anel se desenha, o disco
   preenche e o "certo" risca em seguida; o selo pulsa ao fim e os textos sobem
   atrás. Único movimento acima de 400ms do app (docs/19 §2 #7). Só começa
   quando o splash sai — abaixo de 1024 ele cobre toda carga e esconderia o
   desenho. Molde: paginas-conecta pc-prestador.css:787-896. */
@media (prefers-reduced-motion: no-preference) {
    html:not(.dl-splash-ativo) .dl-confirmado__selo {
        animation: dl-confirmado-pulso 600ms 700ms var(--dl-ease-saida);
    }

    html:not(.dl-splash-ativo) .dl-confirmado__selo-anel {
        animation: dl-confirmado-traco 620ms var(--dl-ease-troca) backwards;
    }

    html:not(.dl-splash-ativo) .dl-confirmado__selo-disco {
        animation: dl-confirmado-disco var(--dl-dur-base) 420ms var(--dl-ease-saida) backwards;
    }

    html:not(.dl-splash-ativo) .dl-confirmado__selo-risco {
        animation: dl-confirmado-traco 380ms 520ms var(--dl-ease-troca) backwards;
    }

    html:not(.dl-splash-ativo) .dl-confirmado__titulo,
    html:not(.dl-splash-ativo) .dl-confirmado__apoio {
        animation: dl-confirmado-sobe var(--dl-dur-lenta) 780ms var(--dl-ease-saida) backwards;
    }

    html:not(.dl-splash-ativo) .dl-confirmado__apoio {
        animation-delay: 860ms;
    }
}

@keyframes dl-confirmado-traco {
    from {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        opacity: 1;
    }

    to {
        stroke-dasharray: 1;
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes dl-confirmado-disco {
    from {
        opacity: 0;
    }
}

@keyframes dl-confirmado-pulso {
    45% {
        transform: scale(1.08);
    }
}

@keyframes dl-confirmado-sobe {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

.dl-confirmado__titulo {
    margin: 0;
    font-family: var(--dl-fonte);
    font-size: var(--dl-h2-tamanho);
    font-weight: var(--dl-h2-peso);
    line-height: var(--dl-h2-lh);
    color: var(--dl-branco);
    text-box: trim-both cap alphabetic;
}

.dl-confirmado__apoio {
    margin: 0;
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-branco);
    text-box: trim-both cap alphabetic;
}

.dl-confirmado__caixa {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-4);
    margin-top: var(--dl-espaco-6);
}

.dl-confirmado__linhas {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-4);
    margin: 0;
}

.dl-confirmado__linha {
    display: flex;
    justify-content: space-between;
    gap: var(--dl-espaco-3);
    padding-bottom: var(--dl-espaco-4);
    border-bottom: 1px solid var(--dl-cinza-10);
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
}

.dl-confirmado__linha dt,
.dl-confirmado__linha dd {
    margin: 0;
    text-box: trim-both cap alphabetic;
}

.dl-confirmado__linha dd {
    font-weight: var(--dl-body2-bold-peso);
}

.dl-confirmado__total {
    display: flex;
    justify-content: space-between;
    gap: var(--dl-espaco-3);
    margin: 0;
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul);
}

.dl-confirmado__total span,
.dl-confirmado__total strong {
    font-weight: inherit;
    text-box: trim-both cap alphabetic;
}

/* Toast "Info" de 3653: raio 16, padding 16, gap 8, ícone 16; cor do .dl-aviso--info. */
.dl-confirmado__info {
    gap: var(--dl-espaco-2);
    padding: var(--dl-espaco-4);
    border-radius: var(--dl-espaco-4);
}

.dl-confirmado__info .dl-aviso__icone {
    width: 16px;
    height: 16px;
}

.dl-confirmado__info .dl-ag-aviso__titulo {
    font-size: var(--dl-body1-tamanho);
}

.dl-confirmado__acoes {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-1);
    margin-top: var(--dl-espaco-6);
}

/* ---------- 134834:3658 / 3718 / 3788 — meus agendamentos ---------- */

.dl-agendamentos__abas {
    display: flex;
    gap: var(--dl-espaco-2);
    margin-top: var(--dl-espaco-5);
}

.dl-agendamentos__aba {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    height: 42px;
    border-radius: var(--dl-radius-card);
    background: color-mix(in srgb, var(--dl-azul-claro) 12%, transparent);
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-peso);
    line-height: var(--dl-body1-lh);
    color: color-mix(in srgb, var(--dl-azul) 50%, transparent);
    text-decoration: none;
}

.dl-agendamentos__aba.is-ativa {
    background: var(--dl-azul);
    font-weight: var(--dl-body1-tom-peso);
    color: var(--dl-branco);
}

.dl-agendamentos__resultado {
    margin-top: 40px;
}

.dl-agendamentos__lista {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.dl-agendamentos__vazio-acao {
    margin-top: var(--dl-espaco-6);
}

.dl-agendamentos .dl-carregar-mais {
    margin-top: var(--dl-espaco-4);
}

.dl-ag-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: var(--dl-espaco-5);
    border-radius: var(--dl-radius-card);
    background: var(--dl-branco);
    color: inherit;
    text-decoration: none;
}

.dl-ag-card__topo {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--dl-espaco-2);
}

.dl-ag-card__topo .dl-badge {
    margin-right: auto;
}

.dl-ag-card__valor {
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul-claro);
    text-box: trim-both cap alphabetic;
}

.dl-ag-card--proximos .dl-ag-card__valor {
    color: var(--dl-azul);
}

.dl-ag-card__corpo {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-5);
}

.dl-ag-card__titulo {
    display: flex;
    align-items: center;
    gap: var(--dl-espaco-3);
    font-size: var(--dl-h3-tamanho);
    font-weight: var(--dl-h3-peso);
    line-height: var(--dl-h3-lh);
    color: var(--dl-azul-marinho);
}

.dl-ag-card__titulo-icone {
    width: auto;
    height: 24px;
    color: var(--dl-azul-marinho);
}

.dl-ag-card__linhas {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.dl-ag-card__linha {
    display: flex;
    align-items: center;
    gap: var(--dl-espaco-2);
    min-height: 16px;
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
}

.dl-ag-card__icone {
    width: 16px;
    height: 16px;
    color: var(--dl-cinza-30);
}

.dl-ag-card__prof {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: var(--dl-espaco-5);
    border-top: 1px solid var(--dl-cinza-10);
}

.dl-ag-card__nome {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-bold-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-azul-marinho);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dl-ag-card__ver {
    width: 18px;
    height: 18px;
    color: var(--dl-cinza-30);
}

/* ---------- 134834:3848 / 3929 / 4142 — detalhe ---------- */

.dl-ag-detalhe .dl-ag-secoes {
    margin-top: 28px;
}

/* [DECISÃO:2026-10-01] D8 · D5/D6: aviso de estado entre o título e as seções, no mesmo respiro. */
.dl-ag-detalhe > .dl-ag-aviso {
    margin-top: 28px;
}

/* Motivo de 4142: vermelho a 12%, texto 12 cinza 90. */
.dl-ag-motivo {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-3);
    background: color-mix(in srgb, var(--dl-erro) 12%, transparent);
}

.dl-ag-motivo__texto,
.dl-ag-motivo__informado {
    margin: 0;
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-90);
}

.dl-ag-detalhe__pos {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--dl-espaco-4);
}

.dl-ag-detalhe__reportar {
    font-size: var(--dl-body1-tamanho);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul);
    text-decoration: underline;
}

/* Modal de cancelamento (A5): prévia da taxa e campos dentro do slot do modal_confirmar. */
.dl-ag-cancelar__previa {
    margin-top: var(--dl-espaco-3);
    text-align: left;
}

.dl-ag-cancelar__campos {
    text-align: left;
}

/* Na folha (modal_confirmar 'folha'), o gap do slot já separa prévia e campos. */
.dl-drawer--confirmar .dl-ag-cancelar__previa {
    margin-top: 0;
}

/* ====================================================================== */
/* F16.MM — micro-interações do fluxo no mobile (docs/21 §4 ②)            */
/* [TELA-NOVA:2026-09-28]                                                  */
/*                                                                        */
/* Mesmo desenho do desktop (dl-desktop-fluxo.css, docs/19 §5.4); o JS é o */
/* mesmo (dl-agendamento.js liga as classes em qualquer largura). Só       */
/* transform/opacity; entradas com fill `backwards`.                       */
/* ====================================================================== */

@keyframes dl-ag-m-troca {
    from {
        opacity: 0;
    }
}

/* Horas: o número novo sobe de baixo (+) ou desce de cima (−); o antigo é o
   ::before, um degrau acima/abaixo, e sai junto. */
@keyframes dl-ag-m-num-sobe {
    from {
        transform: translateY(100%);
    }
}

@keyframes dl-ag-m-num-desce {
    from {
        transform: translateY(-100%);
    }
}

@keyframes dl-ag-m-escolhe {
    from {
        transform: scale(0.98);
    }
}

@keyframes dl-ag-m-sobe {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

@media (max-width: 1023.98px) {
    /* Janela do número: inline-block com recorte só na vertical. */
    .dl-agendar__horas-janela {
        display: inline-block;
        clip-path: inset(0 -2px);
    }

    .dl-agendar__horas-num {
        position: relative;
        display: inline-block;
    }
}

@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
    /* Valor que acabou de mudar (JS: pulsar 'dl-fluxo-troca'). */
    .dl-fluxo-troca {
        animation: dl-ag-m-troca var(--dl-dur-base) var(--dl-ease-saida);
    }

    /* Botão do rodapé: desabilitado → habilitado esmaecendo (o componente só
       transiciona cor). */
    .dl-fluxo-tela .dl-ag-botao {
        transition:
            background-color var(--dl-dur-base) var(--dl-ease-saida),
            border-color var(--dl-dur-base) var(--dl-ease-saida),
            color var(--dl-dur-base) var(--dl-ease-saida),
            opacity var(--dl-dur-base) var(--dl-ease-saida),
            transform var(--dl-dur-rapida) var(--dl-ease-saida);
    }

    /* ---- agendar · horas ------------------------------------------------ */

    .dl-agendar__horas-num.is-sobe {
        animation: dl-ag-m-num-sobe var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-agendar__horas-num.is-desce {
        animation: dl-ag-m-num-desce var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-agendar__horas-num:is(.is-sobe, .is-desce)::before {
        content: attr(data-antes);
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
    }

    .dl-agendar__horas-num.is-sobe::before {
        bottom: 100%;
    }

    .dl-agendar__horas-num.is-desce::before {
        top: 100%;
    }

    /* ---- agendar · valor ao vivo: brilho do skeleton -------------------- */

    .dl-agendar__valor.is-carregando strong::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, var(--dl-branco) 50%, transparent);
        opacity: 0.6;
        animation: dl-skeleton-brilho 1.2s var(--dl-ease-troca) infinite;
    }

    /* ---- agendar · kit (o pop do marcador vem de DL.motion.pop) ---------- */

    .dl-agendar__kit {
        transition:
            border-color var(--dl-dur-base) var(--dl-ease-saida),
            transform var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-agendar__kit .dl-opcao__radio {
        transition:
            background-color var(--dl-dur-base) var(--dl-ease-saida),
            border-color var(--dl-dur-base) var(--dl-ease-saida);
    }

    /* ---- escolher-profissionais ----------------------------------------- */

    /* Borda do escolhido e esmaecer das outras em 200ms; o escolhido dá um pop
       curto (JS: pulsar 'dl-fluxo-escolhido'). */
    .dl-escolher-prof__grupo .dl-card-profissional--escolha {
        transition:
            border-color var(--dl-dur-base) var(--dl-ease-saida),
            opacity var(--dl-dur-base) var(--dl-ease-saida),
            transform var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-escolher-prof__grupo .dl-card-profissional--escolha.dl-fluxo-escolhido {
        animation: dl-ag-m-escolhe var(--dl-dur-lenta) var(--dl-ease-mola);
    }

    /* ---- agendamento-confirmado · card em cascata ----------------------- */

    /* O check desenhado e os textos da faixa já rodam (acima); as linhas do card
       sobem atrás, uma a uma, e o resto fecha a fila. */
    html:not(.dl-splash-ativo) :is(.dl-confirmado__linha, .dl-confirmado__caixa > :not(.dl-confirmado__linhas), .dl-confirmado__acoes) {
        animation: dl-ag-m-sobe var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
        animation-delay: calc(300ms + var(--dl-i, 0) * 50ms);
    }

    .dl-confirmado__linha:nth-child(2) { --dl-i: 1; }
    .dl-confirmado__linha:nth-child(3) { --dl-i: 2; }
    .dl-confirmado__linha:nth-child(4) { --dl-i: 3; }
    .dl-confirmado__linha:nth-child(n + 5) { --dl-i: 4; }
    .dl-confirmado__caixa > :not(.dl-confirmado__linhas) { --dl-i: 5; }
    .dl-confirmado__acoes { --dl-i: 6; }

    /* ---- agendamentos (lista) ------------------------------------------- */

    /* Aba ativa: na tela nova o azul entra em 200ms a partir do fundo da aba
       inativa (a troca de aba é navegação; a cascata da lista vem de .dl-d-lista). */
    .dl-agendamentos__aba {
        transition:
            background-color var(--dl-dur-base) var(--dl-ease-saida),
            color var(--dl-dur-base) var(--dl-ease-saida);
    }

    @starting-style {
        .dl-agendamentos__aba.is-ativa {
            background-color: color-mix(in srgb, var(--dl-azul-claro) 12%, transparent);
            color: color-mix(in srgb, var(--dl-azul) 50%, transparent);
        }
    }

    html:not(.dl-splash-ativo) .dl-agendamentos__resultado > :is(.dl-vazio, .dl-agendamentos__vazio-acao) {
        animation: dl-ag-m-troca var(--dl-dur-lenta) var(--dl-ease-saida) 80ms backwards;
    }
}

/* Menos movimento: a troca de valor vira fade curto; o resto fica no estado final. */
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
    .dl-fluxo-troca {
        animation: dl-ag-m-troca var(--dl-dur-rapida) linear;
    }
}

}