/*
 * DoceLar — telas privadas comuns: solicitar, notificações, perfil,
 * informações pessoais, históricos.
 * Consome exclusivamente var(--dl-*) de dl-tokens.css e as classes de dl-components.css
 * (UI::); aqui só o que não é componente compartilhado.
 */

@layer dl-telas {
/* ------------------------------------------------------------------ */
/* Cabeçalhos genéricos de tela (título em pill azul)                  */
/* ------------------------------------------------------------------ */

/* Topo de 134834:4275 / 5042 (134834:4278): faixa Azul de largura cheia colada no
   menu, 16px 24px, cantos de baixo 24, título Body Tone 1 branco — o mesmo molde da
   faixa do painel (.dl-painel-servico__faixa). A lista começa 47px abaixo (y 132 → 179).
   O contador de não lidas mora no item Notificações da tab bar, não aqui. */
.dl-notificacoes__cabecalho {
    box-sizing: border-box;
    width: var(--dl-largura-shell);
    margin: 0 calc(50% - var(--dl-largura-shell) / 2) 47px;
    padding: 16px 24px;
    border-radius: 0 0 24px 24px;
    background: var(--dl-azul);
    text-align: center;
}

.dl-notificacoes__cabecalho h2 {
    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);
    text-box: trim-both cap alphabetic;
}

/* ------------------------------------------------------------------ */
/* Solicitar serviço                                                   */
/* ------------------------------------------------------------------ */

/* Botão branco, borda tracejada azul e raio 14px, com o ícone de upload à
   esquerda do rótulo. */

/* ------------------------------------------------------------------ */
/* Notificações                                                        */
/* ------------------------------------------------------------------ */

/* Lista de 134834:4275 / 134834:5042 (frame "HOJE"): cards de 335 empilhados a
   8px, direto sobre o fundo, sem régua entre eles. */
.dl-notificacoes__lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* Notificação/Item como as telas o vestem (instâncias de 134623:231 em 4275/5042):
   não lida = cartão branco, título Azul, ícone centrado na altura; lida = branco a
   50% sobre o fundo, título cinza 70, ícone no topo e caixa cinza. Sem borda. O card
   inteiro é o alvo do toque — não há botão (DS §4.15). */
.dl-notificacoes__lista .dl-notificacao {
    align-items: center;
    padding: 18px;
    border: 0;
    background: var(--dl-branco);
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.dl-notificacoes__lista a.dl-notificacao {
    cursor: pointer;
}

.dl-notificacoes__lista a.dl-notificacao:focus-visible {
    outline: 2px solid var(--dl-azul);
    outline-offset: 2px;
}

.dl-notificacoes__lista .dl-notificacao__corpo {
    gap: 12px;
    /* 14 de respiro + 8 do ponto (Frame 1707484733: 225 de texto em 247). */
    padding-right: 22px;
}

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

.dl-notificacoes__lista .dl-notificacao--lida {
    align-items: flex-start;
    background: color-mix(in srgb, var(--dl-branco) 50%, transparent);
}

.dl-notificacoes__lista .dl-notificacao--lida .dl-notificacao__titulo {
    color: var(--dl-cinza-70);
}

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

.dl-notificacoes__carregar-mais {
    text-align: center;
    margin-top: 28px;
}

/* ------------------------------------------------------------------ */
/* Perfil                                                               */
/* ------------------------------------------------------------------ */

/* Menus 134834:4227 / 4821 e as telas que abrem deles [TELA-NOVA:2026-09-24]: topo
   colado no header, lista 24 abaixo, itens a 4 (Frame "Cadastro"/"Ajuda"). */
.dl-tela-conta,
.dl-tela-perfil {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-6);
    padding-bottom: 28px;
}

.dl-tela-conta .dl-lista,
.dl-tela-perfil .dl-lista {
    gap: var(--dl-espaco-1);
}

/* Nos menus a instância do Lista/Item perde a borda e pinta o rótulo de Azul. */
.dl-tela-conta .dl-lista-item,
.dl-tela-perfil .dl-lista-item {
    border-color: transparent;
    color: var(--dl-azul);
}

.dl-tela-conta .dl-lista-item--sair,
.dl-tela-perfil .dl-lista-item--sair {
    color: var(--dl-erro);
}

/* O 2º grupo (Ajuda) assenta 40px acima da tab bar: 52 do header e 82 reservados à
   tab bar (body:has(.dl-bottom-nav)), dos quais 12 já são o respiro de baixo. */
