/*
 * DoceLar — componentes do design system (Figma 134614:8 + 134607:3279).
 * Fork em bloco dos componentes do paginas-conecta [REF:paginas-conecta]; consome só var(--dl-*).
 * Em camada: modificador vence base por camada/especificidade, não pela ordem
 * do arquivo (lição 13 §23).
 */

@layer dl-components {
/* Utilitário: texto só para leitor de tela. */
.dl-oculto-visual {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Ícones de 134615:2: o traço herda a cor por currentColor. */
.dl-icone {
    display: block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

/* O Figma corta a entrelinha na altura da maiúscula (leadingTrim CAP_HEIGHT);
   sem o mesmo corte cada caixa de texto soma a meia-entrelinha e nenhum
   componente de altura fixa bate com o desenho. */
:is(
    .dl-card-profissional__nome, .dl-card-profissional__historico, .dl-card-profissional__valor, .dl-card-profissional__unidade,
    .dl-estrelas__nota, .dl-badge, .dl-avatar__iniciais, .dl-chip,
    .dl-campo__label, .dl-campo__help, .dl-aviso__texto, .dl-multipassos__progresso-texto,
    .dl-card-servico__titulo, .dl-card-servico__descricao, .dl-card-servico__meta,
    .dl-card-agendamento__valor, .dl-card-agendamento__titulo, .dl-card-agendamento__nome,
    .dl-notificacao__titulo, .dl-notificacao__texto, .dl-notificacao__tempo,
    .dl-upload__titulo, .dl-upload__sub, .dl-opcao__titulo, .dl-opcao__sub,
    .dl-lista-item__rotulo, .dl-imagem-placeholder__legenda, .dl-contador__rotulo, .dl-contador__valor,
    .dl-calendario__titulo, .dl-calendario__semana span, .dl-drawer-info__apoio,
    .dl-drawer-info__lista li, .dl-drawer--info .dl-drawer__titulo
) {
    text-box: trim-both cap alphabetic;
}

/* Card/Profissional — 134621:203 (335×92 r12). Fork de UI::card_servico do pc:
   o card inteiro é link (via __link absoluto) e o nome trunca numa linha. */
.dl-card-profissional {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--dl-espaco-4);
    min-height: 92px;
    /* 18/18/18/16 do Figma menos a borda, que lá é por dentro. */
    padding: 17px 17px 17px 15px;
    background: var(--dl-branco);
    border: 1px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-card);
    color: inherit;
    text-decoration: none;
}

/* Selecionado: contorno de 2px — o padding cede mais 1px e o card não cresce. */
.dl-card-profissional.is-selecionado {
    border: 2px solid var(--dl-azul);
    padding: 16px 16px 16px 14px;
}

.dl-card-profissional__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.dl-card-profissional__identidade {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.dl-card-profissional__nome {
    margin: 0;
    max-width: 100%;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul-marinho);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dl-card-profissional__historico {
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
}

.dl-card-profissional__preco {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.dl-card-profissional__valor {
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul);
}

.dl-card-profissional__unidade {
    font-size: var(--dl-body8-tamanho);
    font-weight: var(--dl-body8-peso);
    line-height: var(--dl-body8-lh);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--dl-cinza-30);
}

/* Avaliação/Estrelas — 134619:81: 5 estrelas de 14 (gap 2) + nota (gap 6). */
.dl-estrelas {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 14px;
    font-family: var(--dl-fonte);
}

.dl-estrelas__icones {
    display: inline-flex;
    gap: 2px;
}

.dl-estrelas__icone {
    display: block;
    width: 14px;
    height: 14px;
    color: var(--dl-cinza-30);
}

.dl-estrelas__icone.is-cheia {
    color: var(--dl-estrela);
}

/* Sem display:block o svg desce para a linha de base e sai do eixo da nota. */
.dl-estrelas__icone svg {
    display: block;
    width: 100%;
    height: 100%;
}

.dl-estrelas__nota {
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-bold-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-70);
}

.dl-estrelas__total {
    font-size: var(--dl-body2-tamanho);
    color: var(--dl-cinza-50);
}

.dl-estrelas-input {
    display: flex;
    gap: 6px;
}

.dl-estrelas-input__estrela {
    background: none;
    border: none;
    padding: 0;
    font-size: 28px;
    line-height: 1;
    color: var(--dl-cinza-10);
    cursor: pointer;
}

.dl-estrelas-input__estrela.is-ativa {
    color: var(--dl-estrela);
}

@keyframes dl-estrela-pulso {
    0% {
        transform: scale(1);
        text-shadow: none;
    }
    35% {
        transform: scale(var(--dl-pulso-escala, 1.18));
        text-shadow: 0 0 var(--dl-pulso-brilho, 8px) var(--dl-estrela-brilho),
                     0 0 var(--dl-pulso-halo, 16px) var(--dl-estrela-halo);
    }
    100% {
        transform: scale(1);
        text-shadow: none;
    }
}

.dl-estrelas-input__estrela.is-celebrando {
    animation: dl-estrela-pulso 380ms ease-out both;
}

.dl-estrelas-input__estrela.is-celebrando--max {
    --dl-pulso-escala: 1.35;
    --dl-pulso-brilho: 14px;
    --dl-pulso-halo: 26px;

    animation-duration: 310ms;
    animation-iteration-count: 2;
}

@media (prefers-reduced-motion: reduce) {
    .dl-estrelas-input__estrela.is-celebrando {
        animation: none;
    }
}

.dl-tabs__nav {
    display: flex;
    border-bottom: 1px solid var(--dl-cinza-10);
    margin-bottom: 20px;
}

.dl-tabs__item {
    flex: 1;
    background: none;
    border: none;
    padding: 12px 4px;
    font-family: var(--dl-fonte);
    font-weight: 600;
    font-size: 14px;
    color: var(--dl-cinza-50);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.dl-tabs__item.is-ativo {
    color: var(--dl-azul);
    border-bottom-color: var(--dl-azul);
}

.dl-tabs__nav--pill {
    border-bottom: none;
    background: var(--dl-branco);
    border: 0.5px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-pill);
    padding: 4px;
    gap: 3px;
    margin-bottom: 24px;
}

.dl-tabs__nav--pill .dl-tabs__item {
    border-radius: var(--dl-radius-pill);
    border-bottom: none;
    background: var(--dl-cinza-10);
    color: var(--dl-cinza-50);
    font-weight: 400;
    font-size: 12px;
    padding: 10px 8px;
}

.dl-tabs__nav--pill .dl-tabs__item.is-ativo {
    background: var(--dl-azul);
    color: var(--dl-branco);
    font-weight: 600;
}

.dl-tabs__painel {
    display: none;
}

.dl-tabs__painel.is-ativo {
    display: block;
}

/* Badge/Status — 134617:39: altura 18, r8, Semi Bold 8 caixa alta (ls 0.6).
   RECUSADO = D10 [DECISÃO:2026-09-23], mesmo visual do Cancelado. */
.dl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dl-espaco-1);
    height: 18px;
    padding-inline: 10px;
    border-radius: var(--dl-radius-botao);
    font-family: var(--dl-fonte);
    font-size: var(--dl-body8-tamanho);
    font-weight: var(--dl-body8-bold-peso);
    line-height: var(--dl-body8-bold-lh);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    white-space: nowrap;
}

.dl-badge--confirmado {
    background: var(--dl-sucesso-claro);
    color: var(--dl-sucesso);
}

.dl-badge--em-analise {
    background: var(--dl-atencao-claro);
    color: var(--dl-atencao);
}

.dl-badge--concluido {
    background: var(--dl-cinza-claro);
    color: var(--dl-azul-marinho);
}

.dl-badge--cancelado,
.dl-badge--recusado {
    background: var(--dl-erro-claro);
    color: var(--dl-erro);
}

.dl-badge__icone {
    display: block;
    width: 0.8em;
    height: 1em;
    flex-shrink: 0;
}

.dl-badge--verificado {
    height: auto;
    background: var(--dl-branco);
    color: var(--dl-azul);
    padding: 4px;
    border-radius: 50%;
}

.dl-badge--verificado svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Avatar — 134620:59: círculo 40/56/88 com iniciais brancas sobre azul claro.
   Avatar/Foto (D9 [DECISÃO:2026-09-23]): a foto cobre as iniciais, que ficam por
   baixo como fallback quando não há imagem. */
.dl-avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--dl-azul-claro);
    color: var(--dl-branco);
    line-height: 0;
}

.dl-avatar--m {
    width: 56px;
    height: 56px;
}

.dl-avatar--g {
    width: 88px;
    height: 88px;
}

.dl-avatar__iniciais {
    font-family: var(--dl-fonte);
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-bold-peso);
    line-height: var(--dl-body2-lh);
    text-transform: uppercase;
}

.dl-avatar--m .dl-avatar__iniciais {
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
}

.dl-avatar--g .dl-avatar__iniciais {
    font-size: var(--dl-h3-tamanho);
    font-weight: var(--dl-h3-peso);
    line-height: var(--dl-h3-lh);
}

/* !important: `.elementor img` é CSS fora de camada e venceria qualquer regra
   desta camada — a foto sairia quadrada e achatada (lição 13 §20). */
.dl-avatar img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover;
}

.dl-avatar--aro {
    outline: 2px solid var(--dl-azul);
}

.dl-avatar__verificado {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: var(--dl-azul);
    border-radius: 50%;
    border: 2px solid var(--dl-branco);
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dl-avatar__verificado svg {
    width: 10px;
    height: 10px;
}

.dl-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.dl-chips::-webkit-scrollbar {
    display: none;
}

/* Chip/Filtro — 134617:30: 86×25, r8 (não pílula), padding 8/16, Semi Bold 12. */
.dl-chip {
    scroll-snap-align: start;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Altura fixa: o corte de entrelinha não age em flex; 16 = padding lateral
       do Figma menos a borda de 1px, que lá é por dentro. */
    height: 25px;
    padding: 0 15px;
    border: 1px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-botao);
    background: var(--dl-branco);
    color: var(--dl-cinza-70);
    text-decoration: none;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-bold-peso);
    line-height: var(--dl-body2-lh);
    white-space: nowrap;
}

.dl-chip svg {
    width: auto;
    height: 16px;
}

/* Borda da cor do fundo em vez de sem borda: a altura não muda entre estados. */
.dl-chip--ativo {
    background: var(--dl-azul);
    border-color: var(--dl-azul);
    color: var(--dl-branco);
}

.dl-chips--sobre-azul .dl-chip {
    background: var(--dl-branco-24);
    color: var(--dl-branco);
}

.dl-chips--sobre-azul .dl-chip--ativo {
    background: var(--dl-branco);
    color: var(--dl-azul-marinho);
}

/* Sobre superfície azul o véu escuro suja: aqui a reação é clarear. */
.dl-chips--sobre-azul .dl-chip {
    --dl-hover-veu: var(--dl-branco-24);
    --dl-active-veu: var(--dl-branco-36);
}

.dl-chips--wrap {
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow-x: visible;
    gap: 5px;
    padding-bottom: 0;
}

.dl-chips--wrap .dl-chip {
    scroll-snap-align: none;
    gap: 4px;
    padding: 5px 9px;
    font-size: 12px;
    line-height: 1.4;
}

.dl-chips--wrap .dl-chip svg {
    height: 10px;
}

.dl-cat-cards {
    --dl-cat-largura: clamp(72px, calc(var(--dl-largura-shell) * 0.192), 108px);
    display: flex;

    gap: calc(var(--dl-cat-largura) * 0.0833);
    overflow-x: auto;
    scroll-snap-type: x proximity;

    scroll-padding-inline: var(--dl-respiro-lateral);
    padding-bottom: 4px;
    margin-inline: calc(var(--dl-respiro-lateral) * -1);
    padding-inline: var(--dl-respiro-lateral);
    -webkit-overflow-scrolling: touch;
}

.dl-cat-cards::-webkit-scrollbar {
    display: none;
}

/* Herdado do fork sem equivalente em 134614:8 — candidato a remoção (relatório F3). */
.dl-cat-card {
    --dl-dobra: calc(var(--dl-cat-largura) * 0.1944);
    position: relative;
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: var(--dl-cat-largura);

    aspect-ratio: 72 / 90;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    gap: calc(var(--dl-cat-largura) * 0.1667);
    padding:
        calc(var(--dl-cat-largura) * 0.25)
        calc(var(--dl-cat-largura) * 0.0972)
        0;

    background: var(--dl-branco);
    border-radius: var(--dl-radius-card);
    filter: drop-shadow(0 0 0.5px var(--dl-cinza-10));
    text-decoration: none;
    color: var(--dl-azul-marinho);
    clip-path: polygon(
        0 0,
        calc(100% - var(--dl-dobra)) 0,
        100% var(--dl-dobra),
        100% 100%,
        0 100%
    );
}

.dl-cat-card__dobra {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--dl-dobra);
    height: var(--dl-dobra);
    background: var(--dl-cinza-10);
    -webkit-mask: var(--dl-dobra-forma) center / 100% 100% no-repeat;
    mask: var(--dl-dobra-forma) center / 100% 100% no-repeat;
}

.dl-cat-card__icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(var(--dl-cat-largura) * 0.3333);
    color: var(--dl-azul);
}

.dl-cat-card__icone svg {
    width: auto;
    height: 100%;
    max-width: 100%;
}

.dl-cat-card__linha {
    width: 100%;
    border: none;
    border-top: 1px solid var(--dl-cinza-10);
    margin: 0;
}

.dl-cat-card__label {
    font-family: var(--dl-fonte);
    font-weight: 600;
    font-size: max(8px, calc(var(--dl-largura-shell) * 0.02133));
    line-height: 1.2;
    text-align: center;
    color: var(--dl-azul-marinho);
}

.dl-busca {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dl-busca__campo {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--dl-branco);
    border: 0.5px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-pill);
    padding: 0 14px;
}

.dl-busca__campo:focus-within {
    border-color: var(--dl-azul);
    box-shadow: var(--dl-foco-anel);
}

.dl-busca__campo input:focus,
.dl-busca__campo input:focus-visible,
.dl-busca__campo button.dl-busca__local-texto:focus,
.dl-busca__campo button.dl-busca__local-texto:focus-visible {
    outline: none;
    box-shadow: none;
}

.dl-busca__campo svg {
    width: 18px;
    height: 18px;
    color: var(--dl-azul);
    flex-shrink: 0;
}

.dl-busca__campo input,
.dl-busca__campo button.dl-busca__local-texto {
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--dl-fonte);
    font-size: 14px;
    color: var(--dl-azul-marinho);
    width: 100%;
    /* A barra é do fork (sem desenho em alt 1): o campo inteiro é o alvo, 44 de altura. */
    height: 44px;
    text-align: left;
    cursor: pointer;
    padding: 0;
}

.dl-busca__campo input::placeholder,
.dl-busca__local-texto {
    color: var(--dl-cinza-50);
}

.dl-busca__submit {
    width: 100%;
    margin-right: -16px;
}

body.dl-scroll-travado {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

.dl-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
}

.dl-modal.is-aberto {
    display: block;
}

.dl-modal__fundo {
    position: absolute;
    inset: 0;
    background: var(--dl-overlay);

    overscroll-behavior: none;
    touch-action: none;
}

.dl-modal__conteudo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    width: var(--dl-largura-conteudo);
    max-width: calc(100% - var(--dl-respiro-lateral) * 2);
    max-height: 80vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--dl-branco);
    border-radius: var(--dl-radius-card);
    padding: 20px;
}

.dl-modal__titulo {
    font-family: var(--dl-fonte);
    font-size: var(--dl-h3-tamanho);
    margin: 0 0 16px;
}

.dl-modal__fechar {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--dl-cinza-50);
    cursor: pointer;
}

/* Ícone/Fechar de 22 (Modal/Info) num alvo de toque de 36. */
.dl-modal__fechar .dl-icone {
    width: 22px;
    height: 22px;
    pointer-events: none;
}

@media (hover: hover) {
    .dl-modal__fechar:hover {
        background: var(--dl-cinza-claro);
    }
}

.dl-modal--confirmar .dl-modal__conteudo {
    text-align: center;
}

.dl-modal--confirmar .dl-modal__titulo {
    margin: 0 0 8px;
    padding-inline: 24px;
}

/* Entrada do modal centrado (confirmação e localização; a gaveta desliza à
   parte): .is-aberto tira o display:none e a animação recomeça a cada
   abertura, sem JS. O fundo escurece enquanto a
   caixa sobe um pouco e cresce com a mola (leve passada do tamanho final);
   a opacidade vai à parte, em curva sem mola. Só `from` + `backwards`: o
   estado final é o da própria regra (translate -50% da centralização). */
@keyframes dl-modal-fundo-entra {
    from {
        opacity: 0;
    }
}

@keyframes dl-modal-caixa-entra {
    from {
        transform: translate(-50%, calc(-50% + 16px)) scale(0.92);
    }
}

@keyframes dl-modal-caixa-surge {
    from {
        opacity: 0;
    }
}

.dl-modal:not(.dl-drawer).is-aberto .dl-modal__fundo {
    animation: dl-modal-fundo-entra var(--dl-dur-base) var(--dl-ease-saida) backwards;
}

.dl-modal:not(.dl-drawer).is-aberto .dl-modal__conteudo {
    animation:
        dl-modal-caixa-entra var(--dl-dur-lenta) var(--dl-ease-mola) backwards,
        dl-modal-caixa-surge var(--dl-dur-base) var(--dl-ease-saida) backwards;
}

@media (prefers-reduced-motion: reduce) {
    .dl-modal:not(.dl-drawer).is-aberto .dl-modal__conteudo {
        animation: dl-modal-caixa-surge var(--dl-dur-rapida) linear backwards;
    }
}

.dl-modal__texto {
    margin: 0;
    color: var(--dl-cinza-70);
}

.dl-modal__texto[hidden] {
    display: none;
}

.dl-modal__slot:empty {
    display: none;
}

.dl-modal__slot {
    margin-top: 16px;
    text-align: left;
}

.dl-modal__slot img {
    width: 100%;
    border-radius: var(--dl-radius-card);
}

.dl-modal__acoes-excluir {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.dl-modal__acoes-excluir .dl-botao {
    flex: 1;
}

.dl-cancelar-motivo {
    margin-top: 18px;
}

.dl-cancelar-motivo .dl-campo + .dl-campo {
    margin-top: 12px;
}

.dl-cancelar-motivo .dl-campo__select,
.dl-cancelar-motivo .dl-campo__textarea {
    border: 1px solid var(--dl-cinza-30);
}

.dl-cancelar-motivo .dl-campo__textarea {
    min-height: 12dvh;
    max-height: 20dvh;
    resize: none;
}

.dl-drawer-cancelar .dl-drawer__rodape {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dl-drawer-cancelar .dl-drawer__rodape .dl-botao {
    width: 100%;
    padding: 14px;
    text-align: center;
}

.dl-drawer .dl-drawer__painel {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    transition: transform var(--dl-dur-lenta) var(--dl-ease-saida);
}

.dl-drawer.is-aberto.is-animando .dl-drawer__painel {
    transform: translateX(0);
}

/* Folha inferior (bottom sheet) — a forma do Modal/Info 134624:275: raios
   20/20/0/0, alça 44×4 e a única sombra do DS. Uso: UI::drawer([...
   'classe' => 'dl-drawer--folha']). Classe repetida para vencer a regra
   lateral por especificidade, não pela ordem do arquivo. */
.dl-drawer--folha.dl-drawer--folha .dl-drawer__painel {
    top: auto;
    bottom: 0;
    height: auto;
    max-height: 85dvh;
    transform: translateY(100%);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--dl-sombra-folha);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.dl-drawer--folha.dl-drawer--folha.is-aberto.is-animando .dl-drawer__painel {
    transform: translateY(0);
}

.dl-drawer--folha .dl-drawer__corpo {
    flex: 0 1 auto;
}

/* Na folha, fechar é arrastar a alça, tocar no fundo ou Esc. */
.dl-drawer--folha .dl-drawer__fechar {
    display: none;
}

/* A alça é o cabeçalho: sem touch-action o navegador trata o gesto como scroll. */
.dl-drawer--folha .dl-drawer__cabecalho {
    position: relative;
    padding-top: 24px;
    touch-action: none;
    cursor: grab;
}

.dl-drawer--folha .dl-drawer__cabecalho:active {
    cursor: grabbing;
}

.dl-drawer--folha .dl-drawer__painel.esta-arrastando {
    transition: none;
}

.dl-drawer--folha .dl-drawer__cabecalho::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--dl-cinza-10);
}

/* Página como folha — abaixo de 1024 a página-modal (Modal_Pagina, docs/18 §10)
   abre aqui, num <iframe>, em vez de navegar (pedido do usuário em 02/10). Mais
   alta que as outras folhas: é uma tela inteira. O título só aparece quando a
   página não mostra o próprio (dl-ui.js deixa o h3 vazio). */
.dl-folha-pagina.dl-drawer--folha.dl-drawer--folha .dl-drawer__painel {
    max-height: 92dvh;
}

.dl-folha-pagina .dl-drawer__cabecalho:has(.dl-drawer__titulo:empty) {
    padding-bottom: 0;
}

.dl-folha-pagina .dl-drawer__titulo:empty {
    display: none;
}

.dl-folha-pagina .dl-modal-pagina__quadro {
    display: block;
    flex: none;
    width: 100%;
    height: 0;
    border: 0;
    background: transparent;
}

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

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

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

.dl-folha-pagina.is-carregando .dl-modal-pagina__carregando {
    display: grid;
    flex: 1;
    place-items: center;
}

.dl-folha-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-folha-pagina-gira 0.8s linear infinite;
}

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

/* Modal da página aberto por cima (dentro do quadro): o véu dele não alcança a
   alça, que mora fora do <iframe>. Ela recebe o mesmo véu (dl-ui.js marca
   .is-sobreposto e a torna inert). */
.dl-folha-pagina .dl-drawer__cabecalho::after {
    content: "";
    position: absolute;
    inset: 0 0 -1px;
    background: var(--dl-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dl-dur-base) var(--dl-ease-saida);
}

.dl-folha-pagina.is-sobreposto .dl-drawer__cabecalho::after {
    opacity: 1;
}

/* A página dentro do quadro: sem o header do app nem o rodapé — a folha é a
   moldura, e fechar é pela alça. */
body.dl-pagina-modal--embutida :is(.dl-header, .dl-footer) {
    display: none;
}

/* 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;
}

/* Modal/Info: alça, título H3 + Fechar, apoio, lista de ✓ e "Entendi" —
   coluna com gap 20, padding 14/24/28/24 → 375×324. */
.dl-drawer--info.dl-drawer--folha .dl-drawer__painel {
    gap: var(--dl-espaco-5);
    padding: 14px var(--dl-espaco-6) calc(28px + env(safe-area-inset-bottom, 0px));
}

.dl-drawer--info.dl-drawer--folha .dl-drawer__painel::before {
    content: "";
    flex-shrink: 0;
    align-self: center;
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--dl-cinza-10);
}

.dl-drawer--info.dl-drawer--folha .dl-drawer__cabecalho {
    padding: 0;
    border: 0;
}

.dl-drawer--info.dl-drawer--folha .dl-drawer__cabecalho::before {
    content: none;
}

.dl-drawer--info.dl-drawer--folha .dl-drawer__fechar {
    display: grid;
    width: 22px;
    height: 22px;
}

.dl-drawer--info .dl-drawer__titulo {
    font-size: var(--dl-h3-tamanho);
    font-weight: var(--dl-h3-peso);
    line-height: var(--dl-h3-lh);
    color: var(--dl-azul-marinho);
}

/* Lista longa (a Pesada de 134834:2889) passa da altura da folha: o corpo rola,
   título e "Entendi" ficam. */
.dl-drawer--info .dl-drawer__corpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--dl-espaco-5);
    min-height: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.dl-drawer--info .dl-drawer__rodape {
    padding: 0;
    border: 0;
}

/* UI::modal_confirmar( [ 'folha' => true ] ): as peças do diálogo de confirmação
   dentro da folha — o gap 20 do painel, do corpo e do slot faz o espaçamento. */
.dl-drawer--confirmar .dl-modal__slot:not(:empty) {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-5);
}

.dl-drawer--confirmar .dl-modal__slot,
.dl-drawer--confirmar .dl-modal__slot > * {
    margin-top: 0;
}

/* Voltar em cima (botão cheio) e a ação destrutiva embaixo, como link vermelho
   — o link de texto do DS (o "Reportar Problema") na cor de erro, alvo de 44. */
.dl-modal__acoes-folha {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-2);
}

.dl-modal__acoes-folha .dl-botao {
    width: 100%;
}

.dl-modal__acao-link {
    align-self: center;
    min-height: 44px;
    padding: 0 var(--dl-espaco-3);
    border: 0;
    background: none;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-erro);
    text-decoration: underline;
    cursor: pointer;
}

@media (hover: hover) {
    .dl-modal__acao-link:hover {
        color: var(--dl-erro-hover);
    }
}

.dl-modal__acao-link:active {
    color: var(--dl-erro-active);
}

.dl-modal__acao-link:disabled {
    opacity: 0.5;
    cursor: default;
}

.dl-drawer-info__apoio {
    margin: 0;
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-cinza-50);
}

.dl-drawer-info__lista {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dl-drawer-info__lista li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 18px;
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-70);
}

.dl-drawer-info__lista .dl-icone {
    width: 18px;
    height: 18px;
    color: var(--dl-sucesso);
}

.dl-origem-foto {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dl-origem-foto__opcao {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    background: var(--dl-branco);
    border: 1px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-card);
    text-align: left;
    cursor: pointer;
    font-family: var(--dl-fonte);
    color: var(--dl-azul-marinho);
}

.dl-origem-foto__opcao:focus-visible {
    border-color: var(--dl-azul);
}

@media (hover: hover) {
    .dl-origem-foto__opcao:hover {
        border-color: var(--dl-azul);
    }
}

.dl-origem-foto__icone {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--dl-azul);
    /* Branco sobre o azul [DECISÃO:2026-09-28]: o azul-marinho sumia no círculo. */
    color: var(--dl-branco);
}

.dl-origem-foto__icone svg {
    width: 22px;
    height: 22px;
}

.dl-origem-foto__texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dl-origem-foto__texto strong {
    font-size: 15px;
    font-weight: 600;
}

.dl-origem-foto__texto small {
    font-size: 12px;
    color: var(--dl-cinza-50);
}

.dl-camera__palco {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--dl-cinza-90);
    border-radius: var(--dl-radius-card);
    overflow: hidden;
}

@media (max-width: 1023px) {
    .dl-drawer--camera.dl-drawer--camera.dl-drawer--camera .dl-drawer__painel {
        top: 0;
        bottom: 0;
        height: 100%;
        max-height: none;
        border-radius: 0;
        background: var(--dl-cinza-90);
        padding-bottom: 0;
    }

    .dl-drawer--camera .dl-camera,
    .dl-drawer--camera .dl-drawer__corpo {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0;
    }

    .dl-drawer--camera .dl-camera__palco {
        flex: 1 1 auto;
        aspect-ratio: auto;
        min-height: 0;
        border-radius: 0;
    }

    .dl-drawer--camera .dl-drawer__cabecalho,
    .dl-drawer--camera .dl-drawer__rodape {
        background: var(--dl-cinza-90);
        border: 0;
        color: var(--dl-branco);
    }

    .dl-drawer--camera.dl-drawer--camera .dl-drawer__cabecalho {
        padding-top: calc(12px + env(safe-area-inset-top, 0px));
        touch-action: auto;
        cursor: auto;
    }

    .dl-drawer--camera .dl-drawer__cabecalho::before {
        content: none;
    }

    .dl-drawer--camera.dl-drawer--camera .dl-drawer__fechar {
        display: grid;
        color: var(--dl-branco);
    }
}

.dl-camera__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dl-camera[data-lado="user"] .dl-camera__video {
    transform: scaleX(-1);
}

.dl-camera__virar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--dl-cinza-30);
    border-radius: 50%;
    background: var(--dl-branco);
    color: var(--dl-cinza-90);
    cursor: pointer;
}

.dl-camera__virar svg {
    width: 20px;
    height: 20px;
}

.dl-camera__virar:active {
    transform: scale(0.97);
}

.dl-camera__aviso {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--dl-branco);
}

.dl-camera.is-pronta .dl-camera__aviso {
    display: none;
}

.dl-drawer--camera .dl-drawer__rodape {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dl-drawer--camera [data-dl-camera-capturar] {
    display: flex;
    flex: 1 1 auto;
    width: auto;
}

.dl-drawer .dl-modal__fundo {
    opacity: 0;
    transition: opacity var(--dl-dur-lenta) var(--dl-ease-saida);
}

.dl-drawer.is-aberto.is-animando .dl-modal__fundo {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .dl-drawer .dl-drawer__painel,
    .dl-drawer .dl-modal__fundo {
        transition: none;
    }
}

.dl-drawer__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
    padding: 20px 20px 12px;
    border-bottom: 1px solid var(--dl-cinza-10);
}

.dl-drawer__titulo {
    margin: 0;
    font-family: var(--dl-fonte);
    font-size: var(--dl-h3-tamanho);
}

.dl-drawer .dl-drawer__fechar {
    position: static;
    flex-shrink: 0;
}

.dl-drawer__corpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;

    overscroll-behavior: contain;
    padding: 16px 20px 24px;
}

.dl-drawer__rodape {
    flex-shrink: 0;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--dl-cinza-10);
}

