/*
 * DoceLar — F16 · telas de CONTA no desktop (docs/18 §4 "Conta").
 * [TELA-NOVA:2026-09-24] — não há desenho desktop destas telas; elas imitam as
 * telas-norte da página `Desktop` (134844:10576 · 134840:9647) e os menus do perfil
 * mobile (134834:4227 cliente · 134834:4821 profissional: mesmos itens, mesma ordem).
 *
 * [TELA-NOVA:2026-09-28] — largura inteira e compacto. A coluna única de 720 deixava
 * meia tela vazia à direita e os cards/campos no tamanho do toque. Agora, como a
 * Agenda do cliente (dl-desktop-agenda-cliente.css):
 *
 *   Largura  — o <main> do tema (em volta do shortcode) para em 1025 úteis no shell;
 *              estas telas o liberam (:has) e ocupam tudo ao lado da sidebar.
 *   Escala   — título de tela 32/36 (não o 44 do shell), texto 13–14, cards raio 12
 *              com padding 16–20, itens de menu de 52, campos de 44, botões de 40.
 *   Grade    — a largura é usada com colunas, não esticando uma coluna:
 *     /perfil/                 "Meu perfil" 134912:540 (revisão de 01/10, slide 2):
 *                              identidade na largura toda, itens em cards 2 × 2, Sair.
 *     /seguranca-e-privacidade/ itens um abaixo do outro (revisão de 01/10, slide 8);
 *     /formas-de-pagamento/    itens lado a lado.
 *     /notificacoes/           cards separados (revisão de 01/10, slide 10).
 *     /informacoes-pessoais/   seções em grade 2 × N (≥ 1280) e campos em pares dentro
 *                              de cada card; na profissional a foto sobe para o lado do
 *                              título e o aviso divide a linha com o Salvar.
 *     /alterar-senha/          os 3 campos num card, em linha a partir de 1280.
 *     /enderecos-salvos/       "Adicionar endereço" à direita do título; endereços em
 *                              grade de cards.
 *     /central-de-ajuda/       [TELA-NOVA:2026-09-29] só logada (com a sidebar): índice
 *                              (Como funciona · Termos · Política), "Falar com suporte"
 *                              e o aviso "Sobre o Cancelamento" um abaixo do outro, numa
 *                              coluna de 760 (revisão de 01/10, slide 8). O visitante (P1,
 *                              header pílula) segue na coluna de 720 centrada — as regras
 *                              dela exigem body.dl-com-sidebar.
 *
 * Carrega depois de dl-desktop e ANTES de dl-desktop-shell (ordem alfabética): as
 * larguras herdadas de dl-desktop.css (824/700/524 centradas, com classe
 * triplicada) e as utilitárias do shell são vencidas por seletores compostos.
 * Tudo em @layer dl-telas e ≥ 1024; só tokens; sem !important. Mobile intocado —
 * as peças de markup só-desktop (…__so-desktop) somem abaixo de 1024.
 */

