/* ============================================================
PORTAL FAVA — TELA DE CARREGAMENTO (padrão comum) · CSS
------------------------------------------------------------
UM arquivo, IGUAL em todos os apps + portal. Acompanha o
fava-boot.js. Padroniza SÓ a tela que cobre o app enquanto
ele busca os dados de abertura — o miolo continua sendo
de cada app.
A tela nasceu no "NOTA × PESO" (public/css/loading.css) e foi
generalizada aqui para os demais. A regra que a define:
CADA LINHA É UMA ETAPA REAL. A bolinha acende quando aquele
trabalho COMEÇA de verdade e vira ✓ quando ele termina. Não
é enfeite, não é temporizador. App que carrega pouco tem
POUCAS linhas; app que carrega muito tem mais.
Como usar no HTML do app:
(tokens --fv-*)
e o bloco #fvBoot logo depois do (ver fava-boot.js).
Prefixo "fv-" de propósito: os apps têm CSS próprio (e o
Recebimento tem Tailwind embutido) — o prefixo evita que uma
classe genérica de um lado apague a do outro.
Os var(--fv-…, #fallback) existem porque este arquivo pode
carregar ANTES do padrao-fava.css (ou sem ele, num app que
ainda não migrou o topo): sem token, a tela ainda fica legível.
============================================================ */
/* ---------- a cortina ---------- */
/* z-index 9000: acima de qualquer modal dos apps (o maior em uso
hoje é 1000, no Controle diário) e acima da barra do topo (60). */
.fv-boot{
position:fixed; inset:0; z-index:9000;
display:flex; align-items:center; justify-content:center;
background:var(--fv-bg,#f4f5f7);
font-family:var(--fv-fonte,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);
transition:opacity .45s ease, visibility .45s;
}
/* No escuro o cinza-chapado fica morto; o degradê azul-marinho é o
mesmo da marca usado no Nota × Peso. */
:root[data-tema="escuro"] .fv-boot{
background:radial-gradient(1200px 600px at 50% -10%, #123a5e 0%, #0a2138 55%, #06182b 100%);
}
@media (prefers-color-scheme: dark){
:root:not([data-tema="claro"]) .fv-boot{
background:radial-gradient(1200px 600px at 50% -10%, #123a5e 0%, #0a2138 55%, #06182b 100%);
}
}
.fv-boot.fv-boot-saindo{ opacity:0; visibility:hidden; pointer-events:none; }
.fv-boot[hidden]{ display:none; }
/* Nem todo app reseta o box-sizing (o Comboio e o Recebimento resetam; o Grãos
não). Sem isto o cartão sai 60px mais largo num app do que no outro — e a
promessa aqui é ser IGUAL em todos. */
.fv-boot, .fv-boot *{ box-sizing:border-box; }
/* ---------- o cartão ---------- */
.fv-boot-cartao{
width:min(460px,92vw); padding:34px 30px 30px; text-align:center;
color:var(--fv-ink2,#374151);
}
/* Placa branca atrás da marca: a folha da FAVA é escura e sumiria
no tema claro sem ela — e no escuro ela é o único ponto de luz. */
.fv-boot-placa{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
min-height:44px; padding:8px 14px;
background:#fff; border-radius:12px;
box-shadow:0 6px 24px rgba(0,0,0,.18);
animation:fvBootFlutuar 2.4s ease-in-out infinite;
}
/* A marca reaproveita o .fv-marca do padrao-fava.css (PNG em base64,
sem arquivo externo: o app abre sem internet). Aqui só o tamanho. */
.fv-boot-placa .fv-marca{ width:30px; height:40px; }
/* No claro o realce do escuro não se aplica: a placa já é branca. */
:root[data-tema="escuro"] .fv-boot-placa .fv-marca{ filter:none; }
/* Logo próprio do app (opcional): na placa.
Se o arquivo faltar, o alt="" some e a folha ao lado segura a marca. */
.fv-boot-logo{ height:34px; width:auto; display:block; }
@keyframes fvBootFlutuar{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.fv-boot-titulo{
margin-top:20px; font-size:17px; font-weight:700; letter-spacing:.3px;
color:var(--fv-ink,#111827); line-height:1.25;
}
.fv-boot-sub{ margin-top:6px; font-size:12px; color:var(--fv-muted,#6b7280); line-height:1.4; }
/* ---------- barra indeterminada ---------- */
/* Não mostra porcentagem de propósito: porcentagem exigiria saber o
tamanho do trabalho, e não sabemos. O que ela promete é só "ainda
estou viva" — o progresso de verdade quem conta é a lista abaixo. */
.fv-boot-trilho{
margin:22px 0 20px; height:4px; border-radius:4px;
background:var(--fv-line,#e5e7eb); overflow:hidden;
}
.fv-boot-trilho > i{
display:block; height:100%; width:38%; border-radius:4px;
background:linear-gradient(90deg,transparent,#15a34a 25%,#4ade80 50%,#15a34a 75%,transparent);
animation:fvBootCorrer 1.35s cubic-bezier(.65,0,.35,1) infinite;
}
@keyframes fvBootCorrer{ 0%{transform:translateX(-110%)} 100%{transform:translateX(330%)} }
/* ---------- as etapas ---------- */
.fv-boot-etapas{
list-style:none; margin:0; padding:0; text-align:left;
display:flex; flex-direction:column; gap:9px;
}
.fv-boot-etapas li{
display:flex; align-items:center; gap:11px;
font-size:12.5px; line-height:1.35; color:var(--fv-muted,#6b7280);
opacity:0; transform:translateY(6px);
animation:fvBootSubir .35s ease forwards;
}
@keyframes fvBootSubir{ to{opacity:1; transform:none} }
.fv-boot-etapas li .fv-boot-ic{
width:17px; height:17px; flex:0 0 auto;
display:flex; align-items:center; justify-content:center;
border-radius:50%; border:1.5px solid var(--fv-line-forte,#d1d5db);
font-size:10px; font-weight:800; line-height:1;
}
/* em andamento: o anel abre um vão e gira — é o "está acontecendo agora" */
.fv-boot-etapas li.fv-fazendo{ color:var(--fv-ink,#111827); }
.fv-boot-etapas li.fv-fazendo .fv-boot-ic{
border-color:var(--fv-ok,#16a34a); border-top-color:transparent;
animation:fvBootGirar .7s linear infinite;
}
@keyframes fvBootGirar{ to{transform:rotate(360deg)} }
/* concluída */
.fv-boot-etapas li.fv-ok{ color:var(--fv-ink2,#374151); }
/* o ✓ usa a cor do CARTÃO: no escuro o verde é claro e um ✓ branco sumiria */
.fv-boot-etapas li.fv-ok .fv-boot-ic{
border-color:var(--fv-ok,#16a34a); background:var(--fv-ok,#16a34a);
color:var(--fv-card,#fff);
}
/* RODOU E NÃO DEU CERTO, mas o app abriu assim mesmo (o Sankhya caiu e o
painel está servindo o último retrato salvo). Traço âmbar, nunca ✓ — dizer
"deu certo" aqui seria mentir para quem vai tomar decisão com o número.
O porquê fica no title da linha. */
.fv-boot-etapas li.fv-parcial{ color:var(--fv-atencao-ink,#92400e); }
.fv-boot-etapas li.fv-parcial .fv-boot-ic{
border-color:var(--fv-atencao,#b45309); background:var(--fv-atencao,#b45309);
color:var(--fv-card,#fff); animation:none;
}
/* a etapa que estava rodando na hora do erro — é ELA que o suporte precisa
enxergar de longe ("parou no Oracle" x "parou no cruzamento") */
.fv-boot-etapas li.fv-falhou{ color:var(--fv-erro-ink,#b91c1c); }
.fv-boot-etapas li.fv-falhou .fv-boot-ic{
border-color:var(--fv-erro,#dc2626); background:var(--fv-erro,#dc2626);
color:var(--fv-card,#fff); animation:none;
}
/* etapa que nem chegou a rodar porque outra falhou antes */
.fv-boot-etapas li.fv-parada{ opacity:.45; }
/* ---------- erro ---------- */
.fv-boot-erro{
margin-top:24px; padding:16px 18px; border-radius:11px; text-align:left;
background:var(--fv-erro-bg,#fee2e2); border:1px solid var(--fv-erro,#dc2626);
color:var(--fv-erro-ink,#b91c1c);
display:flex; flex-direction:column; gap:10px;
font-size:12.5px; line-height:1.5;
}
.fv-boot-erro[hidden]{ display:none; }
.fv-boot-erro .fv-be-topo{ display:flex; align-items:center; gap:10px; }
.fv-boot-erro .fv-be-ic{ font-size:19px; flex:0 0 auto; }
.fv-boot-erro b{ color:var(--fv-ink,#111827); font-size:13.5px; }
/* detalhe técnico (ORA-01017, ECONNREFUSED): ouro para o suporte,
discreto para quem só quer usar. Vazio, some. */
.fv-boot-erro .fv-be-msg{
font-size:10.5px; color:var(--fv-erro-ink,#b91c1c);
word-break:break-word; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.fv-boot-erro .fv-be-msg:empty{ display:none; }
.fv-boot-btn{
align-self:flex-start; cursor:pointer;
padding:8px 14px; border-radius:var(--fv-r,8px);
border:1px solid var(--fv-acento,#2563eb);
background:var(--fv-acento,#2563eb); color:var(--fv-acento-contraste,#fff);
font-family:inherit; font-size:12.5px; font-weight:600;
}
.fv-boot-btn:hover{ background:var(--fv-acento-forte,#1d4ed8); border-color:var(--fv-acento-forte,#1d4ed8); }
.fv-boot-btn:focus-visible{ outline:2px solid var(--fv-acento,#2563eb); outline-offset:2px; }
/* ---------- acessibilidade e impressão ---------- */
/* Quem pediu menos movimento continua vendo o ESTADO (bolinha vazia,
anel aberto, ✓) — só não vê nada girando, pulsando ou correndo. */
@media (prefers-reduced-motion: reduce){
.fv-boot, .fv-boot-placa, .fv-boot-trilho > i,
.fv-boot-etapas li, .fv-boot-etapas li.fv-fazendo .fv-boot-ic{
animation:none !important; transition:none !important;
}
.fv-boot-etapas li{ opacity:1; transform:none; }
}
@media print{ .fv-boot{ display:none !important; } }