.dl-tela-perfil {
    min-height: calc(100dvh - 52px - 82px);
}

.dl-tela-perfil__grupo--fim {
    margin-top: auto;
}

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

/* Central de ajuda (C103): "Falar com suporte" é uma seção da própria tela, com o
   título de seção de Dados pessoais (.dl-info-pessoais__secao-nome). */
.dl-ajuda__secao {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-4);
}

.dl-ajuda__secao-nome {
    margin: 0;
    font-size: var(--dl-h3-tamanho);
    font-weight: var(--dl-h3-peso);
    line-height: var(--dl-h3-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

/* Botões de rodapé das telas de conta (Salvar / Sair) ocupam a linha toda. */
.dl-info-pessoais__acoes .dl-botao,
.dl-tela-alterar-senha .dl-botao {
    display: flex;
    width: 100%;
    margin-top: 12px;
}

/* ------------------------------------------------------------------ */
/* Alterar senha                                                        */
/* ------------------------------------------------------------------ */

/* O respiro vertical e responsabilidade da tela (o <main> do tema zera o
   padding-block). Em Informações Pessoais quem afasta do header e a margem do
   avatar; esta tela nao tem avatar, entao aplica o mesmo 24px. */
.dl-tela-alterar-senha {
    padding-top: 24px;
}

/* ------------------------------------------------------------------ */
/* Informações pessoais                                                 */
/* ------------------------------------------------------------------ */

/* A área inteira (foto + lápis) abre a gaveta de troca de foto — por isso o
   cursor de clique vale no wrapper, não só no botão.
   user-select/tap-highlight pelo mesmo motivo da regra em dl-tokens.css: como
   este wrapper é um <div> (e não button/[role="button"]), ele não entra naquela
   lista, e sem isto o clique pinta o realce azul de seleção sobre a foto. */
.dl-info-pessoais__avatar {
    position: relative;
    width: fit-content;
    margin: 24px auto 24px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* A foto em si também não é conteúdo para selecionar/arrastar. */
.dl-info-pessoais__avatar .dl-avatar__img,
.dl-info-pessoais__avatar img {
    -webkit-user-drag: none;
    -webkit-user-select: none;
    user-select: none;
}

.dl-info-pessoais__avatar-editar {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--dl-azul);
    color: var(--dl-branco);
    border: 2px solid var(--dl-branco);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.dl-info-pessoais__avatar-editar svg {
    width: 13px;
    height: 13px;
}

/* Origem da foto (.dl-origem-foto): estilo em dl-components.css — a casca
   (UI::drawer_origem_foto) serve avatar, solicitação e fotos do serviço. */

/* ------------------------------------------------------------------ */
/* Recorte do avatar (gaveta dl-drawer-avatar)                          */
/* ------------------------------------------------------------------ */

.dl-avatar-crop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* O corpo da gaveta tem padding lateral próprio (16px 20px); anulá-lo aqui
   devolve esses 40px ao palco, que é a área que o usuário precisa enxergar. */
.dl-drawer--avatar .dl-drawer__corpo {
    padding-inline: 0;
}

/* Palco quadrado, dimensionado pela MENOR das duas folgas: a largura do shell
   (razão de sempre) e a altura que sobra na gaveta depois de cabeçalho, dica,
   slider e rodapé (~260px somados). Só a largura deixaria o quadrado bem menor
   que o espaço vertical disponível — o círculo inscrito, menor ainda. dvh
   porque a barra de endereço do celular entra na conta. */
.dl-avatar-crop__palco {
    position: relative;
    width: min( 100%, var(--dl-largura-shell), calc( 100dvh - 210px ) );
    aspect-ratio: 1;
    /* Num flex column o item encolhe por padrão quando o espaço aperta, e o
       aspect-ratio cede: o palco vira retângulo e o recorte deixa de bater com
       o preview. flex-shrink:0 mantém o quadrado — se faltar espaço, quem cede
       é o container (o min() acima já limita a altura). */
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--dl-radius-card);
    background: var(--dl-azul-marinho);
    cursor: grab;
    /* Sem isto o navegador do celular trata o arraste como scroll da página e
       o gesto nunca chega no pointermove (mesma armadilha da galeria). */
    touch-action: none;
    user-select: none;
}

.dl-avatar-crop__palco:active {
    cursor: grabbing;
}

/* Posição e tamanho são escritos por dl-privadas.js (geometria()), em px do
   palco — os mesmos números que o recorte usa no canvas. Nada de transform nem
   de top/left percentuais: aqueles dependem do tamanho de LAYOUT do <img>, que
   CSS de fora do plugin (tema, Elementor) pode alterar sem o recorte saber, e
   a foto salva sairia diferente do preview.
   As declarações !important protegem só o que quebraria a geometria — e
   `.elementor img` (max-width:100%, border, border-radius) é CSS fora de
   camada, que sem elas venceria esta camada e anularia o zoom (lição 13 §20). */
.dl-avatar-crop__palco .dl-avatar-crop__img {
    position: absolute;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: fill;
    transform: none !important;
    -webkit-user-drag: none;
}

/* O recorte é o círculo (ver ctx.clip() em recortarParaBlob), então o que fica
   fora dele NÃO entra no arquivo. A máscara escurece bem essa área justamente
   para comunicar isso: o que está apagado é o que vai ser descartado. */
.dl-avatar-crop__mascara {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: var(--dl-overlay);
    /* closest-side, não a % padrão: sem essa palavra o gradiente radial usa
       `farthest-corner`, e 50% passa a ser metade da DIAGONAL — um buraco de raio
       ~159px num palco de 450, enquanto o anel e o clip do canvas usam 225: dois
       círculos diferentes na tela, e o corte sairia pelo maior.
       Com closest-side o raio é exatamente metade do lado, igual ao clip. */
    -webkit-mask: radial-gradient( circle closest-side at center, transparent 0 99%, var(--dl-preto) 100% );
    mask: radial-gradient( circle closest-side at center, transparent 0 99%, var(--dl-preto) 100% );
}

/* Anel marcando o limite do recorte. Fica no PALCO, não na máscara: dentro dela
   o próprio anel seria recortado pelo mask e apareceria como um segundo
   círculo, em vez de contornar o primeiro. */
.dl-avatar-crop__palco::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--dl-branco);
}