@layer dl-telas {

@media (min-width: 1024px) {

    /* ------------------------------------------------------------------ */
    /* Comum                                                               */
    /* ------------------------------------------------------------------ */

    /* "Voltar ao perfil" — sai `hidden` e só aparece com a sidebar. */
    body.dl-com-sidebar .dl-conta__voltar {
        display: block;
        margin: 0 0 16px;
    }

    .dl-conta__voltar .dl-d-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    /* A coluna de 720 cola à esquerda do conteúdo, como tudo nas telas-norte
       (o .dl-container a centraria no <main> a partir de 1440). Sem sidebar
       (shell público, P1) ela centra. Hoje só a Central de ajuda do visitante
       fica nela. */
    body.dl-com-sidebar .dl-d-conta {
        margin-inline: 0;
    }

    body:not(.dl-com-sidebar) .dl-d-conta {
        margin-inline: auto;
    }

    /* O topo do mobile dá lugar ao cabeçalho desktop (mesmo texto). */
    .dl-d-conta > .dl-topo-azul:not(.dl-topo-azul--identificacao),
    .dl-d-conta > .dl-notificacoes__cabecalho,
    .dl-d-conta > .dl-f05-enderecos__titulo {
        display: none;
    }

    /* Nas telas em coluna flex com gap 24, o título fica aos mesmos 40 do
       conteúdo que o .dl-d-cabecalho dá nas demais (16 + 24). */
    :is(.dl-tela-conta, .dl-tela-perfil) > .dl-conta__cabecalho {
        margin-bottom: 16px;
    }

    /* Lista/Item dos menus em card: raio 16 e a sombra dos cards "Agendados"
       (134840:10275), 12 entre cards, 24 de respiro lateral como os cards.
       (Central de ajuda do visitante; as telas largas compactam abaixo.) */
    .dl-d-conta .dl-lista {
        gap: 12px;
    }

    .dl-d-conta .dl-lista-item {
        padding: 0 24px;
        border-color: transparent;
        border-radius: var(--dl-d-radius);
        box-shadow: var(--dl-d-sombra-card);
        transition: box-shadow var(--dl-dur-base) var(--dl-ease-saida), background-color var(--dl-dur-base) var(--dl-ease-saida);
    }

    /* O fundo do hover, a seta que avança e o press: bloco Motion, no fim. */
    .dl-d-conta a.dl-lista-item:hover {
        box-shadow: var(--dl-d-sombra-destaque);
    }

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

    /* ------------------------------------------------------------------ */
    /* Telas largas [TELA-NOVA:2026-09-28] — a lista abaixo se repete em     */
    /* cada regra comum (perfil · notificações · dados pessoais · senha ·   */
    /* endereços · segurança e privacidade · formas de pagamento).          */
    /* ------------------------------------------------------------------ */

    /* Largura inteira ao lado da sidebar (o <main> do tema é o pai direto). A
       Central de ajuda entra só aqui e no "voltar" (as duas regras já exigem a
       sidebar); o resto dela tem bloco próprio, também preso à sidebar. */
    body.dl-com-sidebar > main.dl-container:has(> :is(.dl-tela-perfil, .dl-tela-notificacoes, .dl-tela-informacoes-pessoais, .dl-tela-alterar-senha, .dl-f05-enderecos, .dl-tela-conta[data-tela="seguranca-e-privacidade"], .dl-tela-conta[data-tela="formas-de-pagamento"], .dl-tela-conta[data-tela="central-de-ajuda"])) {
        max-width: none;
    }

    /* "Voltar ao perfil" menor, 12 acima do título. */
    body.dl-com-sidebar > main.dl-container > .dl-conta__voltar:has(+ :is(.dl-tela-perfil, .dl-tela-notificacoes, .dl-tela-informacoes-pessoais, .dl-tela-alterar-senha, .dl-f05-enderecos, .dl-tela-conta[data-tela="seguranca-e-privacidade"], .dl-tela-conta[data-tela="formas-de-pagamento"], .dl-tela-conta[data-tela="central-de-ajuda"])) {
        margin-bottom: 12px;
    }

    body.dl-com-sidebar > main.dl-container > .dl-conta__voltar:has(+ :is(.dl-tela-perfil, .dl-tela-notificacoes, .dl-tela-informacoes-pessoais, .dl-tela-alterar-senha, .dl-f05-enderecos, .dl-tela-conta[data-tela="seguranca-e-privacidade"], .dl-tela-conta[data-tela="formas-de-pagamento"], .dl-tela-conta[data-tela="central-de-ajuda"])) .dl-d-link {
        font-size: 14px;
        line-height: 20px;
    }

    /* Título de tela 32/36 — o conteúdo é o que importa, não o título. */
    .dl-d-conta:is(.dl-tela-perfil, .dl-tela-notificacoes, .dl-tela-informacoes-pessoais, .dl-tela-alterar-senha, .dl-f05-enderecos, [data-tela="seguranca-e-privacidade"], [data-tela="formas-de-pagamento"]) > .dl-conta__cabecalho .dl-d-titulo-tela {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -0.8px;
    }

    .dl-d-conta:is(.dl-tela-notificacoes, .dl-tela-informacoes-pessoais, .dl-tela-alterar-senha, .dl-f05-enderecos, [data-tela="seguranca-e-privacidade"], [data-tela="formas-de-pagamento"]) > .dl-conta__cabecalho {
        margin-bottom: 24px;
    }

    /* Nas telas em coluna flex (gap 24 de dl-privadas) o gap já é o respiro. */
    .dl-d-conta.dl-tela-conta:is([data-tela="seguranca-e-privacidade"], [data-tela="formas-de-pagamento"]) > .dl-conta__cabecalho {
        margin-bottom: 0;
    }

    /* Item de menu compacto: 52 de altura, 16 de respiro, raio 12, rótulo 14. */
    .dl-d-conta:is([data-tela="seguranca-e-privacidade"], [data-tela="formas-de-pagamento"]) .dl-lista {
        gap: 8px;
    }

    .dl-d-conta:is([data-tela="seguranca-e-privacidade"], [data-tela="formas-de-pagamento"]) .dl-lista-item {
        gap: 12px;
        min-height: 52px;
        padding: 0 16px;
        border-radius: var(--dl-radius-card);
    }

    .dl-d-conta:is([data-tela="seguranca-e-privacidade"], [data-tela="formas-de-pagamento"]) .dl-lista-item__rotulo {
        font-size: 14px;
        line-height: 20px;
    }

    .dl-d-conta:is([data-tela="seguranca-e-privacidade"], [data-tela="formas-de-pagamento"]) .dl-lista-item__fim {
        width: 16px;
        height: 16px;
    }

    /* Campos a 44 (52 no toque), texto 14; o olho da senha e a seta do select
       já são centrados na altura. */
    .dl-d-conta:is(.dl-tela-informacoes-pessoais, .dl-tela-alterar-senha) :is(.dl-campo__input, .dl-campo__select) {
        height: 44px;
        font-size: 14px;
    }

    /* Botão de ação da tela: 40 de altura, 14, na largura do rótulo. */
    .dl-d-conta.dl-tela-informacoes-pessoais .dl-info-pessoais__salvar,
    .dl-d-conta.dl-tela-alterar-senha .dl-botao.dl-botao,
    .dl-d-conta.dl-f05-enderecos .dl-f05-enderecos__adicionar,
    .dl-d-conta.dl-tela-notificacoes .dl-carregar-mais .dl-botao {
        width: auto;
        height: 40px;
        min-height: 0;
        margin-top: 0;
        padding: 0 24px;
        border-radius: var(--dl-radius-botao);
        font-size: 14px;
        line-height: 20px;
    }

    /* ------------------------------------------------------------------ */
    /* /perfil/ — "Meu perfil" 134912:540 [REVISÃO-DESKTOP:2026-10-01] slide 2 */
    /* Título + apoio · página na largura toda do main (pedido do usuário   */
    /* em 02/10, antes 1034px) · cartão de identidade na largura toda · itens em */
    /* cards 2 × 2 (ícone em caixa, título, descrição, seta em círculo) ·    */
    /* "Sair da conta" em card rosa na largura toda. Cliente e profissional  */
    /* usam o mesmo shortcode; o "Perfil profissional público" vira o link   */
    /* do cartão. Sombra: --dl-d-sombra-card (slide 6), não a do Figma.      */
    /* ------------------------------------------------------------------ */

    .dl-d-conta.dl-tela-perfil.dl-tela-perfil.dl-tela-perfil {
        display: flex;
        flex-direction: column;
        gap: 20px;
        min-height: 0;
        max-width: none;
        margin-inline: 0;
        padding-bottom: 0;
    }

    .dl-d-conta.dl-tela-perfil > .dl-topo-azul,
    .dl-d-conta.dl-tela-perfil .dl-tela-perfil__grupo > .dl-lista-item--perfil-publico {
        display: none;
    }

    .dl-d-conta.dl-tela-perfil > .dl-tela-perfil__d-topo[hidden] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 7px;
        margin: 0 0 4px;
    }

    .dl-d-conta.dl-tela-perfil > .dl-tela-perfil__d-topo .dl-d-titulo-tela {
        font-size: 34px;
        font-weight: 800;
        line-height: 40px;
        letter-spacing: -0.8px;
    }

    .dl-tela-perfil__apoio {
        margin: 0;
        color: var(--dl-cinza-50);
        font-family: var(--dl-fonte);
        font-size: 16px;
        line-height: 1.5;
    }

    /* Identidade: avatar 122 com o botão de foto, nome 32 e e-mail. */
    .dl-d-conta.dl-tela-perfil > .dl-tela-perfil__identidade[hidden] {
        display: flex;
        align-items: center;
        gap: 37px;
        box-sizing: border-box;
        min-height: 174px;
        padding: 24px 38px;
        border-radius: var(--dl-d-radius);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
        font-family: var(--dl-fonte);
    }

    .dl-tela-perfil__foto {
        position: relative;
        flex: none;
    }

    .dl-tela-perfil__foto .dl-avatar {
        width: 122px;
        height: 122px;
        background: var(--dl-azul-claro);
        box-shadow: none;
    }

    .dl-tela-perfil__foto .dl-avatar__iniciais {
        font-size: 38px;
        font-weight: 600;
        line-height: 1;
    }

    .dl-tela-perfil__foto-editar {
        position: absolute;
        top: 78px;
        left: 84px;
        display: grid;
        place-items: center;
        box-sizing: border-box;
        width: 39px;
        height: 39px;
        border: 5px solid var(--dl-branco);
        border-radius: 50%;
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
        color: var(--dl-azul-marinho);
    }

    .dl-tela-perfil__foto-editar .dl-icone {
        width: 18px;
        height: 18px;
    }

    .dl-tela-perfil__foto-editar:hover {
        color: var(--dl-azul);
    }

    .dl-tela-perfil__foto-editar:focus-visible,
    .dl-tela-perfil__publico:focus-visible {
        outline: 2px solid var(--dl-azul);
        outline-offset: 2px;
    }

    .dl-tela-perfil__dados {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }

    .dl-tela-perfil__nome {
        margin: 0;
        color: var(--dl-azul-marinho);
        font-size: 32px;
        font-weight: 600;
        line-height: 36px;
        letter-spacing: -1px;
        overflow-wrap: anywhere;
    }

    .dl-tela-perfil .dl-tela-perfil__email {
        margin: 0;
        color: var(--dl-cinza-70);
        font-size: 16px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .dl-tela-perfil__publico {
        flex: none;
        align-self: center;
    }

    /* Grupos: cada um é uma grade 2 × N com o mesmo respiro da página. */
    .dl-d-conta.dl-tela-perfil .dl-tela-perfil__grupo {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 20px 24px;
        margin: 0;
    }

    /* Profissional: Dados pessoais vem antes da disponibilidade, como no Figma. */
    .dl-tela-perfil--profissional .dl-tela-perfil__grupo .dl-lista-item--dados {
        order: -1;
    }

    .dl-d-conta.dl-tela-perfil .dl-lista-item {
        display: grid;
        grid-template-columns: 65px minmax(0, 1fr) 45px;
        grid-template-areas:
            "icone rotulo fim"
            "icone descricao fim";
        align-content: center;
        align-items: center;
        column-gap: 16px;
        row-gap: 5px;
        box-sizing: border-box;
        min-height: 118px;
        padding: 24px;
        border: 0;
        border-radius: var(--dl-d-radius);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-d-conta.dl-tela-perfil .dl-lista-item:not(:has(.dl-lista-item__descricao)) {
        grid-template-areas: "icone rotulo fim";
    }

    .dl-d-conta.dl-tela-perfil .dl-lista-item__icone {
        grid-area: icone;
        box-sizing: border-box;
        width: 65px;
        height: 65px;
        padding: 16.5px;
        border-radius: 14px;
        background: color-mix(in srgb, var(--dl-azul-claro) 32%, transparent);
        color: var(--dl-azul);
    }

    .dl-d-conta.dl-tela-perfil .dl-lista-item__rotulo {
        grid-area: rotulo;
        align-self: end;
        color: var(--dl-azul-marinho);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
    }

    .dl-d-conta.dl-tela-perfil .dl-lista-item__descricao[hidden] {
        display: block;
        grid-area: descricao;
        align-self: start;
        max-width: none;
        color: var(--dl-cinza-50);
        font-family: var(--dl-fonte);
        font-size: 12px;
        line-height: 1.5;
    }

    .dl-d-conta.dl-tela-perfil .dl-lista-item__fim {
        grid-area: fim;
        box-sizing: border-box;
        width: 45px;
        height: 45px;
        padding: 12px;
        border-radius: 50%;
        background: var(--dl-d-resumo-fundo);
        color: var(--dl-azul-marinho);
    }

    /* "Sair da conta" 134912:861 — card rosa na largura toda. */
    .dl-d-conta.dl-tela-perfil .dl-lista-item--sair {
        grid-column: 1 / -1;
        grid-template-columns: 65px minmax(0, 1fr) 23px;
        column-gap: 29px;
        min-height: 102px;
        padding: 17px 27px;
        border: 1px solid color-mix(in srgb, var(--dl-erro) 28%, transparent);
        background: color-mix(in srgb, var(--dl-erro-claro) 50%, var(--dl-branco));
    }

    .dl-d-conta.dl-tela-perfil .dl-lista-item--sair .dl-lista-item__icone {
        background: var(--dl-erro-claro);
        color: var(--dl-erro);
    }

    .dl-d-conta.dl-tela-perfil .dl-lista-item--sair .dl-lista-item__rotulo {
        color: var(--dl-erro);
        font-size: 17px;
        font-weight: 700;
    }

    .dl-d-conta.dl-tela-perfil .dl-lista-item--sair .dl-lista-item__descricao[hidden] {
        max-width: none;
        color: var(--dl-cinza-70);
        font-size: 15px;
    }

    .dl-d-conta.dl-tela-perfil .dl-lista-item--sair .dl-lista-item__fim {
        width: 23px;
        height: 23px;
        padding: 0;
        background: none;
        color: var(--dl-erro);
    }

    /* ------------------------------------------------------------------ */
    /* Segurança e privacidade · Formas de pagamento — itens lado a lado    */
    /* ------------------------------------------------------------------ */

    .dl-d-conta.dl-tela-conta:is([data-tela="seguranca-e-privacidade"], [data-tela="formas-de-pagamento"]) {
        max-width: none;
        padding-bottom: 0;
    }

    .dl-d-conta.dl-tela-conta:is([data-tela="seguranca-e-privacidade"], [data-tela="formas-de-pagamento"]) > .dl-lista {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* [REVISÃO-DESKTOP:2026-10-01] slide 8 — Segurança e privacidade: "nesse também",
       os itens um abaixo do outro, na coluna de 760 da Central de ajuda. */
    .dl-d-conta.dl-tela-conta.dl-tela-conta[data-tela="seguranca-e-privacidade"] {
        max-width: 760px;
    }

    .dl-d-conta.dl-tela-conta.dl-tela-conta[data-tela="seguranca-e-privacidade"] > .dl-lista {
        grid-template-columns: minmax(0, 1fr);
    }

    .dl-d-conta.dl-tela-conta[data-tela="formas-de-pagamento"] > .dl-tela-conta__texto {
        margin-top: -8px;
        font-size: 14px;
        line-height: 20px;
    }

    /* ------------------------------------------------------------------ */
    /* Central de ajuda (logada) [TELA-NOVA:2026-09-29] — índice | suporte  */
    /* lado a lado, aviso de cancelamento embaixo (≥ 1600: 3ª coluna).      */
    /* Nada novo na tela: os mesmos itens, a mesma seção e o mesmo aviso    */
    /* (FAQ escrito é exclusão do [CONTRATO]; não há perguntas a listar).   */
    /* Tudo sob body.dl-com-sidebar: o visitante segue na coluna de 720.    */
    /* ------------------------------------------------------------------ */

    /* [REVISÃO-DESKTOP:2026-10-01] slide 8 — "pode botar um abaixo do outro": índice,
       "Falar com suporte" e o aviso de cancelamento empilhados numa coluna de 760. */
    body.dl-com-sidebar .dl-d-conta.dl-tela-conta[data-tela="central-de-ajuda"] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        max-width: 760px;
        padding-bottom: 0;
    }

    body.dl-com-sidebar .dl-d-conta[data-tela="central-de-ajuda"] > .dl-conta__cabecalho {
        margin-bottom: 0;
    }

    /* Título 32 (o do visitante, P1, segue no 44 do shell). */
    body.dl-com-sidebar .dl-d-conta[data-tela="central-de-ajuda"] > .dl-conta__cabecalho .dl-d-titulo-tela {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: -0.8px;
    }

    body.dl-com-sidebar .dl-d-conta[data-tela="central-de-ajuda"] > .dl-ajuda__secao {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin: 0;
    }

    body.dl-com-sidebar .dl-d-conta[data-tela="central-de-ajuda"] .dl-ajuda__secao-nome {
        margin: 0;
        color: var(--dl-azul-marinho);
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
        text-box: normal;
    }

    /* Aviso "Sobre o Cancelamento": corpo 13/18 como os avisos das telas compactas. */
    body.dl-com-sidebar .dl-d-conta[data-tela="central-de-ajuda"] > .dl-aviso {
        margin-top: 0;
    }

    body.dl-com-sidebar .dl-d-conta[data-tela="central-de-ajuda"] > .dl-aviso .dl-aviso__texto {
        font-size: 13px;
        line-height: 18px;
    }

    /* Itens compactos (os de Segurança e privacidade): 52, respiro 16, raio
       12, rótulo 14; 8 entre eles. */
    body.dl-com-sidebar .dl-d-conta[data-tela="central-de-ajuda"] .dl-lista {
        gap: 8px;
    }

    body.dl-com-sidebar .dl-d-conta[data-tela="central-de-ajuda"] .dl-lista-item {
        gap: 12px;
        min-height: 52px;
        padding: 0 16px;
        border-radius: var(--dl-radius-card);
    }

    body.dl-com-sidebar .dl-d-conta[data-tela="central-de-ajuda"] .dl-lista-item__rotulo {
        font-size: 14px;
        line-height: 20px;
        overflow-wrap: anywhere;
    }

    body.dl-com-sidebar .dl-d-conta[data-tela="central-de-ajuda"] .dl-lista-item__fim {
        width: 16px;
        height: 16px;
    }

    /* ------------------------------------------------------------------ */
    /* Notificações — [REVISÃO-DESKTOP:2026-10-01] slide 10: cada notificação */
    /* é um card arredondado, separados e empilhados, na largura toda.       */
    /* ------------------------------------------------------------------ */

    .dl-d-conta.dl-tela-notificacoes.dl-tela-notificacoes.dl-tela-notificacoes {
        max-width: none;
        margin-inline: 0;
    }

    .dl-tela-notificacoes .dl-notificacoes__lista {
        gap: 12px;
        overflow: visible;
        padding: 0;
        background: none;
        box-shadow: none;
    }

    /* Card: ícone 32 · corpo · ponto de não lida no fim, centrado. */
    .dl-tela-notificacoes .dl-notificacoes__lista .dl-notificacao {
        align-items: center;
        gap: 14px;
        min-height: 0;
        padding: 18px 44px 18px 20px;
        border: 0;
        border-radius: var(--dl-d-radius);
        background: color-mix(in srgb, var(--dl-azul-claro) 6%, var(--dl-branco));
        box-shadow: var(--dl-d-sombra-card);
        transition: background-color var(--dl-dur-base) var(--dl-ease-saida);
    }

    /* Lida: fundo branco — a não lida se destaca pelo leve azul, o ícone e o ponto. */
    .dl-tela-notificacoes .dl-notificacoes__lista .dl-notificacao--lida {
        background: var(--dl-branco);
    }

    .dl-tela-notificacoes .dl-notificacoes__lista a.dl-notificacao:focus-visible {
        outline-offset: 2px;
    }

    .dl-tela-notificacoes .dl-notificacoes__lista .dl-notificacao__icone {
        width: 32px;
        height: 32px;
    }

    .dl-tela-notificacoes .dl-notificacoes__lista .dl-notificacao__icone .dl-icone {
        width: 16px;
        height: 16px;
    }

    .dl-tela-notificacoes .dl-notificacoes__lista .dl-notificacao__corpo {
        column-gap: 24px;
        row-gap: 2px;
        padding-right: 0;
    }

    /* Sem o trim de cap-height do componente: com 4 entre as linhas, título e
       texto se tocariam. */
    .dl-tela-notificacoes .dl-notificacoes__lista :is(.dl-notificacao__titulo, .dl-notificacao__texto, .dl-notificacao__tempo) {
        text-box: normal;
    }

    .dl-tela-notificacoes .dl-notificacoes__lista .dl-notificacao__titulo {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
    }

    .dl-tela-notificacoes .dl-notificacoes__lista .dl-notificacao__texto {
        font-size: 13px;
        line-height: 18px;
    }

    .dl-tela-notificacoes .dl-notificacoes__lista .dl-notificacao__marcador {
        top: calc(50% - 4px);
        right: 20px;
        margin: 0;
    }

    .dl-tela-notificacoes .dl-notificacoes__lista .dl-vazio {
        padding: 40px 24px;
        border-radius: var(--dl-d-radius);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-tela-notificacoes > .dl-carregar-mais {
        justify-content: flex-start;
        min-height: 40px;
        margin-top: 16px;
    }

    /* ------------------------------------------------------------------ */
    /* Dados pessoais — 134834:4248 cliente · 134834:4998 profissional      */
    /* Seções em cards 12; campos em pares dentro do card; ≥ 1280 as seções */
    /* andam em duas colunas (Identificação | Contato; Endereço |           */
    /* Documentos) e o Salvar fecha a grade à direita.                      */
    /* ------------------------------------------------------------------ */

    .dl-d-conta.dl-tela-informacoes-pessoais.dl-tela-informacoes-pessoais.dl-tela-informacoes-pessoais {
        max-width: none;
        margin-inline: 0;
    }

    .dl-d-conta.dl-tela-informacoes-pessoais--secoes.dl-tela-informacoes-pessoais--secoes {
        min-height: 0;
        padding-block: 0;
    }

    /* Profissional: a foto (só ela troca o avatar do perfil público) sobe para
       o lado do título — 56, com o lápis. O resto ocupa a largura toda. */
    .dl-d-conta.dl-tela-informacoes-pessoais--profissional.dl-tela-informacoes-pessoais--profissional {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 16px;
    }

    .dl-tela-informacoes-pessoais--profissional > * {
        grid-column: 1 / -1;
    }

    .dl-tela-informacoes-pessoais--profissional > .dl-info-pessoais__avatar {
        grid-column: 1;
        grid-row: 1;
        margin: 0 0 24px;
    }

    .dl-tela-informacoes-pessoais--profissional > .dl-conta__cabecalho {
        grid-column: 2;
        grid-row: 1;
    }

    /* UI::avatar põe width/height inline (96): o teto vence o inline. */
    .dl-tela-informacoes-pessoais .dl-info-pessoais__avatar .dl-avatar {
        max-width: 56px;
        max-height: 56px;
    }

    .dl-tela-informacoes-pessoais .dl-info-pessoais__avatar .dl-avatar__iniciais {
        font-size: 18px;
        line-height: 1;
    }

    .dl-tela-informacoes-pessoais .dl-info-pessoais__avatar-editar {
        width: 24px;
        height: 24px;
    }

    .dl-tela-informacoes-pessoais .dl-info-pessoais__avatar-editar svg {
        width: 11px;
        height: 11px;
    }

    /* A grade de pares de dl-desktop.css vira grade de seções: 1 coluna até
       1280, 2 daí em diante (bloco no fim desta seção). */
    .dl-tela-informacoes-pessoais--secoes #dl-form-info-pessoais {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 24px;
    }

    .dl-tela-informacoes-pessoais--secoes .dl-info-pessoais__secao {
        gap: 10px;
    }

    .dl-tela-informacoes-pessoais--secoes .dl-info-pessoais__secao-nome {
        color: var(--dl-azul-marinho);
        font-size: 16px;
        font-weight: 600;
        line-height: 22px;
        text-box: normal;
    }

    /* Card: raio 12, sombra de card, campos em 2 colunas; o card estica para
       os pares de seções terem a mesma altura. */
    .dl-d-conta .dl-info-pessoais__card {
        flex: 1;
        border-radius: var(--dl-radius-card);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-tela-informacoes-pessoais--secoes .dl-info-pessoais__card:not(.dl-info-pessoais__docs) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        gap: 16px;
        padding: 20px;
    }

    /* Nome e Cidade (UF + cidade) valem a linha inteira. */
    .dl-tela-informacoes-pessoais--secoes .dl-info-pessoais__card > .dl-campo:is(:has([name="nome"]), :has(.dl-info-pessoais__cidade)) {
        grid-column: 1 / -1;
    }

    .dl-tela-informacoes-pessoais--secoes .dl-info-pessoais__docs {
        gap: 8px;
        padding: 16px;
    }

    /* Cliente: Salvar ao fim da grade, à direita. */
    .dl-tela-informacoes-pessoais--secoes #dl-form-info-pessoais > .dl-info-pessoais__salvar {
        grid-column: 1 / -1;
        justify-self: end;
    }

    /* Profissional: o aviso "Atenção!" e o Salvar dividem a última linha. */
    .dl-tela-informacoes-pessoais--secoes .dl-info-pessoais__rodape {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        gap: 24px;
        margin: 0;
        padding: 0;
    }

    .dl-tela-informacoes-pessoais--secoes .dl-info-pessoais__rodape > .dl-info-pessoais__aviso {
        flex: 1;
        margin: 0;
    }

    .dl-tela-informacoes-pessoais--secoes .dl-info-pessoais__rodape > .dl-info-pessoais__salvar {
        flex: none;
    }

    /* ------------------------------------------------------------------ */
    /* Alterar senha — os três campos num card                               */
    /* ------------------------------------------------------------------ */

    .dl-d-conta.dl-tela-alterar-senha.dl-tela-alterar-senha.dl-tela-alterar-senha {
        max-width: none;
        margin-inline: 0;
        padding-top: 0;
    }

    /* Até 1280: "Senha atual" na linha de cima, as duas novas lado a lado. */
    .dl-tela-alterar-senha #dl-form-alterar-senha {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 16px;
        padding: 20px;
        border-radius: var(--dl-radius-card);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-tela-alterar-senha #dl-form-alterar-senha > .dl-campo {
        margin-bottom: 0;
    }

    .dl-tela-alterar-senha #dl-form-alterar-senha > .dl-campo:first-child {
        grid-column: 1 / -1;
    }

    .dl-tela-alterar-senha #dl-form-alterar-senha > .dl-botao {
        grid-column: 1 / -1;
        justify-self: end;
    }

    /* ------------------------------------------------------------------ */
    /* Endereços salvos ([dl_enderecos])                                    */
    /* Título | "Adicionar endereço"; endereços em grade de cards.          */
    /* ------------------------------------------------------------------ */

    .dl-d-conta.dl-f05-enderecos.dl-f05-enderecos {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-content: start;
        column-gap: 24px;
        max-width: none;
        padding-top: 0;
    }

    .dl-d-conta.dl-f05-enderecos > * {
        grid-column: 1 / -1;
    }

    .dl-d-conta.dl-f05-enderecos > .dl-conta__cabecalho {
        grid-column: 1;
        grid-row: 1;
    }

    .dl-d-conta.dl-f05-enderecos > .dl-f05-enderecos__adicionar {
        grid-column: 2;
        grid-row: 1;
        align-self: start;
        justify-self: end;
        margin-top: -2px;
    }

    /* Cards de ~320 a ~420 — um endereço não estica pela tela inteira. */
    .dl-f05-enderecos .dl-f05-enderecos__lista:not([hidden]) {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 12px;
    }

    .dl-f05-enderecos .dl-f05-endereco {
        min-height: 0;
        padding: 0 8px 0 0;
        border-radius: var(--dl-radius-card);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-f05-enderecos .dl-f05-endereco__editar {
        padding: 14px 0 14px 16px;
        border-radius: var(--dl-radius-card) 0 0 var(--dl-radius-card);
    }

    .dl-f05-enderecos .dl-f05-endereco__texto {
        gap: 2px;
    }

    /* Linhas de 20/18 sem o trim de cap-height do mobile (com o gap de 2). */
    .dl-f05-enderecos :is(.dl-f05-endereco__linha1, .dl-f05-endereco__linha2, .dl-f05-endereco__imovel) {
        text-box: normal;
    }

    .dl-f05-enderecos .dl-f05-endereco__linha1 {
        font-size: 14px;
        line-height: 20px;
    }

    .dl-f05-enderecos :is(.dl-f05-endereco__linha2, .dl-f05-endereco__imovel) {
        font-size: 13px;
        line-height: 18px;
    }

    .dl-f05-enderecos .dl-f05-endereco__remover {
        width: 36px;
        height: 36px;
    }

    /* Endereço removido: na grade a célula não tem gap acima para comer. */
    .dl-d-conta .dl-f05-enderecos__lista > .dl-conta-recolhendo.dl-conta-recolhendo {
        margin-block-start: 0;
    }
}

