/** * Sistema visual — Vinculação BRASÍNDICE / SIMPRO * * Estética Apple (HIG): pilha de fontes do sistema (SF em Apple, Segoe no Windows), * superfícies claras, controles pílula, materiais translúcidos e movimento curto. * Claro por padrão, com modo noturno por escolha do usuário (ver os tokens de * [data-tema="escuro"]). Sem dependência externa — o arquivo é servido pelo * próprio Apache, então funciona igual em dev e no cPanel. */ /* ----------------------------------------------------------------- tokens */ :root { /* Tema claro fixo: o fundo branco é decisão de marca, não preferência do SO. */ color-scheme: light; /* Superfícies — fundo branco; os cartões se definem por separador de 1px, não por tom de fundo. */ --bg: #ffffff; --surface: #ffffff; --surface-sunken: #f4f4f2; /* trilho do segmented, fundo de */ --separator: rgba(0, 0, 0, .13); --separator-strong: rgba(0, 0, 0, .22); /* Texto — contrastes conferidos contra o branco */ --ink: #1d1d1f; /* 16.9:1 */ --ink-muted: #545456; /* 7.6:1 — não usar cinza mais claro em corpo de texto */ /** * Amarelo: dois papéis distintos, e confundi-los quebra a legibilidade. * * --accent PREENCHIMENTO apenas (botão, item ativo, barra de progresso). * Nunca como cor de texto sobre branco: #ffcc00 sobre #fff dá * 1.4:1, ilegível. * --accent-ink o texto que vai EM CIMA do amarelo (13.4:1 sobre #ffcc00). * --accent-text o amarelo escurecido para TEXTO e bordas sobre branco * (6.1:1). É o que links e anel de foco usam. */ --accent: #ffcc00; --accent-hover: #ffd633; --accent-active: #f0be00; --accent-ink: #1d1d1f; --accent-text: #7a5b00; --accent-soft: rgba(255, 204, 0, .22); /* Estados semânticos seguem verde/vermelho — sucesso e erro não são marca. */ --success: #1a7f37; --success-soft: rgba(26, 127, 55, .1); --danger: #cf222e; --danger-soft: rgba(207, 34, 46, .09); /* Terminal do log */ --log-bg: #1c1c1e; --log-ink: #e5e5ea; /* Material translúcido da barra de navegação */ --chrome: rgba(255, 255, 255, .75); /* Raio — cartões 12, controles 8, botões pílula */ --r-card: 12px; --r-control: 8px; --r-pill: 980px; /* Botões: cantos suaves, não pílula — pedido do usuário. Badge e chip continuam pílula, porque ali o formato é o que os distingue de botão. */ --r-botao: 10px; /* Escala de espaço */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; /* Movimento — curva padrão da Apple, duração de produto */ --ease: cubic-bezier(.25, .1, .25, 1); /* Altura da topbar. A gaveta e o veu do mobile comecam exatamente onde ela acaba, entao o numero precisa estar em um lugar so. */ --topbar-h: 56px; --fast: 150ms; --base: 220ms; /* Camadas nomeadas — nada de 999 */ --z-header: 100; --z-progress: 200; --azul: #0a66c2; --azul-soft: rgba(10, 102, 194, .12); --roxo: #7c3aed; --roxo-soft: rgba(124, 58, 237, .12); /* Divergente: nao e erro do arquivo, e cadastro pra conferir. */ --ambar: #b45309; --ambar-soft: rgba(180, 83, 9, .12); --cinza-soft: rgba(120, 120, 128, .14); --aviso-bg: #fff8e1; --aviso-borda: #ffe08a; --login-bg: #f5f5f7; } /** * Modo noturno. Escolha explícita do usuário (botão na topbar, guardado no * localStorage), não preferência do SO: o atributo entra no antes da * primeira pintura, senão a tela pisca branca. Só os tokens mudam — nenhum * componente tem cor própria. */ :root[data-tema="escuro"] { color-scheme: dark; --bg: #161618; --surface: #1f1f22; --surface-sunken: #2a2a2e; --separator: rgba(255, 255, 255, .14); --separator-strong: rgba(255, 255, 255, .26); --ink: #f2f2f5; --ink-muted: #a3a3ab; /* O amarelo de preenchimento continua igual (é a marca); o de TEXTO precisa clarear: o #7a5b00 sobre fundo escuro fica ilegível. */ --accent-text: #ffd60a; --accent-soft: rgba(255, 214, 10, .22); --success: #4ade80; --success-soft: rgba(74, 222, 128, .14); --danger: #ff6b6b; --danger-soft: rgba(255, 107, 107, .14); --chrome: rgba(22, 22, 24, .75); --azul: #6cb0f5; --azul-soft: rgba(108, 176, 245, .16); --roxo: #b794f6; --roxo-soft: rgba(183, 148, 246, .18); --ambar: #fbbf24; --ambar-soft: rgba(251, 191, 36, .16); --cinza-soft: rgba(160, 160, 170, .16); --aviso-bg: rgba(255, 204, 0, .08); --aviso-borda: rgba(255, 204, 0, .28); --login-bg: #101012; } /* ------------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } /* O [hidden] do HTML vale display:none pela folha do NAVEGADOR, que perde para qualquer regra de classe daqui (".modal__formatos { display: flex }" ganhava, e o elemento marcado como hidden continuava na tela). Com !important o atributo volta a significar o que promete, em qualquer componente. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; /* Interface 20% menor, como o zoom do navegador: encolhe layout e tipografia juntos. O Chrome resolve vh/dvh contra o viewport zoomado, então as telas de altura fixa (shell, login) continuam preenchendo a janela. */ zoom: 0.8; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 15px; line-height: 1.47; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -.022em; } h1 { font-size: 28px; line-height: 1.14; font-weight: 600; } h2 { font-size: 19px; line-height: 1.26; font-weight: 600; } h3 { font-size: 15px; line-height: 1.33; font-weight: 600; } p { margin: 0; } a { color: var(--accent-text); text-decoration: none; transition: opacity var(--fast) var(--ease); } a:hover { text-decoration: underline; } a:active { opacity: .7; } code { font-family: ui-monospace, "SF Mono", SFMono-Regular, Consolas, monospace; font-size: .92em; background: var(--surface-sunken); border: 1px solid var(--separator); border-radius: 5px; padding: 1px 5px; } /* O anel de foco usa o amarelo escurecido: o #ffcc00 puro sobre branco quase não aparece, e foco invisível é o mesmo que não ter foco. */ :focus-visible { outline: 3px solid var(--accent-text); outline-offset: 2px; border-radius: 4px; } /* --------------------------------------------------------------- estrutura */ .app-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--chrome); border-bottom: 1px solid var(--separator); } /* O material translúcido só entra onde o navegador realmente desfoca; sem suporte, a barra fica opaca em vez de transparente e ilegível. */ @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .app-header { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); } } .app-header__inner { max-width: 1200px; margin: 0 auto; padding: var(--s3) var(--s5); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; } .wrap { max-width: 1200px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s7); } .page-head { margin-bottom: var(--s5); } .page-head p { color: var(--ink-muted); margin-top: var(--s2); max-width: 68ch; } .stack > * + * { margin-top: var(--s4); } /* A marca é texto, não imagem: um logo em PNG seria mais um arquivo para servir e mais uma coisa para desalinhar em tela de alta densidade. */ .marca { font-size: 17px; font-weight: 640; letter-spacing: -.02em; color: var(--ink); } .marca:hover { text-decoration: none; opacity: .7; } /* ---------------------------------------------- segmented control (navegação) */ .segmented { display: inline-flex; background: var(--surface-sunken); border: 1px solid var(--separator); border-radius: var(--r-control); padding: 2px; gap: 2px; } .segmented a { padding: 5px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--ink-muted); white-space: nowrap; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); } .segmented a:hover { color: var(--ink); text-decoration: none; } /* A seção ativa é o lugar onde o amarelo trabalha como sinal, não decoração. */ .segmented a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 590; } .link-quiet { color: var(--ink-muted); font-size: 13px; font-weight: 500; } .link-quiet:hover { color: var(--ink); } /* --------------------------------------------------------------- progresso */ /* Fica colada abaixo da barra de navegação, como o indicador de carregamento do Safari. Só aparece durante upload ou troca de tela. */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-progress); background: var(--separator); overflow: hidden; } .progress[hidden] { display: none; } .progress__bar { height: 100%; width: 0; background: var(--accent); transition: width var(--base) var(--ease); } /* Upload terminou, o servidor ainda processa: sem percentual para mostrar. */ .progress--indeterminado .progress__bar { animation: deslizar 1.4s ease-in-out infinite; transform-origin: left center; } @keyframes deslizar { 0% { transform: translateX(-100%) scaleX(.4); } 100% { transform: translateX(100%) scaleX(.4); } } /* ---------------------------------------------------------------- cartões */ .card { background: var(--surface); border: 1px solid var(--separator); border-radius: 0; /* cards quadrados (pedido do usuário) */ padding: var(--s5); } .card__title { margin-bottom: var(--s4); } /* ----------------------------------------------------------------- avisos */ .banner { border-radius: var(--r-card); padding: var(--s3) var(--s4); font-size: 14px; } .banner--error { background: var(--danger-soft); color: var(--danger); } .banner--success { background: var(--success-soft); color: var(--success); font-weight: 590; } /* Nota de contexto, não alerta: preenchimento neutro no estilo iOS. O amarelo translúcido sobre superfície escura vira um verde-oliva sujo. */ .banner--info { background: rgba(120, 120, 128, .14); color: var(--ink); } /* Achado que pede conferencia no cadastro: nao e erro da importacao, mas nao pode se perder dentro do verde de "concluida". */ .banner--aviso { background: var(--aviso-bg); border: 1px solid var(--aviso-borda); color: var(--ink); } /* Nota dentro de um formulário precisa do próprio respiro: .stack não alcança aqui. */ form > .banner { margin-top: var(--s5); } /* ---------------------------------------------------------------- formulário */ .field + .field { margin-top: var(--s5); } .field__label { display: block; font-size: 14px; font-weight: 590; margin-bottom: var(--s2); } .field__hint { color: var(--ink-muted); font-size: 13px; margin-top: var(--s2); max-width: 68ch; } input[type="file"], input[type="text"], input[type="password"], input[type="number"] { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--separator-strong); border-radius: var(--r-control); padding: 9px 12px; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } input[type="number"] { max-width: 160px; } /* TODO dropdown do sistema usa a mesma pele: seta chevron propria a direita (a nativa muda de desenho a cada SO), hover igual ao do input, e texto que corta com reticencias em vez de esticar o controle. * * Vale para o nativo E para o .combo__campo, que e o input que o * combobox com busca poe no lugar do select — os dois sao o mesmo dropdown para * quem usa. * * O seletor e `input.combo__campo`, com o elemento junto, por especificidade: * `input[type="text"]` acima vale (0,1,1) e ganharia de `.combo__campo` (0,1,0). * Ganhando, o `background:` de la zerava size/repeat/position, e o SVG (que nao * tem tamanho proprio, so viewBox) esticava ate o tamanho do campo e se repetia: * a seta virava um risco diagonal atravessando o texto. * * O width/height no proprio SVG e a segunda trava: mesmo sem background-size ele * nao estica. */ select, input.combo__campo { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--separator-strong); border-radius: var(--r-control); padding: 9px 34px 9px 12px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } select:hover:not(:disabled), input.combo__campo:hover:not(:disabled) { border-color: var(--ink-muted); } select:focus, input.combo__campo:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3.5px var(--accent-soft); } select:disabled { color: var(--ink-muted); cursor: default; } /* Aberto, a seta vira para cima — mesmo gesto do menu do usuario na topbar. */ input.combo__campo[aria-expanded="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23787880' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E"); } /* A seta e data URI e nao herda currentColor: o modo noturno precisa da sua. */ :root[data-tema="escuro"] select, :root[data-tema="escuro"] input.combo__campo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } :root[data-tema="escuro"] input.combo__campo[aria-expanded="true"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a3a3ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E"); } /* A lista aberta e desenhada pelo SO: so da para pedir as cores do tema. */ select option { background: var(--surface); color: var(--ink); } input:hover:not(:disabled) { border-color: var(--ink-muted); } input:focus { outline: none; border-color: var(--accent-text); box-shadow: 0 0 0 3.5px var(--accent-soft); } input::placeholder { color: var(--ink-muted); } /* Mantém o seletor de arquivo nativo — só veste o botão que ele já expõe. */ input[type="file"] { padding: 7px 10px; cursor: pointer; } input[type="file"]::file-selector-button { font: inherit; font-weight: 500; color: var(--ink); background: var(--surface-sunken); border: 1px solid var(--separator-strong); border-radius: var(--r-botao); padding: 5px 14px; margin-right: var(--s3); cursor: pointer; transition: background var(--fast) var(--ease); } input[type="file"]::file-selector-button:hover { background: var(--separator); } /* ----------------------------------------------------------------- botões */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); font: inherit; letter-spacing: -.01em; padding: 10px 22px; border: 0; border-radius: var(--r-botao); background: var(--accent); color: var(--accent-ink); font-weight: 590; cursor: pointer; transition: background var(--fast) var(--ease), transform var(--fast) var(--ease); } .btn:hover:not(:disabled) { background: var(--accent-hover); } .btn:active:not(:disabled) { background: var(--accent-active); transform: scale(.97); } .btn:disabled { opacity: .55; cursor: default; } .btn[data-busy] { cursor: progress; } .btn--block { width: 100%; } /* Indicador de trabalho em andamento — o envio leva minutos nos arquivos grandes. */ .btn[data-busy]::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(29, 29, 31, .3); border-top-color: var(--accent-ink); animation: spin 700ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* O "Cancelar envio" nasce no JS ao lado do submit enquanto o upload sobe. */ .form-actions { margin-top: var(--s5); display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; } /* Formularios de importacao e comparacao: largura contida e centralizada. Sem isso os campos de arquivo esticam nos 960px da coluna. O :not(.filtros) tira dessa regra a barra de filtros da diferenca entre edicoes, que precisa da largura toda para alinhar com os cards abaixo. */ main.wrap > form.card:not(.filtros) { max-width: 480px; margin-inline: auto; } /* --------------------------------------------------- nova importacao (passos) */ .import-nova { max-width: 600px; margin-inline: auto; } /* Bloco de orientacao: amarelo claro. */ .orientacao { background: var(--aviso-bg); border: 1px solid var(--aviso-borda); border-radius: var(--r-card); padding: var(--s4) var(--s5); font-size: 14px; color: var(--ink); } .orientacao ol { margin: var(--s2) 0 0; padding-left: 1.3em; } .orientacao li + li { margin-top: var(--s2); } .orientacao__nota { margin: var(--s3) 0 0; font-size: 13px; color: var(--ink); } /* Nova importacao: instrucoes ao lado do bloco de upload. */ .import-split { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: var(--s5); align-items: start; } /* `minmax(0, 1fr)` e nao `1fr`: o minimo automatico de uma track de grid e o min-content do filho, que aqui passa da largura da tela e vazava 8px para fora do .wrap. Com minimo 0 a coluna encolhe de verdade. */ @media (max-width: 860px) { .import-split { grid-template-columns: minmax(0, 1fr); } } .select-uf { max-width: 320px; } /* Select com busca. O guarda o valor do formulario, ele existe em quase toda tela, e o resultado era a pagina inteira rolando na horizontal no celular (medido: 493px de conteudo numa viewport de 375). */ .combo__nativo { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 0; pointer-events: none; } /* A pele do .combo__campo (seta, padding, reticencias) fica junto com a do