/* ============================================================
PORTAL FAVA — PADRÃO COMUM DO TOPO (barra + abas + tema)
------------------------------------------------------------
UM arquivo, IGUAL nos 8 apps + portal. Ele padroniza SÓ o
cabeçalho superior, as abas e os tokens de tema — o miolo de
cada app continua sendo dele.
Como usar no HTML do app:
…
TEMA: a escolha vive em , salva
em localStorage["fava_tema"] por fava-topo.js. Sem nada salvo,
segue o tema do sistema (prefers-color-scheme).
Os nomes começam com "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.
============================================================ */
/* ---------- TEMA CLARO (padrão) ---------- */
:root{
--fv-bg:#f4f5f7;
--fv-card:#ffffff;
--fv-card2:#f8fafc;
--fv-line:#e5e7eb;
--fv-line-forte:#d1d5db;
--fv-ink:#111827; /* texto principal */
--fv-ink2:#374151; /* texto secundário */
--fv-muted:#6b7280; /* rótulos, abas inativas */
--fv-faint:#5f6875; /* medido: #9ca3af dava 2,5:1 no branco (sumia) e
#6b7280 ficava em 4,43:1 sobre o cinza dos cards —
raspando o mínimo de 4,5. A hierarquia se faz pelo
tamanho da fonte, não por um cinza ilegível. */
--fv-acento:#2563eb; /* aba ativa, foco */
--fv-acento-forte:#1d4ed8;
--fv-acento-suave:#eff6ff;
--fv-acento-contraste:#ffffff;
--fv-ok:#16a34a; --fv-ok-bg:#dcfce7; --fv-ok-ink:#15803d;
--fv-atencao:#b45309; --fv-atencao-bg:#fef3c7; --fv-atencao-ink:#92400e;
--fv-erro:#dc2626; --fv-erro-bg:#fee2e2; --fv-erro-ink:#b91c1c;
--fv-campo-bg:#ffffff; /* fundo do input */
--fv-campo-ink:#111827; /* TEXTO DIGITADO — nunca pode sumir no fundo */
--fv-campo-line:#d1d5db;
--fv-campo-placeholder:#9ca3af;
--fv-r:8px; --fv-r-sm:6px; --fv-pilula:999px;
--fv-fonte:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--fv-sombra:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.08);
--fv-topo-altura:56px;
}
/* ---------- TEMA ESCURO ---------- */
/* O verde neon claro é o DESTAQUE (aba ativa, foco, marca). As
bordas comuns seguem cinza-azuladas: se tudo brilhasse, nada
se destacaria. */
:root[data-tema="escuro"]{
--fv-bg:#0e1116;
--fv-card:#161b22;
--fv-card2:#1c222c;
--fv-line:#2a313c;
--fv-line-forte:#3a4351;
--fv-ink:#e8ecf2;
--fv-ink2:#c5ccd8;
--fv-muted:#93a0b4; /* contraste ≥ 4.5:1 sobre o card */
--fv-faint:#7d8a9e;
--fv-acento:#6ef0a4; /* verde neon claro */
--fv-acento-forte:#9dffc6;
--fv-acento-suave:#12241a;
--fv-acento-contraste:#04120a; /* texto ESCURO sobre o verde */
--fv-ok:#4ade80; --fv-ok-bg:#0f2a1a; --fv-ok-ink:#86efac;
--fv-atencao:#fbbf24; --fv-atencao-bg:#2a2110; --fv-atencao-ink:#fcd34d;
--fv-erro:#f87171; --fv-erro-bg:#2c1416; --fv-erro-ink:#fca5a5;
--fv-campo-bg:#11161d;
--fv-campo-ink:#e8ecf2;
--fv-campo-line:#39424f;
--fv-campo-placeholder:#7d8a9e;
--fv-sombra:0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}
/* Sem escolha salva, segue o sistema. O seletor de cima continua
vencendo quando a pessoa escolhe à mão (é mais específico). */
@media (prefers-color-scheme: dark){
:root:not([data-tema="claro"]){
--fv-bg:#0e1116; --fv-card:#161b22; --fv-card2:#1c222c;
--fv-line:#2a313c; --fv-line-forte:#3a4351;
--fv-ink:#e8ecf2; --fv-ink2:#c5ccd8; --fv-muted:#93a0b4; --fv-faint:#7d8a9e;
--fv-acento:#6ef0a4; --fv-acento-forte:#9dffc6; --fv-acento-suave:#12241a; --fv-acento-contraste:#04120a;
--fv-ok:#4ade80; --fv-ok-bg:#0f2a1a; --fv-ok-ink:#86efac;
--fv-atencao:#fbbf24; --fv-atencao-bg:#2a2110; --fv-atencao-ink:#fcd34d;
--fv-erro:#f87171; --fv-erro-bg:#2c1416; --fv-erro-ink:#fca5a5;
--fv-campo-bg:#11161d; --fv-campo-ink:#e8ecf2; --fv-campo-line:#39424f; --fv-campo-placeholder:#7d8a9e;
--fv-sombra:0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}
}
/* ============================================================
BARRA SUPERIOR
============================================================ */
.fv-topbar{
position:sticky; top:0; z-index:60;
display:flex; align-items:center; gap:14px;
height:var(--fv-topo-altura); padding:0 18px;
background:var(--fv-card); border-bottom:1px solid var(--fv-line);
font-family:var(--fv-fonte); color:var(--fv-ink);
}
:root[data-tema="escuro"] .fv-topbar{ border-bottom-color:var(--fv-line); }
/* ‹ Portal */
.fv-voltar{
display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
text-decoration:none; cursor:pointer; font-size:13px; font-weight:600;
color:var(--fv-ink2); background:var(--fv-card);
border:1px solid var(--fv-line); padding:7px 12px; border-radius:var(--fv-r);
transition:background .18s, border-color .18s, color .18s;
}
.fv-voltar:hover{ background:var(--fv-card2); border-color:var(--fv-line-forte); color:var(--fv-ink); }
:root[data-tema="escuro"] .fv-voltar:hover{ border-color:var(--fv-acento); color:var(--fv-acento); }
.fv-voltar svg{ width:15px; height:15px; }
/* MARCA — a folha FAVA. Embutida como data URI de propósito: o
padrao-fava.css é copiado para dentro dos 8 apps (e para dentro do .py do
horímetro), e um exigiria um caminho diferente em cada um, que
quebraria ora no portal, ora com o app aberto sozinho. 42x68 @2x ≈ 5 KB.
O texto do elemento (o antigo "F") é engolido pelo font-size:0 — assim
quem ainda tiver `
F
` no HTML continua certo. */
.fv-marca{
width:26px; height:34px; flex:0 0 auto; font-size:0; line-height:0;
background:url("data:image/png;base64,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") center/contain no-repeat;
}
/* No escuro a folha é escura demais contra o fundo: um leve realce a destaca
sem descaracterizar a marca. */
:root[data-tema="escuro"] .fv-marca{
filter:drop-shadow(0 0 6px rgba(110,240,164,.35)) brightness(1.08);
}
/* título + subtítulo */
.fv-titulo{ font-weight:700; font-size:16px; line-height:1.1; letter-spacing:-.01em; color:var(--fv-ink); min-width:0; }
.fv-titulo small{ display:block; font-weight:500; font-size:11.5px; color:var(--fv-muted); letter-spacing:0;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fv-espaco{ flex:1 1 auto; min-width:8px; }
/* chip do usuário */
.fv-usuario{
display:inline-flex; align-items:center; gap:8px; flex:0 0 auto;
padding:5px 11px 5px 8px; border-radius:var(--fv-pilula);
border:1px solid var(--fv-line); background:var(--fv-card);
font-size:13px; color:var(--fv-ink2); max-width:min(38vw,320px);
}
.fv-usuario .fv-av{
width:24px; height:24px; border-radius:50%; flex:0 0 auto;
display:flex; align-items:center; justify-content:center;
background:var(--fv-acento-suave); color:var(--fv-acento);
}
.fv-usuario .fv-av svg{ width:14px; height:14px; }
.fv-usuario b{ color:var(--fv-ink); font-weight:600; }
.fv-usuario .fv-perfil{ font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--fv-muted); }
.fv-usuario .fv-nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
:root[data-tema="escuro"] .fv-usuario{ border-color:var(--fv-line); }
/* botão de TEMA — fica colado no usuário, como pediu o dono */
.fv-tema{
display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
width:34px; height:34px; border-radius:var(--fv-r); cursor:pointer;
border:1px solid var(--fv-line); background:var(--fv-card); color:var(--fv-ink2);
transition:.18s; padding:0;
}
.fv-tema:hover{ border-color:var(--fv-line-forte); color:var(--fv-acento); }
:root[data-tema="escuro"] .fv-tema:hover{ border-color:var(--fv-acento); color:var(--fv-acento); box-shadow:0 0 0 1px var(--fv-acento-suave); }
.fv-tema svg{ width:17px; height:17px; }
/* o sol aparece no escuro; a lua, no claro */
.fv-tema .fv-sol{ display:none; }
:root[data-tema="escuro"] .fv-tema .fv-sol{ display:block; }
:root[data-tema="escuro"] .fv-tema .fv-lua{ display:none; }
@media (prefers-color-scheme: dark){
:root:not([data-tema="claro"]) .fv-tema .fv-sol{ display:block; }
:root:not([data-tema="claro"]) .fv-tema .fv-lua{ display:none; }
}
/* relógio */
.fv-relogio{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.1; flex:0 0 auto; }
.fv-relogio b{ font-size:13px; font-weight:600; color:var(--fv-ink); font-variant-numeric:tabular-nums; }
.fv-relogio span{ font-size:11px; color:var(--fv-faint); }
/* BARRA ÚNICA (2026-07-28).
Antes, dentro do portal ficavam DUAS faixas de 56px empilhadas: a do portal
(‹ Portal · marca · título · abrir em nova aba) e, logo abaixo, dentro do
iframe, esta. Para não gastar 112px de tela com dois cabeçalhos, o portal
agora ESCONDE a faixa dele e esta aqui vira a única — por isso o "‹ Portal"
e a marca voltam a aparecer quando embutido (era o oposto até aqui).
O "‹ Portal" embutido não navega: avisa o portal por postMessage para ele
fechar o app e voltar ao painel (fava-topo.js, ligarVoltarPortal).
A classe .fv-embutido é posta por fava-topo.js (marcarEmbutido).
"Abrir em nova aba" só existe embutido — fora do portal a aba JÁ é esta. */
.fv-nova-aba{ display:none; }
.fv-embutido .fv-nova-aba{
display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
text-decoration:none; cursor:pointer; font-size:12.5px; font-weight:600;
color:var(--fv-ink2); background:var(--fv-card);
border:1px solid var(--fv-line); padding:6px 10px; border-radius:var(--fv-r);
transition:background .18s, border-color .18s, color .18s;
}
.fv-embutido .fv-nova-aba:hover{ background:var(--fv-card2); border-color:var(--fv-line-forte); color:var(--fv-ink); }
:root[data-tema="escuro"] .fv-embutido .fv-nova-aba:hover{ border-color:var(--fv-acento); color:var(--fv-acento); }
.fv-nova-aba svg{ width:13px; height:13px; }
/* Telas estreitas: o texto sai, o ícone fica (o alvo de toque continua). */
@media (max-width:760px){
.fv-embutido .fv-nova-aba span{ display:none; }
}
@media (max-width:620px){
/* mesmo aperto de padding que o .fv-voltar leva nesta faixa */
.fv-embutido .fv-nova-aba{ padding:7px 9px; }
}
/* O título não pode empurrar a barra: com o "Nova aba" ocupando ~110px, um
título longo (grãos, nota×peso) estourava a linha ou quebrava em duas dentro
de uma faixa de altura FIXA. Trunca com reticências, como o subtítulo. */
.fv-titulo{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* ============================================================
ABAS
============================================================ */
.fv-tabbar{
position:sticky; top:var(--fv-topo-altura); z-index:55;
display:flex; gap:2px; padding:0 12px; overflow-x:auto;
background:var(--fv-card); border-bottom:1px solid var(--fv-line);
font-family:var(--fv-fonte);
scrollbar-width:none;
}
.fv-tabbar::-webkit-scrollbar{ height:0; }
.fv-tab{
flex:0 0 auto; display:inline-flex; align-items:center; gap:7px;
cursor:pointer; white-space:nowrap; border:0; background:none;
font-family:inherit; font-size:13.5px; font-weight:600; color:var(--fv-muted);
padding:13px 14px 11px; border-bottom:2px solid transparent;
transition:color .16s, background .16s, border-color .16s;
}
.fv-tab svg{ width:16px; height:16px; flex:0 0 auto; }
.fv-tab:hover{ color:var(--fv-ink2); background:var(--fv-card2); }
.fv-tab[aria-selected="true"], .fv-tab.ativa{
color:var(--fv-acento-forte); border-bottom-color:var(--fv-acento);
}
:root[data-tema="escuro"] .fv-tab[aria-selected="true"],
:root[data-tema="escuro"] .fv-tab.ativa{
color:var(--fv-acento-forte);
border-bottom-color:var(--fv-acento);
box-shadow:inset 0 -6px 12px -10px var(--fv-acento); /* brilho discreto */
}
/* o número usa --fv-ink2, não --fv-muted: cinza médio sobre a pílula cinza
ficava em 3.9:1 (abaixo do mínimo legível). */
.fv-tab .fv-conta{
font-size:10.5px; font-weight:700; color:var(--fv-ink2);
background:var(--fv-line); border-radius:var(--fv-pilula); padding:1px 7px;
}
.fv-tab[aria-selected="true"] .fv-conta, .fv-tab.ativa .fv-conta{
color:var(--fv-acento-forte); background:var(--fv-acento-suave);
}
.fv-tab:focus-visible{ outline:2px solid var(--fv-acento); outline-offset:-2px; }
/* ============================================================
CAMPOS — o texto digitado SEMPRE acompanha o tema
(era a queixa: input branco no tema escuro)
============================================================ */
.fv-tema-campos input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.fv-tema-campos select,
.fv-tema-campos textarea{
background-color:var(--fv-campo-bg);
color:var(--fv-campo-ink);
border:1px solid var(--fv-campo-line);
border-radius:var(--fv-r-sm);
font-family:inherit; font-size:inherit;
}
.fv-tema-campos input::placeholder,
.fv-tema-campos textarea::placeholder{ color:var(--fv-campo-placeholder); opacity:1; }
.fv-tema-campos input:focus,
.fv-tema-campos select:focus,
.fv-tema-campos textarea:focus{
outline:none; border-color:var(--fv-acento);
box-shadow:0 0 0 3px var(--fv-acento-suave);
}
.fv-tema-campos input:disabled,
.fv-tema-campos select:disabled,
.fv-tema-campos textarea:disabled{
background-color:var(--fv-card2); color:var(--fv-muted); cursor:not-allowed;
}
/* o Chrome pinta o autofill de amarelo/branco e some com o texto no escuro */
:root[data-tema="escuro"] .fv-tema-campos input:-webkit-autofill,
:root[data-tema="escuro"] .fv-tema-campos textarea:-webkit-autofill,
:root[data-tema="escuro"] .fv-tema-campos select:-webkit-autofill{
-webkit-text-fill-color:var(--fv-campo-ink);
-webkit-box-shadow:0 0 0 1000px var(--fv-campo-bg) inset;
caret-color:var(--fv-campo-ink);
}
/* calendário/relógio nativos ficam invisíveis no escuro sem isto */
:root[data-tema="escuro"] .fv-tema-campos input[type="date"],
:root[data-tema="escuro"] .fv-tema-campos input[type="time"],
:root[data-tema="escuro"] .fv-tema-campos input[type="month"],
:root[data-tema="escuro"] .fv-tema-campos input[type="datetime-local"]{ color-scheme:dark; }
/* ============================================================
Responsivo — em tela estreita some o supérfluo, some o essencial NÃO
============================================================ */
@media (max-width:860px){
.fv-topbar{ gap:10px; padding:0 12px; }
.fv-relogio{ display:none; }
.fv-titulo small{ display:none; }
}
@media (max-width:620px){
.fv-usuario .fv-nome, .fv-voltar span{ display:none; }
.fv-voltar{ padding:7px 9px; }
}
/* ============================================================
Impressão — o relatório sai no papel sem a casca do sistema
============================================================ */
@media print{
.fv-topbar, .fv-tabbar{ display:none !important; }
}