.dl-avatar-crop__dica {
    margin: 0;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    color: var(--dl-cinza-50);
}

.dl-avatar-crop__zoom {
    display: block;
    width: min( 100%, var(--dl-largura-conteudo) );
}

.dl-avatar-crop__zoom input[type="range"] {
    width: 100%;
    /* O UA do Chromium dá margin:2px ao range; com width:100% isso estoura
       4px no corpo da gaveta e acende a scrollbar horizontal no desktop. */
    margin: 0;
    accent-color: var(--dl-azul);
}

.dl-drawer--avatar [data-dl-drawer-rodape] {
    display: flex;
    gap: 12px;
}

.dl-drawer--avatar [data-dl-drawer-rodape] .dl-botao {
    flex: 1;
}

.dl-info-pessoais__secao-titulo {
    margin: 24px 0 12px;
}

/* Cliente 134834:4248 e profissional 134834:4998: seções a 40 entre si e do
   header, título H3 cinza 50 a 24 do card, card branco p20 r12 com campos a 16.
   Na cliente o Salvar desce para 20 acima da tab bar (82 reservados a ela, 12
   deles já de respiro) e nunca fica a menos de 40 do último card. */
.dl-tela-informacoes-pessoais--secoes {
    display: flex;
    flex-direction: column;
    min-height: calc(100dvh - 52px - 82px);
    padding-block: 40px 8px;
}

.dl-info-pessoais__form {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 40px;
}

.dl-info-pessoais__secao {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-6);
}

.dl-info-pessoais__secao-nome {
    margin: 0;
    font-size: var(--dl-h3-tamanho);
    font-weight: var(--dl-h3-peso);
    line-height: var(--dl-h3-lh);
    color: var(--dl-cinza-50);
    text-box: trim-both cap alphabetic;
}

.dl-info-pessoais__card {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-4);
    padding: var(--dl-espaco-5);
    background: var(--dl-branco);
    border-radius: var(--dl-radius-card);
}

/* O espaço entre campos é o gap do card, não a margem do componente. */
.dl-info-pessoais__card .dl-campo {
    margin-bottom: 0;
}

.dl-info-pessoais__salvar {
    margin-top: auto;
}

/* Profissional — 134834:4998: a foto fica 40 acima de Identificação; o aviso
   vem 60 abaixo do último card (40 do gap + 20), o Salvar 28 abaixo dele e a
   tab bar 60 depois do Salvar (os 12 de respiro dela já contam). */