.dl-drawer--esquerda:not(.is-animando) .dl-drawer__painel {
    transform: translateX(-100%);
}

.dl-modal--local .dl-modal__conteudo {
    overflow: visible;
}

.dl-local__apoio {
    margin: 0 0 16px;
    font-family: var(--dl-fonte);
    font-size: 13px;
    line-height: 1.5;
    color: var(--dl-azul-marinho);
}

/* Tab bar — Component 18–21 (134608:6935…6938) como UM componente com item
   ativo (D6 [DECISÃO:2026-09-23]). Fork de UI::bottom_nav. No Figma é 334×58;
   aqui segue o trilho do conteúdo (≈89,3%), que em 375 dá 335 (D6).
   fixed e não sticky: sticky no fim do <body> nunca gruda. */
.dl-bottom-nav {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 500;
    width: var(--dl-largura-conteudo);
    height: 58px;
}

/* Teclado aberto: a barra cobriria o campo em foco (classe posta pelo JS). */
body.dl-teclado-aberto .dl-bottom-nav {
    display: none;
}

.dl-bottom-nav__lista {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 100%;
    margin: 0;
    padding: var(--dl-espaco-1);
    list-style: none;
    background: var(--dl-azul);
    border-radius: var(--dl-radius-card);
}

/* flex-basis 0: os 4 itens repartem a barra por igual em qualquer largura. */
.dl-bottom-nav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}

.dl-bottom-nav__link {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    /* Concêntrico à barra: raio dela menos o padding — senão sobra azul nas quinas. */
    border-radius: calc(var(--dl-radius-card) - var(--dl-espaco-1));
    color: var(--dl-branco);
    text-decoration: none;
    transition: background-color var(--dl-dur-rapida) var(--dl-ease-saida), color var(--dl-dur-rapida) var(--dl-ease-saida);
}

/* Glifos próprios da tab (preenchidos, 20 de altura), não os de traço de 134615:2. */
.dl-bottom-nav__icone {
    display: block;
    width: auto;
    height: 20px;
    flex: none;
}

.dl-bottom-nav__badge {
    position: absolute;
    top: 12px;
    left: 50%;
    margin-left: 5px;
    width: 8px;
    height: 8px;
    background: var(--dl-branco);
    border-radius: var(--dl-radius-pill);
}

.dl-bottom-nav__item--ativo .dl-bottom-nav__link {
    background: var(--dl-branco);
    color: var(--dl-azul);
}

.dl-bottom-nav__item--ativo .dl-bottom-nav__badge {
    background: var(--dl-azul);
}

/* Sobre o azul o véu escuro global suja: aqui a reação é clarear. */
@media (hover: hover) {
    .dl-bottom-nav__item:not(.dl-bottom-nav__item--ativo) .dl-bottom-nav__link:hover {
        background: var(--dl-branco-24);
    }
}

.dl-bottom-nav__item:not(.dl-bottom-nav__item--ativo) .dl-bottom-nav__link:active {
    background: var(--dl-branco-36);
}

/* Anel marinho: a barra já é azul e o anel padrão sumiria nela. */
.dl-bottom-nav__link:focus-visible {
    outline: none;
    box-shadow: var(--dl-foco-anel-escuro);
}

/* A barra é fixa e cobre o fim da página: reserva 58 + 12 de respiro dos dois lados.
   !important: o body{padding:0} inline do global-styles do WP fica fora de camada e
   venceria qualquer regra em @layer (13 §20) — sem isto o fim de toda tela some sob a barra. */
body:has(.dl-bottom-nav) {
    padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
}

body.dl-teclado-aberto:has(.dl-bottom-nav) {
    padding-bottom: 0 !important;
}

/* Notificação/Item — 134623:231: 335×89 r12, padding 18, gap 14.
   Não lida: fundo Light Grey, círculo azul e ponto azul; lida: fundo branco,
   círculo cinza, sem ponto. */
.dl-notificacao {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 89px;
    padding: 17px;
    background: var(--dl-cinza-claro);
    border: 1px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-card);
}

.dl-notificacao__icone {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--dl-azul);
    color: var(--dl-branco);
}

.dl-notificacao__icone .dl-icone {
    width: 18px;
    height: 18px;
}

.dl-notificacao__corpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    /* O ponto de não lida ocupa o canto: o texto não passa por baixo dele. */
    padding-right: var(--dl-espaco-4);
}

.dl-notificacao__marcador {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dl-azul);
}

.dl-notificacao__titulo,
.dl-notificacao__texto {
    margin: 0;
    font-family: var(--dl-fonte);
}

.dl-notificacao__titulo {
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul-marinho);
}

.dl-notificacao__texto {
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
}

.dl-notificacao__tempo {
    font-size: var(--dl-body8-tamanho);
    font-weight: var(--dl-body8-peso);
    line-height: var(--dl-body8-lh);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--dl-cinza-30);
}

.dl-notificacao--lida {
    background: var(--dl-branco);
}

.dl-notificacao--lida .dl-notificacao__icone {
    background: var(--dl-cinza-10);
    color: var(--dl-cinza-50);
}

.dl-notificacao--lida .dl-notificacao__marcador {
    display: none;
}

.dl-notificacao--lida .dl-notificacao__corpo {
    padding-right: 0;
}

.dl-notificacao--nova {
    animation: dl-notificacao-entra 0.32s ease-out;
}

@keyframes dl-notificacao-entra {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dl-notificacao--nova {
        animation: none;
    }
}

.dl-avaliacao {
    overflow: hidden;
    padding: 0;

    box-shadow: none;
}

.dl-avaliacao .dl-estrelas__icone {
    width: 11px;
    height: 11px;
}

.dl-avaliacao__cabecalho {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--dl-cinza-10);
    padding: 8px 16px;
    border-radius: var(--dl-radius-card) var(--dl-radius-card) 0 0;
}

.dl-avaliacao__cabecalho .dl-avatar {
    border: 1px solid var(--dl-azul);
    border-radius: 50%;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.dl-avaliacao__cabecalho-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dl-avaliacao__nome {
    font-weight: 600;
    font-size: 12px;
    line-height: 1.2;
    color: var(--dl-cinza-70);
    display: block;
}

.dl-avaliacao__local {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    line-height: 1.5;
    color: var(--dl-cinza-50);
}

.dl-avaliacao__local-icone {
    width: 7px;
    height: 8px;
    flex-shrink: 0;
    color: var(--dl-azul);
}

/* 12 entre os botões de 32 (sem desenho no Figma): cada um ganha 44 de toque sem que
   um pseudo cubra o outro. */
.dl-avaliacao__acoes {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.dl-avaliacao__acao {
    width: 32px;
    height: 32px;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--dl-branco);
}

.dl-aval-editar {
    background: var(--dl-azul);
    border-radius: 50%;
}

.dl-aval-editar svg {
    width: 14px;
    height: 14px;
}

.dl-aval-excluir {
    background: var(--dl-erro);
    border-radius: 16px;
}

.dl-aval-excluir svg {
    width: 14px;
    height: 16px;
}

.dl-avaliacao__corpo {
    padding: 16px;
    background: var(--dl-branco);
    border: 0.5px solid var(--dl-cinza-10);
    border-top: 0;
    border-radius: 0 0 var(--dl-radius-card) var(--dl-radius-card);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dl-avaliacao--publica .dl-avaliacao__corpo {
    border-top: 0.5px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-card);
}

.dl-avaliacao__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.dl-avaliacao__autor {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    color: var(--dl-cinza-70);
}

.dl-avaliacao__data {
    font-size: 12px;
    color: var(--dl-cinza-50);
    white-space: nowrap;
}

.dl-avaliacao__identidade {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.dl-avaliacao--propria .dl-avaliacao__topo {
    align-items: flex-start;
}

.dl-badge--propria {
    background: var(--dl-azul);
    color: var(--dl-branco);
    font-size: 10px;
    padding: 3px 8px;
}

/* B47 [CLIENTE:2026-09-29] form 9.2 [TELA-NOVA:2026-10-01]: o comentário aprovado, em
   Body 2 como o texto dos cartões do pós-serviço. */
.dl-avaliacao__comentario {
    margin: 0;
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-90);
    overflow-wrap: anywhere;
}

.dl-avaliacao__fotos {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    overflow-x: auto;
}

.dl-avaliacao__fotos img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.dl-status--pendente {
    background: var(--dl-cinza-50);
}

.dl-status--aceita {
    background: var(--dl-azul);
}

.dl-status--recusada {
    background: var(--dl-cinza-30);
}

/* Stepper — 134619:105: 3 barras de 4px (r2, gap 8) + "ETAPA n DE 3".
   Fork do progresso de UI::form_multipassos: a barra única com preenchimento
   vira uma barra por etapa, marcada com .is-feita. */
.dl-multipassos__progresso {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: var(--dl-espaco-5);
}

.dl-multipassos__progresso-barras {
    display: flex;
    gap: var(--dl-espaco-2);
}

.dl-multipassos__progresso-barra {
    flex: 1 1 0;
    height: 4px;
    border-radius: 2px;
    background: var(--dl-cinza-10);
    transition: background-color var(--dl-dur-base) var(--dl-ease-saida);
}

.dl-multipassos__progresso-barra.is-feita {
    background: var(--dl-azul);
}

.dl-multipassos__progresso-texto {
    display: block;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body8-tamanho);
    font-weight: var(--dl-body8-bold-peso);
    line-height: var(--dl-body8-bold-lh);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--dl-cinza-50);
}

.dl-passo {
    background: var(--dl-branco);
    border: none;
    margin: 0 0 16px;
    padding: 18px;
    border-radius: var(--dl-radius-card);
}

.dl-passo[hidden] {
    display: none;
}

.dl-passo__legenda {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--dl-fonte);
    font-weight: 600;
    font-size: 16px;
    color: var(--dl-cinza-90);
    margin-bottom: 14px;
    padding: 0;
}

