/* ===================================================================== AG · Identidade visual do painel interno Base: tema ESCURO permanente, conforme briefing. Variante: tema claro, por opt-in explicito. Como usar: -> escuro (padrao) -> claro Regra que nao se quebra: cor de marca NAO substitui cor semantica. Vermelho, ambar e verde (ou teal, no claro) dizem se algo esta bem ou mal. Se o laranja virar "acento" ou "positivo", a marca some da interface toda vez que houver problema -- e havera. 17/09/2026 -- porte da paleta V6 (etapa 1 de 3, decisao do Artur): --ag-laranja continua so marca (logo, .marca) nos DOIS temas. No escuro, --ag-ciano continua o acento -- tema escuro mantido, decisao separada. No claro, --ag-ciano passa a resolver para o teal da V6 (mesmo NOME de token, valor diferente por tema -- o padrao que este arquivo ja usa para --ok/--erro/etc). Fonte completa em DESIGN_V6_EXTRAIDO.md (fora deste worktree, na raiz do repositorio). ===================================================================== */ :root { /* --- marca -------------------------------------------------------- 20/09/2026 -- corrigido contra "AG Assessoria -- Guia de uso da marca" (Drive, 13/09/2026, valores medidos na arte). Os dois hexes antigos eram aproximacao de quem digitou de olho, nao o valor real -- #F06400/#28AAE6 nunca foram a cor da AG, so' perto dela. Achado da coordenacao depois do Artur apontar que a tela nao batia com a identidade (verificado direto com ele na mesma sessao). */ --ag-laranja: #F26C20; /* acento de marca -- [marca] guia 13/09 */ --ag-laranja-fraco: #F26C2022; --ag-ciano: #2CAEE8; /* links, acao secundaria, navegacao -- [marca] guia 13/09 */ --ag-ciano-fraco: #2CAEE822; /* --- casca de navegacao (etapa 3, 17/09; cor corrigida 20/09) ------ Permanentemente escura nos DOIS temas -- de proposito, fora do bloco [data-tema="claro"] abaixo. O conteudo troca de tema; a casca (sidebar) nao, igual --ag-laranja ser so marca nos dois. 🚨 --nav-ativo-* chegou como "o par literal da V6" (pastel claro sobre barra escura, a assinatura dela) quando a casca foi portada, 17/09 -- e ninguem notou porque o nome do token nao tem "teal" nenhum. Furava a fronteira do proprio dia ("estrutura se copia, paleta nao") sem que nenhuma decisao tivesse sido tomada sobre isso -- so' veio de carona. E' o elemento mais visivel da tela (item ativo da lateral) pintado com a cor da V6 num painel que carrega o logo da AG. Corrigido 20/09 em tres rodadas. Primeiro pastel claro (E3F1FA/ 11475F, 8,72:1 AAA) derivado de --ag-ciano. Depois o Artur pediu especificamente o AZUL DA MARCA solido no preenchimento do item ativo (nao mais pastel) -- e a primeira tentativa de texto usou o mesmo hex do "acento em texto" (#085678, --ag-ciano do tema claro), que da' so' 3,19:1 sobre o azul cheio (passa UI/texto grande, nao fecha AA normal). Terceira correcao: --nav-ativo-texto e' um PAPEL diferente de --ag-ciano (texto sobre azul solido vs. texto/link sobre branco) e nao devia compartilhar hex so' porque os dois vieram do mesmo pedido -- #0B2430 fecha AA normal (6,36:1) sem tocar no azul da marca. #085678 continua certo onde vive (--ag- ciano do claro, texto/link sobre branco) -- ver bloco mais abaixo. */ --nav-fundo: #10161E; /* = --superficie escura */ --nav-fundo-hover: #1A222C; --nav-borda: #1E2630; /* = --borda escura */ --nav-texto: #9FB0C3; /* = --texto-suave escura */ --nav-texto-fraco: #64788A; --nav-acento: #2CAEE8; /* = --ag-ciano escura -- tunado p/ fundo escuro */ --nav-ativo-fundo: #2CAEE8; /* [marca] azul da marca, solido -- pedido explicito do Artur */ --nav-ativo-texto: #0B2430; /* [conserto tecnico] texto sobre azul solido -- 6,36:1 AA, nao a marca */ /* --- superficies (escuro) --------------------------------------- */ --fundo: #0B0F14; --superficie: #10161E; --superficie-alta: #141B24; --borda: #1E2630; --borda-forte: #2A3543; /* separador interno de linha de tabela -- token novo (V6, 17/09). No escuro repete --borda: o escuro nao muda nesta etapa, so o claro ganha o separador mais fraco que a V6 usa (DESIGN_V6_EXTRAIDO.md §1.1). */ --borda-tabela: #1E2630; /* gradiente azul da casca: eleva sem tirar legibilidade */ --casca-gradiente: linear-gradient(135deg, #0B0F14 0%, #101A26 55%, #0D1620 100%); /* --- texto ------------------------------------------------------ */ --texto: #E6EDF5; --texto-suave: #9FB0C3; --texto-fraco: #6B7C90; /* --- semantica: severidade e saude ------------------------------ */ --ok: #3FB950; --ok-fundo: #3FB95018; --atencao: #D29922; --atencao-fundo: #D2992218; --erro: #FF706A; --erro-fundo: #FF706A18; --info: #58A6FF; --info-fundo: #58A6FF18; /* --- estados de dado -------------------------------------------- */ /* Cada um e componente explicito. Ausencia NUNCA vira zero. */ --sem-dado: #6B7C90; /* nao existe valor */ --sem-dado-fundo: #6B7C9018; --desatualizado: #D29922; /* existe, mas passou do prazo */ --desatualizado-fundo:#D2992218; --demo: #B58CFF; /* dado sintetico, nunca confundir com real */ --demo-fundo: #B58CFF18; --parcial: #58A6FF; /* cobertura incompleta declarada */ --parcial-fundo: #58A6FF18; /* --- preenchimento (escala propria, nao semantica de risco) ------ */ /* --- cor por canal do calendario editorial ------------------------ 🚨 NAO sao tokens de estado, e a diferenca importa: `--ok` e `--erro` ja existem e tem as matizes certas (verde e terracota), mas um evento de YouTube pintado com `--erro` fica vermelho e parece defeito. Canal e' identidade, nao diagnostico -- por isso entrada propria. A matiz de cada um e' a da previa V6 (blog verde, youtube terracota, instagram roxo). Os valores do tema CLARO sao os da previa escurecidos ate o minimo que passa em 3:1 contra o fundo do evento -- os originais dela reprovam (2.85 / 2.98 / 2.66), medido em 21/09. Os do tema ESCURO sao derivados da mesma matiz, com luz para fundo escuro, e medem 7.65 / 5.89 / 6.27. O quarto par e' o que qualquer outro canal usa: cinza da casa. Ele existe para que canal novo no vocabulario NAO caia sem estilo -- `marketing_channels` tem oito codigos e o calendario multicanal so' nomeia tres. */ --canal-blog: #6ECB80; --canal-blog-fundo: #6ECB801A; --canal-youtube: #E28477; --canal-youtube-fundo: #E284771A; --canal-instagram: #BE93DB; --canal-instagram-fundo: #BE93DB1A; --canal-outro: #6B7C90; --canal-outro-fundo: #6B7C901A; --preench-vazio: #2A3543; --preench-baixo: #8957E5; --preench-medio: #388BFD; --preench-alto: #3FB950; /* --- densidade operacional -------------------------------------- */ --r-1: 6px; --r-2: 10px; --r-3: 14px; --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --fonte: -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif; --fonte-num: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; /* Escala tipografica -- porte de DESIGN_V6_EXTRAIDO.md §2 (17/09, etapa 2 de 3). Tema-agnostico de proposito: tamanho, peso e tracking nao mudam por tema, so cor muda (ja portada na etapa 1). Valores citados no documento como [dom] (medido no navegador, nao o CSS bruto da V6, que tem regra sobreposta sem escopo). 🚨 Pesos 750/720/740/650 sao intencionais na V6 (fonte variavel). Com --fonte (fonte estatica do sistema), arredondam para o degrau mais proximo -- aqui, 700. E aproximacao documentada, nao perda por descuido: --peso-forte existe para nomear essa aproximacao um lugar so, em vez de espalhar "700" cru pelos seletores. */ --peso-forte: 700; --t-micro: 10px; /* [dom] thead th (era 11px) */ --t-peq: 12px; /* [dom] td -- ja batia, sem mudanca */ --t-base: 15px; /* [dom] corpo efetivo (a V6 declara 14 e sobrescreve para 15) */ --t-med: 17px; /* [dom] h2 base */ --t-titulo: 26px; /* [dom] h1 -- titulo de tela (era 20px) */ /* 🚨 nao mono: a V6 usa a MESMA sans com tabular-nums no numero grande, nunca fonte monoespacada (DESIGN_V6_EXTRAIDO.md §2, "Escala de numeros grandes"). --fonte-num continua existindo para COD de cliente e colunas .num de tabela (alinhamento tabular em grade dita, uso diferente do numero-hero). 36px e meio-termo deliberado: a V6 usa 41px num cartao proprio (`.kpi`), que ainda nao existe aqui -- 41px cru dentro do `.cartao.indicador` compacto de hoje (etapa 3, ainda nao portada) desproporcionaria o cartao. Ver com o Fable antes de subir para 41px quando a casca chegar. */ --t-metrica: 36px; /* era 28px; V6 usa 41px no proprio cartao KPI */ /* 🚨 sombra tratada por tema, nao um valor so (pedido explicito da coordenacao, 17/09): sombra quase invisivel funciona sobre fundo branco (V6); sobre fundo quase-preto a mesma sombra some, e a separacao teria que vir da borda. Por isso o escuro NAO muda aqui -- e o mesmo valor de sempre, decisao "tema escuro mantido" continua valendo tambem para sombra. So o claro (abaixo) recebeu o alfa fino da V6, na etapa 1. */ --sombra: 0 1px 2px #0008, 0 4px 12px #0006; } /* ===================================================================== VARIANTE CLARA — opt-in por data-tema="claro" Mantem os mesmos nomes de token. Nenhum componente precisa saber qual tema esta ativo. ===================================================================== */ :root[data-tema="claro"] { /* Paleta portada de preview-v6.html -- DESIGN_V6_EXTRAIDO.md §1, medida no navegador (coluna [dom] do documento, nao o CSS bruto: a folha da V6 tem regras sobrepostas sem escopo e a ultima declaracao vence). Nao inventamos hex novo aqui -- todo valor abaixo tem origem citada no documento, marcado [css] (extraido) ou [proposto] (a V6 nao tem este papel, sugestao coerente com o resto da paleta). */ --fundo: #F4F6F7; /* [css] --bg */ --superficie: #FFFFFF; /* [css] --paper */ /* 🚨 inverte de sentido: no escuro superficie-alta e mais CLARA que superficie; aqui e mais ESCURA (tinta sutil sobre o branco). Mesmo papel -- "um degrau acima do cartao" -- direcao oposta. */ --superficie-alta: #F7F9FA; /* [css] hex mais reusado da folha (5x), thead th */ --borda: #DCE4E7; /* [css] --line */ --borda-forte: #C6D3D8; /* [proposto] -- a V6 nao tem terceiro degrau de borda */ --borda-tabela: #EDF1F2; /* [css] td{border-bottom}; sem isto a grade fica pesada */ --casca-gradiente: linear-gradient(135deg, #FFFFFF 0%, #F4F6F7 100%); --texto: #172F3E; /* [css] --ink */ --texto-suave: #576B77; /* [css] --muted */ --texto-fraco: #6C7D87; /* [css] --dim (uso raro; --muted faz quase todo o trabalho) */ /* 🚨 sem alfa. A V6 nao usa alfa nos pares -fundo -- cada estado e DOIS hexes solidos (texto escurecido + fundo pastel opaco). O alfa 18 do tema escuro sobre fundo branco lava o contraste quase a zero; por isso os valores abaixo SUBSTITUEM o padrao alfa, nao se somam a ele. */ --ok: #08776E; --ok-fundo: #E7F3F0; /* [css] --accent / --accent-soft; a V6 nao tem verde, o positivo E o teal */ --atencao: #875511; --atencao-fundo: #FCF3E4; /* [css] --amber / --amber-soft */ --erro: #AA4D40; --erro-fundo: #F9EDE9; /* [css] --clay / --clay-soft */ --info: #62597B; --info-fundo: #F0EEF6; /* [css] --purple / --plan-bg -- interpretativo: a V6 nao tem azul */ --sem-dado: #576B77; --sem-dado-fundo: #EEF2F4; /* [css] .qbadge.neutral */ --desatualizado: #875511; --desatualizado-fundo:#FCF3E4; /* [css] reuso do ambar, mesmo padrao do tema escuro */ /* 🚨 #C1942D (o hex "achado firme" da V6) dá 2,46:1 sobre este fundo -- reprova AA ate para texto grande (3,0), e e o texto da faixa "MODO DEMONSTRACAO", fixa no topo de toda tela em demo. #61460B e a propria V6 quem usa (.is-demo .mode-control .active): 7,76:1, AAA. Achado da verificacao de contraste, 17/09. */ --demo: #61460B; --demo-fundo: #FFF0C7; /* 🚨 --parcial e --sem-dado ficavam perto demais (distancia de cor 21,3 -- a menor entre os 10 pares do tema). Causa: --parcial foi mapeado por interpretacao para o --reference da V6, que e roxo dessaturado demais para se separar de um cinza-azulado. #4F4370 dobra a distancia (41,4) e melhora o proprio contraste (5,11:1 -> 7,77:1 sobre --parcial-fundo). Achado da verificacao de contraste, 17/09. */ --parcial: #4F4370; --parcial-fundo: #F1EFF6; /* Claro: matiz da V6, escurecida ate passar em 3:1 (ver o bloco do tema escuro). O FUNDO de cada um e' o pastel da propria previa, que passa de sobra no texto (14.46 / 14.19 / 13.84). */ --canal-blog: #6C9772; /* [previa] #729b78, escurecido: 2.85 -> 3.02 */ --canal-blog-fundo: #EDF6EE; /* [previa] literal */ --canal-youtube: #BD796F; /* [previa] #be7b71, escurecido: 2.98 -> 3.04 */ --canal-youtube-fundo: #FBEFEC; /* [previa] literal */ --canal-instagram: #997FAE; /* [previa] #a28ab5, escurecido: 2.66 -> 3.03 */ --canal-instagram-fundo: #F1EDF7; /* [previa] literal */ --canal-outro: #6C7D87; /* [css] --dim */ --canal-outro-fundo: #F7F9FA; /* [css] a superficie alta */ --preench-vazio: #E9EEF0; /* [proposto] -- a V6 nao tem barra de preenchimento */ --preench-baixo: #62597B; /* [proposto] --purple */ --preench-medio: #875511; /* [proposto] --amber */ --preench-alto: #08776E; /* [proposto] --accent */ /* 🚨 a V6 e interface de bordas, nao de sombras -- alfa 04 (~1,6%). Se o painel usa sombra forte, esta e uma das diferencas mais visiveis e mais baratas de corrigir (DESIGN_V6_EXTRAIDO.md §1.7). */ --sombra: 0 3px 12px #19323E0A; } /* --- marca: SO no claro --ag-ciano vira acento de texto ------------- Mesmo NOME de token, valor por tema -- o mesmo padrao que --ok/--erro/ etc ja usam. --ag-laranja NAO e redefinido aqui de proposito: continua marca (logo) nos dois temas, reservado pra destaque pontual -- nunca acento fixo (palavras do Artur, 20/09: "o laranja se precisar destacar alguma coisa"). No escuro --ag-ciano continua o azul da marca (tema escuro mantido). 20/09: valor trocado de novo. Ate aqui este bloco resolvia pro teal exato do V6 (#08776E, "aproveitar a paleta clara da previa"). O Artur pediu mais especifico: "estrutura do V6, matiz da AG" -- mesma luz/saturacao que o --accent do V6 usa (L 25%, serve bem como texto sobre branco), mas no matiz azul da marca, nao no teal. --ok continua #08776E (o teal de verdade) porque aquele e' semantica de "medido/ ok", nao identidade -- trocar os dois juntos teria sido o erro inverso (marca engolindo semantica). Sem alfa, mesmo padrao do resto deste bloco ("V6 nao usa alfa nos pares -fundo"). */ :root[data-tema="claro"] { --ag-ciano: #085678; /* [marca] mesma luz/sat do --accent V6 (#08776E), matiz da AG */ --ag-ciano-fraco: #E2EEF3; /* [marca] par pastel de #085678, sem alfa */ } /* ===================================================================== ACABAMENTO BEHANCE — 24/09/2026 A paleta abaixo vem do estudo performance-v6-behance. Ela cria papeis proprios para acento, foco, selecao, tile e series; marca e semantica continuam independentes. Os tres ajustes tecnicos minimos sao: - texto fraco claro: #627989 -> #5C7282 (4,54:1 no fundo); - foco claro: #2CAEE8 -> #2597C3 (3,02:1 no fundo); - borda forte: #7D8E97 / #627687 (>= 3:1 nas superficies comuns). As linhas decorativas continuam sutis; controles usam --borda-forte. ===================================================================== */ :root { --fundo: #0D1117; --superficie: #1A2029; --superficie-alta: #232B35; --tile: #202833; --borda: #35414D; --borda-forte: #627687; --borda-tabela: #35414D; --casca-gradiente: linear-gradient(135deg, #0D1117 0%, #111820 100%); --texto: #F3F7FA; --texto-suave: #B9C5CD; --texto-fraco: #93A5B1; --texto-inverso: #0D2230; --marca-texto: #F26C20; --acento-ui: #66D1C4; --acento-ui-fraco: #123C3B; --foco: #9F7BEA; --selecao-fundo: #263947; --chip-fundo: #273C41; --serie-atual: #66C9BC; --serie-anterior: #6A7B88; --aviso-quente: #332A23; --aviso-quente-borda:#9A714A; --heat: #27514E; --ativo-gradiente: linear-gradient(125deg, #173B49 0%, #123C3B 100%); --ativo-borda: #66D1C4; --nav-fundo: #111820; --nav-fundo-hover: #202A34; --nav-borda: #313F4C; --nav-texto: #D6E3E9; --nav-texto-fraco: #A0B5C1; --nav-acento: #66D1C4; --nav-ativo-fundo: #E6F6F3; --nav-ativo-texto: #163E46; --sem-dado: #93A5B1; --sem-dado-fundo: #273C41; --preench-vazio: #35414D; --preench-baixo: #9F7BEA; --preench-medio: #388BFD; --preench-alto: #3FB950; --r-1: 6px; --r-2: 10px; --r-3: 14px; --topo-altura: 63px; --fonte: "Segoe UI Variable", "Segoe UI", Arial, sans-serif; --t-micro: 10px; --t-peq: 11px; --t-nota: 12px; --t-base: 13px; --t-med: 18px; --t-titulo: 28px; --t-metrica: 32px; --grade-grafico: #35414D66; --sombra-baixa: 0 8px 24px #0003; --sombra-alta: 0 18px 46px #0004; --sombra: var(--sombra-baixa); --movimento-rapido: 140ms; --movimento-padrao: 180ms; --easing-ui: cubic-bezier(.2, .8, .2, 1); } :root[data-tema="claro"] { --fundo: #F1F4F6; --superficie: #FFFFFF; --superficie-alta: #F7FAFB; --tile: #FFFFFF; --borda: #DBE4E9; --borda-forte: #7D8E97; --borda-tabela: #EDF1F2; --casca-gradiente: linear-gradient(135deg, #FFFFFF 0%, #F1F4F6 100%); --texto: #142D3B; --texto-suave: #4C6271; --texto-fraco: #5C7282; --texto-inverso: #FFFFFF; --marca-texto: #B44B0A; --acento-ui: #08776E; --acento-ui-fraco: #E8F5F2; --foco: #2597C3; --selecao-fundo: #F0FBF9; --chip-fundo: #E8F3F2; --serie-atual: #08776E; --serie-anterior: #768C96; --aviso-quente: #FFF8ED; --aviso-quente-borda:#A66A1B; --heat: #D8EEEB; --ativo-gradiente: var(--acento-ui-fraco); --ativo-borda: var(--acento-ui); --nav-fundo: #142D3B; --nav-fundo-hover: #1E3A49; --nav-borda: #35505E; --nav-texto: #D6E3E9; --nav-texto-fraco: #A8BCC7; --nav-acento: #66D1C4; --nav-ativo-fundo: #E6F6F3; --nav-ativo-texto: #163E46; --preench-vazio: #E9EEF0; --preench-baixo: #62597B; --preench-medio: #875511; --preench-alto: #08776E; --grade-grafico: #DCE5E980; --sombra-baixa: 0 8px 24px #17394F0A; --sombra-alta: 0 16px 42px #17394F12; --sombra: var(--sombra-baixa); } /* ===================================================================== Base ===================================================================== */ * { box-sizing: border-box; } body { margin: 0; background: var(--fundo); color: var(--texto); font: var(--t-base)/1.5 var(--fonte); -webkit-font-smoothing: antialiased; } .casca { background: var(--casca-gradiente); } a, .link { color: var(--acento-ui); text-decoration: none; } a:hover { text-decoration: underline; } /* marca: acento, nao alerta */ .marca { color: var(--ag-laranja); } .marca-bg { background: var(--ag-laranja-fraco); color: var(--ag-laranja); } /* --- cartao compacto: informacao acima de decoracao ---------------- */ .cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-2); padding: var(--e-4); } .cartao-alto { background: var(--superficie-alta); } .rotulo { font-size: var(--t-micro); font-weight: var(--peso-forte); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-fraco); } /* 🚨 nao mono, de proposito -- achado da coordenacao (17/09): "nenhum [numero grande da V6] usa monoespaçada... se o painel renderiza metricas em mono, essa e outra diferenca estrutural visivel." Era --fonte-num (monoespacada) antes desta mudanca; virou --fonte (a mesma sans do resto da tela), com tabular-nums fazendo o trabalho de alinhamento que a fonte mono fazia por acidente. Tracking negativo (mesmo padrao da V6: quanto maior o numero, mais fechado). */ .metrica { font: var(--peso-forte) var(--t-metrica)/1.1 var(--fonte); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* --- tabela legivel, sem rolagem horizontal da pagina -------------- */ .tabela-wrap { overflow-x: auto; } table.dados { border-collapse: collapse; width: 100%; font-size: var(--t-peq); } table.dados th { text-align: left; font-weight: var(--peso-forte); color: var(--texto-suave); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .05em; padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--borda-forte); position: sticky; top: 0; background: var(--superficie); } table.dados td { padding: var(--e-2) var(--e-3); border-bottom: 1px solid var(--borda-tabela); vertical-align: top; } table.dados td.num { text-align: right; font-family: var(--fonte-num); font-variant-numeric: tabular-nums; } /* ===================================================================== ESTADOS DE DADO — componentes explicitos, nao improviso Nenhum deles mostra "0". Ausencia nao e zero. ===================================================================== */ .estado { display: inline-flex; align-items: center; gap: var(--e-1); padding: 2px var(--e-2); border-radius: var(--r-1); font-size: var(--t-micro); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; } .estado::before { content: "●"; font-size: 8px; line-height: 1; } .estado.ok { color: var(--ok); background: var(--ok-fundo); } .estado.atencao { color: var(--atencao); background: var(--atencao-fundo); } .estado.erro { color: var(--erro); background: var(--erro-fundo); } .estado.sem-dado { color: var(--sem-dado); background: var(--sem-dado-fundo); } .estado.desatualizado { color: var(--desatualizado); background: var(--desatualizado-fundo); } .estado.parcial { color: var(--parcial); background: var(--parcial-fundo); } .estado.demo { color: var(--demo); background: var(--demo-fundo); } /* 🚨 fonte-pronta NAO e um dos sete estados de dado -- e' o oposto deles: a fonte existe e falta ligar. Reusa --info (ja verificado nos dois temas; cor nova seria afirmacao nao medida) e se separa por FORMA: borda solida e glifo de seta, que quem nao distingue matiz continua lendo. Ver `MARCA_FONTE_PRONTA` no config.js. */ .estado.fonte-pronta { color: var(--info); background: var(--info-fundo); border: 1px solid var(--info); } .estado.fonte-pronta::before { content: "▸"; font-size: 10px; } /* valor inexistente: nunca renderizar 0 no lugar */ .vazio { color: var(--sem-dado); font-style: italic; } .vazio::after { content: "indisponivel"; } /* carregando */ .esqueleto { background: linear-gradient(90deg, var(--borda) 25%, var(--borda-forte) 50%, var(--borda) 75%); background-size: 200% 100%; animation: brilho 1.4s infinite; border-radius: var(--r-1); min-height: 1em; } @keyframes brilho { to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .esqueleto { animation: none; } } /* frescor: sempre visivel quando ha sync */ .frescor { font-size: var(--t-micro); color: var(--texto-fraco); } .frescor.velho { color: var(--desatualizado); font-weight: 600; } /* faixa de demonstracao: impossivel confundir com producao */ .faixa-demo { background: var(--demo-fundo); color: var(--demo); border: 1px dashed var(--demo); padding: var(--e-2) var(--e-3); border-radius: var(--r-1); font-size: var(--t-peq); font-weight: 600; } /* --- barra de preenchimento --------------------------------------- */ .preench { height: 6px; border-radius: 3px; background: var(--preench-vazio); overflow: hidden; } .preench > i { display: block; height: 100%; border-radius: 3px; } .preench > i.baixo { background: var(--preench-baixo); } .preench > i.medio { background: var(--preench-medio); } .preench > i.alto { background: var(--preench-alto); } /* ===================================================================== Responsivo: o corpo nunca rola na horizontal ===================================================================== */ @media (max-width: 760px) { /* 28px no mobile -- proporcao mantida com o novo --t-metrica de 36px (era 22px sobre uma base de 28px; a razao ~0,78 se repete aqui). */ :root { --t-metrica: 28px; --e-5: 16px; } .grade { grid-template-columns: 1fr !important; } } .grade { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }