/* ===================================================================== RAF — Radar de Afiliados Tokens em HSL, três temas por data-theme no , mesma convenção do HIF. Fonte: Archivo (corpo) + Archivo Narrow (dados densos e rótulos). ===================================================================== */ :root { --radius: 0.75rem; --fonte-corpo: "Archivo", system-ui, sans-serif; --fonte-dados: "Archivo Narrow", "Archivo", sans-serif; } /* Navy Executivo — padrão */ html[data-theme="navy"] { --fundo: 218 42% 9%; --superficie: 218 34% 13%; --superficie-alta: 218 30% 17%; --borda: 218 24% 24%; --texto: 210 30% 94%; --texto-fraco: 214 16% 64%; --acento: 199 89% 54%; --acento-texto: 218 42% 9%; --alta: 152 58% 48%; --baixa: 4 72% 60%; --neutro: 214 14% 52%; } /* Claro Executivo */ html[data-theme="claro"] { --fundo: 210 24% 97%; --superficie: 0 0% 100%; --superficie-alta: 210 28% 94%; --borda: 214 20% 84%; --texto: 218 38% 14%; --texto-fraco: 216 12% 44%; --acento: 205 84% 38%; --acento-texto: 0 0% 100%; --alta: 152 62% 32%; --baixa: 4 66% 46%; --neutro: 214 12% 46%; } /* Grafite */ html[data-theme="grafite"] { --fundo: 220 6% 11%; --superficie: 220 5% 15%; --superficie-alta: 220 5% 19%; --borda: 220 5% 26%; --texto: 220 8% 92%; --texto-fraco: 220 6% 62%; --acento: 38 92% 56%; --acento-texto: 220 6% 11%; --alta: 152 46% 52%; --baixa: 8 68% 60%; --neutro: 220 5% 52%; } * { box-sizing: border-box; } /* `hidden` é regra do navegador com a menor prioridade que existe: qualquer `display` daqui vence (o `label { display: flex }` mostrava "Seu nome" no login comum, campo que só existe no primeiro acesso). */ [hidden] { display: none !important; } body { margin: 0; font-family: var(--fonte-corpo); background: hsl(var(--fundo)); color: hsl(var(--texto)); font-size: 15px; line-height: 1.5; } /* ------------------------------------------------------------- cabeçalho */ .topo { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 0.9rem 1.5rem; background: hsl(var(--superficie)); border-bottom: 1px solid hsl(var(--borda)); position: sticky; top: 0; z-index: 20; } .topo-marca { display: flex; align-items: center; gap: 0.7rem; } .marca-simbolo { width: 34px; height: 34px; color: hsl(var(--acento)); } .marca-texto { display: flex; flex-direction: column; line-height: 1.1; } .marca-texto strong { font-family: var(--fonte-dados); font-size: 1.35rem; letter-spacing: 0.14em; } .marca-texto span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: hsl(var(--texto-fraco)); } .abas { display: flex; gap: 0.25rem; flex: 1; flex-wrap: wrap; } .aba { background: none; border: none; color: hsl(var(--texto-fraco)); font-family: var(--fonte-corpo); font-size: 0.9rem; font-weight: 500; padding: 0.5rem 0.85rem; border-radius: var(--radius); cursor: pointer; } .aba:hover { background: hsl(var(--superficie-alta)); color: hsl(var(--texto)); } .aba.ativa { background: hsl(var(--superficie-alta)); color: hsl(var(--acento)); } .aba:focus-visible { outline: 2px solid hsl(var(--acento)); outline-offset: 2px; } .topo-acoes { display: flex; gap: 0.5rem; align-items: center; } /* ------------------------------------------------------------- controles */ .botao { font-family: var(--fonte-corpo); font-size: 0.88rem; font-weight: 600; padding: 0.5rem 0.95rem; border-radius: var(--radius); border: 1px solid hsl(var(--borda)); background: hsl(var(--superficie-alta)); color: hsl(var(--texto)); cursor: pointer; } .botao:hover { border-color: hsl(var(--acento)); } .botao.primario { background: hsl(var(--acento)); color: hsl(var(--acento-texto)); border-color: hsl(var(--acento)); } .botao.fantasma { background: none; border-color: transparent; } /* Ação destrutiva: a cor é o aviso que vem antes do diálogo de confirmação. */ .botao.perigo { border-color: hsl(0 60% 45%); color: hsl(0 75% 72%); } .botao.perigo:hover { border-color: hsl(0 70% 58%); background: hsl(0 45% 18%); } .botao:focus-visible { outline: 2px solid hsl(var(--acento)); outline-offset: 2px; } .botao[disabled] { opacity: 0.55; cursor: progress; } input, select { font-family: var(--fonte-corpo); font-size: 0.88rem; padding: 0.45rem 0.6rem; border-radius: calc(var(--radius) - 0.25rem); border: 1px solid hsl(var(--borda)); background: hsl(var(--fundo)); color: hsl(var(--texto)); width: 100%; } input:focus-visible, select:focus-visible { outline: 2px solid hsl(var(--acento)); outline-offset: 1px; } label { display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--fonte-dados); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; color: hsl(var(--texto-fraco)); } /* ---------------------------------------------------------------- layout */ main { padding: 1.5rem; max-width: 1500px; margin: 0 auto; } .faixa { padding: 0.6rem 1.5rem; background: hsl(var(--acento) / 0.14); border-bottom: 1px solid hsl(var(--acento) / 0.4); font-size: 0.85rem; color: hsl(var(--texto)); } .painel { display: none; } .painel.ativo { display: block; } .oculto { display: none !important; } .cartao { background: hsl(var(--superficie)); border: 1px solid hsl(var(--borda)); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; } .cartao h2 { margin: 0 0 0.25rem; font-size: 1.05rem; } .nota { color: hsl(var(--texto-fraco)); font-size: 0.85rem; margin: 0 0 1rem; } .filtros, .formulario { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; align-items: end; margin-bottom: 1.25rem; } .formulario { margin-bottom: 0; } .campos-credencial { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; grid-column: 1 / -1; } /* ----------------------------------------------------------- indicadores */ .indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .indicador { background: hsl(var(--superficie)); border: 1px solid hsl(var(--borda)); border-radius: var(--radius); padding: 0.85rem 1rem; } .indicador .valor { font-family: var(--fonte-dados); font-size: 1.7rem; font-weight: 700; line-height: 1.1; } .indicador .rotulo { font-family: var(--fonte-dados); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: hsl(var(--texto-fraco)); } /* --------------------------------------------------------------- tabelas */ .tabela-caixa { background: hsl(var(--superficie)); border: 1px solid hsl(var(--borda)); border-radius: var(--radius); overflow: auto; } table { width: 100%; border-collapse: collapse; font-size: 0.86rem; } th { font-family: var(--fonte-dados); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: hsl(var(--texto-fraco)); text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid hsl(var(--borda)); white-space: nowrap; position: sticky; top: 0; background: hsl(var(--superficie)); } td { padding: 0.65rem 0.85rem; border-bottom: 1px solid hsl(var(--borda) / 0.5); vertical-align: middle; } tbody tr:hover { background: hsl(var(--superficie-alta)); } .num { font-family: var(--fonte-dados); text-align: right; font-variant-numeric: tabular-nums; } .titulo-produto { display: block; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sub { color: hsl(var(--texto-fraco)); font-size: 0.75rem; } .vazio { padding: 2.5rem 1rem; text-align: center; color: hsl(var(--texto-fraco)); } .etiqueta { display: inline-block; font-family: var(--fonte-dados); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid currentColor; } .etiqueta.alta { color: hsl(var(--alta)); } .etiqueta.baixa { color: hsl(var(--baixa)); } .etiqueta.neutra { color: hsl(var(--neutro)); } .etiqueta.publicado { color: hsl(var(--acento)); } /* --------------------------------------------------------------- O radar como tela de decisão. Cada linha passou a mostrar a PEÇA — foto, nome, selos — ao lado dos números, porque o que vai ao ar é uma mensagem e não uma planilha. As células ficam com alinhamento ao topo: uma linha agora tem três alturas diferentes de conteúdo, e centralizar deixava o nome do produto flutuando longe da foto. --------------------------------------------------------------- */ #tabela-radar td { vertical-align: top; } .peca-radar { display: flex; gap: 0.6rem; align-items: flex-start; min-width: 16rem; } .peca-radar .mini { width: 46px; height: 46px; flex: none; object-fit: cover; border-radius: calc(var(--radius) - 0.35rem); background: hsl(var(--superficie-alta)); border: 1px solid hsl(var(--borda)); } .peca-radar .mini.vazia { display: flex; align-items: center; justify-content: center; text-align: center; font-size: 0.58rem; line-height: 1.1; color: hsl(var(--texto-fraco)); } .peca-texto { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .selos { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.1rem; } /* O bloco de preço imita a linha do anúncio: riscado em cima, preço cobrado em destaque, e os dois percentuais lado a lado. */ .preco-radar { display: flex; flex-direction: column; gap: 0.1rem; font-family: var(--fonte-dados); font-variant-numeric: tabular-nums; white-space: nowrap; } .preco-radar .riscado { text-decoration: line-through; color: hsl(var(--texto-fraco)); font-size: 0.78rem; } .preco-radar .preco-agora { font-size: 1rem; font-weight: 700; } .preco-radar .descontos { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.1rem 0; } /* Duas ou três linhas curtas na mesma célula: rendimento, confiança, envios. */ .coluna-dupla { display: flex; flex-direction: column; gap: 0.1rem; font-family: var(--fonte-dados); font-variant-numeric: tabular-nums; } /* O rótulo ao lado do número volta à fonte de corpo: Archivo Narrow é para dado denso, e em texto curto ela só aparece como letra apertada. */ .coluna-dupla .sub { font-family: var(--fonte-corpo); } .acoes-linha { display: flex; flex-direction: column; gap: 0.25rem; } /* O campo de busca que nasce acima de uma lista grande. Menor e mais discreto que o próprio