.dl-passo__numero {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dl-azul);
    color: var(--dl-azul-marinho);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.dl-multipassos__acoes {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.dl-multipassos__acoes .dl-botao {
    flex: 1;
}

.dl-form-pagina-unica__acoes {
    margin-top: 8px;
    text-align: center;
}

.dl-form-pagina-unica__acoes .dl-botao {
    width: 100%;
}

.dl-form-pagina-unica__disclaimer {
    margin: 14px 0 0;
    font-size: 12px;
    color: var(--dl-cinza-50);
    text-align: center;
}

/* Campo/Input — 134616:22: rótulo (8px caixa alta) + campo 335×52 r12, gap 8
   → 66. Erro: + linha de ajuda → 80 (o layout reserva os 14px). */
.dl-campo {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-2);
    margin-bottom: var(--dl-espaco-4);
}

.dl-campo__label {
    display: block;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body8-tamanho);
    font-weight: var(--dl-body8-bold-peso);
    line-height: var(--dl-body8-bold-lh);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--dl-cinza-70);
}

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

.dl-campo__input,
.dl-campo__select,
.dl-campo__textarea {
    width: 100%;
    box-sizing: border-box;
    /* Altura fixa: altura de campo não acompanha largura. */
    height: 52px;
    padding-block: 0;
    padding-inline: 14px;
    border: 1.5px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-card);
    background: var(--dl-branco);
    font-family: var(--dl-fonte);
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-cinza-90);
}

.dl-campo__textarea {
    height: auto;
    min-height: 96px;
    padding-block: var(--dl-espaco-3);
    resize: vertical;
}

/* <select> não tem ::after: a seta (Ícone/Baixo) mora na caixa em volta,
   pintada por token em vez de hex dentro do data-URI. */
.dl-campo__select-caixa {
    position: relative;
}

.dl-campo__select-caixa::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background-color: var(--dl-cinza-30);
    -webkit-mask: var(--dl-icone-baixo) center / contain no-repeat;
    mask: var(--dl-icone-baixo) center / contain no-repeat;
    pointer-events: none;
}

.dl-campo__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 48px;
}

.dl-campo__select::-ms-expand {
    display: none;
}

.dl-campo__input::placeholder,
.dl-campo__textarea::placeholder {
    color: var(--dl-cinza-30);
}

/* Foco = só a borda azul (variante Foco 134616:7); .is-foco força o estado no catálogo. */
.dl-campo__input:focus,
.dl-campo__select:focus,
.dl-campo__textarea:focus,
.dl-campo__input.is-foco {
    outline: none;
    border-color: var(--dl-azul);
    box-shadow: none;
}

.dl-campo--erro :is(.dl-campo__input, .dl-campo__select, .dl-campo__textarea),
:is(.dl-campo__input, .dl-campo__select, .dl-campo__textarea)[aria-invalid="true"] {
    border-color: var(--dl-erro);
}

/* Seletor segmentado — "Tipo de moradia" de 134834:3094: rótulo a 16, opções
   lado a lado com gap 2, 42 de altura, r12; a escolhida em azul, as outras em
   azul claro a 12%. Por baixo, radios nativos: setas do teclado e required
   funcionam sem JS. */
.dl-segmentado {
    gap: var(--dl-espaco-4);
}

/* 8 entre as opções [DECISÃO:2026-09-28]: a 2px (134834:3094) os três botões
   liam como uma barra só. */
.dl-segmentado__opcoes {
    display: flex;
    gap: var(--dl-espaco-2);
}

.dl-segmentado__opcao {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: grid;
    place-items: center;
    height: 42px;
    box-sizing: border-box;
    padding: 0 var(--dl-espaco-2);
    border: 1.5px solid transparent;
    border-radius: var(--dl-radius-card);
    background: color-mix(in srgb, var(--dl-azul-claro) 12%, transparent);
    color: var(--dl-azul-claro);
    font-family: var(--dl-fonte);
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-bold-peso);
    line-height: var(--dl-body2-lh);
    text-align: center;
    cursor: pointer;
    transition: background-color var(--dl-dur-rapida) var(--dl-ease-saida), color var(--dl-dur-rapida) var(--dl-ease-saida);
}

.dl-segmentado__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.dl-segmentado__opcao:has(.dl-segmentado__radio:checked) {
    background: var(--dl-azul);
    color: var(--dl-branco);
}

.dl-segmentado__opcao:has(.dl-segmentado__radio:focus-visible) {
    box-shadow: var(--dl-foco-anel);
}

.dl-segmentado__opcoes:has([aria-invalid="true"]) .dl-segmentado__opcao {
    border-color: var(--dl-erro);
}

@media (prefers-reduced-motion: reduce) {
    .dl-segmentado__opcao {
        transition: none;
    }
}

.dl-campo__input.is-travado,
.dl-campo__select.is-travado {
    background: var(--dl-cinza-10);
    color: var(--dl-cinza-70);
    cursor: default;
}

/* Preenchido pelo CEP: continua no FormData, mas não abre lista nem mostra seta. */
.dl-campo__select.is-travado {
    pointer-events: none;
    padding-right: 14px;
}

.dl-campo__select-caixa:has(.is-travado)::after {
    display: none;
}

.dl-localizacao {
    position: relative;
}

.dl-localizacao.is-carregando [data-dl-loc="cep"] {
    opacity: 0.7;
}

.dl-localizacao.is-carregando::after {
    content: "";
    position: absolute;
    top: 38px;
    right: 16px;
    width: 18px;
    height: 18px;
    border: 2px solid var(--dl-azul);
    border-top-color: transparent;
    border-radius: 50%;
    animation: dl-girando 0.7s linear infinite;
}

@keyframes dl-girando {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dl-localizacao.is-carregando::after {
        animation: none;
    }
}

.dl-carregar-mais[hidden],
.dl-carregar-mais > button[hidden] {
    display: none;
}

.dl-carregar-mais {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-top: 24px;
}

.dl-carregar-mais__spinner {
    display: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--dl-azul);
    border-top-color: transparent;
    border-radius: 50%;
    animation: dl-girando 0.7s linear infinite;
}

.dl-carregar-mais.is-carregando > a,
.dl-carregar-mais.is-carregando > button {
    display: none;
}

.dl-carregar-mais.is-carregando .dl-carregar-mais__spinner {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .dl-carregar-mais__spinner {
        animation: none;
    }
}

.dl-campo__senha {
    position: relative;
}

.dl-campo__senha .dl-campo__input {
    padding-right: 48px;
}

.dl-campo__olho {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;

    color: var(--dl-cinza-30);
    cursor: pointer;
    line-height: 0;
    transition: color var(--dl-dur-base) var(--dl-ease-saida);
}

.dl-campo__olho-icone {
    display: block;
    width: 100%;
    height: 100%;

    pointer-events: none;
}

.dl-campo__olho-icone[hidden] {
    display: none !important;
}

@media (hover: hover) {
    .dl-campo__olho:hover {
        color: var(--dl-cinza-50);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dl-campo__olho {
        transition: none;
    }
}

.dl-campo__com-icone {
    position: relative;
}

.dl-campo__com-icone .dl-campo__input {
    padding-right: 48px;
}

.dl-campo__icone {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    display: block;
    width: 24px;
    height: 24px;
    color: var(--dl-cinza-30);
    pointer-events: none;
}

.dl-campo__icone-botao {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--dl-cinza-30);
    cursor: pointer;
}

@media (hover: hover) {
    .dl-campo__icone-botao:hover {
        color: var(--dl-cinza-50);
    }
}

.dl-campo__icone-botao .dl-campo__icone {
    position: static;
    transform: none;

    width: 14px;
    height: 15px;
    pointer-events: none;
}

.dl-drawer--calendario .dl-drawer__corpo {
    padding-bottom: 16px;
}

/* Calendário/Mês — 134624:184 (335×342 r12, padding 18, gap 16) e
   Calendário/Dia — 134620:52 (41×41 r10). Fork do datepicker sem libs do pc
   (initCampoData do JS de UI do paginas-conecta): a mesma grade serve à gaveta e à tela de agendar. */
.dl-calendario {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-4);
    padding: 17px;
    background: var(--dl-branco);
    border: 1px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-card);
}

/* Dentro da gaveta o painel já é a moldura. */
.dl-drawer--calendario .dl-calendario {
    padding: 0;
    border: 0;
}

/* 31px: no Figma o título quebra em duas linhas e o cabeçalho mede 31; aqui o
   título cabe numa linha e a altura mínima preserva o ritmo vertical do mês. */
.dl-calendario__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 31px;
}

/* Nas visões de mês e ano o título é <button> que sobe um nível; na de anos, <span>. */
.dl-calendario__titulo {
    flex: 1;
    padding: 0;
    border: none;
    background: transparent;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul-marinho);
    text-align: center;
    text-transform: capitalize;
}

button.dl-calendario__titulo {
    cursor: pointer;
}

.dl-calendario__nav {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 31px;
    height: 31px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--dl-azul);
    cursor: pointer;
}

.dl-calendario__nav:first-child {
    justify-items: start;
}

.dl-calendario__nav:last-child {
    justify-items: end;
}

/* O clique tem que chegar no <button>, nunca no <svg>. */
.dl-calendario__nav .dl-icone {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.dl-calendario__semana,
.dl-calendario__grade {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--dl-espaco-2);
}

.dl-calendario__semana span {
    font-family: var(--dl-fonte);
    font-size: var(--dl-body8-tamanho);
    font-weight: var(--dl-body8-bold-peso);
    line-height: var(--dl-body8-bold-lh);
    letter-spacing: 0.6px;
    text-align: center;
    text-transform: uppercase;
    color: var(--dl-cinza-30);
}

/* Meses e anos: 4 colunas — rótulos são palavras, não cabem em 7. */
.dl-calendario__grade--meses {
    grid-template-columns: repeat(4, 1fr);
}

.dl-calendario__celula {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 41px;
    padding: 0 var(--dl-espaco-1);
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-bold-peso);
    color: var(--dl-cinza-90);
    cursor: pointer;
    text-transform: capitalize;
}

