/* =========================================================================
   Animações e microinterações. Ficam fora do app.css: sem este arquivo e o
   js/animacoes.js, o sistema volta a ser exatamente o que era.
   Regra de desempenho: só se anima transform e opacity, que o navegador
   compõe na GPU sem refazer o layout nem repintar a página. Quem pede menos
   movimento no Windows (prefers-reduced-motion) não vê nada disso: a regra no
   fim do app.css desliga as animações e as transições do CSS.
   ========================================================================= */
:root{
  --ease-saida:cubic-bezier(.2,.8,.2,1);     /* rápido no começo e assenta no fim: entradas */
  --ease-mola:cubic-bezier(.34,1.56,.64,1);  /* passa um pouco do ponto e volta: o botão solto */
}
/* no body, e não no :root: é no body que o modo escuro troca o --sunk-2 */
body{
  --osso:var(--sunk-2);                      /* a cor dos blocos do esqueleto */
  --brilho:rgba(255,255,255,.7);             /* o reflexo que corre sobre o esqueleto */
}
body.escuro{--osso:var(--line);--brilho:rgba(255,255,255,.05)}

/* ---------- 1. toque: o botão afunda ao apertar e volta com uma mola ----------
   A transição longa (mola) vale na volta; ao apertar, o :active encurta para 60 ms,
   e a resposta parece imediata. */
.btn,.ap,.b-ap,.esc-op,.icobtn,.aba-mais,.botao-app,.ferramentas button,.vista button,.seg2 button,.pp-icob{transition:transform .26s var(--ease-mola)}
.btn:active:not([disabled]),.ap:active:not([disabled]):not(.feito),.b-ap:active:not([disabled]),.esc-op:active{transform:scale(.96);transition-duration:.06s}
.icobtn:active:not([disabled]),.aba-mais:active,.botao-app:active,.ferramentas button:active:not([disabled]),.vista button:active,.seg2 button:active,.pp-icob:active{transform:scale(.9);transition-duration:.06s}
/* o card inteiro é clicável: afunda menos, senão parece que encolhe */
.lev{transition:border-color .12s,box-shadow .12s,transform .26s var(--ease-mola)}
.lev:active{transform:scale(.985);transition-duration:.06s}
/* o anel que se abre nos botões principais (Aprovar, Criar…). Vive no <body>, fora do
   botão: o painel pode se redesenhar no clique que o anel continua. Só o transform e a
   opacidade dele mudam. */
.anel-toque{position:fixed;z-index:95;pointer-events:none;box-shadow:0 0 0 2px currentColor}

/* ---------- 2. esqueleto: a forma do conteúdo enquanto os dados não chegam ----------
   Um reflexo corre por cima de cada item; cada um começa um pouco depois do anterior
   (--i), e o brilho atravessa a lista como uma onda. */
.esqueleto{position:relative;overflow:hidden;pointer-events:none}
.esqueleto::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,var(--brilho),transparent);animation:esq-brilho 1.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * 80ms)}
@keyframes esq-brilho{to{transform:translateX(100%)}}
.esqueleto i{display:block;height:9px;border-radius:4px;background:var(--osso)}
.esqueleto b{display:block;flex:none;border-radius:4px;background:var(--osso)}
/* card: a mesma caixa do .lev, com a miniatura e as linhas de texto no lugar */
.esq-card{background:var(--card);border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column}
.esq-card .esq-thumb{aspect-ratio:16/9;background:var(--sunk);border-bottom:1px solid var(--line-2)}
.esq-card .esq-info{padding:10px 12px 12px;display:flex;flex-direction:column}
.esq-card .esq-info i{margin:5px 0 4px}
.esq-card .esq-info i.t{height:11px;margin:6px 0 4px}
.esq-card .esq-sep{height:1px;background:var(--line-2);margin:12px 0 6px}
.esq-card .esq-info i.r{margin-top:13px}   /* o rodapé do card (pendentes, quando) */
/* linhas: Levantamentos em lista, Registro e Usuários. As colunas são as mesmas das
   linhas de verdade (.ll, .rg e .uu no app.css), e os blocos ficam sob os títulos */
.esq-l{display:grid;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--line-2)}
.esq-l:last-child{border-bottom:0}
.esq-l .c1{display:flex;align-items:center;gap:12px;min-width:0}
.esq-l .tx{flex:1;display:flex;flex-direction:column;gap:7px;min-width:0}
.esq-l .fim{justify-self:end}
.esq-l.ll-a{height:56px;grid-template-columns:minmax(0,2.4fr) 120px 150px 150px 110px 96px}
.esq-l.rg-a{height:44px;grid-template-columns:52px 24px minmax(0,1fr) auto}
.esq-l.uu-a{height:52px;grid-template-columns:minmax(0,1.3fr) minmax(0,1.4fr) 130px 120px 150px}
@media (max-width:1240px){.esq-l.ll-a{grid-template-columns:minmax(0,2.4fr) 130px 130px 96px}.esq-l.ll-a .c-dono,.esq-l.ll-a .c-q{display:none}}
@media (max-width:1100px){.esq-l.uu-a{grid-template-columns:minmax(0,1.3fr) 130px 120px 150px}.esq-l.uu-a .mail{display:none}}
.esq-dia{width:56px;height:9px;margin:4px 0 9px;border-radius:4px;background:var(--osso)}

/* miniatura da planta: brilha até a imagem chegar (a imagem cobre o brilho) */
.lev .thumb:has(img):not(.carregou)::before,.ll-lev .mini:has(img):not(.carregou)::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,var(--brilho),transparent);transform:translateX(-100%);animation:esq-brilho 1.5s ease-in-out infinite}

/* "Abrindo a planta": não se sabe quanto falta, então um trecho da barra corre de um
   lado ao outro, no lugar da barra parada em 40% */
.barra.indef i{animation:barra-indef 1.3s var(--ease-saida) infinite}
@keyframes barra-indef{from{transform:translateX(-100%)}to{transform:translateX(250%)}}