e não entra aqui. */
.conteudo p.nota, .conteudo p.dek { max-width: 92ch; }
/* --------------------------------------------------------------- avisos */
.aviso {
display: flex; gap: 13px; align-items: flex-start;
padding: 16px 18px;
}
.aviso__texto { display: flex; flex-direction: column; gap: 3px; }
.aviso__texto b { font-size: 13.5px; font-weight: 400; color: var(--ink); }
.aviso__texto span { font-size: 12.5px; line-height: 1.5; color: var(--faint); }
.recado {
display: flex; gap: 12px; align-items: flex-start;
padding: 14px 16px; border-radius: var(--raio); font-size: 13px; line-height: 1.5;
}
.recado--erro { background: var(--alto-bg); border: 1px solid var(--alto-line); color: #E0A79C; }
.recado--ok { background: var(--ok-bg); border: 1px solid var(--ok-line); color: #8FA891; }
/* ------------------------------------------------------------- responsivo */
@media (max-width: 1100px) {
:root { --respiro: 32px; }
.faixa, .topo, .rodape { padding-inline: 32px; }
.g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
/* !important porque várias telas declaram a proporção no próprio style="",
que é onde o editor visual mexe — a quebra no celular tem de vencer. */
.grade, .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr) !important; }
.blocos { grid-template-columns: minmax(0, 1fr) !important; }
h1 { font-size: 38px; }
h2 { font-size: 30px !important; }
.conteudo, .barra { padding-inline: 20px; }
.faixa, .topo, .rodape { padding-inline: 20px; }
.rodape { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* ==========================================================================
ACRÉSCIMOS DA VERSÃO COMPLETA
Telas de acesso, formulário longo de cadastro, equipe e privacidade.
========================================================================== */
/* ------------------------------------------------------------- selo/pílula */
.selo {
margin-left: auto; flex: 0 0 auto;
font-family: var(--f-mono); font-size: 8px; letter-spacing: 0.06em;
padding: 2px 5px; border: 1px solid var(--line-3); border-radius: var(--raio);
color: var(--faint-2); white-space: nowrap;
}
/* Na barra lateral o rótulo não quebra em duas linhas por causa do selo:
a barra é larga o bastante e o selo é curto. */
.lateral .item > span:not(.selo) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lateral .item .selo {
font-size: 8px; padding: 2px 5px; border: 1px solid var(--line-2);
color: var(--faint-2); letter-spacing: 0.08em;
}
.selo--ok { color: #7E9584; border-color: var(--ok-line); background: var(--ok-bg); }
.selo--aviso { color: #C9A24F; border-color: var(--aviso-line); background: var(--aviso-bg); }
.selo--alto { color: #B0736A; border-color: var(--alto-line); background: var(--alto-bg); }
.selo--gold { color: var(--gold-bright); border-color: var(--gold-edge); background: var(--raised); }
/* --------------------------------------------------------------- tipografia */
.titulo { font-family: var(--f-serif); font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12;
color: var(--ink-hi); margin: 0; letter-spacing: -0.015em; }
.titulo--peq { font-size: clamp(23px, 2.4vw, 30px); }
.texto { font-size: 15px; line-height: 1.7; color: var(--muted); margin: 0; max-width: 62ch; }
.texto--peq { font-size: 13.5px; color: var(--muted-2); }
.texto b, .texto strong { color: var(--ink); font-weight: 600; }
/* ------------------------------------------------------------ telas de acesso */
.corpo-acesso { background:
radial-gradient(900px 520px at 50% -10%, #16120A 0%, transparent 62%), var(--void); }
.acesso { min-height: 100vh; display: flex; flex-direction: column;
align-items: center; justify-content: center; padding: 44px 20px; gap: 22px; }
.acesso__caixa {
width: 100%; max-width: 452px;
border: 1px solid var(--line-2); border-radius: 4px;
background: var(--panel); padding: 38px 36px;
}
.acesso__caixa--largo { max-width: 860px; }
.acesso__pe { font-size: 12px; color: var(--faint-2); text-align: center; }
.acesso__pe a { color: var(--faint); }
.acesso__pe a:hover { color: var(--gold); }
/* ----------------------------------------------------------------- campos + */
.campo__opc { float: right; text-transform: none; letter-spacing: 0;
font-size: 10.5px; color: var(--ghost); }
.campo__dica { font-size: 11.5px; line-height: 1.5; color: var(--faint-2); }
.campo--largo { grid-column: 1 / -1; }
.campo--duplo { grid-column: span 2; }
@media (max-width: 860px) { .campo--duplo { grid-column: auto; } }
.form-grade { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Doze colunas, para o endereço.
Endereço não é uma lista de caixas iguais: é duas linhas com larguras
diferentes. CEP (3) · rua (6) · número (3); complemento (3) · bairro (3) ·
cidade (4) · Estado (2). O CEP é o mais estreito porque tem oito dígitos e
não precisa de mais espaço do que isso. */
.form-grade--12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
/* As doze larguras, todas. Faltavam a 5 e a 7, e o efeito não era um campo
levemente fora de medida: sem a classe, o elemento cai para UMA coluna de
doze e o campo vira uma caixa de dois centímetros com o rótulo quebrado em
cinco linhas. Definir a série inteira custa doze linhas e fecha a porta. */
.campo--c1 { grid-column: span 1; }
.campo--c2 { grid-column: span 2; }
.campo--c3 { grid-column: span 3; }
.campo--c4 { grid-column: span 4; }
.campo--c5 { grid-column: span 5; }
.campo--c6 { grid-column: span 6; }
.campo--c7 { grid-column: span 7; }
.campo--c8 { grid-column: span 8; }
.campo--c9 { grid-column: span 9; }
.campo--c10 { grid-column: span 10; }
.campo--c11 { grid-column: span 11; }
.campo--c12 { grid-column: 1 / -1; }
/* Em tela média as linhas de doze não cabem sem apertar: viram meias-larguras,
e o Estado continua pequeno ao lado da cidade. */
@media (max-width: 900px) {
.campo--c1, .campo--c2, .campo--c3 { grid-column: span 6; }
.campo--c4, .campo--c5, .campo--c6, .campo--c7,
.campo--c8, .campo--c9, .campo--c10, .campo--c11 { grid-column: 1 / -1; }
}
/* O CEP consultando: a caixa avisa sem empurrar nada de lugar. */
.campo--buscando > .entrada {
border-color: var(--gold-deep);
background-image: linear-gradient(90deg, transparent, rgba(214,178,94,.10), transparent);
background-size: 200% 100%;
animation: lb-varre 1.1s linear infinite;
}
@keyframes lb-varre { to { background-position: -200% 0; } }
.campo__cep-aviso { font-size: 11.5px; line-height: 1.5; margin-top: 6px; color: var(--faint); }
.campo__cep-aviso--erro { color: var(--alto); }
.campo__cep-aviso--ok { color: var(--ok); }
/* O que o CEP acabou de preencher pisca uma vez — quem digitou precisa VER o
que mudou na tela, senão parece que nada aconteceu. */
.entrada--veio-do-cep { animation: lb-preencheu 1.2s var(--mola); }
@keyframes lb-preencheu {
0% { border-color: var(--gold); background: rgba(214,178,94,.07); }
100% { border-color: var(--line-3); background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
.campo--buscando > .entrada, .entrada--veio-do-cep { animation: none; }
}
.secao-form { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 26px; }
.secao-form:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.secao-form__nome {
font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--gold-deep); margin-bottom: 5px;
}
.secao-form__nota { font-size: 12.5px; color: var(--faint); margin-bottom: 20px; line-height: 1.6; }
/* ------------------------------------------------------------------- recados */
.recado {
padding: 13px 16px; border-radius: var(--raio); font-size: 13.5px; line-height: 1.6;
border: 1px solid var(--line-3); background: var(--carbon); color: var(--muted);
}
.recado--ok { border-color: var(--ok-line); background: var(--ok-bg); color: #8CA891; }
.recado--erro { border-color: var(--alto-line); background: var(--alto-bg); color: #C68C80; }
.recado--aviso{ border-color: var(--aviso-line);background: var(--aviso-bg);color: #C9A24F; }
/* ---------------------------------------------------------------- equipe */
.pessoa {
display: flex; align-items: center; gap: 14px;
padding: 15px 20px; background: var(--carbon); border-bottom: 1px solid var(--line);
}
.pessoa:last-child { border-bottom: 0; }
.pessoa__sigla {
width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%;
display: grid; place-items: center; background: var(--raised);
border: 1px solid var(--gold-edge); color: var(--gold);
font-family: var(--f-mono); font-size: 12px;
}
.pessoa__nome { font-size: 14px; color: var(--ink); }
.pessoa__mail { font-size: 12px; color: var(--faint); }
.pessoa__acoes { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* ------------------------------------------------------------ força da senha */
.forca { display: flex; gap: 4px; }
.forca span { height: 3px; flex: 1; background: var(--line-3); border-radius: 2px; }
/* ---------------------------------------------------------------- listinha */
.marcas { list-style: none; margin: 0; padding: 0; display: flex;
flex-direction: column; gap: 11px; }
.marcas li { position: relative; padding-left: 22px; font-size: 14px;
line-height: 1.65; color: var(--muted); }
.marcas li::before {
content: ""; position: absolute; left: 2px; top: 9px;
width: 6px; height: 6px; border-radius: 50%; background: var(--gold-deep);
}
/* ------------------------------------------------------------------- celular */
@media (max-width: 860px) {
.form-grade, .form-grade--3 { grid-template-columns: minmax(0, 1fr) !important; }
.acesso__caixa { padding: 28px 22px; }
.acesso { padding: 28px 14px; }
.pessoa { flex-wrap: wrap; }
.pessoa__acoes { margin-left: 0; width: 100%; }
}
/* ==========================================================================
MOVIMENTO
43 espécimes aprovados. Sem biblioteca: só CSS e um punhado de JS.
Duas regras valem para tudo aqui:
1. Nada nasce invisível esperando um gatilho. Toda animação parte de um
estado que já está na tela — se o JS falhar, a página continua legível.
2. Quem pediu menos movimento no sistema recebe menos movimento. O bloco
no fim desta seção desliga tudo. Enjoo e vertigem são reação real, e
um painel de trabalho é usado o dia inteiro.
========================================================================== */
:root {
--mola: cubic-bezier(.22, 1, .36, 1); /* entra rápido, assenta devagar */
--saida: cubic-bezier(.4, 0, 1, 1); /* sai acelerando */
}
/* ---------------------------------------------------------- 01-09 botões */
.btn { position: relative; overflow: hidden; isolation: isolate;
transition: transform .22s var(--mola), box-shadow .22s var(--mola), border-color .22s, color .22s; }
/* 01 brilho que atravessa (só na ação principal, não nos calmos) */
.btn:not(.btn--calmo):not(.btn--perigo)::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
transform: translateX(-130%); transition: transform .62s var(--mola);
}
.btn:not(.btn--calmo):not(.btn--perigo):hover::after { transform: translateX(130%); }
/* 02 elevação */
.btn:not(.btn--calmo):not(.btn--perigo):hover { transform: translateY(-2px); box-shadow: 0 10px 22px -9px rgba(214,178,94,.5); }
.btn--calmo:hover { border-color: var(--line-4); color: var(--ink); }
/* 03 afundar */
.btn:active { transform: scale(.97); transition-duration: .09s; }
/* 04 anel de foco pelo teclado */
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--void), 0 0 0 4px var(--gold); }
/* 05 carregando */
.btn[data-estado="carregando"] { color: transparent !important; pointer-events: none; }
.btn[data-estado="carregando"]::before {
content: ""; position: absolute; inset: 0; margin: auto;
width: 15px; height: 15px; border-radius: 50%;
border: 2px solid rgba(18,16,13,.28); border-top-color: #12100D;
animation: lb-girar .62s linear infinite;
}
.btn--calmo[data-estado="carregando"]::before { border-color: var(--line-3); border-top-color: var(--gold); }
@keyframes lb-girar { to { transform: rotate(360deg); } }
/* 06 concluído */
.btn[data-estado="feito"] { background: var(--ok) !important; color: #0B120D !important; }
/* 07 recusa que treme */
@keyframes lb-treme {
10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); }
30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px); }
}
.treme { animation: lb-treme .5s cubic-bezier(.36,.07,.19,.97); }
/* 08 segurar para confirmar — só para o que não tem volta */
.segurar { position: relative; overflow: hidden; }
.segurar__preenche {
position: absolute; inset: 0; z-index: -1; background: rgba(232,132,111,.22);
transform: scaleX(0); transform-origin: left;
}
.segurar[data-ativo="1"] .segurar__preenche { transform: scaleX(1); transition: transform 1.1s linear; }
/* 09 ondulação do ponto do clique */
.lb-onda {
position: absolute; border-radius: 50%; background: rgba(18,16,13,.3);
transform: scale(0); animation: lb-onda .58s var(--saida) forwards; pointer-events: none;
}
.btn--calmo .lb-onda { background: rgba(214,178,94,.22); }
@keyframes lb-onda { to { transform: scale(3.2); opacity: 0; } }
/* ------------------------------------------------------ 10-15 espera */
/* 10 barra fina no topo, em qualquer navegação */
.lb-topo {
position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 999;
background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
box-shadow: 0 0 8px var(--gold); pointer-events: none;
}
.lb-topo.anda { animation: lb-carrega 1.7s var(--mola) forwards; }
@keyframes lb-carrega { 0%{width:0} 55%{width:72%} 100%{width:100%; opacity:0} }
/* 11 giro */
.giro { width: 26px; height: 26px; border-radius: 50%;
border: 2px solid var(--line-3); border-top-color: var(--gold); animation: lb-girar .7s linear infinite; }
.giro--peq { width: 15px; height: 15px; border-width: 1.6px; }
/* 12 esqueleto com varredura */
.esqueleto { display: block; height: 9px; border-radius: 2px; background: var(--field);
position: relative; overflow: hidden; }
.esqueleto::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent, rgba(214,178,94,.13), transparent);
transform: translateX(-100%); animation: lb-varre 1.5s infinite;
}
@keyframes lb-varre { to { transform: translateX(100%); } }
/* 13 três pontos pensando */
.pensando { display: inline-flex; gap: 6px; }
.pensando i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: lb-pulsa 1.1s infinite; }
.pensando i:nth-child(2) { animation-delay: .16s; } .pensando i:nth-child(3) { animation-delay: .32s; }
@keyframes lb-pulsa { 0%,60%,100%{opacity:.22; transform:scale(.78)} 30%{opacity:1; transform:scale(1)} }
/* 14 anel com número / 28 anel do veredito */
.anel { position: relative; display: grid; place-items: center; }
.anel svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.anel circle { fill: none; stroke-width: 5; }
.anel .trilho { stroke: var(--line-2); }
.anel .arco { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset 1.5s var(--mola); }
/* 15 barra sem fim conhecido */
.indeterminada { width: 100%; height: 3px; background: var(--field); overflow: hidden; border-radius: 3px; }
.indeterminada i { display: block; width: 38%; height: 100%; border-radius: 3px;
background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: lb-vaivem 1.35s infinite; }
@keyframes lb-vaivem { 0%{transform:translateX(-100%)} 100%{transform:translateX(320%)} }
/* --------------------------------------------- 16-20 envio de arquivos */
/* 16 área que acende ao arrastar */
.solta { border: 1.5px dashed var(--line-3); border-radius: var(--raio); padding: 28px 20px;
text-align: center; color: var(--faint); font-size: 13px; cursor: pointer;
transition: border-color .25s, background .25s, transform .25s var(--mola), color .25s; }
.solta:hover { border-color: var(--line-4); color: var(--muted); }
.solta.sobre { border-color: var(--gold); background: rgba(214,178,94,.06);
transform: scale(1.015); color: var(--gold-bright); }
.solta.sobre .solta__ic { animation: lb-flutua .9s ease-in-out infinite; }
@keyframes lb-flutua { 50% { transform: translateY(-5px); } }
.solta__ic { display: block; font-size: 20px; margin-bottom: 8px; color: var(--gold); }
/* 17 arquivo entra na lista */
@keyframes lb-entra-arq { from { opacity: 0; transform: translateY(-9px) scale(.97); } to { opacity: 1; transform: none; } }
/* TRÊS COISAS DIFERENTES SE CHAMAVAM ".arq" NESTE ARQUIVO.
Esta (a linha do envio com check), a lista de documentos do gerador e o
campo de escolher arquivo do admin. Como a folha é lida de cima para
baixo, a última declaração vencia: o campo do admin, lá embaixo, impunha
"display:block" à lista do gerador e derrubava a grade — nome, peso e o
botão de tirar ficavam grudados numa linha só, sem respiro. Agora cada
componente tem nome próprio: ".arq-env" aqui, ".arq" na lista e
".arq-campo" no admin. */
.arq-env { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px;
padding: 10px 12px; background: var(--field); border: 1px solid var(--line-2);
border-radius: var(--raio); font-size: 12.5px; animation: lb-entra-arq .34s var(--mola) backwards; }
.arq-env__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.arq-env__pct { font-family: var(--f-mono); font-size: 10.5px; color: var(--gold); font-variant-numeric: tabular-nums; }
/* 18 progresso por arquivo */
.arq-env__tri { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--gold); width: 0; transition: width .3s linear; }
/* 19 check que se desenha */
.tick { width: 16px; height: 16px; flex: 0 0 auto; }
.tick path { fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .42s var(--mola); }
.arq-env.pronto .tick path { stroke-dashoffset: 0; }
/* 20 remover colapsa */
.arq-env.sai { animation: lb-sai-arq .3s var(--saida) forwards; }
@keyframes lb-sai-arq { to { opacity: 0; transform: translateX(26px); height: 0; padding-block: 0; margin-top: -1px; } }
/* --------------------------------------------------- 21-25 navegação */
/* 21 marca dourada que desliza no menu */
.lateral__grupo { position: relative; }
.lateral__mira {
position: absolute; left: 0; width: 2px; background: var(--gold);
box-shadow: 0 0 8px rgba(214,178,94,.6); border-radius: 0 2px 2px 0;
transition: transform .34s var(--mola), height .34s var(--mola); pointer-events: none;
}
/* o realce do item atual continua existindo sem JS; a mira é um extra */
.lateral a.item { transition: color .2s, background .2s; }
/* 22 ícone reage antes do texto */
.lateral a.item svg { transition: transform .3s var(--mola); }
.lateral a.item:hover svg { transform: translateX(2px) rotate(-6deg); }
/* 23 troca de tela em cascata / 43 painel entra em cascata */
@keyframes lb-entra-pag { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.conteudo > * { animation: lb-entra-pag .5s var(--mola) backwards; }
.conteudo > *:nth-child(1) { animation-delay: .02s; }
.conteudo > *:nth-child(2) { animation-delay: .07s; }
.conteudo > *:nth-child(3) { animation-delay: .12s; }
.conteudo > *:nth-child(4) { animation-delay: .17s; }
.conteudo > *:nth-child(5) { animation-delay: .22s; }
.conteudo > *:nth-child(6) { animation-delay: .27s; }
.conteudo > *:nth-child(n+7) { animation-delay: .3s; }
/* 24 trilha que se monta */
.trilha > * { animation: lb-entra-pag .42s var(--mola) backwards; }
.trilha > *:nth-child(2) { animation-delay: .07s; }
.trilha > *:nth-child(3) { animation-delay: .14s; }
/* 25 abas com marca corrediça */
.abas { position: relative; }
.abas__lista { display: flex; gap: 2px; border-bottom: 1px solid var(--line-2); position: relative; }
.abas__lista button { background: none; border: none; color: var(--faint); font-family: var(--f-sans);
font-size: 13px; padding: 9px 14px; cursor: pointer; transition: color .22s; }
.abas__lista button[aria-selected="true"] { color: var(--gold-bright); }
.abas__mira { position: absolute; bottom: -1px; height: 2px; background: var(--gold);
transition: transform .36s var(--mola), width .36s var(--mola); }
/* ---------------------------------------------- 26-31 números e tabelas */
/* 26 número que sobe — a classe marca o alvo, o JS faz a conta */
.conta { font-variant-numeric: tabular-nums; }
/* 27 barras crescendo do chão */
.barra-graf { transition: height .85s var(--mola); }
/* 29 linhas entram escalonadas */
.tabela tbody tr { animation: lb-entra-linha .44s var(--mola) backwards; }
@keyframes lb-entra-linha { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.tabela tbody tr:nth-child(1){animation-delay:.03s} .tabela tbody tr:nth-child(2){animation-delay:.07s}
.tabela tbody tr:nth-child(3){animation-delay:.11s} .tabela tbody tr:nth-child(4){animation-delay:.15s}
.tabela tbody tr:nth-child(5){animation-delay:.19s} .tabela tbody tr:nth-child(6){animation-delay:.23s}
.tabela tbody tr:nth-child(7){animation-delay:.27s} .tabela tbody tr:nth-child(n+8){animation-delay:.3s}
/* 30 linha destacada no hover */
.tabela tbody tr { transition: background .18s; }
.tabela tbody tr:hover { background: var(--field); }
.tabela tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--gold); }
/* 31 reordenar sem piscar — o JS mede antes e depois, o CSS leva */
.reordena { transition: transform .45s var(--mola); }
/* ------------------------------------------- 32-35 avisos e diálogos */
/* 32 recado que entra e sai sozinho */
.recado { animation: lb-recado .35s var(--mola) backwards; }
@keyframes lb-recado { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
.recado.some { animation: lb-recado-sai .4s var(--saida) forwards; }
@keyframes lb-recado-sai { to { opacity: 0; transform: translateX(22px); } }
/* 33 diálogo com fundo desfocado */
.fundo { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px;
background: rgba(5,4,3,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
opacity: 0; pointer-events: none; transition: opacity .3s; }
.fundo.abre { opacity: 1; pointer-events: auto; }
.fundo .caixa { background: var(--raised); border: 1px solid var(--gold-edge); border-radius: var(--raio);
padding: 26px 28px; max-width: 420px; width: 100%;
transform: scale(.9) translateY(10px); opacity: 0;
transition: transform .34s var(--mola), opacity .3s; }
.fundo.abre .caixa { transform: none; opacity: 1; }
/* 34 acordeão com altura animada — sem saber a altura de antemão */
.acord__miolo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--mola); }
.acord__miolo.abre { grid-template-rows: 1fr; }
.acord__miolo > div { overflow: hidden; }
.acord button span.sinal { transition: transform .3s var(--mola); display: inline-block; }
.acord button[aria-expanded="true"] span.sinal { transform: rotate(45deg); }
/* 35 dica que cresce do pé */
.dica { position: relative; display: inline-flex; }
.dica__bolha {
position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0;
background: var(--raised); border: 1px solid var(--line-3); border-radius: var(--raio);
padding: 7px 11px; font-size: 11.5px; color: var(--muted); white-space: nowrap; z-index: 50;
opacity: 0; transform: scale(.9) translateY(4px); transform-origin: bottom center;
transition: opacity .2s, transform .24s var(--mola); pointer-events: none;
}
.dica:hover .dica__bolha, .dica:focus-within .dica__bolha { opacity: 1; transform: none; }
/* ------------------------------------------------- 36-40 formulários */
/* 36 rótulo que sobe + 37 borda dourada acende */
.campo--flut { position: relative; display: block; }
.campo--flut > input, .campo--flut > select {
transition: border-color .25s, box-shadow .25s;
}
.campo--flut > input:focus, .campo--flut > select:focus {
border-color: var(--gold-edge); box-shadow: 0 0 0 3px rgba(214,178,94,.1);
}
.campo--flut > label {
position: absolute; left: 12px; top: 13px; font-size: 13px; color: var(--faint);
pointer-events: none; transform-origin: left top;
transition: transform .22s var(--mola), color .22s;
}
.campo--flut > input:focus + label,
.campo--flut > input:not(:placeholder-shown) + label { transform: translateY(-8px) scale(.78); color: var(--gold); }
/* 38 erro treme e a mensagem desce */
.erro-msg { display: block; font-size: 11.5px; color: var(--alto); margin-top: 5px;
max-height: 0; overflow: hidden; opacity: 0;
transition: max-height .3s var(--mola), opacity .25s; }
.errado .erro-msg { max-height: 40px; opacity: 1; }
/* 39 contador que muda de cor */
.contador { font-family: var(--f-mono); font-size: 10.5px; color: var(--faint-2);
text-align: right; transition: color .25s; font-variant-numeric: tabular-nums; }
.contador.perto { color: var(--gold); } .contador.estourou { color: var(--alto); }
/* 40 chave que desliza */
.chave { width: 42px; height: 23px; border-radius: 99px; background: var(--line-2); border: none;
position: relative; cursor: pointer; transition: background .28s var(--mola); flex: 0 0 auto; }
.chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px;
border-radius: 50%; background: var(--faint); transition: transform .28s var(--mola), background .28s; }
.chave[aria-checked="true"] { background: var(--gold-deep); }
.chave[aria-checked="true"]::after { transform: translateX(19px); background: var(--gold-bright); }
.chave:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* --------------------------------------------------- 41-42 ambiente */
/* 41 brilho que respira ao fundo */
.brilho::before { animation: lb-respira 5.5s ease-in-out infinite; }
@keyframes lb-respira { 50% { transform: scale(1.18); opacity: .6; } }
/* 42 saldo pulsa quando muda */
.saldo { transition: border-color .3s; }
.saldo.mudou { animation: lb-pulsa-saldo .8s var(--mola); }
@keyframes lb-pulsa-saldo {
30% { transform: scale(1.06); border-color: var(--gold); box-shadow: 0 0 18px -4px rgba(214,178,94,.5); }
}
/* cartões do painel também reagem */
.painel, .bloco { transition: transform .25s var(--mola), border-color .25s, box-shadow .25s; }
a.painel:hover, a.bloco:hover, .painel--vivo:hover {
transform: translateY(-2px); border-color: var(--line-4);
box-shadow: 0 12px 28px -16px rgba(0,0,0,.7);
}
/* ============================== A REGRA ACIMA DE TODAS ==================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* ==========================================================================
GERADOR — a área de envio de documentos e os campos com máscara
O envio é o momento em que o advogado entrega o caso ao sistema. Ele
precisa parecer um instrumento, não um formulário: moldura de visor,
varredura ao arrastar, e cada arquivo aceito entrando como uma linha de
registro. Tudo isso desliga sozinho em `prefers-reduced-motion`.
========================================================================== */
.solta {
position: relative;
display: grid;
place-items: center;
gap: 14px;
padding: 54px 32px;
background:
radial-gradient(120% 90% at 50% 0%, rgba(214,178,94,.045) 0%, transparent 62%),
var(--field);
border: 1px dashed var(--line-3);
border-radius: var(--raio);
text-align: center;
cursor: pointer;
overflow: hidden;
transition: border-color .22s var(--mola), background-color .22s, transform .22s var(--mola);
}
.solta:hover { border-color: var(--gold-edge); }
.solta:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }
/* Os quatro cantos do visor. Ficam apagados e acendem quando o arquivo
chega por cima — é o sinal de que a área está pronta para receber. */
.solta__canto {
position: absolute; width: 16px; height: 16px;
border: 1px solid var(--line-4);
transition: border-color .22s, width .22s var(--mola), height .22s var(--mola);
pointer-events: none;
}
.solta__canto--ne { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.solta__canto--no { top: 10px; right: 10px; border-left: 0; border-bottom: 0; }
.solta__canto--se { bottom: 10px; left: 10px; border-right: 0; border-top: 0; }
.solta__canto--so { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }
.solta.sobre {
border-color: var(--gold);
background:
radial-gradient(120% 90% at 50% 0%, rgba(214,178,94,.10) 0%, transparent 64%),
var(--raised);
transform: scale(1.004);
}
.solta.sobre .solta__canto { border-color: var(--gold); width: 22px; height: 22px; }
/* A varredura: uma linha de luz que percorre a área enquanto o arquivo
está sendo arrastado por cima. Só existe nesse estado. */
.solta__scan {
position: absolute; inset: 0 0 auto 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0; pointer-events: none;
}
.solta.sobre .solta__scan { animation: lb-varre 1.25s linear infinite; }
@keyframes lb-varre {
0% { transform: translateY(0); opacity: 0; }
12% { opacity: .85; }
88% { opacity: .85; }
100% { transform: translateY(var(--h, 180px)); opacity: 0; }
}
.solta__icone { color: var(--gold); opacity: .8; transition: transform .3s var(--mola); }
.solta.sobre .solta__icone { transform: translateY(-3px) scale(1.06); }
.solta__titulo { font-size: 15px; color: var(--ink); }
.solta__dica { font-size: 12px; color: var(--faint); font-family: var(--f-mono); }
.solta__ou {
font-size: 11px; letter-spacing: .1em; color: var(--faint-2);
font-family: var(--f-mono); text-transform: uppercase;
}
/* --------------------------------------------------------- lista de arquivos */
/* CADA DOCUMENTO É UM CARTÃO, E CARTÃO PRECISA DE AR EM VOLTA.
Antes era uma grade de fio de cabelo — 1px de fundo aparecendo entre uma
linha e outra. Com vinte documentos aquilo virava um bloco cinza único e
não dava para saber onde um arquivo terminava e o outro começava. Agora
são cartões separados de verdade, com borda própria e 8px entre eles. */
.arqs { display: grid; gap: 8px; }
/* A DIVISÓRIA ENTRE UM CONTRATO E OUTRO.
Quando o advogado separa as fotos em pastas, cada pasta é um contrato — e a
lista tem de mostrar isso, senão ele confirma um envio sem saber se a foto
que faltava entrou no contrato certo. Só aparece quando há pasta: envio de
arquivos soltos continua sendo uma lista simples. */
.arqs__pasta {
display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
padding: 9px 16px; background: var(--raised);
border: 1px solid var(--line-2); border-left: 2px solid var(--gold-edge);
border-radius: var(--raio); margin-top: 6px;
}
.arqs__pasta:first-child { margin-top: 0; }
.arqs__pasta__nome {
font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
text-transform: uppercase; color: var(--gold-bright);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%;
}
.arqs__pasta__dica { font-size: 11.5px; color: var(--faint-2); }
/* O seletor de pastas: um campo de arquivo não pode escolher arquivo E pasta,
então são dois. O de pasta fica fora da área de solta, porque lá dentro o
rótulo que cobre a caixa inteira abriria o seletor errado. */
.pastas { display: flex; flex-direction: column; gap: 8px; }
.pastas__campo { position: absolute; width: 1px; height: 1px; opacity: 0;
overflow: hidden; clip-path: inset(50%); }
.pastas__botao {
display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
padding: 8px 13px; cursor: pointer;
border: 1px dashed var(--line-3); border-radius: var(--raio);
background: var(--field); color: var(--muted);
font-size: 12.5px;
transition: color .18s, border-color .18s, background .18s;
}
.pastas__botao:hover { color: var(--gold-bright); border-color: var(--gold-edge); background: var(--raised); }
/* O campo é invisível, mas continua focável pelo teclado: o contorno tem de
aparecer no rótulo, que é o que se vê. Por isso o campo vem ANTES dele no
HTML — irmão seguinte é o que o seletor alcança. */
.pastas__campo:focus-visible + .pastas__botao {
outline: 2px solid var(--gold); outline-offset: 2px;
color: var(--gold-bright); border-color: var(--gold-edge);
}
.pastas__dica { font-size: 12px; line-height: 1.6; }
.arq {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center; gap: 14px;
padding: 12px 16px; background: var(--panel);
border: 1px solid var(--line-2); border-radius: var(--raio);
animation: lb-arq-entra .3s var(--mola) both;
transition: border-color .18s, background .18s;
}
.arq:hover { border-color: var(--line-3); background: var(--raised); }
@keyframes lb-arq-entra {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
.arq.saindo { animation: lb-arq-sai .2s ease-in forwards; }
@keyframes lb-arq-sai {
to { opacity: 0; transform: translateX(10px); }
}
.arq__tipo {
font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .08em;
color: var(--gold); background: var(--raised);
border: 1px solid var(--gold-edge); border-radius: 2px;
padding: 4px 7px; min-width: 42px; text-align: center;
}
.arq__nome {
font-size: 13px; color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arq__peso {
font-family: var(--f-mono); font-size: 11.5px; color: var(--faint);
white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* O × tem de ser uma caixa quadrada com o glifo NO MEIO. Com "line-height:1"
e nada mais ele descia para o rodapé do botão e ficava torto; o flex
centrado resolve nos dois eixos de uma vez. "flex: 0 0 auto" impede que a
grade o encolha quando o nome do arquivo é longo. */
.arq__tira {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 auto; padding: 0;
background: none; border: 1px solid var(--line-3); border-radius: var(--raio);
color: var(--faint); width: 26px; height: 26px; line-height: 1;
cursor: pointer; font-size: 15px;
transition: color .18s, border-color .18s, background .18s, transform .18s var(--mola);
}
.arq__tira:hover, .arq__tira:focus-visible {
color: var(--alto); border-color: var(--alto-line);
background: var(--alto-bg); transform: rotate(90deg);
}
.arq--ruim { background: var(--alto-bg); }
.arq--ruim .arq__tipo { color: var(--alto); border-color: var(--alto-line); }
.arq__erro { grid-column: 2 / -1; font-size: 11.5px; color: var(--alto); }
/* ------------------------------------------------------------- medidor total */
.medidor { display: grid; gap: 7px; }
.medidor__trilho { height: 2px; background: var(--line-2); overflow: hidden; }
.medidor__barra {
height: 100%; width: 0;
background: var(--gold-grad);
transition: width .3s var(--mola), background-color .3s;
}
.medidor.cheio .medidor__barra { background: linear-gradient(90deg, #D9A441, #E8846F); }
/* ------------------------------------------------------------------ overlay */
.gerando {
position: fixed; inset: 0; z-index: 60;
display: grid; place-items: center;
background: rgba(10,9,7,.92);
backdrop-filter: blur(3px);
animation: lb-fade .25s ease both;
}
@keyframes lb-fade { from { opacity: 0 } to { opacity: 1 } }
.gerando__caixa {
width: min(460px, 90vw); display: grid; gap: 20px;
padding: 34px; background: var(--panel); border: 1px solid var(--line-2);
}
.gerando__passos { display: grid; gap: 10px; }
.passo {
display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 11px;
font-size: 13px; color: var(--faint-2); transition: color .3s;
}
.passo__bolha {
width: 7px; height: 7px; border-radius: 50%; margin-left: 5px;
background: var(--line-4); transition: background-color .3s, box-shadow .3s;
}
.passo.ativo { color: var(--ink); }
.passo.ativo .passo__bolha {
background: var(--gold); box-shadow: 0 0 0 4px rgba(214,178,94,.14);
animation: lb-pulsa 1.4s ease-in-out infinite;
}
.passo.feito { color: var(--muted-2); }
.passo.feito .passo__bolha { background: var(--gold-deep); }
@keyframes lb-pulsa { 50% { box-shadow: 0 0 0 8px rgba(214,178,94,.05) } }
.gerando__trilho { height: 2px; background: var(--line-2); overflow: hidden; }
.gerando__barra { height: 100%; width: 0; background: var(--gold-grad); transition: width .2s linear; }
.gerando__barra.indef {
width: 34%; animation: lb-indef 1.5s var(--mola) infinite;
}
@keyframes lb-indef {
0% { transform: translateX(-100%) }
100% { transform: translateX(390%) }
}
.gerando__relogio { font-family: var(--f-mono); font-size: 12px; color: var(--faint); }
/* ------------------------------------------------------- campos com máscara */
.campo--valor input { font-family: var(--f-mono); text-align: right; }
.campo--valor { position: relative; }
.campo--valor .prefixo {
position: absolute; left: 12px; bottom: 8px;
font-family: var(--f-mono); font-size: 12px; color: var(--faint-2);
pointer-events: none;
}
.campo--valor input { padding-left: 34px !important; }
@media (prefers-reduced-motion: reduce) {
.solta, .solta__canto, .solta__icone, .arq, .arq__tira,
.medidor__barra, .gerando, .gerando__barra { transition: none; animation: none; }
.solta.sobre .solta__scan { animation: none; opacity: 0; }
.passo.ativo .passo__bolha { animation: none; }
.gerando__barra.indef { animation: none; width: 100%; }
}
/* Os blocos numerados do gerador respiram e ficam separados por uma régua
fina. Tópico grudado no anterior é o tipo de coisa que faz a pessoa pular
um campo sem perceber. */
.bloco-gerador + .bloco-gerador {
padding-top: 30px;
border-top: 1px solid var(--line);
}
.pergunta {
display: flex; justify-content: space-between; align-items: center;
gap: 20px; flex-wrap: wrap;
padding: 12px 14px;
background: var(--field);
border: 1px solid var(--line-2);
border-radius: var(--raio);
}
.pergunta__texto { flex: 1; min-width: 260px; font-size: 13px; color: var(--muted); }
.pergunta__opcoes { display: flex; gap: 18px; }
.pergunta__opcoes label {
display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; color: var(--muted); cursor: pointer;
}
.pergunta__opcoes input { accent-color: var(--gold); cursor: pointer; }
/* O atributo `hidden` precisa vencer o `display` da própria classe. Sem isto,
`.medidor { display: grid }` mantém o elemento na tela mesmo marcado como
escondido — e o medidor aparecia vazio antes de haver qualquer arquivo. */
[hidden] { display: none !important; }
/* ==========================================================================
ÁREA DE SOLTA — DUAS ZONAS, E O QUE ACONTECE QUANDO O ARQUIVO POUSA
==========================================================================
A separação em dois grupos (cliente / contrato) tem consequência visual:
as áreas ficam lado a lado e precisam caber sem virar duas caixas enormes.
Daí a variante --dupla, mais baixa, e a contagem dentro da própria área
para o advogado ver de relance quantos arquivos foram para cada lado. */
/* Lado a lado, as duas caixas não precisam do tamanho de uma só. */
.solta--dupla { padding: 26px 20px; gap: 8px; min-height: 0; }
.solta--dupla .solta__titulo { font-size: 13.5px; }
.solta--dupla .solta__icone { width: 24px; height: 24px; }
/* A aura: um halo que só existe enquanto o arquivo paira sobre a área.
Fica atrás de tudo (z-index 0 contra o conteúdo, que sobe para 1). */
.solta__aura {
position: absolute; inset: -40%; z-index: 0;
background: radial-gradient(closest-side, rgba(214,178,94,.16), transparent 72%);
opacity: 0; transform: scale(.7);
transition: opacity .3s var(--mola), transform .45s var(--mola);
pointer-events: none;
}
.solta.sobre .solta__aura { opacity: 1; transform: scale(1); }
/* Só o conteúdo sobe acima da aura, um a um.
*
* Aqui havia um `.solta > *:not(.solta__aura)` que parecia mais limpo e
* custou caro: por ser mais específico, ele vencia o `position: absolute`
* dos quatro cantos do visor. Os cantos saíam do canto, viravam quatro
* LINHAS da grade no meio da caixa, e a área de solta ficava 105px mais
* alta do que devia. Regra que muda o `position` de "todo mundo menos
* fulano" é como se apaga o posicionamento de quem dependia dele. */
.solta__icone, .solta__titulo, .solta__ou, .solta__dica, .solta__conta {
position: relative; z-index: 1;
}
.solta__canto, .solta__scan { z-index: 1; }
/* O pulso de recebimento. Dura 0,7s e some: é a confirmação de que o
arquivo pousou NESTA área, e não na outra ao lado. */
.solta.recebeu { animation: lb-pousou .7s var(--mola); }
@keyframes lb-pousou {
0% { border-color: var(--gold); box-shadow: 0 0 0 0 rgba(214,178,94,.30); }
55% { border-color: var(--gold); box-shadow: 0 0 0 10px rgba(214,178,94,0); }
100% { box-shadow: 0 0 0 0 rgba(214,178,94,0); }
}
/* Área que já tem arquivo para de gritar por atenção: a borda vira sólida
discreta e o ícone recua. O destaque passa a ser a lista abaixo. */
.solta.tem { border-style: solid; border-color: var(--gold-edge); }
.solta.tem .solta__icone { opacity: .45; transform: scale(.92); }
.solta.tem .solta__titulo { color: var(--muted); }
.solta__conta {
font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
color: var(--gold-bright); min-height: 13px;
}
/* A escadinha de entrada: cada arquivo recém-chegado desce um pouco depois
do anterior, com um brilho que atravessa a linha uma vez. Só as linhas
novas se animam — redesenhar a lista inteira com tudo pulando de novo
fazia a tela tremer a cada remoção. */
.arq.pousando {
animation: lb-pousa .42s var(--mola) both;
animation-delay: var(--atraso, 0ms);
}
@keyframes lb-pousa {
0% { opacity: 0; transform: translateY(-14px) scale(.98); }
60% { opacity: 1; transform: translateY(2px) scale(1); }
100% { opacity: 1; transform: none; }
}
.arq.pousando::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(100deg, transparent 20%, rgba(242,221,164,.10) 50%, transparent 80%);
animation: lb-brilho .7s ease-out both;
animation-delay: var(--atraso, 0ms);
pointer-events: none;
}
@keyframes lb-brilho {
from { transform: translateX(-100%); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
.arq { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
.solta.recebeu, .arq.pousando, .arq.pousando::after,
.solta.sobre .solta__scan { animation: none; }
}
/* ==========================================================================
A CONFIRMAÇÃO DE CUSTO
==========================================================================
Esta tela existe para uma coisa só: mostrar o número antes de gastá-lo.
Por isso a cifra é grande e tudo o mais é apoio. */
.confirma__cifra {
display: grid; grid-template-columns: minmax(180px, auto) 1fr;
gap: 28px; align-items: center;
padding: 24px 26px;
background:
radial-gradient(120% 140% at 0% 0%, rgba(214,178,94,.06) 0%, transparent 60%),
var(--field);
border: 1px solid var(--gold-edge); border-radius: var(--raio);
}
.confirma__num {
font-family: var(--f-mono); font-variant-numeric: tabular-nums;
font-size: 46px; line-height: .95; color: var(--gold-bright);
}
.escala { display: grid; gap: 9px; }
.escala__trilho {
position: relative; height: 4px; border-radius: 2px;
background: var(--line-2);
}
.escala__zona {
position: absolute; inset: 0; border-radius: 2px;
background: linear-gradient(90deg, var(--gold-deep), var(--gold), #C97F4E);
opacity: .55;
}
/* O losango marca onde o caso TÍPICO cai dentro da faixa. Sem ele a barra
diria apenas "entre tanto e tanto", que é menos do que se sabe. */
.escala__marca {
position: absolute; top: 50%; width: 11px; height: 11px;
margin: -5.5px 0 0 -5.5px; border-radius: 2px;
background: var(--gold-bright);
box-shadow: 0 0 0 3px var(--field), 0 0 10px rgba(214,178,94,.5);
transform: rotate(45deg);
}
.escala__ponta { font-size: 11px; color: var(--faint); }
@media (max-width: 720px) {
.confirma__cifra { grid-template-columns: 1fr; gap: 20px; }
.confirma__num { font-size: 38px; }
}
/* ==========================================================================
CAMPOS DO GERADOR — UMA ALTURA SÓ
==========================================================================
Estes campos nasceram com o estilo escrito à mão em cada input, e por isso
ficaram 41px altos enquanto o `.entrada` do resto do painel tem 52px: duas
alturas de campo na mesma tela, e nenhuma forma de acertar as duas de uma
vez. Agora a regra é uma só, aqui. */
.campo--flut > input,
.campo--flut > select {
width: 100%; height: 52px;
padding: 19px 12px 6px;
background: var(--field);
border: 1px solid var(--line-3);
border-radius: var(--raio);
color: var(--ink);
font-family: var(--f-sans);
font-size: 14px;
}
/* Caixa de texto com o mesmo rótulo flutuante dos demais campos. Sem isto,
o cadastro do acervo — que é quase todo texto colado — ficava com dois
desenhos de campo na mesma tela. */
.campo--flut > textarea {
width: 100%; min-height: 96px;
padding: 22px 12px 10px;
background: var(--field);
border: 1px solid var(--line-3);
border-radius: var(--raio);
color: var(--ink);
font-family: var(--f-sans);
font-size: 14px; line-height: 1.6; resize: vertical;
transition: border-color .25s, box-shadow .25s;
}
.campo--flut > textarea:focus {
outline: none; border-color: var(--gold-edge); box-shadow: 0 0 0 3px rgba(214,178,94,.1);
}
.campo--flut > textarea:focus + label,
.campo--flut > textarea:not(:placeholder-shown) + label {
transform: translateY(-10px) scale(.76); color: var(--gold);
}
/* O seletor de data nativo desenha o próprio calendário: sem isto ele abre
branco por cima de um painel preto. */
.campo--flut > input[type="date"] { color-scheme: dark; }
/* Caixa de marcar — a do "já conferi o inteiro teor", que é o que separa o
acervo de uma lista de referências não verificadas. */
input[type="checkbox"] {
appearance: none; -webkit-appearance: none;
width: 17px; height: 17px; flex: none;
border: 1px solid var(--line-4); border-radius: var(--raio);
background: var(--field); cursor: pointer; position: relative;
transition: border-color .2s, background-color .2s;
}
input[type="checkbox"]:hover { border-color: var(--gold-deep); }
input[type="checkbox"]:checked { border-color: var(--gold); background: rgba(214,178,94,.14); }
input[type="checkbox"]:checked::after {
content: ''; position: absolute; left: 4px; top: 4px;
width: 7px; height: 3.5px;
border-left: 1.6px solid var(--gold-bright); border-bottom: 1.6px solid var(--gold-bright);
transform: rotate(-45deg);
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.campo--flut > label { top: 17px; }
.campo--flut > input:focus + label,
.campo--flut > input:not(:placeholder-shown) + label {
transform: translateY(-10px) scale(.76);
}
.campo--flut--maiusc > input { text-transform: uppercase; }
.campo--valor > input { font-family: var(--f-mono); text-align: right; padding-left: 36px; }
.campo--valor .prefixo { bottom: 7px; }
/* ==========================================================================
ESCOLHA BINÁRIA — Não / Sim
==========================================================================
Dois radios soltos com a bolinha do sistema operacional destoavam de tudo
nesta tela e, pior, eram pequenos demais para uma pergunta cuja resposta
muda o cálculo. Viram duas pastilhas coladas com um cursor que desliza de
uma para a outra.
Continua sendo `input[type=radio]` de verdade por baixo: teclado, leitor de
tela, `required` e o POST funcionam sem uma linha de JavaScript. */
.binario {
position: relative;
display: inline-grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
min-width: 168px;
padding: 3px;
background: var(--carbon);
border: 1px solid var(--line-3);
border-radius: 999px;
isolation: isolate;
}
.binario input {
position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
pointer-events: none;
}
.binario label {
z-index: 1;
padding: 8px 20px;
border-radius: 999px;
font-size: 13px; line-height: 1.2; text-align: center;
color: var(--muted-2);
cursor: pointer;
transition: color .24s var(--mola);
user-select: none;
}
.binario label:hover { color: var(--ink); }
/* O cursor. Nasce invisível: pergunta sem resposta não pode parecer
respondida — é ela que decide se o valor entra ou sai do cálculo. */
.binario__cursor {
position: absolute; z-index: 0;
top: 3px; bottom: 3px; left: 3px;
width: calc(50% - 3px);
border-radius: 999px;
background: var(--gold-grad);
box-shadow: 0 1px 10px rgba(214,178,94,.22);
opacity: 0;
transition: transform .3s var(--mola), opacity .2s;
}
.binario input:checked ~ .binario__cursor { opacity: 1; }
.binario input:nth-of-type(1):checked ~ .binario__cursor { transform: translateX(0); }
.binario input:nth-of-type(2):checked ~ .binario__cursor { transform: translateX(100%); }
.binario input:checked + label { color: #12100D; font-weight: 500; }
/* O foco tem de aparecer no rótulo: o input está escondido. */
.binario input:focus-visible + label {
outline: 2px solid var(--gold); outline-offset: 2px;
}
/* A linha inteira responde. Enquanto está sem resposta a borda esquerda
avisa; respondida, ela se apaga. */
.pergunta {
border-left: 2px solid var(--line-2);
transition: border-color .3s, background-color .3s;
}
.pergunta:has(input:checked) { border-left-color: var(--gold-edge); }
.pergunta:not(:has(input:checked)) { border-left-color: var(--gold-deep); }
@media (max-width: 560px) {
.binario { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.binario__cursor, .binario label { transition: none; }
}
/* ==========================================================================
CURVA DA MÉDIA DO BACEN
==========================================================================
Substitui as barras a partir do zero. Numa série que anda entre 1,69% e
2,05%, barra desde o zero desenha 27 retângulos iguais — a variação, que é
a única coisa que se quer ver ali, desaparecia. Curva pode ter escala
truncada; barra não pode. A escala fica escrita em cima do desenho, e os
números exatos ficam na tabela logo abaixo. */
/* ==========================================================================
ÁREA DA PLATAFORMA
==========================================================================
Parecida com o painel de propósito — é o mesmo sistema — e diferente o
bastante para ninguém confundir as duas. Quem confunde acaba lançando
crédito na conta errada, e é por isso que a faixa do topo fica em toda
tela, e não só na primeira. */
.app--admin .lateral { border-right-color: var(--gold-edge); }
.app--admin .item[aria-current="page"] { box-shadow: inset 2px 0 0 var(--gold); }
.barra--admin {
border-bottom: 1px solid var(--gold-edge);
background:
linear-gradient(90deg, rgba(214,178,94,.07), transparent 42%),
var(--carbon);
}
.barra--admin .pai { color: var(--gold); }
.etiq--admin {
color: var(--gold); border-color: var(--gold-edge);
background: rgba(214,178,94,.06);
font-family: var(--f-mono); font-size: 10px; letter-spacing: .08em;
text-transform: uppercase;
}
/* A porta da área, no menu do painel. Fica discreta: quem opera a plataforma
passa o dia no painel e não precisa de um botão gritando ao lado. */
.item--plataforma { color: var(--gold); }
.item--plataforma:hover { color: var(--gold-bright); }
/* O MÓDULO QUE O PLANO NÃO INCLUI.
Continua no menu, apagado e com cadeado. Apagar é o suficiente: riscar ou
travar o clique só faria a pessoa achar que é defeito. Clicando, ela cai na
tela que explica qual plano abre aquilo — que é para onde ela precisa ir. */
.lateral a.item--trancado { color: var(--faint-2); }
.lateral a.item--trancado svg [stroke] { stroke: currentColor; }
.lateral a.item--trancado:hover { color: var(--muted); }
.item__cadeado {
margin-left: auto; display: inline-flex; align-items: center;
color: var(--faint-2); flex: 0 0 auto;
}
.lateral a.item--trancado:hover .item__cadeado { color: var(--gold-deep); }
/* A TELA DO MÓDULO TRANCADO. O cadeado à esquerda, o texto à direita, e o
texto usa a largura toda — é a mesma regra das aberturas do site. */
.trancado {
display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 22px;
align-items: start; padding: 34px 32px;
border: 1px solid var(--line-2); border-radius: var(--raio);
background: var(--panel);
}
.trancado__cadeado {
display: flex; align-items: center; justify-content: center;
width: 54px; height: 54px; border-radius: 50%;
border: 1px solid var(--gold-edge, var(--line-2)); background: var(--raised);
color: var(--gold);
}
.trancado h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; max-width: none; }
@media (max-width: 720px) {
.trancado { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 26px 20px; }
}
/* ----------------------------------------------- gráfico de colunas simples
Barras aqui SAEM DO ZERO e devem sair mesmo: contagem de peças por dia tem
zero como referência real, ao contrário de taxa de juros — e é por isso que
a série do BACEN usa curva e esta usa coluna. */
.colunas {
display: flex; align-items: flex-end; gap: 6px;
height: 180px; padding-top: 8px;
}
.coluna {
flex: 1; min-width: 0; display: flex; flex-direction: column;
align-items: center; justify-content: flex-end; gap: 6px; height: 100%;
}
.coluna__valor {
font-size: 10.5px; color: var(--faint); height: 14px;
font-variant-numeric: tabular-nums;
}
.coluna__barra {
width: 100%; max-width: 46px; min-height: 2px;
background: var(--gold-grad); border-radius: 1px;
transition: height .5s var(--mola), filter .2s;
animation: lb-sobe .6s var(--mola) both;
}
.coluna:hover .coluna__barra { filter: brightness(1.25); }
.coluna__barra--zero { background: var(--line-3); animation: none; }
.coluna__dia {
font-size: 9.5px; color: var(--faint-2); white-space: nowrap;
}
@keyframes lb-sobe { from { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 720px) {
.colunas { height: 140px; gap: 3px; }
.coluna__dia { font-size: 8px; transform: rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
.coluna__barra { animation: none; transition: none; }
}
/* ==========================================================================
SÉRIES DO BACEN — CARTÕES DE MODALIDADE
==========================================================================
A tela mostrava as cinco modalidades abertas, cada uma com trinta e seis
linhas de tabela: cento e oitenta linhas numa página que não acabava. Os
cartões são a camada de panorama — última taxa, variação em doze meses e a
forma da curva — e o histórico completo só abre para a que for escolhida. */
.serie__cartoes {
display: grid; gap: 1px;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
background: var(--line); border: 1px solid var(--line);
}
.serie {
position: relative; display: grid; gap: 10px; align-content: start;
padding: 16px 18px 14px; background: var(--panel);
color: var(--ink); text-decoration: none;
transition: background-color .25s, box-shadow .25s;
}
.serie:hover { background: var(--carbon); color: var(--ink); }
.serie--ativa { background: var(--carbon); box-shadow: inset 2px 0 0 var(--gold); }
.serie__nome {
font-size: 12.5px; line-height: 1.4; color: var(--muted);
min-height: 2.8em;
}
.serie--ativa .serie__nome { color: var(--ink); }
.serie__valor {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
font-size: 20px; color: var(--gold-bright); font-variant-numeric: tabular-nums;
}
.serie__delta { font-size: 10.5px; letter-spacing: .02em; }
/* A seta já diz para onde foi. Pintar de vermelho e verde sugeriria bom e
ruim, e média de mercado que sobe não é nem uma coisa nem outra — muda o
patamar do que é abusivo, e é isso que se quer ver. */
.serie__delta.sobe, .serie__delta.desce { color: var(--muted-2); }
.serie__mini { display: block; width: 100%; height: 42px; }
.serie__pe { font-size: 10px; color: var(--faint-2); letter-spacing: .04em; }
/* A linha da competência que está sendo consultada, destacada no histórico:
é o número que a pessoa veio buscar. */
.tabela tr.linha--aceso td {
background: rgba(214,178,94,.06);
box-shadow: inset 2px 0 0 var(--gold-deep);
}
.curva { display: grid; gap: 8px; margin-bottom: 18px; }
.curva__svg {
display: block; width: 100%; height: 110px;
border-bottom: 1px solid var(--line-2);
}
.curva__eixo { font-size: 10.5px; color: var(--faint-2); }
.curva__eixo .mono { font-family: var(--f-mono); }
.curva__agora { color: var(--gold-bright); }
.curva__topo { gap: 12px; flex-wrap: wrap; }
/* ==========================================================================
A CAIXA DE ENVIO COM A LISTA DENTRO
==========================================================================
A relação de documentos vivia solta embaixo da caixa, junto com a linha de
formatos — um bloco de texto entre um campo e outro, exatamente onde
ninguém lê. Mudou de lugar: agora está DENTRO da caixa, que é para onde o
advogado olha na hora de decidir o que arrastar. */
.solta--dupla {
padding: 0; gap: 0;
grid-template-rows: auto 1fr auto;
align-content: stretch;
text-align: center;
}
.solta__topo {
display: grid; place-items: center; gap: 5px;
padding: 20px 18px 14px;
}
.solta--dupla .solta__icone { width: 24px; height: 24px; }
.solta__lista {
display: grid; gap: 4px;
padding: 12px 18px;
border-top: 1px solid var(--line-2);
text-align: left;
}
.solta__lista-titulo {
font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .14em;
text-transform: uppercase; color: var(--faint-2);
margin-bottom: 2px;
}
.solta__item {
position: relative; padding-left: 15px;
font-size: 11.5px; line-height: 1.45; color: var(--muted-2);
}
.solta__item::before {
content: ''; position: absolute; left: 3px; top: 8px;
width: 4px; height: 4px; border-radius: 50%;
background: var(--gold-deep);
}
.solta__rodape {
padding: 9px 18px 11px;
border-top: 1px solid var(--line-2);
font-size: 10px; letter-spacing: .06em; color: var(--faint-2);
text-align: left;
}
/* Com arquivo dentro, a lista some: já cumpriu o papel e a atenção passa a
ser dos arquivos escolhidos, logo abaixo. */
.solta.tem .solta__lista { display: none; }
.solta.tem .solta__topo { padding-block: 26px 22px; }
/* A caixa obrigatória é a que carrega os números da peça. */
.solta--exige { border-color: var(--gold-edge); }
/* ==========================================================================
ERRO DE PREENCHIMENTO
==========================================================================
O navegador mostra a bolha dele num campo só, some sozinha e fala inglês
pela metade. Por isso o