.dl-calendario__celula.is-selecionado {
    background: var(--dl-azul);
    color: var(--dl-branco);
}

/* Dia: Padrão (fora de oferta) · Disponível · Selecionado · Indisponível.
   Na grade a célula preenche a coluna (35,86 no Figma); avulsa é 41×41. */
.dl-calendario__dia {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 41px;
    height: 41px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-bold-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-90);
    cursor: default;
}

.dl-calendario__grade .dl-calendario__dia {
    width: auto;
}

.dl-calendario__dia--disponivel {
    background: var(--dl-branco);
    border-color: var(--dl-azul-claro);
    color: var(--dl-azul);
    cursor: pointer;
}

.dl-calendario__dia.is-selecionado {
    background: var(--dl-azul);
    border-color: var(--dl-azul);
    color: var(--dl-branco);
}

.dl-calendario__dia--indisponivel,
.dl-calendario__dia--fora {
    color: var(--dl-cinza-30);
    cursor: default;
}

.dl-calendario__dia--hoje {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.dl-campo__checkbox-linha {
    display: flex;

    align-items: flex-start;
    gap: 8px;
}

.dl-campo__checkbox-linha .dl-campo__checkbox {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--dl-cinza-30);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

/* Check por máscara (Ícone/Check): herda a cor do token, sem hex no data-URI. */
.dl-campo__checkbox::after {
    content: "";
    width: 10px;
    height: 10px;
    background-color: var(--dl-branco);
    -webkit-mask: var(--dl-icone-check) center / contain no-repeat;
    mask: var(--dl-icone-check) center / contain no-repeat;
    visibility: hidden;
}

.dl-campo__checkbox:checked {
    border-color: var(--dl-azul);
    background-color: var(--dl-azul);
}

.dl-campo__checkbox:checked::after {
    visibility: visible;
}

.dl-campo__checkbox:focus-visible {
    outline: none;
    box-shadow: var(--dl-foco-anel);
}

.dl-campo__checkbox-linha .dl-campo__label {
    margin: 0 !important;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--dl-cinza-30);
    cursor: pointer;
}

/* Ajuda/erro sob o campo — Regular 8, y74 no estado Erro de 134616:17. */
.dl-campo__help {
    display: block;
    font-size: var(--dl-body8-tamanho);
    font-weight: var(--dl-body8-peso);
    line-height: var(--dl-body8-lh);
    color: var(--dl-cinza-50);
}

.dl-campo--erro .dl-campo__help {
    color: var(--dl-erro);
}

.dl-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-wrap: balance;
    padding: 48px 20px;
}

.dl-vazio > * {
    text-align: center;
}

.dl-vazio .dl-botao {
    margin-top: 20px;
}

.dl-vazio--tela {
    justify-content: center;
    min-height: 70dvh;
}

.dl-vazio__ilustracao {
    margin-bottom: 16px;
}

.dl-vazio__ilustracao svg {
    width: 96px;
    height: 96px;
}

.dl-vazio__titulo {
    font-family: var(--dl-fonte);
    font-size: var(--dl-h3-tamanho);
    color: var(--dl-cinza-90);
    margin: 0 0 6px;
}

.dl-vazio__texto {
    font-size: 13px;
    color: var(--dl-cinza-50);
    margin: 0;
}

.dl-login-necessario {
    text-align: center;
    padding: 32px var(--dl-respiro-lateral);
    margin: 20px auto;
    max-width: var(--dl-largura-conteudo);
}

.dl-login-necessario__titulo {
    font-family: var(--dl-fonte);
    font-size: var(--dl-h3-tamanho);
    margin: 0 0 8px;
}

.dl-login-necessario__texto {
    font-size: 13px;
    color: var(--dl-cinza-50);
    margin: 0 0 20px;
}

/* Botão — Botão/Primário (134608:6933 large 335×52 r12 · 134608:6934 small 139×32 r8)
   e Botão/Secundário (134614:20, contorno). Largura large = 100% do conteúdo. */
.dl-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dl-espaco-2);
    width: 100%;
    height: 52px;
    padding-block: 0;
    padding-inline: var(--dl-espaco-4);
    border: 1px solid transparent;
    border-radius: var(--dl-radius-card);
    font-family: var(--dl-fonte);
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: 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), transform var(--dl-dur-rapida) var(--dl-ease-saida);
}

/* 139 de 335 no Figma: a razão acompanha o conteúdo, não o pai imediato. */
.dl-botao--pequeno {
    width: auto;
    min-width: calc(var(--dl-largura-conteudo) * 139 / 335);
    height: 32px;
    padding-inline: var(--dl-espaco-3);
    border-radius: var(--dl-radius-botao);
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-bold-peso);
    line-height: var(--dl-body2-lh);
}

.dl-botao--primario {
    background: var(--dl-azul);
    color: var(--dl-branco);
}

.dl-botao--secundario {
    background: var(--dl-branco);
    border-color: var(--dl-azul);
    color: var(--dl-azul);
}

.dl-botao--secundario:disabled,
.dl-botao--secundario[aria-disabled="true"] {
    border-color: var(--dl-cinza-30);
    color: var(--dl-cinza-50);
    cursor: not-allowed;
}

.dl-botao--escuro {
    background: var(--dl-azul-marinho);
    color: var(--dl-branco);
}

.dl-botao--perigo {
    background: var(--dl-erro);
    color: var(--dl-branco);
}

.dl-botao--cinza {
    background: var(--dl-cinza-50);
    color: var(--dl-branco);
}

.dl-botao svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* O Figma só desenha o desabilitado do secundário; os cheios esmaecem. */
.dl-botao:not(.dl-botao--secundario):disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* No toque, afundar é o único retorno que existe. */
.dl-botao:active:not(:disabled) {
    transform: scale(0.97);
}

/* Cada variante reage na própria cor: um véu escuro comum quase não aparece
   sobre o azul saturado. */
@media (hover: hover) {
    .dl-botao--primario:hover:not(:disabled) {
        background: var(--dl-azul-hover);
    }

    .dl-botao--escuro:hover:not(:disabled) {
        background: var(--dl-azul-marinho-hover);
    }

    .dl-botao--perigo:hover:not(:disabled) {
        background: var(--dl-erro-hover);
    }

    .dl-botao--cinza:hover:not(:disabled) {
        background: var(--dl-cinza-50-hover);
    }

    .dl-botao--secundario:hover:not(:disabled) {
        background: var(--dl-cinza-claro);
    }
}

.dl-botao--primario:active:not(:disabled) {
    background: var(--dl-azul-active);
}

.dl-botao--escuro:active:not(:disabled) {
    background: var(--dl-azul-marinho-active);
}

.dl-botao--perigo:active:not(:disabled) {
    background: var(--dl-erro-active);
}

.dl-botao--cinza:active:not(:disabled) {
    background: var(--dl-cinza-50-active);
}

.dl-botao--secundario:active:not(:disabled) {
    background: var(--dl-cinza-10);
}

/* Na mesma camada da transition acima — em dl-tokens este bloco perdia. */
@media (prefers-reduced-motion: reduce) {
    .dl-botao {
        transition: none;
    }

    .dl-botao:active:not(:disabled) {
        transform: none;
    }
}

/* Toast: canal único de erro (nenhuma tela renderiza caixa de erro no HTML).
   Sem sombra, como todo componente do Figma: separa pela borda; a faixa de cor
   à esquerda é a borda inicial mais grossa. */
.toastify.dl-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    width: var(--dl-largura-conteudo);
    max-width: calc(100vw - var(--dl-respiro-lateral) * 2);
    padding: 16px 18px;
    border: 1px solid var(--dl-cinza-10);
    border-inline-start: 5px solid var(--dl-azul-marinho);
    border-radius: var(--dl-radius-card);
    background: var(--dl-branco);
    background-image: none;
    box-shadow: none;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul-marinho);
    cursor: default;
    transition-duration: var(--dl-dur-lenta);
    transition-timing-function: var(--dl-ease-saida);
}

.toastify.dl-toast--erro {
    border-inline-start-color: var(--dl-erro);
}

.toastify.dl-toast--ok {
    border-inline-start-color: var(--dl-sucesso);
}

/* Ícone por tipo sem markup extra: o texto vem do servidor com escapeMarkup. */
.toastify.dl-toast::before {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    content: "";
    background-color: currentColor;
    -webkit-mask: var(--dl-icone-mascara) center / contain no-repeat;
    mask: var(--dl-icone-mascara) center / contain no-repeat;
}

.toastify.dl-toast:not(.dl-toast--erro):not(.dl-toast--ok)::before {
    display: none;
}

.toastify.dl-toast--erro::before {
    --dl-icone-mascara: var(--dl-icone-cancelar);
    color: var(--dl-erro);
}

.toastify.dl-toast--ok::before {
    --dl-icone-mascara: var(--dl-icone-sucesso);
    color: var(--dl-sucesso);
}

.toastify.dl-toast .toast-close {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 2px;
    color: var(--dl-azul-marinho);
    font-size: 20px;
    line-height: 1;
    opacity: 0.5;
}

@media (hover: hover) {
    .toastify.dl-toast .toast-close:hover {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .toastify {
        transition: none;
    }
}

.dl-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--dl-cinza-10);
    border-radius: var(--dl-radius-card);
}

.dl-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        var(--dl-branco) 50%,
        transparent
    );
    opacity: 0.55;
    animation: dl-skeleton-brilho 1.4s ease-in-out infinite;
}

@keyframes dl-skeleton-brilho {
    100% {
        transform: translateX(100%);
    }
}

.dl-skeleton--texto {
    height: 12px;
    border-radius: 4px;
}

.dl-skeleton--texto-curto {
    width: 60%;
}

.dl-skeleton--circulo {
    border-radius: 50%;
}

.dl-skeleton-lista {
    display: contents;
}

@media (prefers-reduced-motion: reduce) {
    .dl-skeleton::after {
        animation: none;
    }
}