/* Larguras de viewport maiores: mais colunas onde o conteúdo pede. A área útil
   é a viewport − sidebar 244 − 2 × 48 (1280 → 940 · 1440 → 1100 · 1920 → 1580). */
@media (min-width: 1280px) {
    /* Notificações: título | texto | tempo numa linha só. */
    .dl-tela-notificacoes .dl-notificacoes__lista .dl-notificacao__corpo {
        grid-template-columns: minmax(180px, 280px) minmax(0, 1fr) auto;
        align-items: center;
    }

    .dl-tela-notificacoes .dl-notificacoes__lista .dl-notificacao__texto {
        grid-column: 2;
        grid-row: 1;
    }

    .dl-tela-notificacoes .dl-notificacoes__lista .dl-notificacao__tempo {
        grid-column: 3;
        grid-row: 1;
    }

    /* Dados pessoais: seções em 2 colunas; Contato empilha (2 linhas, como
       a Identificação ao lado). */
    .dl-tela-informacoes-pessoais--secoes #dl-form-info-pessoais {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dl-tela-informacoes-pessoais--secoes .dl-info-pessoais__card > .dl-campo:is(:has([name="whatsapp"]), :has([name="email"])) {
        grid-column: 1 / -1;
    }

    /* Alterar senha: os três campos e o botão numa linha só, o botão no pé
       dos campos. */
    .dl-tela-alterar-senha #dl-form-alterar-senha {
        grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    }

    .dl-tela-alterar-senha #dl-form-alterar-senha > .dl-campo:first-child,
    .dl-tela-alterar-senha #dl-form-alterar-senha > .dl-botao {
        grid-column: auto;
    }

    /* Campos no topo (a mensagem de erro cresce para baixo); o botão no pé
       da linha, centrado na altura do campo (44 − 40). */
    .dl-tela-alterar-senha #dl-form-alterar-senha > .dl-botao {
        align-self: end;
        margin-bottom: 2px;
    }
}

