/*
 * DoceLar — F16 · shell desktop do app logado (docs/18 §3 P2/P3 · §4 · §6 · §8).
 *
 * Sidebar (Figma 134845:11110 · 134840:10118 · card 134846:11311) + as classes
 * utilitárias dos padrões P2/P3/conta que as folhas de área (dl-desktop-<area>)
 * e os shortcodes usam. Catálogo das classes: docs/18 §8.
 *
 * Mesmas regras de dl-desktop.css: tudo dentro de @media e em @layer dl-telas,
 * só tokens (--dl-* do DS e --dl-d-* do bloco 1024 de dl-desktop.css), sem
 * !important. A sidebar sai no HTML em toda largura (UI::sidebar via
 * wp_body_open — nunca wp_is_mobile, que quebraria o cache) e só aparece ≥ 1024.
 */

@layer dl-telas {

/* Abaixo de 1024: esconde o markup novo da sidebar (display:none num elemento
   que não existia antes) e dá o respiro de baixo à página-modal na folha. */
@media (max-width: 1023.98px) {
    .dl-sidebar,
    .dl-pagina-modal__fechar {
        display: none;
    }

    /* Página-modal na folha inferior (docs/18 §10): sem a tab bar, nada reserva
       o fim da página e o último botão colaria na borda da folha. Nesta camada
       para vencer o padding-block: 0 do <main> do tema (dl-tema). */
    body.dl-pagina-modal--embutida > main.dl-container {
        padding-bottom: var(--dl-espaco-6);
    }
}

@media (min-width: 1024px) {

    /* ------------------------------------------------------------------ */
    /* Shell: body.dl-com-sidebar (UI::filtrar_body_class_sidebar)         */
    /* ------------------------------------------------------------------ */

    /* A reserva da sidebar é margem do <main>, não padding do body: o
       body{padding:0} do global-styles do WP é CSS fora de camada e venceria
       esta camada (mesma armadilha de dl-components, 13 §20). */
    body.dl-com-sidebar {
        background: var(--dl-cinza-claro);
    }

    /* P2/P3: sem header e sem tab bar; o rodapé marinho é só do público (P1). */
    body.dl-com-sidebar .dl-header,
    body.dl-com-sidebar .dl-bottom-nav,
    body.dl-com-sidebar .dl-footer {
        display: none;
    }

    /* Conteúdo a 48px da sidebar e 40px do topo, até 1025 de largura útil
       (292 → 1317 a 1440), alinhado à esquerda como no Figma. As variáveis de
       largura do shell público (min(90vw, 1196) + respiro) mediriam a viewport
       inteira e estourariam a coluna; aqui dentro elas valem a própria coluna. */
    body.dl-com-sidebar > main.dl-container {
        --dl-largura-shell: 100%;
        --dl-largura-conteudo: 100%;
        --dl-respiro-lateral: 0px;
        box-sizing: border-box;
        width: auto;
        max-width: calc(var(--dl-d-conteudo-max) + var(--dl-d-respiro) * 2);
        margin: 0 0 0 var(--dl-d-sidebar);
        padding: var(--dl-d-topo) var(--dl-d-respiro);
    }

    /* ------------------------------------------------------------------ */
    /* Sidebar — 244 · azul · padding 24 · logo / gap 40 / itens / rodapé   */
    /* ------------------------------------------------------------------ */

    .dl-sidebar {
        position: fixed;
        /* Com a barra do WP visível (admin logado) a sidebar desce junto. */
        top: var(--wp-admin--admin-bar--height, 0px);
        bottom: 0;
        left: 0;
        /* Acima dos sticky das telas (z 100, ex. .dl-catalogo__local), abaixo
           das gavetas (500) e modais (1000). */
        z-index: 150;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 40px;
        width: var(--dl-d-sidebar);
        padding: 24px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--dl-azul);
        color: var(--dl-branco);
        font-family: var(--dl-fonte);
    }

    .dl-sidebar__topo {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }

    .dl-sidebar__logo {
        display: block;
        width: 196px;
        height: 40px;
    }

    .dl-sidebar__logo img {
        display: block;
        width: 196px;
        height: 40px;
    }

    .dl-sidebar__lista {
        display: flex;
        flex-direction: column;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* NavItem: ícone 24 em círculo branco + texto 16 regular, padding 12/16,
       raio 12; inativo branco 60%, ativo fundo azul-claro + texto branco. */
    .dl-sidebar__item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        border-radius: var(--dl-radius-card);
        color: var(--dl-d-nav-inativo);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        text-decoration: none;
    }

    .dl-sidebar__item:hover {
        background: var(--dl-branco-16);
        color: var(--dl-branco);
    }

    .dl-sidebar__item.is-ativo {
        background: var(--dl-azul-claro);
        color: var(--dl-branco);
    }

    .dl-sidebar__item:focus-visible,
    .dl-sidebar__acao:focus-visible,
    .dl-sidebar__logo:focus-visible {
        outline: 2px solid var(--dl-branco);
        outline-offset: 2px;
    }

    .dl-sidebar__icone {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: var(--dl-branco);
        color: var(--dl-azul);
    }

    /* Glifos da tab bar a 12 de altura (134845:11122…11137): a largura sai do
       viewBox de cada um (13 · 12 · 9 · 11). */
    .dl-sidebar__glifo {
        display: block;
        width: auto;
        height: 12px;
    }

    /* Não lidas: contador como o sino do header desktop — o total vive no
       data-total (dl-privadas.js decrementa/remove) e vira texto pelo content. */
    .dl-sidebar__badge {
        box-sizing: border-box;
        min-width: 20px;
        height: 20px;
        margin-left: auto;
        padding: 0 6px;
        border-radius: var(--dl-radius-pill);
        background: var(--dl-branco);
        color: var(--dl-azul);
        font-size: 11px;
        font-weight: 600;
        line-height: 20px;
        text-align: center;
    }

    .dl-sidebar__badge::after {
        content: attr(data-total);
    }

    /* Card "Disponível para novos serviços" (134840:10213): 196 de largura,
       fundo azul-claro, raio 12, 16/17 de respiro, título 15 semibold, apoio 12
       branco 80%, switch largo (161×38) com botão azul de 26 de altura. */
    .dl-sidebar__disponivel {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 16px 17px;
        border-radius: var(--dl-radius-card);
        background: var(--dl-azul-claro);
        color: var(--dl-branco);
        cursor: pointer;
    }

    .dl-sidebar__disponivel-titulo {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.5;
    }

    .dl-sidebar__disponivel-apoio {
        display: block;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
        opacity: 0.8;
    }

    .dl-sidebar__switch {
        display: block;
    }

    .dl-sidebar__switch .dl-switch__trilho {
        width: 100%;
        height: 38px;
        background: var(--dl-branco-36);
    }

    .dl-sidebar__switch .dl-switch__trilho::after {
        top: 6px;
        left: 8px;
        width: 45%;
        height: 26px;
        border-radius: var(--dl-radius-pill);
        background: var(--dl-branco);
    }

    .dl-sidebar__switch input:checked + .dl-switch__trilho {
        background: var(--dl-branco);
    }

    .dl-sidebar__switch input:checked + .dl-switch__trilho::after {
        background: var(--dl-azul);
    }

    .dl-sidebar__switch input:focus-visible + .dl-switch__trilho {
        box-shadow: var(--dl-foco-anel-escuro);
    }

    /* Rodapé: divisor azul-claro 24% (134845:11149) · 24 · Configurações / 12 / Sair. */
    .dl-sidebar__rodape {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-top: 24px;
        border-top: 1px solid color-mix(in srgb, var(--dl-azul-claro) 24%, transparent);
    }

    .dl-sidebar__acao {
        display: flex;
        align-items: center;
        gap: 12px;
        width: fit-content;
        color: var(--dl-d-nav-inativo);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        text-decoration: none;
    }

    .dl-sidebar__acao:hover {
        color: var(--dl-branco);
    }

    .dl-sidebar__acao-icone {
        display: block;
        flex: none;
        height: 20px;
    }

    /* Cores do Figma: engrenagem branca (11152), sair cinza-10 (11158). */
    .dl-sidebar__acao-icone--config {
        width: 17.714px;
        color: var(--dl-branco);
    }

    .dl-sidebar__acao-icone--sair {
        width: 20px;
        color: var(--dl-cinza-10);
    }

    /* ------------------------------------------------------------------ */
    /* Tipografia desktop (docs/18 §2)                                     */
    /* ------------------------------------------------------------------ */

    .dl-d-titulo-tela {
        margin: 0;
        color: var(--dl-azul-marinho);
        font-family: var(--dl-fonte);
        font-size: 44px;
        font-weight: 600;
        line-height: 40px;
        letter-spacing: -1px;
    }

    .dl-d-titulo-secao {
        margin: 0;
        color: var(--dl-azul-marinho);
        font-family: var(--dl-fonte);
        font-size: 32px;
        font-weight: 600;
        line-height: 36px;
        letter-spacing: -1px;
    }

    .dl-d-titulo-card {
        margin: 0;
        color: var(--dl-azul);
        font-family: var(--dl-fonte);
        font-size: 24px;
        font-weight: 600;
        line-height: 24px;
        letter-spacing: -0.5px;
    }

    /* Link de seção ("Ver agenda", 134840:10273): azul sublinhado, 16. */
    .dl-d-link {
        color: var(--dl-azul);
        font-size: 16px;
        font-weight: 400;
        line-height: 1.5;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .dl-d-link:hover {
        color: var(--dl-azul-hover);
    }

    /* Cabeçalho de tela/coluna: título à esquerda, ação opcional à direita;
       40 até o conteúdo (Próximo Serviço 23 + 40 = card em 63). */
    .dl-d-cabecalho {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 40px;
    }

    /* ------------------------------------------------------------------ */
    /* P2 — principal + resumo 341 (gap 25)                                */
    /* ------------------------------------------------------------------ */

    .dl-d-p2 {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--dl-d-col-resumo);
        gap: var(--dl-d-gap-colunas);
        align-items: start;
        max-width: var(--dl-d-conteudo-max);
    }

    .dl-d-p2__principal {
        min-width: 0;
    }

    /* Coluna do resumo: seletor · 16 · card · 20 · suporte. Acompanha a
       rolagem da principal (fluxos longos mantêm o CTA à vista). */
    .dl-d-p2__resumo {
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--dl-d-topo));
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 0;
    }

    /* Seletor "Limpeza em" (134845:11252): 52 alto, raio 16, fundo/borda do resumo. */
    .dl-d-seletor {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        min-height: 52px;
        padding: 4px 21px 4px 20px;
        border: 1px solid var(--dl-d-resumo-borda);
        border-radius: var(--dl-d-radius);
        background: var(--dl-d-resumo-fundo);
        color: var(--dl-azul);
        font-family: var(--dl-fonte);
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .dl-d-seletor__textos {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
    }

    .dl-d-seletor__rotulo {
        color: var(--dl-azul-marinho);
        font-size: 8px;
        line-height: 1.12;
    }

    .dl-d-seletor__valor {
        overflow: hidden;
        color: var(--dl-azul);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.5;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Card-resumo (134845:11261): padding 24, gap 20, raio 16. */
    .dl-d-resumo {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 24px;
        border: 1px solid var(--dl-d-resumo-borda);
        border-radius: var(--dl-d-radius);
        background: var(--dl-d-resumo-fundo);
        box-shadow: var(--dl-d-sombra-card);
    }

    /* Linha rótulo ⇄ valor (14 semibold · 24 semibold, marinho). */
    .dl-d-resumo__linha {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: var(--dl-azul-marinho);
        font-size: 14px;
        font-weight: 600;
        line-height: 21px;
    }

    .dl-d-resumo__linha-valor {
        font-size: 24px;
        line-height: 24px;
        letter-spacing: -0.5px;
    }

    /* Bloco com divisor no topo ("Serviço selecionado" + valor). */
    .dl-d-resumo__bloco {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding-top: 16px;
        border-top: 1px solid var(--dl-d-resumo-borda);
    }

    .dl-d-resumo__bloco-rotulo {
        color: var(--dl-azul-claro);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.5;
    }

    .dl-d-resumo__bloco-valor {
        color: var(--dl-azul-marinho);
        font-size: 16px;
        font-weight: 600;
        line-height: 1.5;
    }

    /* O CTA do resumo ocupa a largura do card (48 alto, raio 12). */
    .dl-d-resumo .dl-botao {
        width: 100%;
    }

    /* Bloco INFO (134845:11273): branco, borda do resumo, raio 12, padding 16. */
    .dl-d-info {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
        border: 1px solid var(--dl-d-resumo-borda);
        border-radius: var(--dl-radius-card);
        background: var(--dl-branco);
    }

    .dl-d-info__icone {
        flex: none;
        width: 20px;
        height: 20px;
        color: var(--dl-azul);
    }

    .dl-d-info__textos {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
    }

    .dl-d-info__texto {
        margin: 0;
        color: var(--dl-cinza-50);
        font-size: 12px;
        line-height: 1.5;
        opacity: 0.7;
    }

    /* "Dúvidas? Entre em contato com nosso suporte." — 12 cinza-50 centrado,
       20 abaixo do card (gap 16 da coluna + 4). */
    .dl-d-suporte {
        margin: 4px 0 0;
        color: var(--dl-cinza-50);
        font-size: 12px;
        line-height: 1.5;
        text-align: center;
    }

    .dl-d-suporte a {
        color: inherit;
    }

    /* ------------------------------------------------------------------ */
    /* P3 — duas colunas com divisor vertical (425 · 80 | 80 · 440)         */
    /* ------------------------------------------------------------------ */

    .dl-d-p3 {
        display: grid;
        grid-template-columns: minmax(0, 425fr) minmax(0, 440fr);
        max-width: var(--dl-d-conteudo-max);
        /* O divisor desce até o pé da viewport, como a linha de 820 do Figma. */
        min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - var(--dl-d-topo) * 2);
    }

    .dl-d-p3__col {
        min-width: 0;
    }

    .dl-d-p3__col:first-child {
        padding-right: 80px;
        border-right: 1px solid var(--dl-cinza-10);
    }

    .dl-d-p3__col + .dl-d-p3__col {
        padding-left: 80px;
    }

    /* ------------------------------------------------------------------ */
    /* Cards                                                               */
    /* ------------------------------------------------------------------ */

    /* Destaque ("Próximo Serviço", 134840:10223): raio 16, sombra destaque. */
    .dl-d-card-destaque {
        box-sizing: border-box;
        padding: 24px;
        border-radius: var(--dl-d-radius);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-destaque);
    }

    /* Lista ("Agendados", 134840:10275): raio 16, sombra card; 16 entre cards. */
    .dl-d-card-lista {
        box-sizing: border-box;
        padding: 24px;
        border-radius: var(--dl-d-radius);
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
    }

    .dl-d-lista {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* ------------------------------------------------------------------ */
    /* Conta — coluna única até 720                                        */
    /* ------------------------------------------------------------------ */

    .dl-d-conta {
        max-width: 720px;
    }
}

