/*
 * DoceLar — F16 · desktop das telas da PROFISSIONAL (docs/18 §3 P1/P2/P3 · §4 · §8).
 *
 * painel               134840:9647 (desenhada) — P3 "Próximo Serviço" ⇄ "Agendados";
 *                      [TELA-NOVA:2026-09-28] largura inteira: destaque em faixa,
 *                      "Agendados" em linhas e a coluna "Próximos 7 dias" à direita
 * painel-agenda        [TELA-NOVA:2026-09-24] calendário ⇄ abas + lista; 2026-09-28:
 *                      largura inteira, calendário em coluna fixa, lista em linhas
 * painel-servico       [TELA-NOVA:2026-09-24] P2 — informação ⇄ recebimento/ações;
 *                      2026-09-28: "‹ Minha agenda", título com traço de status,
 *                      dia · hora · duração, seções em 2 colunas quando cabem
 *
 * As linhas de lista e o bloco de data conversam com /agendamentos/ do cliente
 * (dl-desktop-agenda-cliente.css). Peças de markup só do desktop levam
 * .dl-painel__so-desktop e somem abaixo de 1024 (bloco logo abaixo).
 * cadastro-em-analise  [TELA-NOVA:2026-09-24] hero em card com o texto à esquerda
 * cadastro-profissional[TELA-NOVA:2026-09-24] P1 — coluna central de 720
 *
 * O bloco de mapa "localização do serviço" (134840:10342) NÃO entra: o contrato
 * exclui mapa (docs/18 §5 #1) — o endereço já aparece em texto no card.
 *
 * Mesmas regras de dl-desktop.css: tudo dentro de @media (min-width: 1024px) e em
 * @layer dl-telas, só tokens, sem !important. Carrega depois de dl-desktop e antes
 * de dl-desktop-shell (ordem alfabética): as utilitárias .dl-d-* do shell vencem
 * empates de especificidade; aqui só o que é da área, com seletor da própria tela.
 */

