/*
 * DoceLar — F16 · agenda do cliente no desktop (docs/18 §4 "Agenda do cliente").
 * [TELA-NOVA:2026-09-24] — não há desenho desktop destas telas; elas imitam as
 * telas-norte da página `Desktop`:
 *
 *   /agendamentos/       [TELA-NOVA:2026-09-28] título + "Agendar uma Limpeza" à direita;
 *                        abas com o total de cada uma; em "Próximos", "Próximo
 *                        agendamento" em destaque na largura do conteúdo e "Agendados"
 *                        embaixo, em linhas; nas outras abas (e página 2+), linhas.
 *                        Substitui o P3 (134840:9647), que deixava 1 item em meia
 *                        largura com a tela vazia ao lado.
 *   /agendamento/        P2 (134844:10576): seções à esquerda, resumo do valor + ações
 *                        (pagar, cancelar, avaliar, reportar) na coluna de 341 à direita.
 *   /reportar-problema/  P2 só em CSS: formulário à esquerda, card "Agendamento" + botão
 *                        à direita (a ordem do DOM é a do mobile).
 *   folha "Avalie sua Limpeza" e modal "Cancelar faxina": já viram modais centrais
 *                        (dl-desktop.css); aqui só a largura da folha.
 *
 * Escopo: só .dl-agendamentos · .dl-ag-detalhe · .dl-reportar — .dl-ag-tela também é
 * das telas do fluxo (revisar, confirmado), que são de outra folha. Esta folha carrega
 * ANTES de dl-desktop-shell (ordem alfabética): numa disputa com uma utilitária .dl-d-*
 * de mesma especificidade o shell vence, por isso os seletores daqui são compostos.
 * Tudo em @layer dl-telas e ≥ 1024; só tokens; sem !important. Mobile intocado.
 */

@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-agendamentos__so-desktop {
        display: none;
    }
}

