/* ════════════════════════════════════════════════════════════════════════
FLUIDEZ & PROFUNDIDADE — Cellini / Laboratório Milene Braz (v1.93.0)
Camada de POLISH sobre o Vidro Líquido. Tira o ar "cru/engessado":
campos de formulário com estilo inline viram superfícies arredondadas com
foco dourado; botões e cards ganham micro-interação tátil + profundidade 3D;
trocas de tela/modal entram com mola suave.
REGRAS (iguais às do vidro.css):
- ADITIVA: só refina seletores que já existem. Reverter = remover o .
Nenhum id/classe/função do app muda.
- Carregar SEMPRE por ÚLTIMO no (depois do vidro.css), com ?v=X.Y.Z.
- NADA anima em loop (só transições e entradas de um disparo).
- prefers-reduced-motion mata tudo (bloco final).
- Paleta Cellini preservada (ouro #b8865a + navy #0d1f3e), via tokens do vidro.
════════════════════════════════════════════════════════════════════════ */
:root{
/* molas de movimento */
--mola:cubic-bezier(.34,1.46,.5,1); /* leve overshoot — entradas, lift de card */
--suave:cubic-bezier(.32,.8,.24,1); /* sem overshoot — foco, hover, press */
/* elevações em camadas (sensação 3D: sombra de contato + sombra ambiente) */
--elev-1:0 1px 2px rgba(16,24,40,.05), 0 4px 10px -4px rgba(16,24,40,.10);
--elev-2:0 2px 4px rgba(16,24,40,.05), 0 12px 26px -8px rgba(16,24,40,.16);
--elev-3:0 4px 8px rgba(16,24,40,.06), 0 24px 50px -12px rgba(13,31,62,.26);
}
/* ─── 1) CAMPOS DE FORMULÁRIO ───────────────────────────────────────────────
Os painéis de Gestão (IA, WhatsApp, Asaas, NFS-e, Captura, Grupo) e vários
modais usam — borda fina,
canto duro, sem foco. Isto normaliza TODOS (vence o inline com !important),
preservando as buscas-pílula e selects de status que o vidro já estilizou. */
.palco form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=search]),
.palco form select:not(.sel-status-srv):not(.filtro-select-input),
.palco form textarea,
.status-card input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=search]),
.status-card select:not(.sel-status-srv):not(.filtro-select-input),
.status-card textarea,
.modal-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=search]),
.modal-form select:not(.sel-status-srv):not(.filtro-select-input),
.modal-form textarea{
border-radius:12px !important;
border:1px solid var(--border,#E5E7EB) !important;
background:var(--surface,#fff);
color:var(--text,#14161B);
transition:border-color .16s var(--suave), box-shadow .16s var(--suave),
background .16s ease !important;
}
.palco form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search]):hover,
.palco form select:not(.sel-status-srv):hover,
.palco form textarea:hover,
.status-card input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search]):hover,
.status-card select:not(.sel-status-srv):hover,
.status-card textarea:hover{ border-color:var(--prata,#9AA4B2) !important; }
.palco form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search]):focus,
.palco form select:not(.sel-status-srv):focus,
.palco form textarea:focus,
.status-card input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search]):focus,
.status-card select:not(.sel-status-srv):focus,
.status-card textarea:focus,
.modal-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=search]):focus,
.modal-form select:not(.sel-status-srv):focus,
.modal-form textarea:focus{
outline:none !important;
border-color:var(--brand,#B8865A) !important;
box-shadow:0 0 0 3px var(--brand-ring,rgba(184,134,90,.34)) !important;
background:var(--surface,#fff) !important;
}
/* ─── 2) BOTÕES: tátil em qualquer superfície do app ─────────────────────────
Todo botão (inclusive os de ação com estilo inline) ganha resposta ao toque.
.btn-primario/.btn-secundario já têm o seu próprio :active no vidro — aqui só
completamos os demais, sem conflito (mesmo valor de escala). */
.palco button, .modal-form button{
transition:transform .13s var(--suave), filter .16s ease,
box-shadow .2s var(--suave), background .16s ease, color .15s ease;
}
.palco button:active, .modal-form button:active{ transform:scale(.97); }
/* sub-abas e pílulas de ação: leve elevação no hover (mais "vivas") */
.sub-tab:hover{ transform:translateY(-1px); }
.fin-acao:hover, .cat-add-item:hover, .wa-toggle-btn:hover{ transform:translateY(-1px); }
/* ─── 3) CARDS: profundidade 3D + lift com mola ─────────────────────────────
Lift mais alto e sombra em camadas (contato + ambiente) = sensação de relevo.
O fio metálico no topo (vidro) permanece; aqui só o movimento e a sombra. */
.status-card, .entry, .usr-card, .cli-card, .cat-grupo, .roteiro,
.placeholder, .wa-item{
transition:transform .24s var(--mola), box-shadow .24s var(--mola),
border-color .18s ease !important;
}
.status-card:hover, .entry:hover, .usr-card:hover, .cli-card:hover{
transform:translateY(-3px) !important;
box-shadow:var(--elev-3) !important;
border-color:var(--border-strong,#D6DAE0) !important;
}
/* cards clicáveis "afundam" ao pressionar (feedback de clique) */
.usr-card:active, .cli-card:active, .entry:active{ transform:translateY(-1px) !important; }
/* ─── 4) ENTRADAS DE TELA: troca de view/sub-aba sobe com mola ───────────────
Cada vez que uma view/sub-view recebe .ativa, ela entra com fade-up. Um
disparo só (sem loop). O #mapa fica de fora (Leaflet não gosta de transform
no ancestral durante a inicialização). */
.view.ativa:not(#mapa):not(#view-mapa){ animation:fluidoSobe .34s var(--mola) both; }
.sub-view.ativa{ animation:fluidoSobe .30s var(--mola) both; }
@keyframes fluidoSobe{
from{ opacity:0; transform:translateY(10px); }
to { opacity:1; transform:none; }
}
/* ─── 5) MODAIS: entrada com mola (mais leve que o "pop" atual) ──────────────*/
.modal-painel{ animation:fluidoModal .36s var(--mola) both !important; }
@keyframes fluidoModal{
from{ opacity:0; transform:translateY(18px) scale(.965); }
to { opacity:1; transform:none; }
}
/* ─── 6) CHAT (Dentito + WhatsApp): balões entram suaves ─────────────────────*/
.dentito-msg{ animation:fluidoBalao .26s var(--suave) both; }
/* .wa-msg só anima na PRIMEIRA abertura da conversa (classe posta pelo app.js):
o poll de 12s refaz o innerHTML e, sem o escopo, o histórico inteiro repiscava. */
.wa-msgs.anim-entrada .wa-msg{ animation:fluidoBalao .26s var(--suave) both; }
@keyframes fluidoBalao{
from{ opacity:0; transform:translateY(6px) scale(.99); }
to { opacity:1; transform:none; }
}
/* o FAB do Dentito reage ao toque */
.dentito-fab:active{ transform:scale(.94); }
/* ─── 7) TOAST: desce com mola (o app.js posiciona; só a entrada) ────────────*/
#app-toast>div{ animation:fluidoToast .3s var(--mola) both; }
@keyframes fluidoToast{
from{ opacity:0; transform:translateY(-10px) scale(.98); }
to { opacity:1; transform:none; }
}
/* ════════════════════════════════════════════════════════════════════════
PÁGINAS PÚBLICAS (.pg-publica) e LOGIN (.pg-login)
O vidro já deu vidro + foco; aqui entram a mola, a profundidade 3D e o toque.
════════════════════════════════════════════════════════════════════════ */
.pg-publica .pedido, .pg-publica .cli-card, .pg-publica .item,
.pg-publica .busca, .pg-publica .card{
transition:transform .24s var(--mola), box-shadow .24s var(--mola),
border-color .18s ease !important;
}
.pg-publica .pedido:hover, .pg-publica .item:hover, .pg-publica .card:hover{
transform:translateY(-3px) !important;
box-shadow:var(--elev-3) !important;
}
.pg-publica .item:active{ transform:translateY(-1px) !important; }
.pg-publica .busca input:hover{ border-color:var(--prata,#9AA4B2); }
.pg-publica .busca input:focus{
outline:none; border-color:var(--brand,#B8865A);
box-shadow:0 0 0 3px var(--brand-ring,rgba(184,134,90,.34));
}
.pg-publica .busca button, .pg-publica .btn, .pg-publica .btn-aceitar{
transition:transform .14s var(--suave), filter .16s ease, box-shadow .2s var(--suave);
}
.pg-publica .busca button:active, .pg-publica .btn:active, .pg-publica .btn-aceitar:active{
transform:scale(.97);
}
/* login: o cartão entra com mola; campos e botão respondem ao toque */
.pg-login .login-card{ animation:fluidoModal .42s var(--mola) both; }
.pg-login .campo input{
transition:border-color .16s var(--suave), box-shadow .16s var(--suave), background .16s ease;
}
.pg-login .btn-login:active{ transform:scale(.97); }
/* ════════════════════════════════════════════════════════════════════════
KILL SWITCH — prefers-reduced-motion mata TUDO (mantenha como última regra)
════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{ animation:none !important; transition:none !important; }
}