@layer dl-telas {
/* Abaixo de 1024 as peças que só existem no desktop somem — o mobile não muda. */
@media (max-width: 1023.98px) {
    .dl-painel__so-desktop {
        display: none;
    }
}

@media (min-width: 1024px) {

    /* ================================================================== */
    /* Comum às três telas                                                 */
    /* ================================================================== */

    /* A coluna do shell (o <main> do tema, em volta do shortcode) para em 1025
       úteis; estas telas ocupam a largura inteira ao lado da sidebar, como
       /agendamentos/ (dl-desktop-agenda-cliente.css). */
    body.dl-com-sidebar > main.dl-container:has(> :is(.dl-painel, .dl-painel-agenda, .dl-painel-servico)) {
        max-width: none;
    }

    /* Bloco de data [TELA-NOVA:2026-09-28] (decorativo): semana · dia · mês, o
       mesmo de /agendamentos/. Azul claro no que está por vir, cinza no histórico. */
    .dl-painel-data {
        display: flex;
        flex: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        box-sizing: border-box;
        border-radius: var(--dl-radius-botao);
        background: var(--dl-d-resumo-fundo);
        color: var(--dl-azul-marinho);
        font-family: var(--dl-fonte);
        text-align: center;
    }

    .dl-painel-data__semana,
    .dl-painel-data__mes {
        font-size: 10px;
        font-weight: 600;
        line-height: 12px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .dl-painel-data__semana {
        color: var(--dl-azul);
    }

    .dl-painel-data__dia {
        font-size: 18px;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: -0.4px;
        font-variant-numeric: tabular-nums;
    }

    :is(.dl-painel-card--concluido, .dl-painel-card--cancelado, .dl-painel-card--no_show) .dl-painel-data {
        background: var(--dl-cinza-claro);
        color: var(--dl-cinza-50);
    }

    :is(.dl-painel-card--concluido, .dl-painel-card--cancelado, .dl-painel-card--no_show) .dl-painel-data__semana {
        color: var(--dl-cinza-50);
    }

    /* ================================================================== */
    /* painel — [TELA-NOVA:2026-09-28] sobre 134840:9647                   */
    /*                                                                    */
    /*  Olá, Helena                                                        */
    /*  Próximo Serviço                                                    */
    /*  [data | quando/título/linhas | CTA]                                */
    /*  Próximos 7 dias — faixa dos 7 dias · n serviços · lista por dia    */
    /*  Agendados                                             Ver agenda   */
    /*  [linhas]                                                           */
    /*                                                                    */
    /* Largura inteira, uma seção abaixo da outra desde a revisão de 01/10 */
    /* (slide 9); antes a semana era uma coluna à direita. Só com o que    */
    /* GET /profissional/agendamentos já entrega. O topo (saudação +       */
    /* destaque) vira display:contents: os filhos entram direto na grade.  */
    /* ================================================================== */

    /* [REVISÃO-DESKTOP:2026-10-01] slide 9 — "um abaixo do outro": Próximo Serviço,
       Próximos 7 dias (largura toda, dias maiores) e depois os Agendados. */
    .dl-painel.dl-d-p3 {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        align-content: start;
        column-gap: 0;
        max-width: none;
        min-height: 0;
        padding-bottom: 0;
    }

    /* No desktop o switch mora na sidebar (o mesmo input data-dl-disponivel,
       docs/18 §8) e os atalhos são os itens Agenda/Perfil. A etiqueta de dia
       dá lugar ao bloco de data + "Em N dias" (o texto dela repetiria a data). */
    .dl-painel .dl-painel__disponivel,
    .dl-painel .dl-painel__atalhos,
    .dl-painel .dl-painel__rotulo-movel,
    .dl-painel .dl-painel__etiqueta {
        display: none;
    }

    .dl-painel .dl-painel__rotulo-desktop {
        display: inline;
    }

    .dl-painel > .dl-painel__topo {
        display: contents;
    }

    /* "Olá, Helena" é o título da tela (32, como /agendamentos/). */
    .dl-painel .dl-painel__saudacao {
        grid-column: 1 / -1;
        grid-row: 1;
        gap: 14px;
        margin-bottom: 24px;
    }

    .dl-painel .dl-painel__avatar {
        width: 40px;
        height: 40px;
        background: var(--dl-azul);
        color: var(--dl-branco);
        font-size: 15px;
    }

    .dl-painel .dl-painel__ola {
        color: var(--dl-azul-marinho);
        font-size: 32px;
        font-weight: 600;
        line-height: 36px;
        letter-spacing: -0.8px;
        text-box: normal;
    }

    .dl-painel .dl-painel__d-cabecalho {
        grid-column: 1;
        grid-row: 2;
    }

    .dl-painel > .dl-painel__topo > .dl-painel__proximo {
        grid-column: 1;
        grid-row: 3;
    }

    .dl-painel > :is(.dl-painel__proximos, .dl-painel__agendados-vazio) {
        grid-column: 1;
        grid-row: 5;
        display: flex;
        flex-direction: column;
        gap: 0;
        margin: 28px 0 0;
        padding: 0;
    }

    /* Títulos de seção compactos (16 semibold), como os de /agendamentos/. */
    .dl-painel :is(.dl-painel__d-cabecalho, .dl-painel__proximos-cabecalho, .dl-painel__agendados-vazio > .dl-d-cabecalho) {
        align-items: baseline;
        margin-bottom: 10px;
    }

    .dl-painel :is(.dl-painel__d-cabecalho, .dl-painel__proximos-cabecalho, .dl-painel__agendados-vazio) .dl-d-titulo-secao {
        flex: none;
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
        letter-spacing: 0;
        text-box: normal;
    }

    .dl-painel .dl-d-cabecalho .dl-d-link {
        font-size: 14px;
        line-height: 20px;
    }

    /* Sem outro serviço: o vazio num cartão baixo, na largura da coluna. */
    .dl-painel__agendados-vazio .dl-vazio {
        padding: 16px 20px;
        border-radius: var(--dl-radius-card);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
    }

    /* Estado vazio compacto nas três telas: ilustração de 48 à esquerda,
       título e texto ao lado (o 96 centralizado do componente ocupava 215 de
       altura para uma frase). */
    :is(.dl-painel, .dl-painel-agenda) .dl-vazio {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: center;
        column-gap: 16px;
        text-align: left;
    }

    :is(.dl-painel, .dl-painel-agenda) .dl-vazio__ilustracao {
        grid-row: 1 / span 2;
        margin: 0;
    }

    :is(.dl-painel, .dl-painel-agenda) .dl-vazio__ilustracao svg {
        display: block;
        width: 48px;
        height: 48px;
    }

    :is(.dl-painel, .dl-painel-agenda) :is(.dl-vazio__titulo, .dl-vazio__texto) {
        text-align: left;
    }

    :is(.dl-painel, .dl-painel-agenda) .dl-vazio__titulo {
        align-self: end;
        margin: 0;
        color: var(--dl-azul-marinho);
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
    }

    :is(.dl-painel, .dl-painel-agenda) .dl-vazio__titulo:last-child {
        grid-row: 1 / span 2;
        align-self: center;
    }

    :is(.dl-painel, .dl-painel-agenda) .dl-vazio__texto {
        align-self: start;
        margin-top: 2px;
        line-height: 18px;
    }

    .dl-painel .dl-painel__lista.dl-d-lista {
        gap: 8px;
    }

    /* ---- Destaque "Próximo Serviço" em faixa ------------------------- */
    /*  data | Em N dias               | Ver detalhes do serviço          */
    /*  data | 08:00 · Limpeza Padrão  |                                   */
    /*  data | local · cliente · até 4 horas · você recebe R$ …           */
    /* Os mesmos filhos do card do mobile; a classe .dl-d-card-destaque    */
    /* não vai no markup (ver card_destaque()), as medidas moram aqui.     */

    .dl-painel .dl-painel__proximo {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "data quando acao"
            "data titulo acao"
            "data infos  acao";
        align-items: center;
        gap: 0;
        padding: 16px 20px 16px 16px;
        border-radius: var(--dl-d-radius);
        box-shadow: var(--dl-d-sombra-destaque);
    }

    .dl-painel .dl-painel__proximo > .dl-painel-data {
        grid-area: data;
        width: 64px;
        height: 72px;
        margin-right: 20px;
    }

    .dl-painel .dl-painel__proximo .dl-painel-data__dia {
        font-size: 26px;
        line-height: 30px;
        letter-spacing: -0.8px;
    }

    .dl-painel .dl-painel__quando {
        grid-area: quando;
        justify-self: start;
        margin-bottom: 6px;
        padding: 2px 8px;
        border-radius: var(--dl-radius-pill);
        background: color-mix(in srgb, var(--dl-azul) 10%, transparent);
        color: var(--dl-azul);
        font-size: 10px;
        font-weight: 700;
        line-height: 14px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .dl-painel .dl-painel__proximo--em-andamento .dl-painel__quando {
        background: var(--dl-sucesso-claro);
        color: var(--dl-sucesso);
    }

    .dl-painel .dl-painel__proximo-titulo {
        grid-area: titulo;
        font-size: 19px;
        line-height: 24px;
        letter-spacing: -0.3px;
        text-box: normal;
    }

    .dl-painel .dl-painel__infos {
        grid-area: infos;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 20px;
        padding-top: 8px;
    }

    .dl-painel .dl-painel__infos li {
        gap: 6px;
        color: var(--dl-cinza-70);
        font-size: 14px;
        line-height: 20px;
    }

    .dl-painel .dl-painel__infos .dl-painel-icone {
        width: 15px;
        height: 15px;
        color: var(--dl-azul-claro);
    }

    .dl-painel .dl-painel__infos span {
        text-box: normal;
    }

    /* A linha do relógio traz o "você recebe": é o que ela mais procura (e
       não quebra no meio do valor). */
    .dl-painel .dl-painel__infos li:has(.dl-painel-icone--relogio) {
        color: var(--dl-azul);
        font-weight: 600;
        white-space: nowrap;
    }

    .dl-painel .dl-painel__proximo .dl-botao {
        grid-area: acao;
        width: auto;
        height: 40px;
        margin: 0 0 0 24px;
        padding: 0 20px;
        border-radius: var(--dl-radius-botao);
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
    }

    .dl-painel .dl-painel__proximo--vazio {
        display: block;
        padding: 16px 20px;
    }

    .dl-painel .dl-painel__proximo--vazio .dl-vazio {
        padding: 0;
    }

    /* Sem serviço nenhum, "Agendados" só teria o cabeçalho: o vazio do destaque
       já diz tudo (e "Ver agenda" está na sidebar). */
    .dl-painel:has(.dl-painel__proximo--vazio) > .dl-painel__agendados-vazio {
        display: none;
    }

    /* ---- "Próximos 7 dias" [TELA-NOVA:2026-09-28] --------------------- */

    .dl-painel > .dl-painel-semana {
        grid-column: 1;
        grid-row: 4;
        align-self: stretch;
        margin-top: 28px;
    }

    .dl-painel-semana {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 20px;
        border-radius: var(--dl-d-radius);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
        font-family: var(--dl-fonte);
    }

    .dl-painel-semana__titulo {
        margin: 0;
        color: var(--dl-azul-marinho);
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
    }

    /* Os 7 dias a partir de hoje: com serviço confirmado, azul (o "dia
       destacado" do calendário de 4421); hoje, contornado. */
    .dl-painel-semana__faixa {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .dl-painel-semana__dia {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 12px 0;
        border-radius: var(--dl-radius-botao);
        background: var(--dl-cinza-claro);
        color: var(--dl-cinza-70);
    }

    .dl-painel-semana__dia.is-hoje {
        box-shadow: inset 0 0 0 1px var(--dl-azul-claro);
    }

    .dl-painel-semana__dia.is-ocupado {
        background: var(--dl-azul);
        color: var(--dl-branco);
    }

    .dl-painel-semana__dia-semana {
        font-size: 12px;
        font-weight: 600;
        line-height: 14px;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        opacity: 0.8;
    }

    .dl-painel-semana__dia-numero {
        font-size: 22px;
        font-weight: 600;
        line-height: 26px;
        font-variant-numeric: tabular-nums;
    }

    .dl-painel-semana__resumo {
        margin: 0;
        color: var(--dl-cinza-70);
        font-size: 14px;
        line-height: 20px;
    }

    .dl-painel-semana__recebe {
        color: var(--dl-azul);
        font-weight: 600;
    }

    .dl-painel-semana__lista {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        border-top: 1px solid var(--dl-cinza-10);
        list-style: none;
    }

    .dl-painel-semana__grupo {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding-top: 12px;
    }

    .dl-painel-semana__grupo-dia {
        color: var(--dl-cinza-50);
        font-size: 11px;
        font-weight: 600;
        line-height: 16px;
        letter-spacing: 0.4px;
        text-transform: uppercase;
    }

    .dl-painel-semana__servicos {
        margin: 0 -8px;
        padding: 0;
        list-style: none;
    }

    .dl-painel-semana__servico {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: baseline;
        gap: 10px;
        padding: 6px 8px;
        border-radius: var(--dl-radius-botao);
        color: var(--dl-cinza-70);
        font-size: 13px;
        line-height: 18px;
        text-decoration: none;
        transition: background-color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-painel-semana__servico:hover {
        background: var(--dl-d-resumo-fundo);
    }

    .dl-painel-semana__servico:focus-visible {
        outline: 2px solid var(--dl-azul);
        outline-offset: 0;
    }

    .dl-painel-semana__hora {
        color: var(--dl-azul-marinho);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
    }

    .dl-painel-semana__tipo {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dl-painel-semana__valor {
        color: var(--dl-azul);
        font-weight: 600;
        white-space: nowrap;
    }

    /* ================================================================== */
    /* Linha de lista [TELA-NOVA:2026-09-28] — "Agendados" do painel e as  */
    /* três abas de painel-agenda. Era o card de 134840:10275 (ícone 40 ·  */
    /* título 18 · 2 linhas); vira a linha de /agendamentos/:              */
    /*  data | tipo          | local | cliente | selo/valor | ›            */
    /*  data | data · hora · duração                                       */
    /* Colunas pela largura da LISTA (container query), não da viewport:   */
    /* a mesma linha serve à coluna do painel e à da agenda.               */
    /* ================================================================== */

    .dl-painel__lista {
        container: dl-prof-lista / inline-size;
    }

    /* Estreita (< 560): tipo | valor/selo em cima, a data na largura toda,
       local | cliente embaixo. */
    .dl-painel-card.dl-d-card-lista {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr) auto 16px;
        grid-template-areas:
            "data titulo fim   ver"
            "data linha  linha ver"
            "data local  cli   ver";
        align-items: center;
        gap: 0;
        padding: 10px 16px 10px 10px;
        border-radius: var(--dl-radius-card);
    }

    /* Hover (subir 2px + sombra do destaque, chevron .dl-d-seta avançando) vem das
       primitivas do shell para a.dl-d-card-lista (docs/19 §3.3). Uma transition
       própria aqui venceria a do shell pela especificidade e cortaria o transform. */

    .dl-painel-card.dl-d-card-lista:focus-visible {
        outline: 2px solid var(--dl-azul);
        outline-offset: 2px;
    }

    /* [REVISÃO-DESKTOP:2026-10-01] slide 5 — a caixinha de data da linha vira
       "7 │ Qua / out": o dia grande à esquerda, semana e mês empilhados à direita. */
    .dl-d-card-lista > .dl-painel-data {
        grid-area: data;
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas:
            "dia semana"
            "dia mes";
        align-content: center;
        align-items: center;
        justify-content: center;
        column-gap: 6px;
        row-gap: 0;
        width: 72px;
        height: 48px;
        padding: 0 8px;
        border-radius: var(--dl-radius-card);
    }

    .dl-d-card-lista > .dl-painel-data .dl-painel-data__dia {
        grid-area: dia;
        font-size: 26px;
        line-height: 30px;
        letter-spacing: -0.8px;
    }

    .dl-d-card-lista > .dl-painel-data :is(.dl-painel-data__semana, .dl-painel-data__mes) {
        justify-self: start;
        font-size: 12px;
        line-height: 15px;
        letter-spacing: 0;
        text-transform: none;
    }

    .dl-d-card-lista > .dl-painel-data .dl-painel-data__semana {
        grid-area: semana;
        align-self: end;
    }

    .dl-d-card-lista > .dl-painel-data .dl-painel-data__mes {
        grid-area: mes;
        align-self: start;
        font-weight: 500;
    }

    .dl-d-card-lista :is(.dl-painel-card__topo, .dl-painel-card__infos) {
        display: contents;
    }

    /* O bloco de data toma o lugar do ícone de vassoura. */
    .dl-d-card-lista .dl-painel-card__icone {
        display: none;
    }

    .dl-d-card-lista .dl-painel-card__titulo {
        grid-area: titulo;
        align-self: end;
        min-width: 0;
        padding: 0 16px 0 14px;
        overflow: hidden;
        color: var(--dl-azul-marinho);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-box: normal;
    }

    .dl-d-card-lista .dl-painel-card__linha {
        gap: 4px;
        min-width: 0;
        min-height: 0;
        padding: 0 16px 0 14px;
        color: var(--dl-cinza-70);
        font-size: 13px;
        line-height: 18px;
    }

    .dl-d-card-lista .dl-painel-card__linha > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-box: normal;
    }

    .dl-d-card-lista .dl-painel-card__linha .dl-painel-icone {
        width: 13px;
        height: 13px;
        color: var(--dl-azul-claro);
    }

    .dl-d-card-lista .dl-painel-card__linha--data {
        grid-area: linha;
    }

    .dl-d-card-lista .dl-painel-card__linha--data .dl-painel-icone {
        display: none;
    }

    .dl-d-card-lista .dl-painel-card__linha--local {
        grid-area: local;
        align-self: start;
        color: var(--dl-cinza-50);
    }

    .dl-d-card-lista .dl-painel-card__cliente {
        grid-area: cli;
        display: flex;
        align-items: center;
        justify-self: end;
        gap: 6px;
        min-width: 0;
        padding-right: 12px;
        color: var(--dl-azul-marinho);
        font-size: 13px;
        line-height: 18px;
    }

    .dl-d-card-lista .dl-painel-card__cliente > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dl-d-card-lista .dl-painel-card__cliente .dl-painel-icone {
        width: 14px;
        height: 14px;
        color: var(--dl-azul-claro);
    }

    .dl-d-card-lista .dl-painel-card__fim {
        grid-area: fim;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: center;
        gap: 4px 8px;
        padding-right: 12px;
    }

    .dl-d-card-lista .dl-painel-card__fim .dl-badge {
        margin: 0;
        padding: 2px 6px;
        font-size: 9px;
        white-space: nowrap;
    }

    .dl-d-card-lista .dl-painel-card__valor {
        color: var(--dl-azul);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        white-space: nowrap;
    }

    .dl-painel-card--concluido.dl-d-card-lista .dl-painel-card__valor {
        color: var(--dl-azul-marinho);
    }

    .dl-d-card-lista .dl-painel-card__ver {
        grid-area: ver;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
    }

    .dl-d-card-lista .dl-painel-card__ver .dl-painel-icone {
        width: 16px;
        height: 16px;
    }

    /* Média (≥ 560): a cliente ganha coluna; valor com largura fixa, para
       as colunas baterem de uma linha para a outra. */
    @container dl-prof-lista (min-width: 560px) {
        .dl-painel-card.dl-d-card-lista {
            grid-template-columns: 72px minmax(0, 1fr) minmax(0, 0.6fr) 120px 16px;
            grid-template-areas:
                "data titulo cli fim ver"
                "data linha  cli fim ver"
                "data local  cli fim ver";
        }

        .dl-d-card-lista .dl-painel-card__cliente {
            justify-self: start;
            padding: 0 16px 0 0;
        }

        .dl-d-card-lista .dl-painel-card__fim {
            flex-direction: column;
            align-items: flex-end;
        }
    }

    /* Larga (≥ 860): o local vai para coluna própria — a linha fica com 2
       linhas de altura em vez de 3. */
    @container dl-prof-lista (min-width: 860px) {
        .dl-painel-card.dl-d-card-lista {
            grid-template-columns: 72px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.7fr) 132px 16px;
            grid-template-areas:
                "data titulo local cli fim ver"
                "data linha  local cli fim ver";
        }

        .dl-d-card-lista .dl-painel-card__linha--data {
            align-self: start;
        }

        .dl-d-card-lista .dl-painel-card__linha--local {
            align-self: center;
            padding-left: 0;
        }
    }

    /* ================================================================== */
    /* painel-agenda — [TELA-NOVA:2026-09-28] calendário | abas + lista    */
    /* Título na largura inteira; o calendário numa coluna fixa (340, 300  */
    /* em 1024) e a lista no resto — antes as duas metades paravam em 1025 */
    /* com um divisor no meio. A coluna do calendário vira display:contents */
    /* para o título atravessar a grade.                                   */
    /* ================================================================== */

    /* [REVISÃO-DESKTOP:2026-10-01] slide 5 — "apenas trocar os lados": abas + lista
       à esquerda, calendário + aviso à direita. */
    .dl-painel-agenda.dl-d-p3 {
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-rows: auto 1fr;
        align-content: start;
        column-gap: 40px;
        max-width: none;
        min-height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .dl-painel-agenda > .dl-painel-agenda__col--calendario {
        display: contents;
    }

    .dl-painel-agenda .dl-painel-agenda__cabecalho {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 20px;
    }

    .dl-painel-agenda .dl-painel-agenda__cabecalho .dl-d-titulo-secao {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -0.8px;
        text-box: normal;
    }

    .dl-painel-agenda .dl-painel-agenda__cartao {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        padding: 16px;
        border-radius: var(--dl-d-radius);
        box-shadow: var(--dl-d-sombra-card);
    }

    /* Composto: a utilitária .dl-d-p3__col + .dl-d-p3__col (80 à esquerda) tem
       a mesma especificidade de um seletor de 2 classes e o shell carrega depois. */
    .dl-painel-agenda.dl-d-p3 > .dl-painel-agenda__col--lista {
        grid-column: 1;
        grid-row: 2;
        padding: 0;
    }

    .dl-painel-agenda .dl-painel-agenda__abas {
        margin-top: 0;
    }

    /* Abas compactas (36, 14) e com largura contida, como as de /agendamentos/;
       o inativo sobe de azul 50% para azul pleno (contraste AA no fundo claro). */
    .dl-painel-agenda .dl-painel-agenda__nav.dl-tabs__nav {
        max-width: 480px;
        margin-bottom: 16px;
    }

    .dl-painel-agenda .dl-painel-agenda__aba.dl-tabs__item {
        height: 36px;
        border-radius: var(--dl-radius-botao);
        font-size: 14px;
    }

    .dl-painel-agenda .dl-painel-agenda__aba.dl-tabs__item:not(.is-ativo) {
        color: var(--dl-azul);
    }

    .dl-painel-agenda .dl-painel-agenda__aba.dl-tabs__item:not(.is-ativo):hover {
        background: color-mix(in srgb, var(--dl-azul-claro) 24%, transparent);
    }

    .dl-painel-agenda .dl-painel__lista {
        gap: 8px;
    }

    /* Aba vazia: a ilustração num cartão baixo, na largura da lista. */
    .dl-painel-agenda .dl-painel-agenda__painel > .dl-vazio {
        padding: 16px 20px;
        border-radius: var(--dl-radius-card);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-painel-agenda .dl-painel-agenda__mais {
        width: auto;
        height: 40px;
        margin-top: 12px;
        padding-inline: 20px;
        border-radius: var(--dl-radius-botao);
        font-size: 14px;
    }

    /* ================================================================== */
    /* painel-servico — [TELA-NOVA:2026-09-28] P2 na largura inteira       */
    /*  ‹ Minha agenda                                                     */
    /*  ▌Próximo agendamento                                               */
    /*  Sex, 2 de outubro · 08:00 · até 4 horas                            */
    /*  seções (2 colunas com largura) | Seu Recebimento + avisos + ações  */
    /* A faixa colorida do mobile vira título de tela; a cor do status     */
    /* sobrevive num traço vertical, como o detalhe do cliente.            */
    /* ================================================================== */

    .dl-painel-servico {
        padding-bottom: 0;
    }

    .dl-painel-servico .dl-painel-servico__voltar {
        display: flex;
        width: fit-content;
        align-items: center;
        gap: 4px;
        margin: 0 0 12px -4px;
        color: var(--dl-azul);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        text-decoration: none;
    }

    .dl-painel-servico .dl-painel-servico__voltar:hover {
        color: var(--dl-azul-hover);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .dl-painel-servico .dl-painel-servico__voltar:focus-visible {
        border-radius: 4px;
        outline: 2px solid var(--dl-azul);
        outline-offset: 2px;
    }

    .dl-painel-servico .dl-painel-servico__voltar-icone {
        width: 18px;
        height: 18px;
    }

    .dl-painel-servico > h1.dl-painel-servico__faixa {
        --dl-prof-traco: var(--dl-cinza-50);
        display: flex;
        align-items: center;
        gap: 14px;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        color: var(--dl-azul-marinho);
        font-size: 32px;
        font-weight: 600;
        line-height: 36px;
        letter-spacing: -0.8px;
        text-align: left;
        text-box: normal;
    }

    .dl-painel-servico > h1.dl-painel-servico__faixa::before {
        content: "";
        flex: none;
        width: 6px;
        height: 32px;
        border-radius: var(--dl-radius-pill);
        background: var(--dl-prof-traco);
    }

    .dl-painel-servico--proximo > h1.dl-painel-servico__faixa {
        --dl-prof-traco: var(--dl-atencao);
    }

    .dl-painel-servico--concluido > h1.dl-painel-servico__faixa {
        --dl-prof-traco: var(--dl-azul);
    }

    .dl-painel-servico--cancelado > h1.dl-painel-servico__faixa {
        --dl-prof-traco: var(--dl-erro);
    }

    .dl-painel-servico .dl-painel-servico__quando {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 8px 0 0 20px;
        color: var(--dl-cinza-70);
        font-size: 14px;
        line-height: 20px;
    }

    .dl-painel-servico .dl-painel-servico__quando .dl-painel-icone {
        width: 16px;
        height: 16px;
        color: var(--dl-azul-claro);
    }

    .dl-painel-servico .dl-painel-servico__corpo {
        margin-top: 28px;
    }

    .dl-painel-servico .dl-painel-servico__corpo.dl-d-p2 {
        max-width: none;
    }

    .dl-painel-servico .dl-painel-servico__principal {
        container: dl-prof-servico / inline-size;
    }

    .dl-painel-servico .dl-painel-servico__secoes {
        gap: 28px;
        margin-top: 0;
    }

    .dl-painel-servico .dl-painel-servico__secao {
        gap: 10px;
    }

    .dl-painel-servico .dl-painel-servico__rotulo {
        color: var(--dl-azul-marinho);
        font-size: 16px;
        line-height: 22px;
        text-box: normal;
    }

    .dl-painel-servico .dl-painel-servico__cliente {
        padding: 14px 16px;
        border-radius: var(--dl-radius-card);
    }

    .dl-painel-servico .dl-painel-servico__linhas {
        padding: 6px 20px;
        border-radius: var(--dl-radius-card);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-painel-servico .dl-painel-servico__linha {
        padding-block: 10px;
        font-size: 13px;
        line-height: 18px;
    }

    .dl-painel-servico .dl-painel-servico__linha + .dl-painel-servico__linha {
        margin-top: 0;
    }

    .dl-painel-servico .dl-painel-servico__linha :is(dt, dd) {
        text-box: normal;
    }

    .dl-painel-servico .dl-painel-servico__motivo {
        padding: 16px 20px;
        border-radius: var(--dl-radius-card);
        font-size: 13px;
    }

    .dl-painel-servico .dl-painel-servico__produtos .dl-aviso {
        margin-top: 0;
    }

    /* Com largura (≥ 720 na coluna principal): Cliente e Tipo de Limpeza à
       esquerda, Imóvel e Local à direita (a mais alta, em 2 linhas); o motivo
       do cancelamento / a ausência atravessa embaixo. */
    @container dl-prof-servico (min-width: 720px) {
        .dl-painel-servico .dl-painel-servico__secoes {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: start;
            gap: 28px 32px;
        }

        .dl-painel-servico .dl-painel-servico__secao:nth-child(1) {
            grid-column: 1;
            grid-row: 1;
        }

        .dl-painel-servico .dl-painel-servico__secao:nth-child(2) {
            grid-column: 2;
            grid-row: 1 / span 2;
        }

        .dl-painel-servico .dl-painel-servico__secao:nth-child(3) {
            grid-column: 1;
            grid-row: 2;
        }

        .dl-painel-servico .dl-painel-servico__secao:nth-child(4) {
            grid-column: 1 / -1;
            grid-row: 3;
        }
    }

    /* Lateral: Seu Recebimento na pele do card-resumo, avisos e ações
       coladas (gap 16 da coluna em vez das margens de 40/28/30 do mobile). */
    .dl-painel-servico__lateral > .dl-painel-servico__recebimento,
    .dl-painel-servico__lateral > .dl-painel-servico__chegada,
    .dl-painel-servico__lateral > .dl-painel-servico__acoes {
        margin: 0;
    }

    .dl-painel-servico .dl-painel-servico__recebimento {
        gap: 14px;
        padding: 20px;
        border: 1px solid var(--dl-d-resumo-borda);
        border-radius: var(--dl-d-radius);
    }

    .dl-painel-servico .dl-painel-servico__recebimento--atencao {
        border-color: color-mix(in srgb, var(--dl-atencao) 28%, transparent);
    }

    .dl-painel-servico .dl-painel-servico__recebimento-linha {
        font-size: 13px;
    }

    .dl-painel-servico .dl-painel-servico__recebimento-total strong {
        font-size: 24px;
        line-height: 28px;
        letter-spacing: -0.5px;
        text-box: normal;
    }

    .dl-painel-servico .dl-painel-servico__acoes {
        gap: 8px;
    }

    .dl-painel-servico .dl-painel-servico__acoes .dl-botao {
        height: 44px;
        font-size: 14px;
    }

    /* ================================================================== */
    /* cadastro-em-analise — hero em card, texto à esquerda, foto à direita */
    /* ================================================================== */

    .dl-cad-analise {
        padding-bottom: 0;
    }

    .dl-cad-analise .dl-cad-analise__hero {
        height: 460px;
        margin-inline: 0;
        border-radius: var(--dl-d-radius);
    }

    /* A foto (1328×885) é guiada pela altura: 110% do hero sai pelo pé, sem o
       corte seco do avental. A profissional fica a 57% da largura da imagem
       (759 px nessa altura, 432 px); o left a centra em 72% do hero, à direita
       do texto, em qualquer largura. */
    .dl-cad-analise .dl-cad-analise__foto {
        top: 40px;
        left: calc(72% - 432px);
        width: auto;
        height: 110%;
    }

    .dl-cad-analise .dl-cad-analise__cabeca {
        box-sizing: border-box;
        align-items: flex-start;
        justify-content: center;
        gap: 20px;
        max-width: 45%;
        height: 100%;
        padding: 0 0 0 48px;
        text-align: left;
    }

    .dl-cad-analise .dl-cad-analise__titulo {
        font-size: 44px;
        line-height: 40px;
        letter-spacing: -1px;
    }

    .dl-cad-analise .dl-cad-analise__texto {
        font-size: 16px;
        line-height: 1.5;
    }

    .dl-cad-analise .dl-cad-analise__rodape {
        max-width: calc(var(--dl-d-conteudo-max) - var(--dl-d-col-resumo) - var(--dl-d-gap-colunas));
        margin-top: 40px;
    }

    .dl-cad-analise:has([data-dl-recusados]) .dl-cad-analise__rodape {
        margin-top: 40px;
    }

    /* ================================================================== */
    /* cadastro-profissional — o split das telas de acesso, em etapas      */
    /* [DECISÃO:2026-09-29] Mesmo desenho do cadastro do cliente (dl-f05 + */
    /* dl-desktop.css): stepper, título de etapa, rótulo Body Tone 1,      */
    /* campo cinza sem borda e Voltar/Continuar lado a lado. O body. na    */
    /* frente vence dl-cadastro-profissional.css, que carrega depois.      */
    /* ================================================================== */

    body.dl-tela-acesso .dl-acesso__conteudo > .dl-cad-prof {
        margin: auto;
        width: min(460px, 100%);
        padding: 0;
    }

    /* O h1 fica para o leitor de tela; na vista, o título é o da etapa. */
    body.dl-tela-acesso .dl-cad-prof__topo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* Sem JS as três seções ficam empilhadas e o stepper não aparece. */
    body.dl-tela-acesso .dl-cad-prof__form.is-etapas .dl-cad-prof__progresso {
        display: flex;
        margin-bottom: 28px;
    }

    body.dl-tela-acesso .dl-cad-prof__progresso .dl-multipassos__progresso-texto {
        margin-top: 4px;
        font-size: var(--dl-body1-tamanho);
        line-height: var(--dl-body1-lh);
        letter-spacing: 0;
        text-transform: none;
    }

    body.dl-tela-acesso .dl-cad-prof__etapa {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    body.dl-tela-acesso .dl-cad-prof__etapa[hidden] {
        display: none;
    }

    body.dl-tela-acesso .dl-cad-prof__form:not(.is-etapas) .dl-cad-prof__etapa + .dl-cad-prof__etapa {
        margin-top: 40px;
    }

    body.dl-tela-acesso .dl-cad-prof__secao {
        margin: 0;
        font-size: var(--dl-h2-tamanho);
        font-weight: var(--dl-h2-peso);
        line-height: var(--dl-h2-lh);
        color: var(--dl-azul-marinho);
    }

    body.dl-tela-acesso .dl-cad-prof__etapa-sub {
        display: block;
        margin: 12px 0 0;
        font-size: var(--dl-body2-tamanho);
        line-height: var(--dl-body2-lh);
        color: var(--dl-cinza-50);
        text-box: trim-both cap alphabetic;
    }

    body.dl-tela-acesso .dl-cad-prof__card {
        gap: 24px;
        margin-top: 22px;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    /* Etapa 1 na altura da do cliente (5 linhas de campo, cabe na tela): Telefone e
       E-mail dividem a linha, como CPF e Nascimento já dividem. */
    body.dl-tela-acesso .dl-cad-prof__etapa[data-passo="1"] .dl-cad-prof__card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 10px;
    }

    body.dl-tela-acesso .dl-cad-prof__etapa[data-passo="1"] .dl-cad-prof__card > * {
        grid-column: 1 / -1;
    }

    body.dl-tela-acesso .dl-cad-prof__etapa[data-passo="1"] .dl-cad-prof__card > :is(:has([name="whatsapp"]), :has([name="email"])) {
        grid-column: auto;
    }

    body.dl-tela-acesso .dl-cad-prof .dl-campo {
        gap: 12px;
        margin-bottom: 0;
    }

    body.dl-tela-acesso .dl-cad-prof .dl-campo__label {
        font-size: var(--dl-body1-tamanho);
        font-weight: var(--dl-body1-tom-peso);
        line-height: var(--dl-body1-lh);
        letter-spacing: 0;
        text-transform: none;
        color: var(--dl-cinza-70);
    }

    body.dl-tela-acesso .dl-cad-prof .dl-aceite-termos .dl-campo__label {
        font-size: var(--dl-body2-tamanho);
        font-weight: var(--dl-body2-peso);
        color: var(--dl-cinza-50);
    }

    body.dl-tela-acesso .dl-cad-prof :is(.dl-campo__input, .dl-campo__select) {
        border-color: transparent;
        font-size: var(--dl-body2-tamanho);
        line-height: var(--dl-body2-lh);
    }

    body.dl-tela-acesso .dl-cad-prof :is(.dl-campo__input, .dl-campo__select):focus {
        border-color: var(--dl-azul);
    }

    body.dl-tela-acesso .dl-cad-prof__docs {
        margin-top: 22px;
    }

    body.dl-tela-acesso .dl-cad-prof__aviso,
    body.dl-tela-acesso .dl-cad-prof__termos {
        margin-top: 24px;
    }

    body.dl-tela-acesso .dl-cad-prof__acoes {
        display: flex;
        gap: 10px;
        margin-top: 24px;
    }

    body.dl-tela-acesso .dl-cad-prof__acoes .dl-botao {
        flex: 1 1 0;
        margin-top: 0;
    }
}

/* 1024–1279: a agenda aperta o calendário para 300 e o vão para 28. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .dl-painel-agenda.dl-d-p3 {
        grid-template-columns: minmax(0, 1fr) 300px;
        column-gap: 28px;
    }

    .dl-cad-analise .dl-cad-analise__cabeca {
        padding-left: 32px;
    }
}

/* disponibilidade — [REVISÃO-DESKTOP:2026-10-01] slide 7. As regras de base moram em
   dl-desktop-fluxo.css (P2 de 2026-09-24); esta folha carrega depois e reorganiza:
   a tela vai até a borda direita, a semana ocupa a coluna larga e "Dias Bloqueados"
   + Salvar ficam na coluna da direita (antes vazia). "Espaçar mais as coisas": mais
   respiro entre os dias e turnos Manhã/Tarde de 44 com 12 entre eles. */
@media (min-width: 1024px) {
    body.dl-com-sidebar > main.dl-container:has(.dl-disponibilidade) {
        max-width: none;
    }

    .dl-disponibilidade > .dl-fluxo.dl-d-p2 {
        grid-template-columns: minmax(0, 1fr) 360px;
        column-gap: 48px;
        max-width: none;
    }

    .dl-disponibilidade .dl-fluxo__principal {
        gap: 32px;
    }

    .dl-disponibilidade .dl-fluxo .dl-disponibilidade__semana {
        gap: 28px;
        padding: 28px 32px;
        border-radius: var(--dl-d-radius);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-disponibilidade .dl-disponibilidade__dia {
        gap: 16px;
    }

    .dl-disponibilidade .dl-disponibilidade__turnos {
        gap: 12px;
    }

    .dl-disponibilidade .dl-disponibilidade__turno.dl-chip {
        flex: 1 1 0;
        height: 44px;
        border-radius: var(--dl-radius-card);
        font-size: 14px;
    }

    .dl-disponibilidade .dl-fluxo .dl-fluxo__resumo--estatico {
        gap: 24px;
    }

    .dl-disponibilidade .dl-disponibilidade__bloqueios .dl-agenda__cartao {
        border-radius: var(--dl-d-radius);
        box-shadow: var(--dl-d-sombra-card);
    }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
    .dl-disponibilidade > .dl-fluxo.dl-d-p2 {
        grid-template-columns: minmax(0, 1fr) 320px;
        column-gap: 32px;
    }
}

/* painel-servico como modal — [REVISÃO-DESKTOP:2026-10-01] slide 4 (docs/18 §10).
   [REVISÃO-DESKTOP:2026-10-01] slide 4 — modal empilhado (pedido do usuário 02/10):
   numa coluna só, na ordem do mobile — título e data, Cliente, Imóvel e Local, Tipo
   de Limpeza (com Produtos de limpeza), motivo/ausência, Sobre o Cancelamento e as
   ações na largura da coluna. O X do modal faz o papel do "‹ Minha agenda". */
@media (min-width: 1024px) {
    body.dl-pagina-modal .dl-painel-servico .dl-painel-servico__voltar {
        display: none;
    }

    body.dl-pagina-modal .dl-painel-servico .dl-painel-servico__corpo.dl-d-p2 {
        gap: 28px;
    }

    body.dl-pagina-modal .dl-painel-servico .dl-painel-servico__secoes {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    body.dl-pagina-modal .dl-painel-servico .dl-painel-servico__linha dd {
        text-align: right;
    }
}

/* ≥ 1440: o calendário da agenda abre um pouco. */
@media (min-width: 1440px) {
    .dl-painel-agenda.dl-d-p3 {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
}

@media (min-width: 1280px) {
    .dl-painel-servico .dl-painel-servico__corpo.dl-d-p2 {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 32px;
    }
}

/* ====================================================================== */
/* Motion — micro-interações da área da profissional (docs/19 §5.6)        */
/* [TELA-NOVA:2026-09-25] O Figma não anima nada: design pela Regra 3,     */
/* sem informação nova. Primitivas e keyframes dl-d-* vêm do bloco Motion  */
/* de dl-desktop-shell.css (§3.3); aqui só o que é da área. Entradas com   */
/* fill `backwards` — nunca `both`: transform residual prende os fixed.    */
/* ====================================================================== */

@media (min-width: 1024px) {
    /* Só opacidade: troca de aba e textos que mudam no lugar. */
    @keyframes dl-dprof-surge {
        from {
            opacity: 0;
        }
    }

    /* Selo do cadastro em análise: um pulso de ~2s a cada 6s (docs/19 §5.6). */
    @keyframes dl-dprof-pulso {
        0%,
        34%,
        100% {
            transform: scale(1);
        }

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

    @keyframes dl-dprof-anel {
        0% {
            opacity: 0.6;
            transform: scale(1);
        }

        34%,
        100% {
            opacity: 0;
            transform: scale(1.35);
        }
    }

    /* Documento enviando: pulsa enquanto o POST não volta. */
    @keyframes dl-dprof-enviando {
        50% {
            opacity: 0.45;
        }
    }

    /* ---- painel-agenda: indicador da aba ------------------------------ */

    /* O fundo azul da aba ativa vira um indicador só (::before da barra) que
       desliza até a aba clicada; as abas têm a mesma largura (flex 1 1 0,
       vão --dl-espaco-2 do mobile), então a posição sai do índice. Sem :has,
       fica como antes. */
    @supports selector(:has(*)) {
        .dl-painel-agenda .dl-painel-agenda__nav.dl-tabs__nav {
            position: relative;
        }

        .dl-painel-agenda .dl-painel-agenda__nav::before {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: calc((100% - var(--dl-espaco-2) * 2) / 3);
            border-radius: var(--dl-radius-botao);
            background: var(--dl-azul);
            transform: translateX(calc(var(--dl-dprof-aba, 0) * (100% + var(--dl-espaco-2))));
            pointer-events: none;
        }

        .dl-painel-agenda .dl-painel-agenda__nav:has(> .dl-painel-agenda__aba:nth-child(2).is-ativo) {
            --dl-dprof-aba: 1;
        }

        .dl-painel-agenda .dl-painel-agenda__nav:has(> .dl-painel-agenda__aba:nth-child(3).is-ativo) {
            --dl-dprof-aba: 2;
        }

        .dl-painel-agenda .dl-painel-agenda__aba.dl-tabs__item {
            position: relative;
            z-index: 1;
            transition: color var(--dl-dur-base) var(--dl-ease-saida);
        }

        .dl-painel-agenda .dl-painel-agenda__aba.dl-tabs__item.is-ativo {
            background: transparent;
        }
    }

    /* ---- painel-servico: flash sem perder o raio ---------------------- */

    /* .dl-d-atualizou (shell) põe raio 6; o botão marcado mantém o dele. */
    .dl-painel-servico .dl-painel-servico__acoes .dl-botao.dl-d-atualizou {
        border-radius: var(--dl-radius-card);
    }

    /* ---- uploads (cadastro-profissional · Documentos de Dados pessoais) */

    .dl-cad-prof .dl-upload-campo .dl-upload {
        transition: border-color var(--dl-dur-base) var(--dl-ease-saida), background-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);
    }

    /* Arquivo passando por cima (dl-cadastro-profissional.js · initArrastar). */
    .dl-cad-prof .dl-upload-campo.is-arrastando .dl-upload {
        border-style: solid;
        border-color: var(--dl-azul);
        background-color: color-mix(in srgb, var(--dl-azul-claro) 10%, var(--dl-branco));
        color: var(--dl-azul);
    }

    .dl-cad-prof .dl-upload-campo[aria-busy="true"] {
        cursor: progress;
    }

    .dl-cad-prof .dl-upload-campo[aria-busy="true"] .dl-upload {
        opacity: 0.6;
    }
}

/* Movimento só para quem não pediu menos movimento. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    /* ---- painel (A) ---------------------------------------------------- */

    /* "Próximo Serviço" entra primeiro (fade + 12px), com o 1º degrau da
       cascata; o vazio do destaque, só em fade. */
    html:not(.dl-splash-ativo) .dl-painel .dl-painel__proximo {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) 80ms backwards;
    }

    html:not(.dl-splash-ativo) .dl-painel .dl-painel__proximo--vazio {
        animation-name: dl-dprof-surge;
    }

    /* "Agendados" vem atrás do destaque: a cascata do .dl-d-lista (shell)
       começa 150ms depois. O vazio da coluna, em fade no mesmo tempo. */
    html:not(.dl-splash-ativo) .dl-painel .dl-painel__lista.dl-d-lista > * {
        animation-delay: calc(230ms + var(--dl-i, 0) * 50ms);
    }

    html:not(.dl-splash-ativo) .dl-painel .dl-painel__agendados-vazio .dl-vazio {
        animation: dl-dprof-surge var(--dl-dur-lenta) var(--dl-ease-saida) 230ms backwards;
    }

    /* "Próximos 7 dias" entra junto com o 2º degrau do destaque. */
    html:not(.dl-splash-ativo) .dl-painel > .dl-painel-semana {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) 150ms backwards;
    }

    /* ---- painel-agenda (B) -------------------------------------------- */

    .dl-painel-agenda .dl-painel-agenda__nav::before {
        transition: transform var(--dl-dur-lenta) var(--dl-ease-saida);
    }

    /* A aba que abre entra em fade curto; os cards (.dl-d-cascata) em
       cascata, porque saem de display:none e a animação recomeça. */
    .dl-painel-agenda .dl-painel-agenda__painel.is-ativo {
        animation: dl-dprof-surge var(--dl-dur-base) var(--dl-ease-saida) backwards;
    }

    /* Dias com serviço confirmado: pop leve ao montar a grade (também ao
       trocar de mês, que redesenha os dias). */
    .dl-painel-agenda .dl-calendario__dia.is-selecionado {
        animation: dl-d-pop var(--dl-dur-lenta) var(--dl-ease-mola) 200ms backwards;
    }

    /* ---- painel-servico (B) ------------------------------------------- */

    /* A faixa de status abre a tela; as seções e a lateral vêm atrás. */
    html:not(.dl-splash-ativo) .dl-painel-servico .dl-painel-servico__faixa {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) 80ms backwards;
    }

    /* Depois de uma ação/polling (dl-painel.js) a faixa também pisca. Mesma
       lista com a entrada primeiro: ao tirar a classe, a entrada não recomeça. */
    html:not(.dl-splash-ativo) .dl-painel-servico .dl-painel-servico__faixa.dl-d-atualizou {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) 80ms backwards, dl-d-atualizou 700ms var(--dl-ease-saida);
    }

    html:not(.dl-splash-ativo) .dl-painel-servico .dl-painel-servico__secoes.dl-d-cascata > * {
        animation-delay: calc(160ms + var(--dl-i, 0) * 50ms);
    }

    html:not(.dl-splash-ativo) .dl-painel-servico .dl-painel-servico__lateral.dl-d-cascata > * {
        animation-delay: calc(210ms + var(--dl-i, 0) * 50ms);
    }

    /* ---- uploads (B) --------------------------------------------------- */

    .dl-cad-prof .dl-upload-campo.is-arrastando .dl-upload {
        transform: scale(1.01);
    }

    .dl-cad-prof .dl-upload-campo .dl-upload {
        transition: border-color var(--dl-dur-base) var(--dl-ease-saida), background-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-base) var(--dl-ease-mola);
    }

    .dl-cad-prof .dl-upload-campo[aria-busy="true"] .dl-upload {
        animation: dl-dprof-enviando 1.2s var(--dl-ease-troca) infinite;
    }

    /* Arquivo novo (DL.motion.pulsar 'is-novo'): pop no ícone e no selo,
       o nome aparece em fade. */
    .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-dprof-surge var(--dl-dur-lenta) var(--dl-ease-saida);
    }

    /* ---- cadastro-em-analise (C) -------------------------------------- */

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

    .dl-cad-analise .dl-cad-analise__selo::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 2px solid var(--dl-branco);
        border-radius: inherit;
        opacity: 0;
        animation: dl-dprof-anel 6s var(--dl-ease-saida) 1s infinite;
        pointer-events: none;
    }
}

/* Com "reduzir movimento": nada se desloca nem fica em loop. Cor e opacidade
   curtas continuam (docs/19 §2 #4); as entradas acima nem chegam a valer. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .dl-painel-agenda .dl-painel-agenda__aba.dl-tabs__item,
    .dl-cad-prof .dl-upload-campo .dl-upload {
        transition-duration: var(--dl-dur-rapida);
    }

    .dl-cad-analise .dl-cad-analise__selo,
    .dl-cad-analise .dl-cad-analise__selo::after,
    .dl-cad-prof .dl-upload-campo[aria-busy="true"] .dl-upload {
        animation: none;
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
    /* Sem o subir do shell, o card de lista ainda responde ao mouse pela sombra. */
    .dl-painel-card.dl-d-card-lista:hover {
        box-shadow: var(--dl-d-sombra-destaque);
    }
}

}