/*
 * DoceLar — motion em qualquer largura (docs/21, docs/19 §3.3) [TELA-NOVA:2026-09-28].
 *
 * As primitivas que DL.motion liga (dl-ui.js) — antes só ≥ 1024 em
 * dl-desktop-shell.css — mais o toque e a transição entre telas do mobile.
 * Carregada DEPOIS das folhas dl-desktop-* (Assets::registrar_camada_desktop):
 * na mesma camada dl-telas, continua vencendo os empates como quando morava
 * no -shell. Nada aqui carrega informação nova. Fill `backwards`, nunca
 * `both`: transform residual no ancestral prende os position:fixed.
 */

@layer dl-telas {

/* height:auto passa a transicionar (Chrome 129+); sem suporte, salta como antes. */
:root {
    interpolate-size: allow-keywords;
}

@keyframes dl-d-entra {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
}

@keyframes dl-d-entra-tela {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes dl-d-pop {
    from {
        opacity: 0.4;
        transform: scale(0.85);
    }
}

@keyframes dl-d-tremer {
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* [DECISÃO:2026-09-29] Sem o destaque: o fundo + contorno azul que piscava na
   linha atualizada (700ms) parecia erro para o usuário ("fica com fundo azul e
   depois fica correto"). O nome e a classe .dl-d-atualizou seguem — o JS
   (DL.motion.marcar) e as composições de animation das folhas desktop usam —,
   mas a animação não muda nada visível; a troca do valor fica só com o fade
   curto do próprio texto (dl-fluxo-troca / dl-agenda-troca). */
@keyframes dl-d-atualizou {
    from {
        opacity: 1;
    }
}

@keyframes dl-etapa-entra-dir {
    from {
        opacity: 0;
        transform: translateX(24px);
    }
}

@keyframes dl-etapa-entra-esq {
    from {
        opacity: 0;
        transform: translateX(-24px);
    }
}

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

/* Linha que acabou de mudar (DL.motion.marcar). Sem efeito visível desde
   29/09 (ver @keyframes dl-d-atualizou acima). */
.dl-d-atualizou {
    animation: dl-d-atualizou 700ms var(--dl-ease-saida);
}

/* Spinner dentro do botão ocupado: o rótulo some sem mudar a largura e o anel
   gira no lugar. Molde: vime-woocommerce-widgets (buy-button-pro-widget.css)
   sobre o dl-girando de dl-components. */
.dl-botao[aria-busy="true"] {
    --dl-botao-spinner: var(--dl-branco);
    position: relative;
    color: transparent;
    cursor: progress;
}

.dl-botao[aria-busy="true"]:disabled {
    opacity: 1;
    cursor: progress;
}

.dl-botao--secundario[aria-busy="true"] {
    --dl-botao-spinner: var(--dl-azul);
}

.dl-botao[aria-busy="true"] > * {
    visibility: hidden;
}

.dl-botao[aria-busy="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 18px;
    height: 18px;
    margin: auto;
    border: 2px solid var(--dl-botao-spinner);
    border-top-color: transparent;
    border-radius: 50%;
    animation: dl-girando 0.7s linear infinite;
}

.dl-d-pop {
    animation: dl-d-pop var(--dl-dur-lenta) var(--dl-ease-mola);
}

.dl-d-tremer {
    animation: dl-d-tremer 0.4s var(--dl-ease-troca);
}

/* Revelar ao rolar (DL.motion.revelar): só o que estava abaixo da dobra
   recebe a classe — nada que já está na tela some e volta. */
.dl-d-revelavel {
    transition: opacity 600ms var(--dl-ease-saida), transform 600ms var(--dl-ease-saida);
    transition-delay: calc(var(--dl-i, 0) * 80ms);
}

.dl-d-revelavel:not(.is-visivel) {
    opacity: 0;
    transform: translateY(24px);
}

@media (prefers-reduced-motion: no-preference) {
    /* Cascata: listas e qualquer .dl-d-cascata. Itens inseridos depois
       (Carregar mais) animam ao entrar no DOM; teto de 8 degraus.
       DL.motion.cascata() numera lotes novos a partir de 0. */
    html:not(.dl-splash-ativo) :is(.dl-d-lista, .dl-d-cascata) > *,
    html:not(.dl-splash-ativo) .dl-d-entra {
        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-lista, .dl-d-cascata) > :nth-child(2) { --dl-i: 1; }
    :is(.dl-d-lista, .dl-d-cascata) > :nth-child(3) { --dl-i: 2; }
    :is(.dl-d-lista, .dl-d-cascata) > :nth-child(4) { --dl-i: 3; }
    :is(.dl-d-lista, .dl-d-cascata) > :nth-child(5) { --dl-i: 4; }
    :is(.dl-d-lista, .dl-d-cascata) > :nth-child(6) { --dl-i: 5; }
    :is(.dl-d-lista, .dl-d-cascata) > :nth-child(7) { --dl-i: 6; }
    :is(.dl-d-lista, .dl-d-cascata) > :nth-child(n + 8) { --dl-i: 7; }

    /* Wizard (form_multipassos): a etapa nova entra do lado para onde se anda.
       dl-ui.js marca .is-entrando-dir/-esq em irParaPasso(); o cadastro da
       profissional no desktop, em dl-cadastro-profissional.js. */
    :is(.dl-passo, .dl-cad-prof__etapa).is-entrando-dir {
        animation: dl-etapa-entra-dir var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
    }

    :is(.dl-passo, .dl-cad-prof__etapa).is-entrando-esq {
        animation: dl-etapa-entra-esq var(--dl-dur-lenta) var(--dl-ease-saida) backwards;
    }
}

/* ---- Pressionado (toque) -------------------------------------------- */

/* No toque é o único retorno que existe: o tocável encolhe um pouco e solta
   em 200ms. :where zera a especificidade — a regra de tela que já anima o
   próprio transform (ex.: dl-catalogo, o hover do desktop) continua vencendo.
   Chip, item de lista e paginação já afundam 1px (dl-tokens); .dl-botao já
   tem o scale(.97) dele. */
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
    :where(
        a.dl-d-card-lista,
        a.dl-d-card-destaque,
        .dl-card-profissional:has(.dl-card-profissional__link),
        .dl-card-profissional--escolha,
        .dl-card-servico,
        .dl-opcao,
        .dl-cat-card,
        .dl-calendario__dia,
        .dl-contador__botao,
        .dl-header__acao
    ) {
        transition: transform var(--dl-dur-base) var(--dl-ease-saida);
    }

    :where(
        a.dl-d-card-lista,
        a.dl-d-card-destaque,
        .dl-card-profissional:has(.dl-card-profissional__link),
        .dl-card-profissional--escolha,
        .dl-card-servico,
        .dl-opcao,
        .dl-cat-card
    ):active {
        transform: scale(0.98);
        transition-duration: var(--dl-dur-rapida);
        /* O iOS aplica :active já no toque que vira rolagem: o atraso evita o
           card piscar sob o dedo ao rolar a lista. */
        transition-delay: 60ms;
    }

    :where(.dl-calendario__dia, .dl-contador__botao, .dl-header__acao):active:not(:disabled) {
        transform: scale(0.9);
        transition-duration: var(--dl-dur-rapida);
    }
}

/* ---- Mobile: entrada da tela e tab bar ------------------------------ */

@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
    /* Entrada da tela; o header e a tab bar ficam parados (nomes próprios na
       View Transition, abaixo). Primeira carga: sobe 8px quando o splash sai.
       Navegação interna: entra do lado para onde se anda — a direção vem de
       initDirecaoNavegacao (dl-ui.js) em html.dl-nav-avancar/-voltar/-aba.
       Modal aberto no main cancela: com transform no main, o fixed dele
       ficaria preso à coluna. Roda uma vez (html.dl-tela-entrou, dl-ui.js):
       fechar o modal não religa a entrada. */
    html:not(.dl-splash-ativo):not(.dl-tela-entrou) body > 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;
    }

    html.dl-nav-avancar:not(.dl-splash-ativo):not(.dl-tela-entrou) body > main.dl-container:not(:has(.dl-modal.is-aberto, .dl-drawer.is-aberto)) {
        animation-name: dl-etapa-entra-dir;
    }

    html.dl-nav-voltar:not(.dl-splash-ativo):not(.dl-tela-entrou) body > main.dl-container:not(:has(.dl-modal.is-aberto, .dl-drawer.is-aberto)) {
        animation-name: dl-etapa-entra-esq;
    }

    html.dl-nav-aba:not(.dl-splash-ativo):not(.dl-tela-entrou) body > main.dl-container:not(:has(.dl-modal.is-aberto, .dl-drawer.is-aberto)) {
        animation-name: dl-m-so-fade;
        animation-duration: var(--dl-dur-base);
    }

    /* Marcador da tab bar (initMarcadorTabBar): um fundo branco só, que
       desliza até o item tocado enquanto a próxima tela chega. */
    .dl-bottom-nav__marcador.is-deslizando {
        transition: transform var(--dl-dur-lenta) var(--dl-ease-saida), opacity var(--dl-dur-base) linear;
    }

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

    /* A cor troca quando o marcador já está chegando: sem o atraso, o ícone
       novo ficaria azul sobre azul e o antigo branco sobre branco. */
    .dl-bottom-nav__lista.tem-marcador .dl-bottom-nav__link {
        transition: color var(--dl-dur-base) var(--dl-ease-saida) var(--dl-dur-base);
    }

    .dl-bottom-nav__link:active .dl-bottom-nav__icone {
        transform: scale(0.88);
    }
}

.dl-bottom-nav__lista {
    position: relative;
}

.dl-bottom-nav__marcador {
    position: absolute;
    top: var(--dl-espaco-1);
    left: 0;
    height: 50px;
    border-radius: calc(var(--dl-radius-card) - var(--dl-espaco-1));
    background: var(--dl-branco);
    opacity: 0;
    pointer-events: none;
}

.dl-bottom-nav__marcador.is-visivel {
    opacity: 1;
}

.dl-bottom-nav__lista.tem-marcador .dl-bottom-nav__item--ativo .dl-bottom-nav__link {
    background: transparent;
}

/* O ícone fica por cima do marcador. */
.dl-bottom-nav__lista.tem-marcador .dl-bottom-nav__link {
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .dl-d-pop,
    .dl-d-tremer {
        animation: none;
    }

    .dl-d-revelavel {
        transition: none;
    }

    .dl-d-revelavel:not(.is-visivel) {
        opacity: 1;
        transform: none;
    }

    /* Indicador de carregamento é essencial: gira, mas devagar. */
    .dl-botao[aria-busy="true"]::after {
        animation-duration: 1.6s;
    }
}

}

/* ---------------------------------------------------------------------- */
/* Transição entre telas no mobile — fora de @layer (at-rule de documento; */
/* o ::view-transition-group(*) sem camada venceria as de dentro). O       */
/* header e a tab bar têm nome próprio e ficam parados; a raiz antiga some */
/* em 120ms e a nova aparece com a entrada do main (acima). O splash sai   */
/* das navegações internas em class-dl-front-splash.php. Desktop: -shell.  */
/* ---------------------------------------------------------------------- */

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

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

    .dl-bottom-nav {
        view-transition-name: dl-tab-bar;
    }

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

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

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

    /* Tab bar que existe só de um lado (tela-raiz ↔ subtela, C104): desce ou sobe. */
    ::view-transition-old(dl-tab-bar):only-child {
        animation: dl-m-vt-barra-desce var(--dl-dur-base) var(--dl-ease-troca) both;
    }

    ::view-transition-new(dl-tab-bar):only-child {
        animation: dl-m-vt-barra-desce var(--dl-dur-lenta) var(--dl-ease-saida) reverse both;
    }

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

    @keyframes dl-m-vt-barra-desce {
        to {
            opacity: 0;
            transform: translateY(24px);
        }
    }
}