/* Dados pessoais e Alterar senha como modal — [REVISÃO-DESKTOP:2026-10-01] slide 4 (docs/18 §10).
   A caixa é a mesma nas duas formas (680, docs/18 §10), sem depender da viewport.
   O X do modal faz o papel do "‹ Voltar ao perfil". */
@media (min-width: 1024px) {
    body.dl-pagina-modal > main.dl-container > .dl-conta__voltar:has(+ :is(.dl-tela-informacoes-pessoais, .dl-tela-alterar-senha)) {
        display: none;
    }

    /* [REVISÃO-DESKTOP:2026-10-01] slide 4 — modal empilhado (pedido do usuário 02/10):
       Dados pessoais numa coluna só, na ordem do mobile — Identificação, Contato,
       Endereço, Documentos, o aviso e o Salvar na largura da coluna; um campo por
       linha dentro dos cards (UF e cidade seguem juntas, como no mobile). */
    body.dl-pagina-modal .dl-tela-informacoes-pessoais--secoes #dl-form-info-pessoais,
    body.dl-pagina-modal .dl-tela-informacoes-pessoais--secoes .dl-info-pessoais__card:not(.dl-info-pessoais__docs) {
        grid-template-columns: minmax(0, 1fr);
    }

    body.dl-pagina-modal .dl-tela-informacoes-pessoais--secoes .dl-info-pessoais__rodape {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    body.dl-pagina-modal .dl-d-conta.dl-tela-informacoes-pessoais--secoes #dl-form-info-pessoais .dl-info-pessoais__salvar {
        justify-self: stretch;
        width: 100%;
    }

    /* Alterar senha no modal: os três campos empilhados (pedido do usuário em
       02/10), em qualquer largura da janela; o botão segue no pé, à direita. */
    body.dl-pagina-modal .dl-tela-alterar-senha #dl-form-alterar-senha {
        grid-template-columns: minmax(0, 1fr);
    }

    body.dl-pagina-modal .dl-tela-alterar-senha #dl-form-alterar-senha > .dl-botao {
        grid-column: 1 / -1;
        align-self: auto;
        margin-bottom: 0;
    }
}