@media (min-width: 1024px) {

    /* ------------------------------------------------------------------ */
    /* Comum — a faixa colorida vira o título de tela (h1.dl-d-titulo-tela) */
    /* ------------------------------------------------------------------ */

    :is(.dl-agendamentos, .dl-ag-detalhe, .dl-reportar) > .dl-ag-faixa {
        display: flex;
        align-items: center;
        gap: 16px;
        width: auto;
        margin: 0 0 40px;
        padding: 0;
        border-radius: 0;
        background: none;
        text-align: left;
    }

    /* O trim de cap-height do mobile encolheria a linha de 40 do título de tela. */
    :is(.dl-agendamentos, .dl-ag-detalhe, .dl-reportar) > .dl-ag-faixa .dl-ag-faixa__titulo {
        text-box: normal;
    }

    /* No detalhe a cor da faixa é o status (próximo · concluído · cancelado): ela
       sobrevive como um traço vertical na altura do título. */
    .dl-ag-detalhe > .dl-ag-faixa::before {
        content: "";
        flex: none;
        width: 6px;
        height: 40px;
        border-radius: var(--dl-radius-pill);
        background: var(--dl-azul);
    }

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

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

    /* Cartões brancos: raio 16 e padding 24 do desktop, sombra de card de lista. */
    :is(.dl-agendamentos, .dl-ag-detalhe, .dl-reportar) .dl-ag-cartao {
        padding: 24px;
        border-radius: var(--dl-d-radius);
    }

    :is(.dl-ag-detalhe, .dl-reportar) .dl-ag-linhas,
    .dl-ag-detalhe .dl-pos-cartao,
    .dl-reportar .dl-reportar__form {
        box-shadow: var(--dl-d-sombra-card);
    }

    /* ------------------------------------------------------------------ */
    /* /agendamentos/ — cabeçalho com ação · abas com total · destaque +    */
    /* linhas [TELA-NOVA:2026-09-28]. Tela compacta e na largura inteira    */
    /* (não para em --dl-d-conteudo-max) e, a partir de 1440 de viewport,   */
    /* destaque e linhas se abrem na horizontal (bloco no fim da seção).    */
    /* ------------------------------------------------------------------ */

    /* Grade da tela: título | "Agendar uma Limpeza" na 1ª linha; abas e lista
       na largura inteira. O botão alinha com a borda direita da lista. */
    .dl-agendamentos.dl-ag-tela {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-content: start;
        column-gap: 24px;
    }

    /* A coluna do shell (o <main> do tema, em volta do shortcode) para em 1025
       úteis; esta tela ocupa a largura inteira ao lado da sidebar. */
    body.dl-com-sidebar > main.dl-container:has(> :is(.dl-agendamentos, .dl-ag-detalhe)) {
        max-width: none;
    }

    .dl-agendamentos.dl-ag-tela > * {
        grid-column: 1 / -1;
    }

    .dl-agendamentos.dl-ag-tela > .dl-ag-faixa {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 20px;
    }

    /* Título de tela menor que o 44 do shell: aqui a lista é o conteúdo. */
    .dl-agendamentos > .dl-ag-faixa .dl-d-titulo-tela {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -0.8px;
    }

    .dl-agendamentos.dl-ag-tela > .dl-agendamentos__novo {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        width: auto;
        height: 40px;
        margin-top: -2px;
        padding: 0 20px;
        border-radius: var(--dl-radius-botao);
        font-size: 14px;
    }

    /* Abas: o inativo sobe de azul 50% para azul pleno (contraste AA sobre o
       fundo claro) e cada aba mostra o total dela. */
    .dl-agendamentos .dl-agendamentos__abas {
        max-width: 480px;
        margin-top: 0;
    }

    .dl-agendamentos .dl-agendamentos__aba {
        height: 36px;
        font-size: 14px;
        transition: background-color var(--dl-dur-base) var(--dl-ease-saida), color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-agendamentos .dl-agendamentos__aba:not(.is-ativa) {
        color: var(--dl-azul);
    }

    /* F16.M [TELA-NOVA:2026-09-25] — o azul da aba ativa é um fundo só
       (__abas-fundo), posto sob a aba pelo índice dela; a aba ativa fica sem
       fundo próprio. Assim, na troca de aba (página nova), a View Transition
       desliza o fundo por trás dos rótulos (bloco no fim desta folha). Abas de
       largura igual (flex 1, vão --dl-abas-vao): largura = (100% − 2 vãos) / 3. */
    .dl-agendamentos .dl-agendamentos__abas {
        --dl-abas-vao: 10px;
        position: relative;
        gap: var(--dl-abas-vao);
    }

    .dl-agendamentos .dl-agendamentos__abas-fundo {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: calc((100% - var(--dl-abas-vao) * 2) / 3);
        height: 100%;
        border-radius: var(--dl-radius-botao);
        background: var(--dl-azul);
        transform: translateX(calc(var(--dl-aba-i, 0) * (100% + var(--dl-abas-vao))));
        pointer-events: none;
    }

    .dl-agendamentos .dl-agendamentos__aba {
        border-radius: var(--dl-radius-botao);
    }

    .dl-agendamentos .dl-agendamentos__abas:has(> .dl-agendamentos__aba:nth-of-type(2).is-ativa) {
        --dl-aba-i: 1;
    }

    .dl-agendamentos .dl-agendamentos__abas:has(> .dl-agendamentos__aba:nth-of-type(3).is-ativa) {
        --dl-aba-i: 2;
    }

    /* As abas já são position:relative (alvo de toque, dl-components): vêm
       depois do fundo no DOM, então pintam por cima dele. */
    .dl-agendamentos .dl-agendamentos__aba.is-ativa {
        background: transparent;
    }

    /* O rótulo ocupa a aba inteira: o recorte da transição tem o mesmo tamanho
       no negrito (ativa) e no regular — o texto não estica na troca. */
    .dl-agendamentos .dl-agendamentos__aba-rotulo {
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .dl-agendamentos .dl-agendamentos__aba-total {
        box-sizing: border-box;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: var(--dl-radius-pill);
        background: color-mix(in srgb, var(--dl-azul) 12%, transparent);
        color: var(--dl-azul);
        font-size: 11px;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        line-height: 18px;
        text-align: center;
        transition: background-color var(--dl-dur-base) var(--dl-ease-saida), color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-agendamentos .dl-agendamentos__aba.is-ativa .dl-agendamentos__aba-total {
        background: var(--dl-branco-24);
        color: var(--dl-branco);
    }

    .dl-agendamentos .dl-agendamentos__aba:not(.is-ativa):hover {
        background: color-mix(in srgb, var(--dl-azul-claro) 24%, transparent);
        color: var(--dl-azul-hover);
    }

    .dl-agendamentos .dl-agendamentos__aba:focus-visible {
        outline: 2px solid var(--dl-azul);
        outline-offset: 2px;
    }

    .dl-agendamentos .dl-agendamentos__resultado {
        max-width: none;
        margin-top: 24px;
    }

    /* Vazio [TELA-NOVA:2026-09-29]: ilustração, textos e (em Próximos) o
       "Agendar uma Limpeza" num cartão só, tudo centrado — antes o botão
       ficava solto à esquerda, longe da mensagem centrada. */
    .dl-agendamentos .dl-agendamentos__resultado:has(> .dl-vazio) {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 40px 24px 44px;
        border-radius: var(--dl-radius-card);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-agendamentos .dl-agendamentos__resultado > .dl-vazio {
        padding: 0;
    }

    .dl-agendamentos .dl-agendamentos__resultado > .dl-vazio .dl-vazio__ilustracao svg {
        width: 72px;
        height: 72px;
    }

    .dl-agendamentos .dl-agendamentos__resultado > .dl-vazio .dl-vazio__titulo {
        font-size: 18px;
        line-height: 24px;
    }

    .dl-agendamentos .dl-agendamentos__resultado > .dl-vazio .dl-vazio__texto {
        font-size: 14px;
        line-height: 20px;
    }

    .dl-agendamentos .dl-agendamentos__vazio-acao {
        margin-top: 0;
    }

    .dl-agendamentos .dl-agendamentos__vazio-acao .dl-botao {
        width: auto;
        min-width: 220px;
        height: 40px;
        min-height: 0;
        padding: 0 24px;
        border-radius: var(--dl-radius-botao);
        font-size: 14px;
    }

    /* "Próximos": destaque em cima, "Agendados" embaixo, na largura inteira.
       O invólucro reusa .dl-agendamentos__lista (gap 12 do mobile). */
    .dl-agendamentos .dl-agendamentos__colunas {
        gap: 28px;
    }

    .dl-agendamentos .dl-agendamentos__coluna > .dl-d-cabecalho {
        margin-bottom: 10px;
    }

    .dl-agendamentos .dl-agendamentos__secao-titulo {
        margin: 0;
        color: var(--dl-azul-marinho);
        font-family: var(--dl-fonte);
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
    }

    .dl-agendamentos .dl-agendamentos__resultado .dl-d-lista {
        gap: 8px;
    }

    /* Cards: o card inteiro é o link — no desktop ganha resposta ao ponteiro.
       Aqui só a sombra (vale com reduced-motion); subir 2px e o chevron
       (.dl-d-seta) que avança vêm das primitivas do shell (a.dl-d-card-*), e a
       transição de transform está no bloco Motion abaixo — esta regra, mais
       específica, não pode apagar a do shell. */
    .dl-agendamentos .dl-ag-card {
        border-radius: var(--dl-radius-card);
        transition: box-shadow var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-agendamentos .dl-ag-card:hover {
        box-shadow: var(--dl-d-sombra-destaque);
    }

    .dl-agendamentos .dl-ag-card:focus-visible {
        outline: 2px solid var(--dl-azul);
        outline-offset: 2px;
    }

    /* Bloco de data (decorativo): semana · dia · mês. Azul claro no que está
       por vir, cinza no histórico. */
    .dl-agendamentos .dl-ag-card__data {
        display: flex;
        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-agendamentos .dl-ag-card__data-semana,
    .dl-agendamentos .dl-ag-card__data-mes {
        font-size: 10px;
        font-weight: 600;
        line-height: 12px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .dl-agendamentos .dl-ag-card__data-semana {
        color: var(--dl-azul);
    }

    .dl-agendamentos .dl-ag-card__data-dia {
        font-size: 18px;
        font-weight: 700;
        line-height: 20px;
        letter-spacing: -0.4px;
        font-variant-numeric: tabular-nums;
    }

    .dl-agendamentos :is(.dl-ag-card--concluidos, .dl-ag-card--cancelados) .dl-ag-card__data {
        background: var(--dl-cinza-claro);
    }

    .dl-agendamentos :is(.dl-ag-card--concluidos, .dl-ag-card--cancelados) .dl-ag-card__data-semana {
        color: var(--dl-cinza-50);
    }

    .dl-agendamentos .dl-ag-card--cancelados .dl-ag-card__data {
        color: var(--dl-cinza-50);
    }

    /* ---- Destaque ("Próximo agendamento") ---------------------------- */
    /*  data | quando          | valor + selo                               */
    /*  data | título          |                                            */
    /*  data | data · local    |                                            */
    /*  ─────────────────────────────────────── (::after)                   */
    /*  profissional           | Ver detalhes →                             */
    /*  ≥ 1440 tudo numa faixa só (bloco no fim da seção).                  */

    .dl-agendamentos .dl-ag-card.dl-ag-card--destaque {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "data quando topo"
            "data titulo topo"
            "data linhas topo"
            "prof prof   acao";
        gap: 0;
        padding: 20px 24px 16px;
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__corpo {
        display: contents;
    }

    .dl-agendamentos .dl-ag-card--destaque::after {
        content: "";
        grid-column: 1 / -1;
        grid-row: 4;
        align-self: start;
        margin-top: 16px;
        border-top: 1px solid var(--dl-cinza-10);
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__data {
        grid-area: data;
        align-self: start;
        width: 64px;
        height: 72px;
        margin-right: 20px;
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__data-dia {
        font-size: 26px;
        line-height: 30px;
        letter-spacing: -0.8px;
    }

    .dl-agendamentos .dl-ag-card__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-agendamentos .dl-ag-card--destaque .dl-ag-card__titulo {
        grid-area: titulo;
        gap: 8px;
        font-size: 19px;
        line-height: 24px;
        letter-spacing: -0.3px;
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__titulo-icone {
        height: 20px;
        color: currentColor;
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__linhas {
        grid-area: linhas;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 24px;
        margin-top: 8px;
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__linha {
        gap: 6px;
        min-height: 20px;
        color: var(--dl-cinza-70);
        font-size: 14px;
        line-height: 20px;
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__icone {
        width: 15px;
        height: 15px;
        color: var(--dl-azul-claro);
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__topo {
        grid-area: topo;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        gap: 8px;
        margin-left: 20px;
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__topo .dl-badge {
        margin-right: 0;
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__valor {
        order: -1;
        color: var(--dl-azul);
        font-size: 19px;
        line-height: 24px;
        letter-spacing: -0.3px;
        text-box: normal;
    }

    /* Rodapé: profissional à esquerda, "Ver detalhes" à direita, abaixo do
       divisor (::after, 16 + 1). */
    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__prof {
        grid-area: prof;
        gap: 10px;
        padding-top: 29px;
        border-top: 0;
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-avatar {
        width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__nome {
        font-size: 14px;
        line-height: 20px;
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__ver {
        display: none;
    }

    .dl-agendamentos .dl-ag-card__acao {
        grid-area: acao;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        align-self: center;
        padding-top: 29px;
        color: var(--dl-azul);
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        white-space: nowrap;
    }

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

    /* ---- Linha (Agendados, Concluídos, Cancelados) ------------------- */
    /*  data | título            | avatar nome | valor/selo | ›            */
    /*  data | data · hora       |             |            |              */
    /*  data | local             |             |            |              */
    /* Valor com largura fixa: as colunas batem de uma linha para a outra.  */
    /* ≥ 1440 o local ganha coluna própria (bloco no fim da seção).         */

    .dl-agendamentos .dl-ag-card.dl-d-card-lista {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 30px minmax(0, 0.55fr) 136px 16px;
        grid-template-areas:
            "data titulo av nome topo ver"
            "data linha  av nome topo ver"
            "data local  av nome topo ver";
        align-items: center;
        gap: 0;
        padding: 10px 16px 10px 10px;
    }

    .dl-agendamentos .dl-d-card-lista :is(.dl-ag-card__corpo, .dl-ag-card__linhas, .dl-ag-card__prof) {
        display: contents;
    }

    .dl-agendamentos .dl-d-card-lista .dl-ag-card__data {
        grid-area: data;
        width: 44px;
        height: 48px;
    }

    .dl-agendamentos .dl-d-card-lista .dl-ag-card__titulo {
        grid-area: titulo;
        align-self: end;
        padding: 0 20px 0 14px;
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

    .dl-agendamentos .dl-d-card-lista .dl-ag-card__titulo-icone,
    .dl-agendamentos .dl-d-card-lista .dl-ag-card__linha--data .dl-ag-card__icone {
        display: none;
    }

    .dl-agendamentos .dl-d-card-lista .dl-ag-card__linha {
        gap: 4px;
        min-width: 0;
        min-height: 0;
        font-size: 13px;
        line-height: 18px;
    }

    .dl-agendamentos .dl-d-card-lista .dl-ag-card__icone {
        width: 13px;
        height: 13px;
    }

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

    .dl-agendamentos .dl-d-card-lista .dl-ag-card__linha--data {
        grid-area: linha;
        padding: 0 20px 0 14px;
    }

    .dl-agendamentos .dl-d-card-lista .dl-ag-card__linha--local {
        grid-area: local;
        align-self: start;
        padding: 0 20px 0 14px;
        color: var(--dl-cinza-70);
    }

    .dl-agendamentos .dl-d-card-lista .dl-avatar {
        grid-area: av;
        width: 30px;
        height: 30px;
        font-size: 12px;
    }

    /* O nome quebra em 2 linhas em vez de cortar. */
    .dl-agendamentos .dl-d-card-lista .dl-ag-card__nome {
        grid-area: nome;
        padding: 0 20px 0 8px;
        font-size: 13px;
        line-height: 18px;
        white-space: normal;
    }

    .dl-agendamentos .dl-d-card-lista .dl-ag-card__topo {
        grid-area: topo;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 4px;
        padding-right: 12px;
    }

    .dl-agendamentos .dl-d-card-lista .dl-ag-card__topo .dl-badge {
        margin-right: 0;
        padding: 2px 6px;
        font-size: 9px;
    }

    .dl-agendamentos .dl-d-card-lista .dl-ag-card__valor {
        order: -1;
        color: var(--dl-azul-marinho);
        font-size: 14px;
        line-height: 20px;
        text-box: normal;
    }

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

    .dl-agendamentos .dl-d-card-lista.dl-ag-card--cancelados .dl-ag-card__valor {
        color: var(--dl-cinza-50);
        font-weight: 400;
    }

    .dl-agendamentos .dl-d-card-lista .dl-ag-card__ver {
        grid-area: ver;
        width: 16px;
        height: 16px;
    }

    /* ------------------------------------------------------------------ */
    /* /agendamento/ — P2: seções | resumo + ações                          */
    /* ------------------------------------------------------------------ */

    /* [TELA-NOVA:2026-09-28] Detalhe na largura inteira (a coluna do shell
       está liberada acima), título compacto como o da lista e "voltar" acima
       dele. ≥ 1440 as seções se dividem em 2 colunas (bloco no fim). O
       "voltar" é o mesmo no /reportar-problema/ (volta ao agendamento). */
    :is(.dl-ag-detalhe, .dl-reportar) .dl-ag-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;
    }

    :is(.dl-ag-detalhe, .dl-reportar) .dl-ag-voltar:hover {
        color: var(--dl-azul-hover);
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    :is(.dl-ag-detalhe, .dl-reportar) .dl-ag-voltar:focus-visible {
        outline: 2px solid var(--dl-azul);
        outline-offset: 2px;
        border-radius: 4px;
    }

    :is(.dl-ag-detalhe, .dl-reportar) .dl-ag-voltar__icone {
        width: 18px;
        height: 18px;
    }

    .dl-ag-detalhe > .dl-ag-faixa {
        margin-bottom: 28px;
    }

    .dl-ag-detalhe > .dl-ag-faixa .dl-d-titulo-tela {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -0.8px;
    }

    .dl-ag-detalhe > .dl-ag-faixa::before {
        height: 32px;
    }

    .dl-ag-detalhe .dl-ag-detalhe__colunas.dl-d-p2 {
        max-width: none;
    }

    .dl-ag-detalhe .dl-ag-detalhe__colunas > .dl-ag-secoes {
        margin-top: 0;
    }

    /* [DECISÃO:2026-10-01] D8 · D5/D6: o aviso de estado ocupa a largura toda, no respiro da faixa. */
    .dl-ag-detalhe > .dl-ag-aviso {
        margin-top: 0;
        margin-bottom: 28px;
    }

    /* Sem sticky: position:sticky abre um contexto de empilhamento e o modal de
       cancelar / a folha de avaliar (que moram nesta coluna) ficariam abaixo da
       sidebar (z 150) — o fundo escuro não a cobriria. */
    .dl-ag-detalhe .dl-ag-detalhe__lateral {
        position: static;
        gap: 16px;
    }

    /* Resumo do valor na pele do card-resumo do P2 (134845:11261), com a
       sombra de card ([REVISÃO-DESKTOP:2026-10-01] slide 6). */
    .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-ag-resumo {
        margin-top: 0;
        border: 1px solid var(--dl-d-resumo-borda);
        background: var(--dl-d-resumo-fundo);
        box-shadow: var(--dl-d-sombra-card);
    }

    /* Os respiros do mobile (margin-top 40/20/16) viram o gap 16 da coluna. */
    .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-ag-botao,
    .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-ag-detalhe__pos {
        margin-top: 0;
    }

    /* "Sua avaliação" / "Problema reportado": 24 do bloco anterior. */
    .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-pos-secao {
        margin-top: 8px;
    }

    .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-pos-secao + .dl-ag-detalhe__pos {
        margin-top: 8px;
    }

    /* ------------------------------------------------------------------ */
    /* /reportar-problema/ — P2 montado em CSS [TELA-NOVA:2026-09-29]:       */
    /* largura inteira e compacto, como o detalhe de onde se chega aqui.    */
    /* "‹ Voltar ao agendamento" · título 32 · formulário à esquerda (1fr)  */
    /* e, à direita, o card "Agendamento" com o botão logo abaixo. ≥ 1440 o */
    /* formulário se abre em 2 colunas (bloco no fim da seção).             */
    /* ------------------------------------------------------------------ */

    /* O <main> do tema (em volta do shortcode) para em 1025 úteis; esta tela
       ocupa tudo ao lado da sidebar, como a lista e o detalhe. */
    body.dl-com-sidebar > main.dl-container:has(> .dl-reportar) {
        max-width: none;
    }

    /* Linhas: voltar · título · card "Agendamento" · botão · sobra (1fr). O
       formulário ocupa a coluna principal da 3ª linha até o fim; a sobra fica
       na linha flexível, então o card e o botão ficam colados um no outro. */
    .dl-reportar.dl-ag-tela {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 360px;
        grid-template-rows: auto auto auto auto 1fr;
        column-gap: 32px;
        align-items: start;
        max-width: none;
    }

    .dl-reportar > .dl-ag-voltar {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .dl-reportar > .dl-ag-faixa {
        grid-column: 1 / -1;
        grid-row: 2;
        margin-bottom: 28px;
    }

    /* Título compacto, o mesmo da lista e do detalhe. */
    .dl-reportar > .dl-ag-faixa .dl-d-titulo-tela {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -0.8px;
    }

    .dl-reportar > .dl-ag-secoes {
        display: contents;
    }

    .dl-reportar > .dl-ag-secoes > .dl-ag-secao {
        gap: 12px;
    }

    .dl-reportar > .dl-ag-secoes > .dl-ag-secao:first-child {
        grid-column: 2;
        grid-row: 3;
    }

    .dl-reportar > .dl-ag-secoes > .dl-ag-secao:last-child {
        grid-column: 1;
        grid-row: 3 / -1;
    }

    /* Cards compactos: raio 12 e padding 20 (os do comum acima são 16/24). */
    .dl-reportar .dl-ag-cartao {
        padding: 20px;
        border-radius: var(--dl-radius-card);
    }

    /* Card "Agendamento" na pele do resumo do detalhe (fundo e borda azul
       claros): é o contexto do que se reporta, ao lado do formulário. */
    .dl-reportar .dl-ag-secao:first-child .dl-ag-linhas {
        border: 1px solid var(--dl-d-resumo-borda);
        background: var(--dl-d-resumo-fundo);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-reportar .dl-ag-linhas__linha {
        font-size: 13px;
        line-height: 18px;
    }

    /* Na coluna de 300–360 a data inteira ("Seg, 28 de setembro · 08:00") não
       cabe ao lado do rótulo: quebra em 2 linhas em vez de cortar com "…". */
    .dl-reportar .dl-ag-linhas dd {
        white-space: normal;
        text-wrap: balance;
    }

    .dl-reportar .dl-reportar__form {
        gap: 16px;
    }

    /* Campos a 44 (o select), texto 14; a descrição ganha altura de texto
       livre (140) em vez dos 96 do toque. */
    .dl-reportar .dl-campo__select {
        height: 44px;
        font-size: 14px;
    }

    .dl-reportar .dl-campo__textarea {
        min-height: 140px;
        font-size: 14px;
        line-height: 20px;
    }

    .dl-reportar .dl-reportar__aviso .dl-aviso__texto {
        font-size: 13px;
        line-height: 18px;
    }

    /* Botão 44/14 na largura da coluna, 12 abaixo do card. */
    .dl-reportar > .dl-reportar__enviar {
        grid-column: 2;
        grid-row: 4;
        height: 44px;
        margin-top: 12px;
        border-radius: var(--dl-radius-botao);
        font-size: 14px;
    }

    /* ------------------------------------------------------------------ */
    /* Folha "Avalie sua Limpeza" — modal central compacto                   */
    /* [TELA-NOVA:2026-09-29]. A alça do Modal/Info (::before do painel)     */
    /* sai — no mouse não há gesto — e o respiro de 24 embaixo volta (o      */
    /* padding-bottom:0 genérico da folha ≥ 768 colava o botão na borda).    */
    /* 420 de largura; o arco de estrelas (cqw da própria caixa) encolhe     */
    /* junto com a max-width; título 20, apoio 14 e botão 44/14.             */
    /* ------------------------------------------------------------------ */

    #dl-drawer-avaliar-limpeza .dl-drawer__painel {
        width: min(420px, 92vw);
        gap: 20px;
        padding: 24px 28px;
    }

    #dl-drawer-avaliar-limpeza .dl-drawer__painel::before {
        content: none;
    }

    #dl-drawer-avaliar-limpeza .dl-drawer__cabecalho {
        padding-top: 0;
    }

    #dl-drawer-avaliar-limpeza .dl-drawer__titulo {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: -0.3px;
    }

    #dl-drawer-avaliar-limpeza .dl-avaliar-limpeza {
        gap: 20px;
    }

    #dl-drawer-avaliar-limpeza .dl-avaliar-limpeza__estrelas {
        max-width: 272px;
    }

    #dl-drawer-avaliar-limpeza .dl-avaliar-limpeza__apoio {
        font-size: 14px;
        line-height: 20px;
    }

    #dl-drawer-avaliar-limpeza .dl-avaliar-limpeza .dl-ag-botao {
        height: 44px;
        border-radius: var(--dl-radius-botao);
        font-size: 14px;
    }
}

/* 1024–1279: a duração da linha fica para o detalhe (a data cortaria). */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .dl-agendamentos .dl-d-card-lista .dl-ag-card__linha--data .dl-agendamentos__so-desktop {
        display: none;
    }
}

/* ≥ 1440: a largura sobra — o destaque vira uma faixa só (data | título e
   linhas | profissional | valor | Ver detalhes) e a linha da lista abre o
   local em coluna própria (2 linhas de altura em vez de 3). */
@media (min-width: 1440px) {
    .dl-agendamentos .dl-ag-card.dl-ag-card--destaque {
        grid-template-columns: auto minmax(0, 1fr) minmax(200px, auto) auto auto;
        grid-template-areas:
            "data quando prof topo acao"
            "data titulo prof topo acao"
            "data linhas prof topo acao";
        align-items: center;
        padding: 16px 20px 16px 16px;
    }

    .dl-agendamentos .dl-ag-card--destaque::after {
        content: none;
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__prof {
        align-self: center;
        padding: 0 32px;
        border-left: 1px solid var(--dl-cinza-10);
        min-height: 48px;
    }

    .dl-agendamentos .dl-ag-card--destaque .dl-ag-card__topo {
        align-self: center;
        margin-left: 0;
        padding: 0 32px;
    }

    .dl-agendamentos .dl-ag-card__acao {
        align-self: center;
        height: 36px;
        padding: 0 12px 0 16px;
        border: 1px solid color-mix(in srgb, var(--dl-azul) 40%, transparent);
        border-radius: var(--dl-radius-botao);
    }

    .dl-agendamentos .dl-ag-card.dl-d-card-lista {
        grid-template-columns: 44px minmax(0, 1.3fr) minmax(0, 1fr) 30px minmax(0, 0.7fr) 140px 16px;
        grid-template-areas:
            "data titulo local av nome topo ver"
            "data linha  local av nome topo ver";
    }

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

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

/* ≥ 1280: resumo um pouco mais largo; ≥ 1440 as seções do detalhe em 2
   colunas (Imóvel | Tipo de Limpeza, Profissional | Motivo) — na largura
   inteira um cartão só ficaria esticado. */
@media (min-width: 1280px) {
    .dl-ag-detalhe .dl-ag-detalhe__colunas.dl-d-p2 {
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 32px;
    }
}

@media (min-width: 1440px) {
    .dl-ag-detalhe .dl-ag-detalhe__colunas > .dl-ag-secoes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
        align-items: start;
    }
}

/* 1024–1279: a coluna da direita do reportar acompanha o resumo do shell
   (300) e o vão aperta para 24. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .dl-reportar.dl-ag-tela {
        grid-template-columns: minmax(0, 1fr) 300px;
        column-gap: 24px;
    }
}

/* ≥ 1440: o formulário cabe em 2 colunas — tipo e o aviso "Quando reportar"
   à esquerda, a descrição na altura das duas à direita (a ordem do DOM e do
   Tab continua tipo → descrição → aviso). */
@media (min-width: 1440px) {
    .dl-reportar .dl-reportar__form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto 1fr;
        gap: 16px 24px;
    }

    .dl-reportar .dl-reportar__form > .dl-campo:has(.dl-campo__textarea) {
        display: flex;
        flex-direction: column;
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .dl-reportar .dl-reportar__form .dl-campo__textarea {
        flex: 1;
    }

    .dl-reportar .dl-reportar__form > .dl-reportar__aviso {
        grid-column: 1;
        grid-row: 2;
        align-self: end;
    }
}

/* /agendamento/ como modal — [REVISÃO-DESKTOP:2026-10-01] slide 4 (docs/18 §10/§11).
   [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, Imóvel e Local, Tipo de Limpeza (com
   Produtos de limpeza), Profissional, motivo, o resumo do valor e as ações na largura
   da coluna. A grade de 2 colunas das seções (≥ 1440) não vale aqui: a caixa é a mesma
   em qualquer janela. As colunas P2 empilham no shell (dl-desktop-shell.css). */
@media (min-width: 1024px) {
    body.dl-pagina-modal .dl-ag-detalhe .dl-ag-detalhe__colunas > .dl-ag-secoes {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    body.dl-pagina-modal .dl-ag-detalhe .dl-ag-detalhe__colunas.dl-d-p2 {
        gap: 40px;
    }
}

/* ====================================================================== */
/* Motion — micro-interações da agenda do cliente (docs/19 §5.5)           */
/* [TELA-NOVA:2026-09-25] — nada aqui carrega informação nova: é entrada,  */
/* troca de estado e resposta do que a tela já mostra. Primitivas do shell */
/* (dl-desktop-shell.css, bloco Motion): .dl-d-lista/.dl-d-cascata fazem a */
/* cascata sozinhas, a.dl-d-card-* sobe no hover, .dl-d-seta avança. Aqui  */
/* só o que é desta área. Entradas com fill `backwards`, nunca `both`.     */
/* ====================================================================== */

@media (min-width: 1024px) {
    /* O traço de status do detalhe cresce do centro enquanto aparece. */
    @keyframes dl-agenda-traco {
        from {
            opacity: 0;
            transform: scaleY(0.3);
        }
    }

    @keyframes dl-agenda-fade {
        from {
            opacity: 0;
        }
    }

    /* Foco dos campos (reportar e o modal de cancelar): a borda azul do
       estado Foco (134616:7) chega em 120ms em vez de saltar. Cor, não
       movimento — vale também com reduced-motion. */
    :is(.dl-reportar, .dl-ag-detalhe) :is(.dl-campo__input, .dl-campo__select, .dl-campo__textarea) {
        transition: border-color var(--dl-dur-rapida) var(--dl-ease-saida);
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    /* ---- /agendamentos/ ---------------------------------------------- */

    /* Mais específica que a sombra lá de cima: devolve ao card o transform
       da primitiva do shell (sobe 2px) junto com a sombra. */
    .dl-agendamentos a.dl-ag-card {
        transition: transform var(--dl-dur-lenta) var(--dl-ease-saida), box-shadow var(--dl-dur-lenta) var(--dl-ease-saida);
    }

    /* P3: o destaque ("Próximo agendamento") entra primeiro; a lista de
       "Agendados" vem em cascata um degrau atrás dele. */
    html:not(.dl-splash-ativo) .dl-agendamentos .dl-agendamentos__coluna + .dl-agendamentos__coluna .dl-d-lista > * {
        animation-delay: calc(80ms + (var(--dl-i, 0) + 1) * 50ms);
    }

    /* Vazio por aba: ilustração + textos, depois o botão. */
    html:not(.dl-splash-ativo) .dl-agendamentos .dl-agendamentos__resultado > :is(.dl-vazio, .dl-agendamentos__vazio-acao) {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
        animation-delay: 80ms;
    }

    html:not(.dl-splash-ativo) .dl-agendamentos .dl-agendamentos__resultado > .dl-agendamentos__vazio-acao {
        animation-delay: 130ms;
    }

    /* ---- /agendamento/ ----------------------------------------------- */

    html:not(.dl-splash-ativo) .dl-ag-detalhe > .dl-ag-faixa::before {
        animation: dl-agenda-traco var(--dl-dur-lenta) var(--dl-ease-saida) 80ms backwards;
    }

    /* As seções da esquerda já cascateiam (.dl-d-cascata). A coluna do
       resumo segue o mesmo passo, um degrau depois de cada bloco. O modal de
       cancelar e a folha de avaliar moram nesta coluna e ficam de fora: um
       transform neles moveria o véu junto. */
    html:not(.dl-splash-ativo) .dl-ag-detalhe .dl-ag-detalhe__lateral > :is(.dl-ag-resumo, .dl-ag-botao, .dl-ag-detalhe__pos),
    html:not(.dl-splash-ativo) .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-pos-secao > * {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
        animation-delay: calc(80ms + var(--dl-i, 0) * 50ms);
    }

    .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-ag-resumo {
        --dl-i: 1;
    }

    .dl-ag-detalhe .dl-ag-detalhe__lateral > :is(.dl-ag-botao, .dl-ag-detalhe__pos) {
        --dl-i: 2;
    }

    .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-ag-botao + .dl-ag-botao {
        --dl-i: 3;
    }

    /* "Sua avaliação" / "Problema reportado": título e cards em cascata; a
       2ª seção começa depois da 1ª; as ações de pós-serviço fecham a fila. */
    .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-pos-secao {
        --dl-pos-base: 2;
    }

    .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-pos-secao + .dl-pos-secao {
        --dl-pos-base: 4;
    }

    .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-pos-secao > * {
        --dl-i: min(7, var(--dl-pos-base));
    }

    .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-pos-secao > :nth-child(2) {
        --dl-i: min(7, var(--dl-pos-base) + 1);
    }

    .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-pos-secao > :nth-child(n + 3) {
        --dl-i: min(7, var(--dl-pos-base) + 2);
    }

    .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-pos-secao ~ .dl-ag-detalhe__pos {
        --dl-i: 4;
    }

    .dl-ag-detalhe .dl-ag-detalhe__lateral > .dl-pos-secao + .dl-pos-secao ~ .dl-ag-detalhe__pos {
        --dl-i: 6;
    }

    /* Modal "Cancelar faxina?": a prévia da taxa (ou do estorno integral)
       entra logo depois do diálogo, a cada abertura (.is-aberto tira o
       display:none, e a animação recomeça). */
    .dl-ag-detalhe .dl-modal.is-aberto .dl-ag-cancelar__previa {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) var(--dl-dur-rapida) backwards;
    }

    /* ---- /reportar-problema/ ----------------------------------------- */

    /* Formulário (coluna principal), card "Agendamento" e o botão, nesta
       ordem de leitura — a ordem do DOM é a do mobile. */
    html:not(.dl-splash-ativo) .dl-reportar > .dl-ag-secoes > .dl-ag-secao,
    html:not(.dl-splash-ativo) .dl-reportar > .dl-reportar__enviar {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
        animation-delay: calc(80ms + var(--dl-i, 0) * 50ms);
    }

    .dl-reportar > .dl-ag-secoes > .dl-ag-secao:first-child {
        --dl-i: 1;
    }

    .dl-reportar > .dl-reportar__enviar {
        --dl-i: 2;
    }
}

/* Com "reduzir movimento": as entradas e o deslocamento do hover ficam de
   fora (como as primitivas do shell); a prévia da taxa só aparece com um
   fade curto, sem deslocamento. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .dl-ag-detalhe .dl-modal.is-aberto .dl-ag-cancelar__previa {
        animation: dl-agenda-fade var(--dl-dur-rapida) linear backwards;
    }
}

}

/* ---------------------------------------------------------------------- */
/* Abas de /agendamentos/ na troca de página (docs/19 §4.6) — fora de      */
/* @layer, como o bloco de View Transition do shell (o ::view-transition-  */
/* group(*) dele é sem camada e venceria qualquer regra daqui de dentro).  */
/* As abas são links: cada troca é página nova. Com nomes próprios, o fundo */
/* azul da ativa desliza da aba antiga até a nova, por trás dos rótulos    */
/* (nomeados depois dele, pintam por cima), e cada rótulo troca de cor em  */
/* crossfade. A fileira inteira também tem nome: fica firme enquanto o      */
/* resto da tela faz a entrada. Chegando de outra tela ou saindo para uma, */
/* os grupos só aparecem/somem — a saída no tempo da raiz (120ms).         */
/* ---------------------------------------------------------------------- */

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .dl-agendamentos .dl-agendamentos__abas {
        view-transition-name: dl-abas;
        view-transition-class: dl-abas;
    }

    .dl-agendamentos .dl-agendamentos__abas-fundo {
        view-transition-name: dl-abas-ativa;
        view-transition-class: dl-abas;
    }

    .dl-agendamentos .dl-agendamentos__aba:nth-of-type(1) > .dl-agendamentos__aba-rotulo {
        view-transition-name: dl-abas-rotulo-1;
        view-transition-class: dl-abas;
    }

    .dl-agendamentos .dl-agendamentos__aba:nth-of-type(2) > .dl-agendamentos__aba-rotulo {
        view-transition-name: dl-abas-rotulo-2;
        view-transition-class: dl-abas;
    }

    .dl-agendamentos .dl-agendamentos__aba:nth-of-type(3) > .dl-agendamentos__aba-rotulo {
        view-transition-name: dl-abas-rotulo-3;
        view-transition-class: dl-abas;
    }

    ::view-transition-group(*.dl-abas) {
        animation-duration: var(--dl-dur-lenta);
        animation-timing-function: var(--dl-ease-saida);
    }

    ::view-transition-old(*.dl-abas):only-child {
        animation-duration: var(--dl-dur-rapida);
    }
}