.dl-header__voltar-perfil {
    display: none;
}

/* ================================================================== */
/* Componentes de 134614:8 sem bloco equivalente no fork.       */
/* Origem de cada um anotada no cabeçalho do bloco.                    */
/* ================================================================== */

/* Header/Título — 134616:23 (375×52, largura cheia). Fork do header do tema do
   paginas-conecta: dois slots simétricos mantêm o título centrado mesmo com um lado vazio. */
.dl-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--dl-espaco-3);
    width: 100%;
    height: 52px;
    padding: 0 var(--dl-respiro-lateral);
    background: var(--dl-branco);
    color: var(--dl-azul-marinho);
}

.dl-header__slot {
    display: flex;
    align-items: center;
    flex: 0 0 24px;
}

.dl-header__slot--dir {
    justify-content: flex-end;
}

.dl-header__titulo {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul-marinho);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Do tamanho do ícone, encostado na borda do slot como no Figma; o alvo de 44 vem do
   ::after mais abaixo. [DECISÃO:2026-09-28] voltar 11×19 e
   compartilhar 18×20 — os 12×14 e 11×12 do Menu 134608:6932 ficaram pequenos demais. */
.dl-header__acao {
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
}

/* Lista/Item — 134619:106 (335×64 r12). Fork do item de menu do perfil [REF:paginas-conecta]. */
.dl-lista {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-2);
}

.dl-lista-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 64px;
    padding: 0 17px;
    background: var(--dl-branco);
    border: 1px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-card);
    color: var(--dl-azul-marinho);
    text-decoration: none;
}

.dl-lista-item__icone {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--dl-azul);
}

/* O Figma reduz o ícone de 24 para 20/18 sem afinar o traço: 2px na tela. */
.dl-lista-item__icone path {
    stroke-width: 2.4;
}

.dl-lista-item__rotulo {
    flex: 1;
    min-width: 0;
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-peso);
    line-height: var(--dl-body1-lh);
}

.dl-lista-item__fim {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--dl-cinza-30);
}

.dl-lista-item__fim path {
    stroke-width: 2.667;
}

/* "Sair da conta" em 134834:4246/4844: rótulo e ícone em Semântica/Erro. */
.dl-lista-item--sair,
.dl-lista-item--sair .dl-lista-item__icone {
    color: var(--dl-erro);
}

div.dl-lista-item {
    cursor: default;
}

/* Topo de 134834:4230 (cliente) e 134834:4824 (profissional): faixa de largura cheia
   colada no header, cantos de baixo 24. */
.dl-topo-azul {
    box-sizing: border-box;
    width: var(--dl-largura-shell);
    margin-inline: calc(50% - var(--dl-largura-shell) / 2);
    padding: 24px calc(var(--dl-largura-shell) * 24 / 375);
    border-radius: 0 0 24px 24px;
    background: var(--dl-azul);
}

.dl-topo-azul__titulo {
    margin: 0;
    font-family: var(--dl-fonte);
    font-size: var(--dl-h3-tamanho);
    font-weight: var(--dl-h3-peso);
    line-height: var(--dl-h3-lh);
    color: var(--dl-branco);
    text-align: center;
    overflow-wrap: anywhere;
    text-box: trim-both cap alphabetic;
}

/* 4824: degradê, 40/24/24, avatar 40 branco + nome Body Tone 1 + Editar 44×32. */
.dl-topo-azul--identificacao {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 40px;
    background: var(--dl-degrade-marca);
}

.dl-topo-azul--identificacao .dl-avatar {
    background: var(--dl-branco);
    color: var(--dl-azul-marinho);
}

.dl-topo-azul--identificacao .dl-avatar__iniciais {
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
}

.dl-topo-azul__nome {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--dl-fonte);
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-branco);
    overflow-wrap: anywhere;
}

/* 44×32 no Figma; a área de toque cresce para 44 na vertical sem mudar o desenho. */
.dl-topo-azul__editar {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 32px;
    border-radius: var(--dl-radius-botao);
    background: var(--dl-branco-16);
    color: var(--dl-branco);
}

.dl-topo-azul__editar::before {
    content: "";
    position: absolute;
    inset: -6px 0;
}

.dl-topo-azul__editar .dl-icone {
    width: 16px;
    height: 16px;
}

.dl-topo-azul__editar .dl-icone path {
    stroke-width: 3;
}

/* Aviso/Lembrete — 134617:25 (335×88 r12, padding 18, gap 14, ícone 20).
   Fork do aviso de página [REF:paginas-conecta]. Erro = D7 [DECISÃO:2026-09-23]. É lembrete fixo da tela;
   erro de ação continua saindo por toast. */
.dl-aviso {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 88px;
    padding: 18px;
    border-radius: var(--dl-radius-card);
    background: var(--dl-cinza-claro);
    color: var(--dl-azul-marinho);
}

.dl-aviso__icone {
    width: 20px;
    height: 20px;
}

.dl-aviso__texto {
    flex: 1;
    margin: 0;
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-cinza-70);
}

/* INFO — feedback/info-bg + feedback/info do RR de 134834:2869; o corpo a 70%.
   [DECISÃO:2026-09-28] todo INFO do app usa esta pele. */
.dl-aviso--info {
    background: var(--dl-info-claro);
    color: var(--dl-info);
}

.dl-aviso--info .dl-aviso__texto,
.dl-aviso--info .dl-aviso__texto strong {
    color: inherit;
}

.dl-aviso--info .dl-aviso__texto > :not(:first-child) {
    opacity: 0.7;
}

/* Atenção — feedback/warning-bg + feedback/warning do RR de 134834:3572; o corpo a 70%,
   como no INFO. */
.dl-aviso--atencao {
    background: var(--dl-aviso-atencao-claro);
    color: var(--dl-aviso-atencao);
}

.dl-aviso--atencao .dl-aviso__texto,
.dl-aviso--atencao .dl-aviso__texto strong {
    color: inherit;
}

.dl-aviso--atencao .dl-aviso__texto > :not(:first-child) {
    opacity: 0.7;
}

.dl-aviso--sucesso {
    background: var(--dl-sucesso-claro);
    color: var(--dl-sucesso);
}

.dl-aviso--erro {
    background: var(--dl-erro-claro);
    color: var(--dl-erro);
}

/* Switch — 134619:86 (48×28, bolinha 24). Fork do interruptor de
   do serviço [REF:paginas-conecta]: input nativo invisível + trilho desenhado. */
.dl-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--dl-espaco-2);
    cursor: pointer;
}

.dl-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dl-switch__trilho {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 48px;
    height: 28px;
    border-radius: var(--dl-radius-pill);
    background: var(--dl-cinza-30);
    transition: background-color var(--dl-dur-base) var(--dl-ease-saida);
}

.dl-switch__trilho::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--dl-branco);
    transition: transform var(--dl-dur-lenta) var(--dl-ease-mola);
}

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

.dl-switch input:checked + .dl-switch__trilho::after {
    transform: translateX(20px);
}

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

.dl-switch input:disabled + .dl-switch__trilho {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .dl-switch__trilho,
    .dl-switch__trilho::after {
        transition: none;
    }
}

/* Card/Serviço — 134621:158 (335×94 r12, 6 variantes). Sem equivalente no pc:
   é um radio grande (o <label> envolve o input), e o ícone de canto troca de
   função — Info abre o escopo do tipo; Sucesso marca o escolhido. */
.dl-card-servico {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--dl-espaco-4);
    min-height: 94px;
    padding: 17px;
    background: var(--dl-branco);
    border: 1px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-card);
    cursor: pointer;
}

.dl-card-servico.is-selecionado,
.dl-card-servico:has(.dl-card-servico__radio:checked) {
    padding: 16px;
    border: 2px solid var(--dl-azul);
}

.dl-card-servico:has(.dl-card-servico__radio:focus-visible) {
    box-shadow: var(--dl-foco-anel);
}

.dl-card-servico__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dl-card-servico__icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--dl-azul-claro);
    color: var(--dl-branco);
}

.dl-card-servico.is-selecionado .dl-card-servico__icone,
.dl-card-servico:has(.dl-card-servico__radio:checked) .dl-card-servico__icone {
    background: var(--dl-azul);
}

.dl-card-servico__icone .dl-icone {
    width: 22px;
    height: 22px;
}

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

.dl-card-servico__titulo {
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul-marinho);
}

.dl-card-servico__descricao {
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
}

.dl-card-servico__meta {
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-bold-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-azul);
}

.dl-card-servico__canto {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--dl-azul);
}

.dl-card-servico__canto .dl-icone {
    width: 20px;
    height: 20px;
}

/* Acima do label: o toque no Info abre o escopo sem marcar o card. */
.dl-card-servico__info {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--dl-cinza-30);
    cursor: pointer;
}

/* O canto troca de função: Info no não escolhido, Sucesso no escolhido (docs/11 §4.12). */
.dl-card-servico__check {
    display: none;
    place-items: center;
    width: 20px;
    height: 20px;
}

.dl-card-servico.is-selecionado .dl-card-servico__info,
.dl-card-servico:has(.dl-card-servico__radio:checked) .dl-card-servico__info {
    display: none;
}

.dl-card-servico.is-selecionado .dl-card-servico__check,
.dl-card-servico:has(.dl-card-servico__radio:checked) .dl-card-servico__check {
    display: grid;
}

/* Card/Agendamento — 134623:211 (335×216 r12, padding 20, gap 14). Sem
   equivalente no pc (o histórico de lá é outra anatomia). As 3 variantes têm a
   mesma altura; só o badge — e o valor, cinza no cancelado — mudam. */
.dl-card-agendamento {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 216px;
    padding: 19px;
    background: var(--dl-branco);
    border: 1px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-card);
}

.dl-card-agendamento__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dl-espaco-2);
    min-height: 18px;
}

.dl-card-agendamento__valor {
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul);
}

.dl-card-agendamento--cancelado .dl-card-agendamento__valor {
    color: var(--dl-cinza-30);
}

