/* ============================================================ P.YOUNG — PREVIEW / REDESIGN 2026 Loading padrão do projeto (todas as páginas exceto login/ esqueci-senha, que têm o loader próprio em auth-loader.css). Redesenhado em 2026-08-25 (2ª versão): em vez de um overlay cobrindo a tela, a própria página aparece na hora e cada bloco de conteúdo real (cards, linhas, KPIs, calendário...) vira um placeholder cinza com shimmer — como o loading "por partes" de apps de banco com internet lenta. Some sozinho quando o conteúdo real "chega". ============================================================ */ :root{ --skel-a: var(--line-soft); --skel-b: #FAFBFD; } /* ---------- blocos claros (a maioria dos componentes) ---------- */ .card,.panel,.kpi,.due-item,.task-item,.tx-row,.doc-card,.person-row, .routine-item,.short-tile,.activity-item,.notif-item,.step,.plan, .value-card,.post-card,.faq-item,.quote,.profile,.state-card, .contador-card,.info-row, .money-card,.stat{ position:relative; } .card::after,.panel::after,.kpi::after,.due-item::after,.task-item::after, .tx-row::after,.doc-card::after,.person-row::after,.routine-item::after, .short-tile::after,.activity-item::after,.notif-item::after,.step::after, .plan::after,.value-card::after,.post-card::after,.faq-item::after, .quote::after,.profile::after,.state-card::after,.contador-card::after, .info-row::after{ content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(100deg,var(--skel-a) 30%,var(--skel-b) 50%,var(--skel-a) 70%); background-size:250% 100%; opacity:0;pointer-events:none; transition:opacity .35s ease; } /* ---------- blocos escuros (dentro de faixas navy) ---------- */ .money-card::after,.stat::after{ content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(100deg,rgba(255,255,255,.07) 30%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.07) 70%); background-size:250% 100%; opacity:0;pointer-events:none; transition:opacity .35s ease; } .card > *,.panel > *,.kpi > *,.due-item > *,.task-item > *,.tx-row > *, .doc-card > *,.person-row > *,.routine-item > *,.short-tile > *, .activity-item > *,.notif-item > *,.step > *,.plan > *,.value-card > *, .post-card > *,.faq-item > *,.quote > *,.profile > *,.state-card > *, .contador-card > *,.info-row > *,.money-card > *,.stat > *{ transition:opacity .35s ease; } /* ---------- estado ativo (enquanto tem .is-skeleton) ---------- */ .is-skeleton .card::after,.is-skeleton .panel::after,.is-skeleton .kpi::after, .is-skeleton .due-item::after,.is-skeleton .task-item::after,.is-skeleton .tx-row::after, .is-skeleton .doc-card::after,.is-skeleton .person-row::after,.is-skeleton .routine-item::after, .is-skeleton .short-tile::after,.is-skeleton .activity-item::after,.is-skeleton .notif-item::after, .is-skeleton .step::after,.is-skeleton .plan::after,.is-skeleton .value-card::after, .is-skeleton .post-card::after,.is-skeleton .faq-item::after,.is-skeleton .quote::after, .is-skeleton .profile::after,.is-skeleton .state-card::after,.is-skeleton .contador-card::after, .is-skeleton .info-row::after,.is-skeleton .money-card::after,.is-skeleton .stat::after{ opacity:1; animation:skeleton-shimmer 1.5s ease-in-out infinite; } .is-skeleton .card > *,.is-skeleton .panel > *,.is-skeleton .kpi > *, .is-skeleton .due-item > *,.is-skeleton .task-item > *,.is-skeleton .tx-row > *, .is-skeleton .doc-card > *,.is-skeleton .person-row > *,.is-skeleton .routine-item > *, .is-skeleton .short-tile > *,.is-skeleton .activity-item > *,.is-skeleton .notif-item > *, .is-skeleton .step > *,.is-skeleton .plan > *,.is-skeleton .value-card > *, .is-skeleton .post-card > *,.is-skeleton .faq-item > *,.is-skeleton .quote > *, .is-skeleton .profile > *,.is-skeleton .state-card > *,.is-skeleton .contador-card > *, .is-skeleton .info-row > *,.is-skeleton .money-card > *,.is-skeleton .stat > *{ opacity:0; } /* ---------- texto: menus, títulos, nomes ---------- Aqui o texto real (nó de texto puro, sem wrapper) é o próprio conteúdo — então em vez de esconder filhos, deixamos a cor transparente (esconde texto E ícone currentColor juntos) e sobrepomos uma barrinha shimmer do exato tamanho da caixa real. */ .sb-link,.topbar h2,.page-head h1,.page-head p,.section-head h3, .avatar-chip strong,.avatar-chip small,.sb-title,.sb-foot strong, .sb-foot span,.page-hero h1,.page-hero p,.panel-head h3,.status-dot{ position:relative; } .sb-link::after,.topbar h2::after,.page-head h1::after,.page-head p::after, .section-head h3::after,.avatar-chip strong::after,.avatar-chip small::after, .sb-title::after,.sb-foot strong::after,.sb-foot span::after, .page-hero h1::after,.page-hero p::after,.panel-head h3::after, .status-dot::after{ content:"";position:absolute;inset:-2px;border-radius:5px; background:linear-gradient(100deg,var(--skel-a) 30%,var(--skel-b) 50%,var(--skel-a) 70%); background-size:250% 100%; opacity:0;pointer-events:none; transition:opacity .3s ease; } .is-skeleton .sb-link,.is-skeleton .topbar h2,.is-skeleton .page-head h1, .is-skeleton .page-head p,.is-skeleton .section-head h3, .is-skeleton .avatar-chip strong,.is-skeleton .avatar-chip small, .is-skeleton .sb-title,.is-skeleton .sb-foot strong,.is-skeleton .sb-foot span, .is-skeleton .page-hero h1,.is-skeleton .page-hero p,.is-skeleton .panel-head h3, .is-skeleton .status-dot{ color:transparent !important;transition:color .3s ease; } .is-skeleton .sb-link::after,.is-skeleton .topbar h2::after, .is-skeleton .page-head h1::after,.is-skeleton .page-head p::after, .is-skeleton .section-head h3::after,.is-skeleton .avatar-chip strong::after, .is-skeleton .avatar-chip small::after,.is-skeleton .sb-title::after, .is-skeleton .sb-foot strong::after,.is-skeleton .sb-foot span::after, .is-skeleton .page-hero h1::after,.is-skeleton .page-hero p::after, .is-skeleton .panel-head h3::after,.is-skeleton .status-dot::after{ opacity:1;animation:skeleton-shimmer 1.5s ease-in-out infinite; } .is-skeleton .status-dot::before{opacity:0;} /* nome/saudação dentro da faixa navy (.greet) — variante escura */ .greet h1,.greet p{position:relative;} .greet h1::after,.greet p::after{ content:"";position:absolute;inset:-2px;border-radius:5px; background:linear-gradient(100deg,rgba(255,255,255,.08) 30%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.08) 70%); background-size:250% 100%; opacity:0;pointer-events:none; transition:opacity .3s ease; } .is-skeleton .greet h1,.is-skeleton .greet p{color:transparent !important;transition:color .3s ease;} .is-skeleton .greet h1::after,.is-skeleton .greet p::after{opacity:1;animation:skeleton-shimmer 1.5s ease-in-out infinite;} @keyframes skeleton-shimmer{ 0%{background-position:150% 0;} 100%{background-position:-50% 0;} } @media (prefers-reduced-motion:reduce){ .card::after,.panel::after,.kpi::after,.due-item::after,.task-item::after, .tx-row::after,.doc-card::after,.person-row::after,.routine-item::after, .short-tile::after,.activity-item::after,.notif-item::after,.step::after, .plan::after,.value-card::after,.post-card::after,.faq-item::after, .quote::after,.profile::after,.state-card::after,.contador-card::after, .info-row::after,.money-card::after,.stat::after, .sb-link::after,.topbar h2::after,.page-head h1::after,.page-head p::after, .section-head h3::after,.avatar-chip strong::after,.avatar-chip small::after, .sb-title::after,.sb-foot strong::after,.sb-foot span::after, .page-hero h1::after,.page-hero p::after,.panel-head h3::after, .status-dot::after,.greet h1::after,.greet p::after{ animation:none !important;background-position:50% 0; } }