/* 1024–1279: o resumo vai a 300 e a principal flexiona; P3 aperta os vãos. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .dl-d-p2 {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .dl-d-p3__col:first-child {
        padding-right: 40px;
    }

    .dl-d-p3__col + .dl-d-p3__col {
        padding-left: 40px;
    }
}

/* ====================================================================== */
/* Motion — micro-interações do desktop (docs/19) [TELA-NOVA:2026-09-25]    */
/*                                                                        */
/* O Figma não anima nada; tudo aqui é design criado pela Regra 3 e nada   */
/* carrega informação nova. Tokens --dl-ease-* / --dl-dur-* (dl-tokens).   */
/* Nunca deixar transform residual (fill `backwards`, nunca `both`): um    */
/* transform no ancestral vira bloco de contenção dos position:fixed.     */
/* Catálogo das primitivas: docs/19 §3.3. As que DL.motion liga (pop,     */
/* tremer, atualizou, cascata, revelar, spinner) valem em qualquer largura */
/* e moram em dl-motion.css (docs/21); aqui fica o que é só do desktop.    */
/* ====================================================================== */

@media (min-width: 1024px) {
    /* O halo segue o raio do próprio elemento; a linha do resumo não tem
       fundo nem borda, então o raio só aparece durante o flash. (O bloco fica
       de fora: o divisor do topo curvaria nas pontas.) */
    .dl-d-resumo__linha {
        border-radius: 6px;
    }

    .dl-d-link {
        transition: color var(--dl-dur-base) var(--dl-ease-saida), text-underline-offset var(--dl-dur-base) var(--dl-ease-saida);
    }

    /* ---- Sidebar ---------------------------------------------------- */

    .dl-sidebar__item {
        position: relative;
        z-index: 1;
        transition: background-color var(--dl-dur-base) var(--dl-ease-saida), color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-sidebar__icone {
        transition: transform var(--dl-dur-base) var(--dl-ease-mola);
    }

    .dl-sidebar__acao {
        transition: color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-sidebar__acao-icone {
        transition: transform var(--dl-dur-base) var(--dl-ease-saida);
    }

    /* Marcador do item ativo (DL.motion — initMarcadorSidebar): um fundo só,
       que desliza até o item clicado enquanto a próxima página carrega. Sem JS
       o .is-ativo mantém o fundo próprio, como antes. */
    .dl-sidebar__nav {
        position: relative;
    }

    .dl-sidebar__marcador {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 48px;
        border-radius: var(--dl-radius-card);
        background: var(--dl-azul-claro);
        opacity: 0;
        pointer-events: none;
    }

    .dl-sidebar__marcador.is-visivel {
        opacity: 1;
    }

    .dl-sidebar__marcador.is-deslizando {
        transition: transform var(--dl-dur-lenta) var(--dl-ease-saida), height var(--dl-dur-lenta) var(--dl-ease-saida), opacity var(--dl-dur-base) linear;
    }

    .dl-sidebar__nav.tem-marcador .dl-sidebar__item.is-ativo {
        background: transparent;
    }

    /* Switch "Disponível": o botão anda por transform (antes animava `left`).
       Trilho = botão / 45%; curso = 55% − 16 do trilho = 11/9 do botão − 16. */
    .dl-sidebar__switch .dl-switch__trilho {
        transition: background-color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-sidebar__switch .dl-switch__trilho::after {
        transition: transform var(--dl-dur-lenta) var(--dl-ease-mola), background-color var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-sidebar__switch input:checked + .dl-switch__trilho::after {
        left: 8px;
        transform: translateX(calc(100% * 11 / 9 - 16px));
    }
}

/* Movimento só para quem não pediu menos movimento. */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    /* Entrada da tela: o conteúdo sobe 8px enquanto a sidebar fica parada.
       Com splash, espera ele começar a sair (a classe some em dlSplashSair).
       Modal aberto dentro do main (ex.: localização que abre sozinha em
       /servicos/) cancela a entrada: com transform no main, o fixed dele
       ficaria preso à coluna. */
    html:not(.dl-splash-ativo):not(.dl-tela-entrou) body.dl-com-sidebar > main.dl-container:not(:has(.dl-modal.is-aberto, .dl-drawer.is-aberto)) {
        animation: dl-d-entra-tela var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
    }

    /* Card clicável sobe 2px e ganha a sombra do destaque. Automático para
       <a> com a classe de card; em outro markup, marque .dl-d-elevavel. */
    :is(a.dl-d-card-lista, a.dl-d-card-destaque, .dl-d-elevavel) {
        transition: transform var(--dl-dur-lenta) var(--dl-ease-saida), box-shadow var(--dl-dur-lenta) var(--dl-ease-saida);
    }

    /* Seta que avança: .dl-d-seta num ícone dentro de link/botão. */
    .dl-d-seta {
        transition: transform var(--dl-dur-base) var(--dl-ease-saida);
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
    :is(a.dl-d-card-lista, a.dl-d-card-destaque, .dl-d-elevavel):hover {
        transform: translateY(-2px);
        box-shadow: var(--dl-d-sombra-destaque);
    }

    :is(a.dl-d-card-lista, a.dl-d-card-destaque, .dl-d-elevavel):active {
        transform: translateY(0);
    }

    :is(a, button, label, summary):hover > .dl-d-seta,
    :is(a, button, label, summary):hover .dl-d-seta {
        transform: translateX(3px);
    }

    .dl-d-link:hover {
        text-underline-offset: 5px;
    }

    .dl-sidebar__item:hover .dl-sidebar__icone {
        transform: scale(1.08);
    }

    .dl-sidebar__acao:hover .dl-sidebar__acao-icone--sair {
        transform: translateX(2px);
    }
}

/* ---------------------------------------------------------------------- */
/* Página como modal — [REVISÃO-DESKTOP:2026-10-01] slide 4 (docs/18 §10)  */
/* Modal_Pagina (PHP) marca o body; DL.modalPagina (dl-ui.js) abre o       */
/* <dialog>.                                                               */
/* [REVISÃO-DESKTOP:2026-10-01] slide 4 — modal empilhado (pedido do       */
/* usuário 02/10): a caixa tem --dl-d-modal-largura (680) e o conteúdo vai */
/* numa coluna só. O <iframe> tem --dl-d-modal-quadro (1024), centrado e   */
/* recortado pela caixa: a página dentro dele mede 1024 e segue desktop.   */
/* Quem rola é o <main> da página (680, centrado no quadro), não o         */
/* documento do iframe: a barra fica na borda da caixa, e os modais e      */
/* gavetas da página, centrados no quadro, caem no centro da caixa.        */
/* ---------------------------------------------------------------------- */

@media (min-width: 1024px) {

    /* Link interceptado: o <dialog> sobre a tela de origem. */
    .dl-modal-pagina {
        box-sizing: border-box;
        position: fixed;
        inset: var(--dl-d-modal-margem) 0 auto;
        width: min(var(--dl-d-modal-largura), 100vw);
        max-width: none;
        height: auto;
        max-height: calc(100vh - var(--dl-d-modal-margem) * 2);
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
        border: 0;
        border-radius: var(--dl-d-radius);
        background: var(--dl-cinza-claro);
        box-shadow: var(--dl-d-sombra-destaque);
        color: inherit;
    }

    .dl-modal-pagina::backdrop {
        background: var(--dl-overlay);
    }

    .dl-modal-pagina[open] {
        animation: dl-modal-caixa-entra var(--dl-dur-lenta) var(--dl-ease-mola) backwards;
    }

    .dl-modal-pagina[open]::backdrop {
        animation: dl-modal-fundo-entra var(--dl-dur-base) var(--dl-ease-saida) backwards;
    }

    .dl-modal-pagina__quadro {
        display: block;
        width: var(--dl-d-modal-quadro);
        max-width: none;
        height: 0;
        margin-inline: calc((100% - var(--dl-d-modal-quadro)) / 2);
        border: 0;
        background: transparent;
    }

    .dl-modal-pagina.is-carregando {
        min-height: 320px;
    }

    .dl-modal-pagina.is-carregando .dl-modal-pagina__quadro {
        visibility: hidden;
    }

    .dl-modal-pagina__carregando {
        display: none;
    }

    .dl-modal-pagina.is-carregando .dl-modal-pagina__carregando {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
    }

    .dl-modal-pagina.is-carregando .dl-modal-pagina__carregando::before {
        content: "";
        width: 32px;
        height: 32px;
        border: 3px solid var(--dl-cinza-10);
        border-top-color: var(--dl-azul);
        border-radius: 50%;
        animation: dl-d-modal-gira 0.8s linear infinite;
    }

    @keyframes dl-d-modal-gira {
        to {
            transform: rotate(360deg);
        }
    }

    /* X no topo — o mesmo nas duas formas (o da direta vem do PHP). A 20 da
       borda: a barra de rolagem fina (≤ 12) corre livre à direita dele. */
    .dl-modal-pagina__fechar,
    .dl-pagina-modal__fechar {
        position: absolute;
        top: 12px;
        right: 20px;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--dl-branco);
        box-shadow: var(--dl-d-sombra-card);
        color: var(--dl-azul-marinho);
        cursor: pointer;
    }

    .dl-modal-pagina__fechar:hover,
    .dl-pagina-modal__fechar:hover {
        color: var(--dl-azul);
    }

    .dl-modal-pagina__fechar .dl-icone,
    .dl-pagina-modal__fechar .dl-icone {
        width: 20px;
        height: 20px;
    }

    /* Modal da própria página aberto por cima (o "Enviar documento" de Dados
       pessoais): o véu dele cobre a página, mas não o X, que mora fora do
       <iframe> (ou acima do <main>, na forma direta). O X recebe o mesmo véu e
       deixa de responder; dl-ui.js marca .is-sobreposto e o torna inert. */
    .dl-modal-pagina__fechar::after,
    .dl-pagina-modal__fechar::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--dl-overlay);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--dl-dur-base) var(--dl-ease-saida);
    }

    .dl-modal-pagina.is-sobreposto .dl-modal-pagina__fechar,
    body.dl-pagina-modal--direta:has(.dl-modal.is-aberto) .dl-pagina-modal__fechar {
        pointer-events: none;
    }

    .dl-modal-pagina.is-sobreposto .dl-modal-pagina__fechar::after,
    body.dl-pagina-modal--direta:has(.dl-modal.is-aberto) .dl-pagina-modal__fechar::after {
        opacity: 1;
    }

    /* A caixa por dentro, igual nas duas formas: coluna de 680 com respiro de
       40 (52 no topo, pelo X), que rola sozinha. A borda transparente de cima
       e de baixo tem o raio da caixa: a barra de rolagem começa e termina
       abaixo do arredondamento, nunca na quina. A classe repetida vence as
       larguras e os respiros que cada tela dá ao <main> do tema. */
    body.dl-pagina-modal:is(.dl-pagina-modal--embutida, .dl-pagina-modal--direta) > main.dl-container.dl-container {
        box-sizing: border-box;
        width: min(var(--dl-d-modal-largura), 100vw);
        max-width: none;
        margin: 0 auto;
        padding: calc(52px - var(--dl-d-radius)) var(--dl-d-modal-respiro) calc(var(--dl-d-modal-respiro) - var(--dl-d-radius));
        overflow-y: auto;
        overscroll-behavior: contain;
        border-block: var(--dl-d-radius) solid transparent;
        scrollbar-width: thin;
        scrollbar-color: var(--dl-cinza-30) transparent;
    }

    /* As colunas P2 da página (principal | resumo) empilham: o resumo e as
       ações descem para o fim, na ordem do DOM (a do mobile). */
    body.dl-pagina-modal > main.dl-container .dl-d-p2 {
        grid-template-columns: minmax(0, 1fr);
        max-width: none;
    }

    body.dl-pagina-modal > main.dl-container .dl-d-p2__resumo {
        position: static;
    }

    /* Telas cujo shortcode traz o próprio <main> (detalhe e confirmado do
       cliente): o respiro de baixo é o da caixa, não o da tela. */
    body.dl-pagina-modal > main.dl-container > main.dl-container {
        padding-bottom: 0;
    }

    /* Dentro do quadro: o documento não rola (rola o <main>, até a altura do
       quadro), sem a reserva da sidebar. */
    body.dl-pagina-modal--embutida {
        overflow: hidden;
        background: var(--dl-cinza-claro);
    }

    body.dl-pagina-modal--embutida > main.dl-container {
        max-height: 100vh;
    }

    /* O título recebe o foco ao abrir (leitor de tela começa por ele); o anel
       de teclado ali só pareceria uma seleção. */
    body.dl-pagina-modal--embutida main h1[tabindex="-1"]:focus {
        outline: none;
        box-shadow: none;
    }

    /* URL direta: a mesma caixa, fixa sobre o véu, com a sidebar atrás. */
    body.dl-pagina-modal--direta::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 900;
        background: var(--dl-overlay);
    }

    body.dl-pagina-modal--direta > main.dl-container {
        position: fixed;
        inset: var(--dl-d-modal-margem) 0;
        z-index: 910;
        height: fit-content;
        max-height: calc(100vh - var(--dl-d-modal-margem) * 2);
        border-radius: var(--dl-d-radius);
        background: var(--dl-cinza-claro);
        box-shadow: var(--dl-d-sombra-destaque);
    }

    body.dl-pagina-modal--direta .dl-pagina-modal__fechar {
        position: fixed;
        top: calc(var(--dl-d-modal-margem) + 12px);
        right: calc(max(0px, (100vw - var(--dl-d-modal-largura)) / 2) + 20px);
        z-index: 920;
    }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .dl-sidebar__item,
    .dl-sidebar__icone,
    .dl-sidebar__acao-icone,
    .dl-sidebar__marcador.is-deslizando,
    .dl-sidebar__switch .dl-switch__trilho::after {
        transition-duration: 0.01ms;
    }
}

}

/* ---------------------------------------------------------------------- */
/* Transição entre telas (docs/19 §4) — fora de @layer: at-rule de         */
/* documento. A sidebar e o header pill têm nome próprio e ficam parados;  */
/* a raiz antiga some em 120ms e a nova aparece com a entrada da tela.      */
/* O splash sai das navegações internas em class-dl-front-splash.php.      */
/* ---------------------------------------------------------------------- */

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    .dl-sidebar {
        view-transition-name: dl-sidebar;
    }

    .dl-header__desktop {
        view-transition-name: dl-header-pill;
    }

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

    ::view-transition-old(root) {
        animation: dl-d-vt-sai var(--dl-dur-rapida) linear both;
    }

    ::view-transition-new(root) {
        animation: none;
    }

    @keyframes dl-d-vt-sai {
        to {
            opacity: 0;
        }
    }
}