/* ====================================================================== */
/* Motion da conta (docs/19 §5.7) [TELA-NOVA:2026-09-25]                    */
/*                                                                        */
/* Primitivas do shell (dl-desktop-shell.css, "Motion"): keyframe          */
/* dl-d-entra, .dl-d-entra, .dl-d-atualizou, .dl-d-tremer, aria-busy. Aqui */
/* só o que é da conta: a cascata de abertura de cada tela (numerada pela  */
/* estrutura de cada uma, não pelo .dl-d-cascata, que contaria o cabeçalho */
/* e as gavetas), o padrão de item de lista e os estados das listas.       */
/* Entradas com fill `backwards`: as gavetas moram dentro de .dl-d-conta.  */
/* ====================================================================== */

@media (min-width: 1024px) {
    /* Campos: a borda azul do foco (Foco 134616:7) chega em 120ms, sem anel —
       o DS desenha só a borda. O fundo acompanha o travamento pelo CEP. */
    .dl-d-conta :is(.dl-campo__input, .dl-campo__select, .dl-campo__textarea) {
        transition: border-color var(--dl-dur-rapida) var(--dl-ease-saida), background-color var(--dl-dur-base) var(--dl-ease-saida);
    }

    /* Flash dos campos que o CEP preencheu (DL.motion.marcar, dl-privadas.js)
       sem trocar o raio do campo pelo de linha do .dl-d-atualizou. */
    .dl-d-conta :is(.dl-campo__input, .dl-campo__select).dl-d-atualizou {
        border-radius: var(--dl-radius-card);
    }

    /* Notificação marcada como lida: o fundo, o círculo do ícone e o ponto
       passam ao estado "lida" do componente (134623:231) em fade. O ponto
       sai por opacidade em vez do display:none, que não transiciona. */
    .dl-tela-notificacoes .dl-notificacao__icone {
        transition: background-color var(--dl-dur-base) var(--dl-ease-saida), color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-tela-notificacoes .dl-notificacao__marcador {
        transition: opacity var(--dl-dur-base) var(--dl-ease-saida), transform var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-tela-notificacoes .dl-notificacao--lida .dl-notificacao__marcador {
        display: block;
        opacity: 0;
    }

    /* Item que sai da lista (excluir avaliação, remover endereço): recolhe a
       altura (height:auto transiciona pelo interpolate-size do shell) e some;
       a margem negativa come o gap da pilha junto. Quem liga é dl-privadas.js,
       só ≥ 1024 e sem reduced-motion. Classe dobrada: vence o padding dos
       cards (.dl-f05-enderecos .dl-f05-endereco, acima). */
    .dl-d-conta .dl-conta-recolhendo.dl-conta-recolhendo {
        --dl-conta-gap: 12px;
        overflow: hidden;
        height: 0;
        min-height: 0;
        margin-block-start: calc(-1 * var(--dl-conta-gap));
        padding-block: 0;
        opacity: 0;
        pointer-events: none;
        transition: height var(--dl-dur-lenta) var(--dl-ease-troca), margin var(--dl-dur-lenta) var(--dl-ease-troca), padding var(--dl-dur-lenta) var(--dl-ease-troca), opacity var(--dl-dur-base) linear;
    }

    /* Foto nova do avatar, por cima da antiga até a página recarregar. */
    .dl-conta-avatar-novo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    @keyframes dl-conta-surge {
        from {
            opacity: 0;
        }
    }

    @keyframes dl-conta-olho {
        from {
            opacity: 0;
            transform: scale(0.7);
        }
    }

    /* ---- Cascata de abertura ------------------------------------------ */

    /* Título (ou o topo avatar · nome da profissional) primeiro; depois o
       conteúdo, 50ms por degrau, teto 7 — a mesma escala do .dl-d-lista. */
    html:not(.dl-splash-ativo) .dl-d-conta > :is(.dl-conta__cabecalho, .dl-topo-azul--identificacao),
    html:not(.dl-splash-ativo) .dl-d-conta .dl-lista > *,
    html:not(.dl-splash-ativo) .dl-tela-conta > .dl-lista ~ *,
    html:not(.dl-splash-ativo) .dl-tela-notificacoes .dl-notificacoes__lista > :not(.dl-notificacao--nova),
    html:not(.dl-splash-ativo) .dl-tela-notificacoes > .dl-carregar-mais,
    html:not(.dl-splash-ativo) .dl-tela-informacoes-pessoais > :is(.dl-info-pessoais__avatar, form, .dl-info-pessoais__secao-titulo, .dl-localizacao, .dl-info-pessoais__acoes),
    html:not(.dl-splash-ativo) .dl-tela-alterar-senha form > *,
    html:not(.dl-splash-ativo) .dl-f05-enderecos__lista:not([data-dl-redesenhada]) > *,
    html:not(.dl-splash-ativo) .dl-f05-enderecos > :is([data-dl-enderecos-vazio], .dl-f05-enderecos__adicionar) {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
        animation-delay: calc(80ms + var(--dl-i, 0) * 50ms);
    }

    :is(.dl-d-conta .dl-lista, .dl-notificacoes__lista, .dl-tela-alterar-senha form, .dl-f05-enderecos__lista) > :nth-child(1) { --dl-i: 1; }
    :is(.dl-d-conta .dl-lista, .dl-notificacoes__lista, .dl-tela-alterar-senha form, .dl-f05-enderecos__lista) > :nth-child(2) { --dl-i: 2; }
    :is(.dl-d-conta .dl-lista, .dl-notificacoes__lista, .dl-tela-alterar-senha form, .dl-f05-enderecos__lista) > :nth-child(3) { --dl-i: 3; }
    :is(.dl-d-conta .dl-lista, .dl-notificacoes__lista, .dl-tela-alterar-senha form, .dl-f05-enderecos__lista) > :nth-child(4) { --dl-i: 4; }
    :is(.dl-d-conta .dl-lista, .dl-notificacoes__lista, .dl-tela-alterar-senha form, .dl-f05-enderecos__lista) > :nth-child(5) { --dl-i: 5; }
    :is(.dl-d-conta .dl-lista, .dl-notificacoes__lista, .dl-tela-alterar-senha form, .dl-f05-enderecos__lista) > :nth-child(6) { --dl-i: 6; }
    :is(.dl-d-conta .dl-lista, .dl-notificacoes__lista, .dl-tela-alterar-senha form, .dl-f05-enderecos__lista) > :nth-child(n + 7) { --dl-i: 7; }

    /* /perfil/: os dois grupos são uma sequência só — o 2º continua de onde o
       1º parou (3 itens no menu da cliente, 4 no da profissional). */
    .dl-d-conta .dl-tela-perfil__grupo--fim > :nth-child(1) { --dl-i: 4; }
    .dl-d-conta .dl-tela-perfil__grupo--fim > :nth-child(2) { --dl-i: 5; }
    .dl-d-conta .dl-tela-perfil__grupo--fim > :nth-child(n + 3) { --dl-i: 6; }
    .dl-tela-perfil--profissional .dl-tela-perfil__grupo--fim > :nth-child(1) { --dl-i: 5; }
    .dl-tela-perfil--profissional .dl-tela-perfil__grupo--fim > :nth-child(n + 2) { --dl-i: 6; }

    /* O que vem depois da lista: texto de Formas de pagamento, "Carregar mais", vazio e botão dos endereços. */
    .dl-tela-conta > .dl-lista ~ *,
    .dl-tela-notificacoes > .dl-carregar-mais,
    .dl-f05-enderecos > :is([data-dl-enderecos-vazio], .dl-f05-enderecos__adicionar) {
        --dl-i: 5;
    }

    .dl-tela-informacoes-pessoais > .dl-info-pessoais__avatar { --dl-i: 1; }
    .dl-tela-informacoes-pessoais > form { --dl-i: 2; }
    .dl-tela-informacoes-pessoais > .dl-info-pessoais__secao-titulo { --dl-i: 3; }
    .dl-tela-informacoes-pessoais > .dl-localizacao { --dl-i: 4; }
    .dl-tela-informacoes-pessoais > .dl-info-pessoais__acoes { --dl-i: 5; }

    /* Endereço que acabou de entrar na lista (dl-privadas.js). */
    .dl-conta-entra {
        animation: dl-d-entra var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
    }

    /* Crossfade da foto nova sobre a antiga. */
    .dl-conta-avatar-novo {
        animation: dl-conta-surge var(--dl-dur-lenta) var(--dl-ease-troca) backwards;
    }

    /* Olho da senha: o ícone que passa a aparecer entra (o [hidden] do
       componente reinicia a animação a cada troca). */
    .dl-d-conta .dl-campo__olho-icone:not([hidden]) {
        animation: dl-conta-olho var(--dl-dur-base) var(--dl-ease-saida) backwards;
    }

    /* ---- Transições que movem ------------------------------------------ */

    .dl-d-conta a.dl-lista-item,
    .dl-tela-notificacoes a.dl-notificacao {
        transition: box-shadow var(--dl-dur-base) var(--dl-ease-saida), background-color var(--dl-dur-base) var(--dl-ease-saida), transform var(--dl-dur-rapida) var(--dl-ease-saida);
    }

    .dl-d-conta .dl-lista-item__fim {
        transition: transform var(--dl-dur-base) var(--dl-ease-saida), color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-d-conta :is(.dl-topo-azul__editar, .dl-info-pessoais__avatar-editar, .dl-avaliacao__acao, .dl-f05-endereco__remover) {
        transition: transform var(--dl-dur-base) var(--dl-ease-mola), background-color var(--dl-dur-base) var(--dl-ease-saida), border-color var(--dl-dur-base) var(--dl-ease-saida), color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-tela-notificacoes .dl-notificacao--lida .dl-notificacao__marcador {
        transform: scale(0.4);
    }

    /* Press: o card afunda 1% e os botões redondos 6% (120ms); o card de
       notificação (slide 10) não afunda, só ganha o fundo do hover. */
    .dl-d-conta a.dl-lista-item:active {
        transform: scale(0.99);
    }

    .dl-d-conta :is(.dl-topo-azul__editar, .dl-info-pessoais__avatar-editar, .dl-avaliacao__acao, .dl-f05-endereco__remover):active {
        transform: scale(0.94);
        transition-duration: var(--dl-dur-rapida);
    }
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    /* Padrão de item de lista da conta: fundo claro do seletor "Limpeza em"
       (134845:11252) e a seta escurece. */
    .dl-d-conta a.dl-lista-item:hover {
        background: var(--dl-d-resumo-fundo);
    }

    .dl-d-conta a.dl-lista-item:hover .dl-lista-item__fim {
        color: var(--dl-azul);
    }

    .dl-d-conta.dl-tela-perfil a.dl-lista-item--sair:hover {
        background: var(--dl-erro-claro);
    }

    .dl-d-conta.dl-tela-perfil a.dl-lista-item--sair:hover .dl-lista-item__fim {
        color: var(--dl-erro);
    }

    /* Linha de notificação: o mesmo fundo claro (lida ou não). */
    .dl-tela-notificacoes .dl-notificacoes__lista a.dl-notificacao:hover {
        background: var(--dl-d-resumo-fundo);
    }

    /* O card que abre a edição responde como os itens de lista da conta. */
    .dl-d-conta .dl-f05-endereco:has(.dl-f05-endereco__editar:hover) {
        background: var(--dl-d-resumo-fundo);
    }

    .dl-d-conta .dl-f05-endereco__remover:hover {
        background: var(--dl-cinza-claro);
        color: var(--dl-cinza-70);
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    /* A seta do item avança 3px (a mesma do .dl-d-seta do shell). */
    .dl-d-conta a.dl-lista-item:hover .dl-lista-item__fim {
        transform: translateX(3px);
    }

    /* Lápis do avatar e ações redondas crescem um pouco com a mola. */
    .dl-info-pessoais__avatar:hover .dl-info-pessoais__avatar-editar,
    .dl-d-conta :is(.dl-topo-azul__editar, .dl-avaliacao__acao, .dl-f05-endereco__remover):hover {
        transform: scale(1.08);
    }

    .dl-info-pessoais__avatar:active .dl-info-pessoais__avatar-editar {
        transform: scale(0.94);
    }
}

/* Menos movimento: sem cascata nem escala (não estão acima); o que é só cor
   continua, mas curto. O recolher e o crossfade nem são ligados pelo JS. */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .dl-d-conta :is(.dl-campo__input, .dl-campo__select, .dl-campo__textarea, a.dl-lista-item),
    .dl-tela-notificacoes :is(.dl-notificacao, .dl-notificacao__icone, .dl-notificacao__marcador) {
        transition-duration: var(--dl-dur-rapida);
    }
}

}