.dl-tela-informacoes-pessoais--profissional {
    padding-bottom: 48px;
}

.dl-tela-informacoes-pessoais--profissional .dl-info-pessoais__avatar {
    margin: 0 auto 40px;
}

.dl-info-pessoais__rodape {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: auto;
    padding-top: 20px;
}

.dl-info-pessoais__rodape .dl-info-pessoais__salvar {
    margin-top: 0;
}

/* "Cidade": UF + cidade na mesma linha, a UF na largura de 134834:3026. */
.dl-info-pessoais__cidade {
    display: flex;
    gap: 10px;
}

.dl-info-pessoais__cidade > * {
    flex: 1 1 0;
    min-width: 0;
}

.dl-info-pessoais__cidade > .dl-info-pessoais__uf {
    flex: 0 0 96px;
}

/* Documento aceito em 4998 (134834:5039): o Upload/Documento vem com fundo azul
   claro a 12% e tinta azul claro, sem contorno — o contorno transparente mantém
   os 18 de respiro do desenho (16,5 + 1,5). Os estados de análise e recusa
   seguem os do componente. */
.dl-info-pessoais__docs .dl-upload--enviado {
    border-color: transparent;
    background: color-mix(in srgb, var(--dl-azul-claro) 12%, transparent);
    color: var(--dl-azul-claro);
}

.dl-info-pessoais__docs .dl-upload--enviado .dl-upload__titulo {
    color: inherit;
}

/* A âncora #documentos (notificação de recusa, 4327) não para sob o header fixo. */
#documentos {
    scroll-margin-top: 72px;
}

/* RR 134834:5004: 14/16 de respiro, ícone a 12, título e corpo em 12 a 8. */
.dl-info-pessoais__aviso {
    gap: var(--dl-espaco-3);
    min-height: 0;
    padding: 14px var(--dl-espaco-4) 14px 14px;
}

.dl-info-pessoais__aviso .dl-aviso__texto {
    display: flex;
    flex-direction: column;
    gap: var(--dl-espaco-2);
    font-size: var(--dl-body2-tamanho);
    line-height: var(--dl-body2-lh);
}

.dl-info-pessoais__aviso-titulo {
    font-weight: var(--dl-body2-bold-peso);
}

/* ------------------------------------------------------------------ */
/* Histórico                                                            */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Motion da conta no mobile (docs/21 §4) [TELA-NOVA:2026-09-28]        */
/* O mesmo do desktop (dl-desktop-conta.css, ≥ 1024), abaixo de 1024.   */
/* As classes vêm de dl-privadas.js, que não as liga com reduce.        */
/* ------------------------------------------------------------------ */

@media (max-width: 1023.98px) {
    /* Marcar como lida: o ponto sai por opacidade (display:none não
       transiciona). O fundo e o ícone continuam trocando de uma vez. */
    .dl-notificacoes__lista .dl-notificacao__marcador {
        transition: opacity var(--dl-dur-base) var(--dl-ease-saida);
    }

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

@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
    .dl-notificacoes__lista .dl-notificacao__marcador {
        transition: opacity var(--dl-dur-base) var(--dl-ease-saida), transform var(--dl-dur-base) var(--dl-ease-saida);
    }

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

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

    /* Endereço removido: recolhe a altura (interpolate-size do :root) e some;
       a margem negativa come o gap de 8 da lista (dl-f05.css). Sem animação:
       reinserido, o que tinha .dl-conta-entra repetiria a entrada. */
    .dl-f05-enderecos__lista > .dl-conta-recolhendo.dl-conta-recolhendo {
        animation: none;
        overflow: hidden;
        height: 0;
        min-height: 0;
        margin-block-start: -8px;
        opacity: 0;
        pointer-events: none;
        transition: height var(--dl-dur-lenta) var(--dl-ease-troca), margin var(--dl-dur-lenta) var(--dl-ease-troca), opacity var(--dl-dur-base) linear;
    }

    /* Crossfade da foto nova sobre a antiga (a posição é a de .dl-avatar img). */
    .dl-info-pessoais__avatar .dl-conta-avatar-novo {
        animation: dl-m-so-fade var(--dl-dur-lenta) var(--dl-ease-troca) backwards;
    }
}

@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
    .dl-notificacoes__lista .dl-notificacao__marcador {
        transition-duration: var(--dl-dur-rapida);
    }
}
}