/* ===================================================================== Portal FAVA — capa (login + cards) e o quadro que hospeda os apps. --------------------------------------------------------------------- TEMA CLARO E ESCURO. A escolha vive em e é gravada por fava/fava-topo.js (localStorage "fava_tema"). O portal começa no CLARO quando a máquina está no claro — antes ele era só escuro. Truque para não reescrever o arquivo inteiro: os NOMES dos tokens (--green, --mint, --panel, --line…) continuam os mesmos; só o VALOR deles muda por tema. Assim nenhuma regra visual abaixo precisou trocar de seletor — e nada de cor fixa sobrou solto no meio do CSS, que era o que sumia no tema oposto. Os tokens --fv-* vêm de fava/padrao-fava.css, carregado ANTES deste arquivo. Cuidado: portal e padrão usam nomes iguais (.card, .btn) com sentidos opostos — por isso o padrão é todo prefixado com "fv-" e as classes daqui NÃO foram renomeadas. ===================================================================== */ /* ---------- TEMA CLARO (padrão) ---------- */ :root{ --green:#15803d; /* verde de ação — legível sobre branco */ --mint:#0f766e; /* acento secundário (era ciano claro) */ --ink:#1f2937; /* texto corrente */ --title:#0f172a; /* títulos */ --muted:#4b5563; /* texto secundário */ --muted2:#5b6470; /* texto terciário */ --faint:#5b6470; /* numeração do card, rodapé — medido: #6b7280 dava 4,4:1 sobre o fundo da página (abaixo do mínimo) */ --line:#e3e8ee; --line2:#eef2f6; --panel:linear-gradient(160deg,#ffffff,#fbfdfb); --panel-hover:linear-gradient(160deg,#f1faf4,#ffffff); --chip-bg:#ffffff; --chip-hover:#f2f6f4; --field-bg:#ffffff; /* fundo do campo de login */ --field-solid:#ffffff; /* versão opaca (autofill do Chrome) */ --field-ink:#111827; /* TEXTO DIGITADO — nunca pode sumir */ --placeholder:#9ca3af; --code-bg:#eef2f6; --grad-a:#15803d; --grad-b:#0f766e; /* texto em degradê e barrinha do card */ --brand-line:rgba(21,128,61,.45); /* borda do card no hover */ --btn-bg:linear-gradient(100deg,#166534,#15803d); --btn-ink:#ffffff; --btn-sombra:0 12px 26px -18px rgba(21,128,61,.75); --icon-bg:#eef5f0; --icon-bg-hover:#dcf2e4; --sombra-card:0 1px 2px rgba(16,24,40,.05), 0 10px 26px -20px rgba(16,24,40,.45); --sombra-login:0 1px 2px rgba(16,24,40,.05), 0 26px 60px -40px rgba(16,24,40,.6); --realce-topo:rgba(255,255,255,0); /* o brilho interno só faz sentido no escuro */ --ok-bg:#dcfce7; --ok-ink:#15803d; --ok-line:#a3e6bd; --off-bg:#f1f5f9; --off-ink:#5b6470; --off-line:#dfe5ec; --bad:#b91c1c; --link:#15803d; /* links e rótulos de destaque (perfil, "Administração") */ --page-bg: radial-gradient(125% 80% at 50% -12%, rgba(21,128,61,.10), transparent 58%), radial-gradient(120% 75% at 50% 116%, rgba(15,118,110,.08), transparent 60%), linear-gradient(180deg,#f7f9f8 0%, #f2f5f3 60%, #eef2f0 100%); --veil:radial-gradient(58% 48% at 50% 36%, rgba(21,128,61,.05), transparent 70%); /* fundo animado (canvas) — o JS lê estes valores e monta o rgba() */ --planta-rgb:21,128,61; --folha-rgb:22,110,50; --brilho-rgb:15,118,110; --planta-forca:1.6; /* verde escuro sobre claro precisa de mais corpo */ --disp:'Space Grotesk',system-ui,sans-serif; --body:'Hanken Grotesk',system-ui,sans-serif; --r:16px; } /* ---------- TEMA ESCURO (o visual verde-noite original) ---------- */ :root[data-tema="escuro"]{ --green:#06BF34; --mint:#A2F2EA; --ink:#eaf5ec; --title:#f4fbf6; --muted:rgba(210,232,220,.72); --muted2:rgba(206,228,216,.56); --faint:rgba(206,228,216,.62); /* era .42 no original: dava 3,4:1 e quase sumia */ --line:rgba(162,242,234,.13); --line2:rgba(162,242,234,.08); --panel:linear-gradient(160deg, rgba(3,89,24,.34), rgba(13,13,13,.52)); --panel-hover:linear-gradient(160deg, rgba(6,191,52,.17), rgba(13,13,13,.55)); --chip-bg:rgba(162,242,234,.05); --chip-hover:rgba(162,242,234,.12); --field-bg:rgba(0,0,0,.22); --field-solid:#0d130f; --field-ink:#eaf5ec; --placeholder:rgba(206,228,216,.45); --code-bg:rgba(0,0,0,.25); --grad-a:#06BF34; --grad-b:#A2F2EA; --brand-line:rgba(6,191,52,.5); --btn-bg:linear-gradient(100deg,#06BF34,#3ad06a); --btn-ink:#04120a; --btn-sombra:0 14px 30px -16px rgba(6,191,52,.7); --icon-bg:rgba(162,242,234,.08); --icon-bg-hover:rgba(6,191,52,.22); --sombra-card:0 1px 0 rgba(255,255,255,.04) inset, 0 14px 34px -26px rgba(0,0,0,.9); --sombra-login:0 1px 0 rgba(255,255,255,.04) inset, 0 30px 70px -40px rgba(0,0,0,.9); --realce-topo:rgba(255,255,255,.06); --ok-bg:rgba(30,122,60,.16); --ok-ink:#7ee0a0; --ok-line:rgba(126,224,160,.28); --off-bg:rgba(162,242,234,.06); --off-ink:rgba(206,228,216,.6); --off-line:rgba(162,242,234,.14); --bad:#ff9a9a; --link:#7ee0a0; --page-bg: radial-gradient(125% 80% at 50% -12%, rgba(3,115,31,.30), transparent 58%), radial-gradient(120% 75% at 50% 116%, rgba(3,89,24,.40), transparent 60%), linear-gradient(180deg,#0b110d 0%, #070b08 60%, #060907 100%); --veil:radial-gradient(58% 48% at 50% 36%, rgba(6,191,52,.06), transparent 70%); --planta-rgb:110,205,140; --folha-rgb:70,195,105; --brilho-rgb:162,242,234; --planta-forca:1; } *{box-sizing:border-box} html,body{margin:0;padding:0;height:100%} body{ min-height:100vh; font-family:var(--body); color:var(--ink); overflow-x:hidden; background:var(--page-bg); } #bgc{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none} .bg-veil{position:fixed; inset:0; z-index:1; pointer-events:none; background:var(--veil)} .stage{position:relative; z-index:2; min-height:100vh; display:flex; flex-direction:column} @keyframes favaPulse{0%{box-shadow:0 0 0 0 rgba(6,191,52,.55)}70%{box-shadow:0 0 0 8px rgba(6,191,52,0)}100%{box-shadow:0 0 0 0 rgba(6,191,52,0)}} @keyframes favaGlow{0%,100%{filter:drop-shadow(0 8px 26px rgba(6,191,52,.20))}50%{filter:drop-shadow(0 8px 38px rgba(6,191,52,.36))}} @keyframes favaIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}} .pill{display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border-radius:999px; border:1px solid var(--line); background:var(--chip-bg); font-family:var(--disp); font-size:10.5px; font-weight:600; letter-spacing:.2em; color:var(--mint)} .pill .dot{width:7px; height:7px; border-radius:50%; background:var(--green); animation:favaPulse 2.4s ease-out infinite} .clock{display:flex; flex-direction:column; align-items:flex-end; gap:1px; font-family:var(--disp)} .clock b{font-size:14px; font-weight:600; color:var(--title); letter-spacing:.05em; font-variant-numeric:tabular-nums} .clock span{font-size:11px; color:var(--muted2)} .logo{width:clamp(120px,15vw,176px); height:auto; user-select:none; animation:favaGlow 5.5s ease-in-out infinite} .brand-sm{display:flex; align-items:center; gap:10px} .brand-sm img{height:34px; width:auto; filter:drop-shadow(0 6px 16px rgba(6,191,52,.25))} .grad{background:linear-gradient(100deg,var(--grad-a),var(--grad-b)); -webkit-background-clip:text; background-clip:text; color:transparent} .kicker{font-family:var(--disp); font-size:11px; font-weight:600; letter-spacing:.24em; color:var(--mint); opacity:.9} .muted{color:var(--muted)} /* ---------- LOGIN ---------- */ .login-wrap{flex:1; display:flex; align-items:center; justify-content:center; padding:24px; animation:favaIn .5s ease both} .login-card{position:relative; width:100%; max-width:380px; padding:34px 30px 28px; border-radius:22px; text-align:center; background:var(--panel); border:1px solid var(--line); box-shadow:var(--sombra-login)} .login-card .logo{width:132px; margin-bottom:14px} .login-card h1{margin:6px 0 2px; font-family:var(--disp); font-weight:600; font-size:23px; color:var(--title)} .login-card .sub{margin:0 0 22px; font-size:13px; color:var(--muted)} .field{display:flex; align-items:center; gap:10px; margin:10px 0; padding:11px 14px; border-radius:12px; border:1px solid var(--line); background:var(--field-bg); text-align:left} .field svg{width:17px; height:17px; color:var(--mint); opacity:.75; flex:0 0 auto} /* A cadeia :not() repete a do padrão de propósito: sem ela, a regra genérica ".fv-tema-campos input:not(…)" (que o fava-topo.js liga no ) é mais específica e transforma este campo — que é uma caixa COM ÍCONE dentro — num input quadrado comum, com moldura dupla. */ .field input, .fv-tema-campos .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]){ flex:1; background:none; border:0; outline:0; border-radius:0; padding:0; color:var(--field-ink); font-family:var(--body); font-size:14.5px} .field input::placeholder{color:var(--placeholder); opacity:1} /* O preenchimento automático do navegador pinta o campo de branco (a "barra branca" que destoava do tema escuro). Mantém o fundo e o texto do tema. */ .field input:-webkit-autofill, .field input:-webkit-autofill:hover, .field input:-webkit-autofill:focus, .field input:-webkit-autofill:active{ -webkit-text-fill-color:var(--field-ink); caret-color:var(--field-ink); -webkit-box-shadow:0 0 0 1000px var(--field-solid) inset; box-shadow:0 0 0 1000px var(--field-solid) inset; transition:background-color 100000s ease-in-out 0s; } .btn{width:100%; margin-top:16px; padding:12px; border:0; border-radius:12px; cursor:pointer; font-family:var(--disp); font-weight:600; font-size:14.5px; letter-spacing:.02em; color:var(--btn-ink); background:var(--btn-bg); transition:transform .3s, box-shadow .3s; box-shadow:var(--btn-sombra)} .btn:hover{transform:translateY(-2px); filter:brightness(1.06)} .login-note{margin-top:16px; font-size:11.5px; color:var(--muted2); display:flex; gap:6px; align-items:center; justify-content:center} .login-note svg{width:13px; height:13px} .login-note a{color:var(--link); font-weight:600} /* Texto de ajuda do "Defina sua senha": parágrafo normal (NÃO usar .login-note, que é flex e quebraria cada / em coluninhas). */ .troca-ajuda{margin:2px 0 16px; text-align:left; font-size:12.5px; line-height:1.6; color:var(--muted2)} .troca-ajuda b{color:var(--ink); font-weight:600} .troca-ajuda i{font-style:normal; color:var(--muted); background:var(--code-bg); padding:0 5px; border-radius:5px; font-size:11.5px; white-space:nowrap} /* Botão de tema do padrão, vestido com as cores do portal — senão ele aparece como um retângulo cinza-azulado no meio dos chips verdes da capa. */ .fv-tema{border-radius:10px; border:1px solid var(--line); background:var(--chip-bg); color:var(--ink)} .fv-tema:hover{border-color:var(--brand-line); background:var(--chip-hover); color:var(--green); box-shadow:none} :root[data-tema="escuro"] .fv-tema:hover{border-color:var(--brand-line); color:var(--green); box-shadow:none} /* Na tela de login ainda não há usuário para o botão ficar "ao lado" — então ele assume o canto superior do cartão. Sem isto, quem cai no login com a máquina no tema oposto não tem como trocar. */ .login-card .fv-tema{position:absolute; top:14px; right:14px} /* ---------- CARD (launcher) ---------- */ .card{position:relative; display:flex; flex-direction:column; gap:12px; padding:16px 17px 15px; min-height:132px; border-radius:var(--r); text-align:left; text-decoration:none; color:inherit; overflow:hidden; cursor:default; background:var(--panel); border:1px solid var(--line); box-shadow:var(--sombra-card); --ao:.45; --ax:-5px; --ib:var(--icon-bg); --ic:var(--mint); --isc:1; --tl:0; transition:transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s, box-shadow .45s, background .45s} .card:hover{transform:translateY(-6px); border-color:var(--brand-line); background:var(--panel-hover); box-shadow:0 1px 0 var(--realce-topo) inset, 0 22px 48px -24px var(--brand-line); --ao:1; --ax:0px; --ib:var(--icon-bg-hover); --ic:var(--green); --isc:1.06; --tl:1} .card .bar{position:absolute; top:0; left:0; right:0; height:2px; transform:scaleX(var(--tl)); transform-origin:left center; background:linear-gradient(90deg, transparent, var(--grad-a) 35%, var(--grad-b) 65%, transparent); transition:transform .55s cubic-bezier(.2,.8,.2,1)} /* Número do sistema: canto INFERIOR direito — o superior é da etiqueta ("ativo"/ "em breve"/"sem acesso"), que ficava por cima dele. */ .card .num{position:absolute; bottom:13px; right:15px; font-family:var(--disp); font-size:11px; font-weight:500; letter-spacing:.12em; color:var(--faint)} .sysicon{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:var(--ib); color:var(--ic); transform:scale(var(--isc)); transition:background .4s, color .4s, transform .4s} .sysicon svg{width:22px; height:22px} .card h3{margin:0; font-family:var(--disp); font-size:15.5px; font-weight:600; letter-spacing:-.01em; line-height:1.22; color:var(--title)} .card p{margin:5px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted)} .card .go{display:flex; align-items:center; gap:6px; margin-top:auto; font-family:var(--disp); font-size:12px; font-weight:500; color:var(--mint); opacity:var(--ao); transform:translateX(var(--ax)); transition:opacity .4s, transform .4s} .card .go svg{width:14px; height:14px} .preview-tag{position:absolute; bottom:13px; right:15px; font-size:10px; letter-spacing:.08em; color:var(--faint); font-family:var(--disp)} /* chip usuário / logout */ .userchip{display:inline-flex; align-items:center; gap:9px; padding:6px 8px 6px 12px; border-radius:999px; border:1px solid var(--line); background:var(--chip-bg); font-size:12.5px; color:var(--ink)} .userchip .u{width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--icon-bg-hover); color:var(--green)} .userchip .u svg{width:15px; height:15px} .userchip .unit{color:var(--mint); font-family:var(--disp); font-size:11px; letter-spacing:.04em} .iconbtn{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:10px; cursor:pointer; border:1px solid var(--line); background:var(--chip-bg); color:var(--ink); transition:.25s} .iconbtn:hover{border-color:var(--brand-line); background:var(--chip-hover); color:var(--green)} .iconbtn svg{width:17px; height:17px} /* nav item (shells) */ .nav-item{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:12px; cursor:pointer; color:var(--ink); border:1px solid transparent; transition:.25s; text-align:left; width:100%; background:none; font-family:var(--body)} .nav-item:hover{background:var(--chip-bg); border-color:var(--line)} .nav-item.active{background:var(--panel-hover); border-color:var(--brand-line)} .nav-item .ni{width:36px; height:36px; flex:0 0 auto; border-radius:10px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--icon-bg); color:var(--mint); transition:.25s} .nav-item.active .ni{background:var(--icon-bg-hover); color:var(--green)} .nav-item .nt{font-family:var(--disp); font-size:13.5px; font-weight:600; color:var(--title); line-height:1.15} .nav-item .nd{font-size:11.5px; color:var(--muted); margin-top:2px} .nav-item .ni svg{width:19px; height:19px} /* painel de conteúdo (o "restante da tela") */ .pane{flex:1; display:flex; align-items:center; justify-content:center; padding:24px; min-height:0} .pane-inner{width:100%; height:100%; min-height:340px; border-radius:20px; border:1px dashed var(--line); background:var(--chip-bg); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:14px; padding:30px} .pane-inner .big{width:74px; height:74px; border-radius:20px; display:flex; align-items:center; justify-content:center; background:var(--icon-bg-hover); border:1px solid var(--brand-line); color:var(--green)} .pane-inner .big svg{width:36px; height:36px} .pane-inner h2{margin:0; font-family:var(--disp); font-size:22px; color:var(--title)} .pane-inner p{margin:0; max-width:440px; font-size:13.5px; color:var(--muted)} .pane-empty h2{color:var(--ink)} .dotgrid{position:absolute; inset:0; opacity:.5; pointer-events:none; background-image:radial-gradient(var(--line) 1px, transparent 1px); background-size:22px 22px; border-radius:20px} footer.foot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:16px 4px 4px; border-top:1px solid var(--line2); font-size:11.5px; color:var(--faint)} .hidden{display:none !important}