.dl-card-agendamento__titulo {
    margin: 0;
    font-family: var(--dl-fonte);
    font-size: var(--dl-h3-tamanho);
    font-weight: var(--dl-h3-peso);
    line-height: var(--dl-h3-lh);
    color: var(--dl-azul-marinho);
}

.dl-card-agendamento__linha {
    display: flex;
    align-items: center;
    gap: var(--dl-espaco-2);
    min-height: 16px;
    margin: 0;
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
    line-height: 16px;
    color: var(--dl-cinza-50);
}

.dl-card-agendamento__linha .dl-icone {
    width: 16px;
    height: 16px;
    color: var(--dl-cinza-30);
}

/* A divisória do Figma (295×1) é a borda de cima do bloco da profissional. */
.dl-card-agendamento__profissional {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--dl-cinza-10);
    color: inherit;
    text-decoration: none;
}

.dl-card-agendamento__nome {
    flex: 1;
    min-width: 0;
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-bold-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-azul-marinho);
}

.dl-card-agendamento__ver {
    width: 18px;
    height: 18px;
    color: var(--dl-cinza-30);
}

/* Upload/Documento — 134623:271: 60 (vazio/enviado) e 81 (em análise/recusado —
   o título quebra porque o badge ocupa a direita). Sem equivalente no pc: lá o
   upload é só um botão. O input fica no <label> em volta (.dl-upload-campo). */
.dl-upload-campo {
    position: relative;
    display: block;
    cursor: pointer;
}

.dl-upload {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 16.5px;
    background: var(--dl-branco);
    border: 1.5px solid var(--dl-azul);
    border-radius: var(--dl-radius-card);
    color: var(--dl-azul);
}

.dl-upload-campo:has(input:focus-visible) .dl-upload {
    box-shadow: var(--dl-foco-anel);
}

.dl-upload__icone {
    width: 22px;
    height: 22px;
}

.dl-upload__texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dl-upload__titulo {
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul-marinho);
}

.dl-upload__sub {
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
    line-height: var(--dl-body2-lh);
    overflow-wrap: anywhere;
}

.dl-upload--vazio {
    border-style: dashed;
    border-color: var(--dl-cinza-30);
    color: var(--dl-cinza-30);
}

.dl-upload--analise {
    min-height: 81px;
    border-color: var(--dl-atencao);
    color: var(--dl-atencao);
}

.dl-upload--recusado {
    min-height: 81px;
    border-color: var(--dl-erro);
    color: var(--dl-erro);
}

.dl-upload .dl-badge {
    flex-shrink: 0;
}

/* Selo e ação à direita, empilhados (recusado: RECUSADO sobre "Reenviar"). */
.dl-upload__lado {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--dl-espaco-2);
}

/* Ação de troca do arquivo [DECISÃO:2026-09-28] — botão pequeno do DS (raio 8), azul
   cheio: se distingue da linha, que só abre o arquivo. Dentro da linha que troca
   inteira ele é só a pista visual (o <label> é a linha). */
.dl-upload__acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 var(--dl-espaco-3);
    border-radius: 8px;
    background: var(--dl-azul);
    color: var(--dl-branco);
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-bold-peso);
    line-height: 1;
    white-space: nowrap;
}

/* Aceito: a linha é o link "ver" e o botão é um <label> à parte, por cima da
   borda direita — a caixa reserva o espaço dele. */
.dl-upload-linha {
    position: relative;
}

.dl-upload-linha .dl-upload {
    padding-right: 96px;
}

.dl-upload__acao--botao {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    cursor: pointer;
}

/* Alvo de 44 sem mudar o desenho do botão. */
.dl-upload__acao--botao::after {
    content: "";
    position: absolute;
    inset: -6px -8px;
}

.dl-upload__acao--botao:has(input:focus-visible) {
    box-shadow: var(--dl-foco-anel);
}

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

/* Campo que recebe arquivo leva os dois ícones (UI::upload_documento); o estado escolhe. */
.dl-upload--vazio .dl-upload__icone--doc,
.dl-upload:not(.dl-upload--vazio) .dl-upload__icone--vazio {
    display: none;
}

/* Documento já no sistema abre o arquivo; o sublinhado do link não é do desenho. */
a.dl-upload-campo {
    text-decoration: none;
}

/* Aceite dos termos (UI::aceite_termos): texto de apoio, não rótulo de campo. */
.dl-aceite-termos {
    margin: 0;
}

.dl-aceite-termos .dl-campo__label {
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
    letter-spacing: 0;
    text-transform: none;
    color: var(--dl-cinza-50);
}

.dl-aceite-termos a {
    position: relative;
    z-index: 1;
    color: var(--dl-azul);
}

/* A linha inteira (bolinha + texto), com 44 de altura, marca o aceite; os links dos
   termos ficam por cima do pseudo e continuam abrindo o texto. */
/* O pseudo sai do rótulo e cobre também a bolinha à esquerda (16 + gap 8). */
.dl-aceite-termos .dl-campo__label {
    position: relative;
}

.dl-aceite-termos .dl-campo__label::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: -24px;
    height: max(100%, 44px);
    transform: translateY(-50%);
}

/* A bolinha continua recebendo o clique direto (teclado, leitor de tela, automação). */
.dl-aceite-termos .dl-campo__checkbox {
    position: relative;
    z-index: 1;
}

/* Opção/Seleção — 134631:983 (335×59 r12). Fork da opção de origem da foto
   (cartão de escolha) com o marcador redondo do checkbox de campo [REF:paginas-conecta]. */
.dl-opcao {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 59px;
    padding: 0 17px;
    background: var(--dl-branco);
    border: 1px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-card);
    color: var(--dl-cinza-50);
    cursor: pointer;
}

.dl-opcao:has(.dl-opcao__radio:checked) {
    padding: 0 16px;
    border: 2px solid var(--dl-azul);
    color: var(--dl-azul);
}

.dl-opcao__icone {
    width: 22px;
    height: 22px;
}

.dl-opcao__texto {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-1);
}

.dl-opcao__titulo {
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul-marinho);
}

.dl-opcao__sub {
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
    line-height: var(--dl-body2-lh);
    color: var(--dl-cinza-50);
}

/* O marcador vem por último no desenho: order o leva para a direita sem
   tirar o input de antes do texto (ordem de leitura). */
.dl-opcao__radio {
    order: 3;
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1.5px solid var(--dl-cinza-30);
    border-radius: 50%;
    background: var(--dl-branco);
    cursor: pointer;
}

.dl-opcao__radio::after {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--dl-azul);
    visibility: hidden;
}

.dl-opcao__radio:checked {
    border-color: var(--dl-azul);
}

.dl-opcao__radio:checked::after {
    visibility: visible;
}

.dl-opcao__radio:focus-visible {
    box-shadow: var(--dl-foco-anel);
}

/* Contador — 134627:377 (335×60 r12). Sem equivalente no pc nem no achei-ofertas.
   Botões circulares de 28: o de diminuir desabilitado fica cinza. */
.dl-contador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 60px;
    padding: 15px 13px 15px 17px;
    background: var(--dl-branco);
    border: 1px solid var(--dl-cinza-10);
    border-radius: var(--dl-radius-card);
}

.dl-contador__rotulo {
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul-marinho);
}

.dl-contador__controles {
    display: flex;
    align-items: center;
    gap: 14px;
}

.dl-contador__valor {
    min-width: 1ch;
    font-size: var(--dl-body1-tamanho);
    font-weight: var(--dl-body1-tom-peso);
    line-height: var(--dl-body1-lh);
    color: var(--dl-azul-marinho);
    text-align: center;
}

.dl-contador__botao {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1.5px solid var(--dl-azul);
    border-radius: 50%;
    background: var(--dl-branco);
    color: var(--dl-azul);
    cursor: pointer;
}

.dl-contador__botao .dl-icone {
    width: 16px;
    height: 16px;
}

/* O "−" do Figma é um traço de 12×1,5, não um ícone do conjunto. */
.dl-contador__botao--menos::before {
    content: "";
    width: 12px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
}

.dl-contador__botao:disabled {
    border-color: var(--dl-cinza-30);
    color: var(--dl-cinza-30);
    cursor: not-allowed;
}

/* Imagem/Placeholder — 134620:60 (335×180 r12, fundo cinza 10). */
.dl-imagem-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--dl-espaco-2);
    height: 180px;
    border-radius: var(--dl-radius-card);
    background: var(--dl-cinza-10);
    color: var(--dl-cinza-30);
}

.dl-imagem-placeholder .dl-icone {
    width: 28px;
    height: 28px;
}

.dl-imagem-placeholder__legenda {
    font-size: var(--dl-body2-tamanho);
    font-weight: var(--dl-body2-peso);
    line-height: var(--dl-body2-lh);
}

/* Área de toque ≥ 44×44 (F14) sem mudar o desenho: um ::after transparente cresce o
   alvo em volta do centro. Só entram alvos cujo vizinho está a mais de 44 de centro a
   centro — senão um pseudo cobriria o outro. Quem já é absolute (olho da senha, lápis
   do avatar) fica fora da 1ª lista para não perder o posicionamento. */
:is(
    .dl-header__acao,
    .dl-calendario__nav,
    .dl-calendario__grade .dl-calendario__dia,
    .dl-contador__botao,
    .dl-avaliacao__acao,
    .dl-tabs__item,
    .dl-agendamentos__aba,
    .dl-disponibilidade__turno,
    .dl-f05-link
) {
    position: relative;
}

:is(
    .dl-header__acao,
    .dl-calendario__nav,
    .dl-calendario__grade .dl-calendario__dia,
    .dl-contador__botao,
    .dl-avaliacao__acao,
    .dl-tabs__item,
    .dl-agendamentos__aba,
    .dl-disponibilidade__turno,
    .dl-f05-link,
    .dl-campo__olho,
    .dl-info-pessoais__avatar-editar,
    .dl-switch
)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
}
}