/* ================================================================ ICL Eleições 2026 — design system (tema escuro) Fundo azul-marinho → teal → verde, malha plexus, destaques verde/azul, títulos em prata. Swap /static/img/bg.jpg pelo fundo oficial quando disponível. ================================================================ */ /* Fonte do programa: Roboto (bundled em /static/fonts, funciona offline / no vMix). Fonte variável v51 — um arquivo cobre todos os pesos (100–900). */ @font-face { font-family: "Roboto"; src: url("/static/fonts/roboto-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Roboto"; src: url("/static/fonts/roboto-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Roboto Condensed (bundled TTF) — títulos/headlines no peso de emissora do guia. */ @font-face { font-family: "Roboto Condensed"; src: url("/static/fonts/Roboto_Condensed-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("/static/fonts/Roboto_Condensed-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("/static/fonts/Roboto_Condensed-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; } @font-face { font-family: "Roboto Condensed"; src: url("/static/fonts/Roboto_Condensed-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; } :root { /* Fonte de título (headlines/telão) — condensada, como no guia */ --fonte-titulo: "Roboto Condensed", "Roboto", system-ui, sans-serif; /* Superfícies (escuras) */ --surface-0: #071620; /* página */ --surface-1: #0d2233; /* barra lateral / cards */ --surface-2: #123048; /* cards elevados / hover */ --card: rgba(255,255,255,.04); --card-brd: rgba(255,255,255,.09); /* Tinta (texto) — nunca usar cor de série em texto */ --ink: #eaf3fa; --ink-dim: #9fb6c7; --ink-mute: #6d8598; /* Destaques da marca — HEX OFICIAL do guia Eleições 2026 (jul/2026) */ --azul: #0069fd; /* azul vibrante do guia */ --azul-2: #48a6ff; /* tint mais claro p/ links/acentos sobre fundo escuro */ --verde: #00ff97; /* verde-sinal do guia (líder/positivo) */ --verde-2: #009f56; /* verde escuro do guia (par do degradê da barra) */ --verde-cta: #00d183; /* verde sólido mais sóbrio (menos neon) p/ botões CTA cheios */ --grad-cta: linear-gradient(135deg, #00d183, #009f56); /* degradê premium p/ CTA cheio (verde→verde-escuro) */ --coral: #ff5a5f; /* desaprovação / negativo / rejeição (fora do guia de barras) */ /* Cor SEMÂNTICA positiva: no modo "Por valor (verde/vermelho)", verde tem que ser VERDE em qualquer programa — --verde é a cor de DESTAQUE da casa (ouro no N1, ciano no N2) e não pode contaminar a leitura aprova/desaprova. */ --pos: #00d183; /* Estado */ --ok: #00ff97; --alerta: #f0b429; --erro: #ff6b6b; --raio: 12px; --sombra: 0 8px 30px rgba(0,0,0,.35); --fonte: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; /* Movimento: uma curva só para o app inteiro (entra rápido, assenta macio). */ --transicao: .16s cubic-bezier(.2, .7, .3, 1); /* Widgets nativos (date picker, spinners, scrollbar do SO) no tema escuro — sem isto o navegador abre calendário/controles BRANCOS no meio da UI. */ color-scheme: dark; } * { box-sizing: border-box; } /* Seleção de texto na cor da marca (o detalhe que ninguém nota até notar). */ ::selection { background: rgba(0,255,151,.30); color: #fff; } /* Foco de teclado: anel visível em TUDO que é interativo (a11y + acabamento). Inputs de formulário ficam de fora — já têm o próprio foco verde do .forma. */ :where(a, button, [tabindex], summary):focus-visible { outline: 2px solid color-mix(in srgb, var(--verde) 75%, #fff); outline-offset: 2px; border-radius: 6px; } /* Troca de PÁGINA com fundido (View Transitions cross-document, Chrome 126+): o navegador segura a página velha na tela e funde pra nova quando ela pinta — morre o vão/pisco entre documentos ao navegar pelo menu. Onde não há suporte, a regra é ignorada (sem efeito colateral). */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .14s; } /* Acessibilidade de movimento: quem pede menos animação, recebe. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } @view-transition { navigation: none; } } /* ================================================================ Barra de rolagem padrão do app — fina, delicada, polegar arredondado que acende verde no hover. Base GLOBAL: páginas sem container próprio (ex.: telas de revisão) herdam isto. Regras mais específicas (appshell, listas do calendário) só repetem os mesmos valores. ================================================================ */ * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; transition: background .15s; } ::-webkit-scrollbar-thumb:hover { background: rgba(0,255,151,.4); background-clip: padding-box; } body { margin: 0; font-family: var(--fonte); color: var(--ink); background: radial-gradient(1200px 700px at 12% -10%, rgba(31,124,255,.18), transparent 60%), radial-gradient(1000px 700px at 100% 110%, rgba(0,230,118,.16), transparent 55%), linear-gradient(135deg, #05121c 0%, #0a2733 48%, #082e26 100%); background-attachment: fixed; min-height: 100vh; } /* malha plexus sutil por cima do gradiente (nó da identidade) */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(120,180,255,.10) 1px, transparent 1.4px), radial-gradient(rgba(0,230,118,.08) 1px, transparent 1.4px); background-size: 46px 46px, 72px 72px; background-position: 0 0, 24px 32px; } body > * { position: relative; z-index: 1; } /* Títulos em "prata" */ .prata { background: linear-gradient(180deg, #ffffff 0%, #c7d6e2 55%, #9db2c4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .5px; } /* ---------- Layout com barra lateral ---------- */ .app { display: flex; min-height: 100vh; } .sidebar { width: 248px; flex: 0 0 248px; background: rgba(8,24,36,.72); backdrop-filter: blur(8px); border-right: 1px solid var(--card-brd); display: flex; flex-direction: column; padding: 18px 14px; gap: 6px; transition: flex-basis .18s ease, width .18s ease, padding .18s ease; } /* ---- barra lateral retrátil ---- */ .sidebar-toggle { align-self: flex-end; background: none; border: 1px solid var(--card-brd); color: var(--ink-dim); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-size: 17px; line-height: 1; margin-bottom: 2px; transition: background .15s, color .15s; } .sidebar-toggle:hover { color: var(--ink); background: rgba(255,255,255,.06); } .nav-recolhida .sidebar { width: 64px; flex-basis: 64px; padding: 18px 8px; } .nav-recolhida .sidebar .marca .icl, .nav-recolhida .sidebar .marca-ele, .nav-recolhida .sidebar .nav-item span, .nav-recolhida .sidebar .rodape { display: none; } .nav-recolhida .sidebar .marca { padding: 4px 0 12px; } .nav-recolhida .sidebar .marca-top { justify-content: center; } .nav-recolhida .sidebar .nav-item { justify-content: center; padding: 11px 0; gap: 0; } .nav-recolhida .sidebar-toggle { align-self: center; } .sidebar .marca { padding: 6px 8px 16px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.05); } /* Lockup da marca: [ícone] ICL / ELEIÇÕES (prata) 2026 (azul) */ .marca-top { display: flex; align-items: center; gap: 9px; } .logo-mark { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; background: linear-gradient(135deg, var(--azul) 0%, #6f6cf0 46%, var(--verde-2) 100%); box-shadow: 0 2px 10px rgba(31,124,255,.45); } .sidebar .marca .icl { font-weight: 800; font-size: 24px; letter-spacing: 1px; color: #fff; } .marca-ele { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 3px; margin-top: 5px; display: flex; align-items: baseline; gap: 6px; } .marca-ele .ano { color: var(--azul-2); letter-spacing: 1px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; color: var(--ink-dim); text-decoration: none; font-size: 14px; font-weight: 600; transition: background .15s, color .15s; } .nav-item svg { width: 20px; height: 20px; flex: 0 0 20px; transition: color var(--transicao); } .nav-item:hover { background: rgba(255,255,255,.05); color: var(--ink); } .nav-item:hover svg { color: var(--verde); } /* o ícone acende antes — micro-recompensa */ .nav-item.ativo { color: #fff; background: rgba(0,255,151,.1); /* verde-claro cristalino = "ativo" (linguagem única) */ box-shadow: inset 3px 0 0 var(--verde); } /* guarda-chuva (rótulo de grupo) + sub-itens indentados */ .nav-grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-mute); font-weight: 700; padding: 20px 12px 6px; } .nav-item.sub { padding-left: 24px; font-size: 13.5px; } .nav-recolhida .nav-grupo { display: none; } .nav-recolhida .sidebar .nav-item.sub { padding-left: 0; } .sidebar .rodape { margin-top: auto; font-size: 12px; color: var(--ink-mute); padding: 10px 8px; border-top: 1px solid var(--card-brd); } .sidebar .rodape button { background: none; border: 0; color: var(--azul-2); cursor: pointer; font-size: 12px; padding: 0; } /* ---------- Conteúdo ---------- */ .conteudo { flex: 1; padding: 26px 32px; overflow: auto; } .topo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; } .topo h1 { margin: 0; font-size: 26px; } /* Títulos de página na condensada (peso de emissora) — a mesma voz do telão em todas as telas internas. */ .topo h1, .brand-head h1 { font-family: var(--fonte-titulo); letter-spacing: .4px; } .topo .desc { color: var(--ink-dim); font-size: 14px; } /* Cards */ .card { background: var(--card); border: 1px solid var(--card-brd); border-radius: var(--raio); padding: 20px; box-shadow: var(--sombra); } .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .card-link { text-decoration: none; color: inherit; display: block; transition: border-color .15s, transform .1s, background .15s; } .card-link:hover { border-color: var(--azul); transform: translateY(-2px); background: rgba(255,255,255,.06); box-shadow: 0 14px 34px rgba(0,0,0,.42); } .card-link .ic { width: 30px; height: 30px; color: var(--verde); } .card-link h3 { margin: 12px 0 4px; font-size: 17px; color: #fff; } .card-link p { margin: 0; font-size: 13px; color: var(--ink-dim); line-height: 1.45; } /* Abas — o sublinhado DESLIZA de dentro pra fora (scaleX), sem pulo de layout. */ .abas { display: flex; gap: 8px; border-bottom: 1px solid var(--card-brd); margin-bottom: 20px; flex-wrap: wrap; } .aba { position: relative; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--ink-dim); cursor: pointer; border: 0; background: none; border-bottom: 2px solid transparent; transition: color var(--transicao), background var(--transicao); border-radius: 8px 8px 0 0; } .aba::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 2px; border-radius: 2px; background: var(--verde); transform: scaleX(0); transition: transform .2s cubic-bezier(.2, .7, .3, 1); } .aba:hover { color: var(--ink); background: rgba(255,255,255,.04); } .aba.ativa { color: #fff; } .aba.ativa::after { transform: scaleX(1); } /* Botões — resposta tátil: sobem 1px no hover, assentam no clique. */ .btn { font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 8px; border: 1px solid var(--card-brd); background: rgba(255,255,255,.05); color: var(--ink); cursor: pointer; transition: background var(--transicao), border-color var(--transicao), color var(--transicao), transform var(--transicao), box-shadow var(--transicao); } .btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.25); } .btn:active { transform: translateY(0) scale(.985); box-shadow: none; } .btn.primary { background: var(--azul); border: 0; color: #fff; /* sheen no topo + sombra da própria cor: botão cheio com corpo, não adesivo chapado */ background-image: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%); box-shadow: 0 4px 16px -6px var(--azul); } /* Ação destrutiva (Excluir): coral SOLTO desaparecia em tema claro/laranja (N1, Desperta). Chip escuro + borda coral garante contraste em qualquer programa. */ .btn.perigo { color: #ffb3b5; background: rgba(6,18,28,.55); border-color: rgba(255,90,95,.6); } .btn.perigo:hover { background: rgba(255,90,95,.28); border-color: var(--coral); color: #fff; } /* Chrome CLARO (Mercado cinza, N1 ciano): texto escuro nos botões de fundo cheio — branco sobre ciano/cinza-claro não passa em contraste. :not(.fundo-vivo) é ESSENCIAL: nesse modo o botão já é um chip ESCURO, e texto escuro sobre chip escuro ficava ilegível (era o "Abrir em tela cheia" do N1 — duas correções se anulando por especificidade). */ :root[data-programa="mercado"]:not(.fundo-vivo) .btn.primary, :root[data-programa="mercado"]:not(.fundo-vivo) .modal-ok, :root[data-programa="n1"]:not(.fundo-vivo) .btn.primary, :root[data-programa="n1"]:not(.fundo-vivo) .modal-ok { color: #05121c; } .btn.primary:hover { filter: brightness(1.08); } /* Barra de resultado (dataviz: fim arredondado, ancorado na base) */ .barra-wrap { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: 15px; } .barra-nome { flex: 1 1 120px; min-width: 0; color: var(--ink); display: flex; align-items: center; gap: 8px; } .barra-nome .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Temática (plano): coluna de resposta mais larga e rótulo em até 2 linhas — respostas longas ("Branco/Nulo/Não vai votar") aparecem INTEIRAS; a altura extra é absorvida pelo auto-fit uniforme do telão. */ .barra-wrap.plano .barra-nome { flex: 1.5 1 180px; } /* ---------- COMPOSIÇÃO DA TEMÁTICA/AVALIAÇÃO (linhas "plano") ---------- O que faltava não era brilho: era PROPORÇÃO e hierarquia. A coluna de texto comia a largura, a barra ficava curta e fina, e o número flutuava longe dela. */ .barra-wrap.plano { gap: 16px; margin: 5px 0; padding: 5px 12px 5px 10px; border-radius: 10px; transition: background .14s; } .barra-wrap.plano .barra-nome { flex: 1 1 150px; max-width: 38%; } /* texto não domina mais */ .barra-wrap.plano .barra-trilho { flex: 3 1 120px; height: 26px; border-radius: 7px; } .barra-wrap.plano .barra-fill { border-radius: 0 7px 7px 0; } .barra-wrap.plano .barra-val { flex-basis: 72px; font-size: 19px; } .apresentacao .barra-wrap.plano .barra-trilho { height: 36px; border-radius: 9px; } .apresentacao .barra-wrap.plano .barra-val { font-size: 26px; } /* A resposta com mais peso ganha uma FAIXA na própria cor (--c vem do JS) e um friso na lateral. Assim o destaque é da linha inteira, não só da barra — e continua respeitando a semântica (vermelho em "Piorou", verde em "Melhorou"). */ .barra-wrap.plano.destaque { background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--verde)) 15%, transparent), transparent 72%); box-shadow: inset 3px 0 0 var(--c, var(--verde)); } .barra-wrap.plano.destaque .barra-val { font-size: 22px; } .apresentacao .barra-wrap.plano.destaque .barra-val { font-size: 30px; } /* Respostas neutras (NS/NR, branco/nulo) recuam um passo — menos ruído. */ .barra-wrap.plano.especial .barra-val { color: var(--ink-dim); font-weight: 600; } /* Pergunta/título com âncora: friso vertical na cor do programa. Dá começo de leitura e amarra o bloco à identidade sem poluir. */ .tema-perg { position: relative; padding-left: 13px; } .tema-perg::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--verde), var(--verde-2)); } .barra-wrap.plano .barra-nome .nm { white-space: normal; overflow: visible; text-overflow: clip; } .avatar { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; border: 2px solid var(--verde); background: var(--surface-2) center/cover no-repeat; color: var(--ink); font-size: 10px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .apresentacao .avatar { width: 33px; height: 33px; flex-basis: 33px; font-size: 12px; } .barra-trilho { flex: 2 1 80px; min-width: 60px; height: 20px; background: rgba(255,255,255,.06); border-radius: 5px; overflow: hidden; } .barra-fill { height: 100%; border-radius: 0 5px 5px 0; background: #acacac; } /* demais: cinza #ACACAC do guia */ /* ---------- ACABAMENTO DAS BARRAS (todos os gráficos, todos os programas) ---------- Uma camada de LUZ por cima da cor, não uma cor nova: brilho especular no topo, queda suave e sombra na base — o volume que a barra chapada não tem, e que o telão pede (a mesma leitura de longe que as cartelas de TV). É background-IMAGE, então entra sobre QUALQUER cor: as do tema (--verde/--coral), as semânticas da temática e as escolhidas à mão no "Personalizar". O JS pinta com backgroundColor justamente pra não apagar esta camada. */ :root { --luz-barra: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.12) 34%, rgba(255,255,255,0) 54%, rgba(0,0,0,.06) 78%, rgba(0,0,0,.14) 100%); /* pontinhos de legenda: mesma luz, em forma de esfera */ --luz-ponto: radial-gradient(circle at 32% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 58%); } .barra-fill, .barra100 .seg, .cart-ic { background-image: var(--luz-barra); } .leg-dot, .avatar { background-image: var(--luz-ponto); } /* Volume: fio de luz no topo (a "quina" iluminada) + a barra projetando sombra. */ .barra-fill, .barra100 .seg { box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.18), 0 2px 5px rgba(0,0,0,.28); } /* Trilho vira SULCO: a barra parece embutida, não colada por cima. */ .barra-trilho { background: rgba(255,255,255,.05); box-shadow: inset 0 1px 2px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.05); } /* LÍDER (só a corrida): degradê da cor do programa + brilho da própria cor ao redor. ATENÇÃO: NÃO vale para .destaque — no temático a maior resposta pode ser NEGATIVA ("Piorou"), e pintá-la com o degradê do tema apagaria a leitura verde/vermelho. */ .barra-wrap.lider .barra-fill { background-image: var(--luz-barra), linear-gradient(90deg, var(--verde), var(--verde-2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 0 18px -6px var(--verde), 0 2px 6px rgba(0,0,0,.3); } /* Destaque (maior resposta do temático/avaliação): ganha PRESENÇA, não cor nova — a semântica (verde/vermelho/cinza) continua mandando. */ .barra-wrap.destaque .barra-fill { box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 3px 10px rgba(0,0,0,.34); } /* Barra 100% (temática/avaliação): cantos suaves nas pontas do conjunto. */ .barra100 .seg:first-child { border-radius: 6px 0 0 6px; } .barra100 .seg:last-child { border-radius: 0 6px 6px 0; } /* Gráfico de linha: as linhas ganham leve profundidade sobre o card. */ .g-linha path { filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); } .g-linha circle { filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); } /* Números com voz de EMISSORA: condensada pesada, dígitos tabulares. */ .barra-val { flex: 0 0 62px; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); font-family: var(--fonte-titulo); font-weight: 800; font-size: 18px; letter-spacing: .2px; } /* O "%" recuado e menor que o dígito — assinatura de cartela de TV. */ .barra-val .pc, .pil-val .pc { font-size: .68em; opacity: .82; margin-left: 1px; } /* Eixos do gráfico de linha na mesma voz. */ .g-linha text { font-family: var(--fonte-titulo); letter-spacing: .3px; } /* ---------- ENTRADA DOS GRÁFICOS ---------- As barras CRESCEM da esquerda ao abrir (scaleX — não mexe em layout), em cascata de 50ms. É o momento "a página monta o gráfico na sua frente". O export PNG congela a animação (classe .sem-anim no holder) pra nunca fotografar no meio. */ @keyframes barra-cresce { from { transform: scaleX(0); } } .barra-fill { transform-origin: left center; animation: barra-cresce .55s cubic-bezier(.22,.8,.3,1) backwards; } .barra-wrap:nth-child(2) .barra-fill { animation-delay: .05s; } .barra-wrap:nth-child(3) .barra-fill { animation-delay: .10s; } .barra-wrap:nth-child(4) .barra-fill { animation-delay: .15s; } .barra-wrap:nth-child(5) .barra-fill { animation-delay: .20s; } .barra-wrap:nth-child(6) .barra-fill { animation-delay: .25s; } .barra-wrap:nth-child(n+7) .barra-fill { animation-delay: .30s; } .sem-anim *, .sem-anim *::before, .sem-anim *::after { animation: none !important; } /* background-COLOR (nunca o shorthand): o shorthand zeraria a camada de luz. */ .barra-wrap.lider .barra-fill { background-color: var(--verde); } /* líder: cor do programa */ .barra-wrap.negativo .barra-fill { /* rejeição/negativo: coral */ background-color: var(--coral); background-image: var(--luz-barra); /* sem degradê do tema aqui */ box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 0 16px -7px var(--coral), 0 2px 6px rgba(0,0,0,.3); } /* destaque = maior resposta enfatizada, MAS mantendo a cor semântica (verde/coral/neutro) do fill */ .barra-wrap.destaque .barra-nome, .barra-wrap.destaque .barra-val { color: #fff; font-weight: 800; } /* HIERARQUIA DO NÚMERO: o % do líder é o dado que o olho tem que achar primeiro. Ganha corpo e um halo discreto na cor do programa (não é sombra preta: é luz). */ .barra-wrap.lider .barra-val { font-weight: 900; letter-spacing: -.01em; text-shadow: 0 0 16px color-mix(in srgb, var(--verde) 45%, transparent), 0 1px 2px rgba(0,0,0,.5); } .barra-wrap.lider .barra-nome .nm { font-weight: 800; } /* Avatar do líder: anel na cor do programa com brilho — vira "medalha". */ .barra-wrap.lider .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.10), 0 0 14px -3px var(--verde); } /* Rejeição: quem lidera a rejeição NÃO leva medalha verde — anel coral. E os demais ficam com anel neutro (o verde padrão do .avatar diria "positivo" sem querer). */ .barra-wrap.negativo .avatar { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(255,255,255,.10), 0 0 14px -3px var(--coral); } .barra-wrap:not(.lider):not(.negativo) .avatar { border-color: rgba(255,255,255,.28); } .barra-wrap.destaque .barra-trilho { height: 24px; } .apresentacao .barra-wrap.destaque .barra-trilho { height: 30px; } /* BUG corrigido: estas regras vinham DEPOIS das do .plano (26px/36px) e, com a mesma especificidade, ENCOLHIAM justamente a linha em destaque da temática (24px < 26px). A linha destacada tem que ser a maior, nunca a menor. */ .barra-wrap.plano.destaque .barra-trilho { height: 30px; } .apresentacao .barra-wrap.plano.destaque .barra-trilho { height: 42px; } .barra-wrap.lider .barra-nome, .barra-wrap.lider .barra-val { color: #fff; font-weight: 800; } .barra-wrap.lider .barra-trilho { height: 24px; } .barra-wrap.especial .barra-nome { color: var(--ink-mute); } .barra-nome .ic-esp { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; color: var(--ink-mute); } /* Modo tela cheia / apresentação (telão): esconde a barra lateral e amplia tudo */ .apresentacao .sidebar { display: none; } .apresentacao .conteudo { padding: 24px 56px; } /* Telão (1920×1080 broadcast): texto grande, legível no ar. TIPO MAIOR + ENTRELINHA MENOR. O palco encolhe pra caber (fit-to-screen), então só aumentar a fonte se anulava: o conteúdo crescia e o encolhimento comia o ganho. A entrelinha é o que sobra de graça — cada linha carregava 27px de respiro (18 de margem + 9 de padding); com 12+6 sobra altura pro tipo crescer de verdade. */ .apresentacao .barra-wrap { font-size: 22px; margin: 6px 0; } .apresentacao .barra-trilho { height: 28px; } .apresentacao .barra-wrap.lider .barra-trilho { height: 32px; } .apresentacao .barra-val { font-size: 27px; flex-basis: 104px; } /* Valor-herói: líder/destaque com o % bem maior no telão (hierarquia do manual). */ .apresentacao .barra-wrap.lider .barra-val, .apresentacao .barra-wrap.destaque .barra-val { font-size: 34px; } /* Linha-guia (baseline): fiozinho sutil por linha no telão, como no manual — dá ritmo e "amarra" rótulo↔valor. Bem discreto pra não virar cara de planilha. */ .apresentacao .barra-wrap { border-bottom: 1px solid rgba(255,255,255,.10); padding-bottom: 6px; } /* Títulos do telão em Roboto Condensed (peso de emissora), como no guia oficial. Só a família — o tamanho/peso vêm das regras de cada título. */ .telao-tit, .cen-nome, .turno-badge { font-family: var(--fonte-titulo); } .turno-badge { font-weight: 800; letter-spacing: .4px; } .apresentacao .pesq-card h3 { font-size: 24px; } /* Cabeçalho de página com o logo (usado em todas as telas internas) */ .brand-head { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; flex-wrap: wrap; } .brand-head .brand-logo { height: 46px; width: auto; flex: 0 0 auto; } .brand-head h1 { margin: 0; } /* Logo na barra lateral (some quando recolhida — o lockup é largo demais) */ .sidebar .marca-logo { width: 100%; max-width: 172px; height: auto; display: block; } .nav-recolhida .sidebar .marca-logo { display: none; } /* Marca ICL Eleições 2026 — visível na tela normal E na cheia */ .marca-telao { display: flex; align-items: baseline; gap: 12px; } .marca-telao .icl { font-weight: 800; font-size: 22px; color: #fff; letter-spacing: 1px; } .marca-telao .ele { font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; } .marca-telao .ano { color: var(--azul-2); font-weight: 800; font-size: 18px; } .logo-telao { height: 48px; width: auto; display: block; } /* Telão: sem abas; marca ampliada; botão de sair flutuante */ .apresentacao .abas { display: none; } .apresentacao .marca-telao .icl, .apresentacao .marca-telao .ele { font-size: 40px; } .apresentacao .marca-telao .ano { font-size: 30px; } .apresentacao .logo-telao { height: 88px; } /* Mercado: logo com a MESMA presença do Eleições — cabeçalho COMPACTO (senão empurra os painéis e quebra o grid 2×2). Só um pouco maior que o Eleições (48/88) porque o desenho é mais leve, com um respiro pra descer um tico. Só desse programa. */ :root[data-programa="mercado"] .logo-telao { height: 48px; margin-top: 4px; } :root[data-programa="mercado"] .apresentacao .logo-telao { height: 88px; margin-top: 8px; } /* Urgente: logo um pouco maior (o mark é recortado, então preenche a altura). */ :root[data-programa="urgente"] .logo-telao { height: 56px; } :root[data-programa="urgente"] .apresentacao .logo-telao { height: 104px; } /* Radio News: logo VERTICAL (ICL + ondas / RADIO NEWS empilhado) — precisa de mais altura que um wordmark horizontal pra ter a mesma presença. */ :root[data-programa="radionews"] .logo-telao { height: 74px; } :root[data-programa="radionews"] .apresentacao .logo-telao { height: 168px; } /* N1 / N2 ("ICL NOTÍCIAS"): wordmark MUITO largo (7:1). Na altura padrão ficava desproporcional (ocupava ~1/3 da tela) — altura menor equilibra a largura. */ :root[data-programa="n1"] .logo-telao, :root[data-programa="n2"] .logo-telao { height: 32px; } :root[data-programa="n1"] .apresentacao .logo-telao, :root[data-programa="n2"] .apresentacao .logo-telao { height: 56px; } .apresentacao #fs { position: fixed; top: 16px; right: 20px; z-index: 20; } /* Mercado — acabamento premium (só desse programa; reversível, depois levo pros demais): 1) cards de vidro fosco (o fundo respira atrás, texto nítido); 2) barras arredondadas com leve brilho no topo; 3) título do cenário maior no telão (leitura de longe). */ /* Cards de vidro fosco: qualquer programa COM fundo (imagem) ganha o tratamento, senão o texto fica "cru" sobre a foto. Base sem fundo mantém o card translúcido. */ :root.tem-fundo .card { background: rgba(11,28,42,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.13); /* Vidro de verdade: fio de luz na borda de cima (onde a luz bateria) + sombra profunda embaixo, pra o card descolar da arte do programa em vez de flutuar. */ box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 18px 44px rgba(0,0,0,.34); } /* Brilho suave no canto superior — dá "lente" ao vidro sem pesar no texto. */ :root.tem-fundo .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 90% at 8% -10%, rgba(255,255,255,.07), rgba(255,255,255,0) 55%); } :root.tem-fundo .card { position: relative; } /* Mercado: cantos mais redondos (assinatura da casa). O acabamento de luz agora é global (--luz-barra) — antes esta regra o substituía por um brilho só dela. */ :root[data-programa="mercado"] .barra-fill { border-radius: 6px; } :root[data-programa="mercado"] .apresentacao .cen-nome { font-size: 22px; } /* Número-herói: o % do líder recebe um glow âmbar sutil no telão (o olho vai direto no dado principal). Só no telão do Mercado. */ :root[data-programa="mercado"] .apresentacao .barra-wrap.lider .barra-val { text-shadow: 0 0 16px rgba(250,171,44,.5); } /* Assinatura de marca (nasceu no Mercado, virou SISTEMA): traço curto na cor do programa sob o nome do instituto — o lower-third de emissora. Cada programa assina com a própria cor via --verde/--verde-2. */ .apresentacao .telao-tit { position: relative; padding-bottom: 8px; } .apresentacao .telao-tit::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--verde-2), var(--verde)); } /* Fundo do programa (genérico): imagem numa camada fixa atrás de tudo, com blur (atmosférico, depth-of-field) + vinheta (bordas escuras, centro respira). Ligada por .tem-fundo (setada no aplicarTema); a URL vem de --prog-bg. inset negativo pra o blur não mostrar borda mole nos cantos da tela. */ :root.tem-fundo body::before { content: ""; position: fixed; inset: -30px; z-index: -1; pointer-events: none; opacity: 1; /* o body::before base é .5 (malha plexus); aqui a imagem é cheia */ background: /* VINHETA: some no centro, fecha nas bordas. A COR agora é por programa (--prog-vin-rgb / -a). Era fixa em #071620 e, sobre arte que já termina escura, o quadro fechava em PRETO — lia como "faixa preta" na TV. Em programa de arte escura a vinheta passa a ser da MARCA (azul do Mercado, vinho do Urgente): continua fechando o quadro, mas em cor, não em preto. */ radial-gradient(135% 115% at 50% 22%, rgb(var(--prog-vin-rgb, 7 22 32) / 0) 40%, rgb(var(--prog-vin-rgb, 7 22 32) / var(--prog-vin-a, .62)) 100%), /* LAVAGEM (antes "escurecimento"): véu de cima a baixo. Alpha por programa via --prog-esc-topo/-base (fundo claro precisa de mais, senão o texto/logo branco lava) e agora TOM por programa via --prog-lav-rgb — em arte quase preta o véu preto só afundava; na cor do programa ele LEVANTA o prato. Padrões = os de sempre. */ linear-gradient(rgb(var(--prog-lav-rgb, 7 22 32) / var(--prog-esc-topo, .14)), rgb(var(--prog-lav-rgb, 7 22 32) / var(--prog-esc-base, .44))), var(--prog-bg) center/cover no-repeat, var(--surface-0); filter: blur(var(--prog-blur, 4px)); /* macio, mas o desenho lê como textura; por programa via --prog-blur */ animation: fundo-vivo 42s ease-in-out infinite alternate; /* deriva lenta = "vida" de TV */ } @keyframes fundo-vivo { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.08) translate(-1.4%, -1%); } } /* Blur do fundo por programa: Eleições com o plexus quase nítido (menos "em baixa"). */ :root[data-programa="eleicoes"] { --prog-blur: 1px; } /* ---- Programas de arte ESCURA: o prato é tonalizado, nunca fechado em preto ---- Medido nas artes (luminância média 0-255 da moldura de 4% da borda): mercado 12,5 (37% da borda quase preta) · urgente 3,6 (83% quase preta) contra eleicoes 51 · n2 68 · radionews 108 · n1 182 · desperta 180 (essas estão ok). Ou seja: a arte desses dois JÁ TERMINA EM PRETO na borda; somando a vinheta preta o quadro virava faixa preta em volta do conteúdo na TV. Aqui o véu e a vinheta passam a ser NA COR DO PROGRAMA — o fundo continua fechando (foco no centro), mas como prato de marca contínuo até a borda do quadro. Alphas contidos de propósito: o prato tem de ficar bem abaixo do card, senão o card perde recorte. */ :root[data-programa="mercado"] { --prog-blur: 2px; /* 4px empastava a arte de gráfico; 2px lê como textura */ --prog-lav-rgb: 18 42 98; --prog-esc-topo: .30; --prog-esc-base: .42; --prog-vin-rgb: 22 50 112; --prog-vin-a: .22; } /* Urgente: fundo é uma TEXTURA (grunge) — blur borrava e "sujava". Deixa nítido. A borda é 83% preta: sem tom de marca, sobra um retângulo preto em volta. */ :root[data-programa="urgente"] { --prog-blur: 0px; --prog-lav-rgb: 96 24 24; --prog-esc-topo: .26; --prog-esc-base: .40; --prog-vin-rgb: 116 28 28; --prog-vin-a: .34; } /* Radio News: fundo CLARO à esquerda (ondas/barras). Sem reforçar o escurecimento o texto e o logo brancos lavam. Blur baixo: é arte vetorial em 1920x1080 nativo. */ :root[data-programa="radionews"] { --prog-blur: 1px; --prog-esc-topo: .50; --prog-esc-base: .66; } /* Fundos CLAROS/VIVOS (Desperta = céu de amanhecer, N1 = laranja vivo). O fundo é IDENTIDADE do programa: escurecer forte resolvia a leitura mas apagava a arte. Então só um véu leve aqui — o contraste real vem do modo .fundo-vivo (abaixo), onde os ELEMENTOS (botões, cards, texto solto) ganham contraste próprio. */ :root[data-programa="desperta"] { --prog-esc-topo: .30; --prog-esc-base: .52; } :root[data-programa="n1"] { --prog-esc-topo: .26; --prog-esc-base: .50; } /* ---------- Modo FUNDO VIVO ---------- Ligado (classe no pelo aplicarTema) nos programas de fundo claro/vivo. Inverte a lógica das superfícies: em vez de "vidro claro sobre fundo escuro", passa a "vidro ESCURO sobre fundo claro" — assim a arte do programa continua visível e a interface lê. */ :root.fundo-vivo { --card: rgba(6,18,28,.52); /* .card, .preset-mini e cia. ficam escuros */ --card-brd: rgba(255,255,255,.22); --surface-1: rgba(6,18,28,.62); --surface-2: rgba(6,18,28,.72); --ink-dim: #e6ecf2; /* secundários quase brancos (vão sobre escuro/arte) */ --ink-mute: #c2cdd8; } /* Botões: rgba branco .05 desaparecia sobre laranja/céu -> chip escuro. */ /* :not(.perigo) — o shorthand aqui apagava a borda coral e o texto do Excluir, justamente o contraste que .btn.perigo existe pra garantir. */ :root.fundo-vivo .btn:not(.perigo) { background: rgba(6,18,28,.55); border-color: rgba(255,255,255,.24); color: #fff; } :root.fundo-vivo .btn:not(.perigo):hover { background: rgba(6,18,28,.74); } :root.fundo-vivo .btn.perigo { background-color: rgba(6,18,28,.72); } /* chip mais opaco, borda/texto do próprio .perigo */ /* O primário também é chip escuro aqui (texto branco garantido) — a proeminência de CTA vem da borda e do halo na cor do programa, não de fundo cheio claro. */ :root.fundo-vivo .btn.primary { background-color: rgba(6,18,28,.78); color: #fff; border: 1px solid color-mix(in srgb, var(--azul) 65%, #fff); box-shadow: 0 0 20px -8px var(--azul), inset 0 1px 0 rgba(255,255,255,.16); } :root.fundo-vivo .btn.primary:hover { background-color: rgba(6,18,28,.9); filter: none; box-shadow: 0 0 26px -8px var(--azul), inset 0 1px 0 rgba(255,255,255,.2); } /* Texto que fica DIRETO sobre a arte (abas, dicas, títulos de fileira) ganha sombra; dentro de superfícies já escuras a sombra é desligada (não precisa e suja). */ :root.fundo-vivo body { text-shadow: 0 1px 3px rgba(0,0,0,.55); } :root.fundo-vivo .card, :root.fundo-vivo .preset-mini, :root.fundo-vivo .prog-card, :root.fundo-vivo .btn, :root.fundo-vivo .mod-cfg, :root.fundo-vivo input, :root.fundo-vivo select, :root.fundo-vivo textarea { text-shadow: none; } /* Logo do programa sobre fundo claro: sombra suave em vez de escurecer a arte. */ :root.fundo-vivo .logo-telao, :root.fundo-vivo .brand-logo, :root.fundo-vivo .prog-logo-fileira { filter: drop-shadow(0 2px 7px rgba(0,0,0,.55)); } @media (prefers-reduced-motion: reduce) { :root.tem-fundo body::before { animation: none; } } /* Estado vazio: uma moldura de "espaço reservado", não texto perdido no void. SÓ div.vazio — a classe "vazio" também acinzenta rótulos inline (ex.: placeholder do dropdown), e a moldura tracejada não pode vazar pra eles. */ div.vazio { color: var(--ink-dim); text-align: center; padding: 36px 24px; font-size: 14px; border: 1.5px dashed rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.015); line-height: 1.5; } .vazio { color: var(--ink-dim); } a { color: var(--azul-2); } /* dropdown padrão: seta própria (consistente entre navegadores/SO), sem a seta nativa. Vale pra todo ================================================================ */ /* Cabeçalho de seção (global — serve em card .forma e em seções soltas, ex.: admin) */ .sec { margin: 0 0 20px; } .sec-titulo { font-family: var(--fonte-titulo); font-size: 19px; font-weight: 700; color: #fff; margin: 0; letter-spacing: .2px; line-height: 1.25; } .sec-dica { margin: 7px 0 0; font-size: 13.5px; color: var(--ink-dim); line-height: 1.55; max-width: 64ch; } .sec-dica b { color: var(--ink); font-weight: 700; } /* Eyebrow — micro-rótulo de grupo (ex.: "O que extrair") */ .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 12px; } /* Grades de campos */ .forma .campos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .forma .campos { display: flex; flex-direction: column; gap: 16px; } /* Campo = rótulo + controle */ .forma .campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .forma .campo > .rot { font-size: 12px; font-weight: 600; color: var(--ink-dim); letter-spacing: .2px; } .forma .campo > .rot .opc { color: var(--ink-mute); font-weight: 400; } /* "(opcional)" */ .forma .campo .ajuda { font-size: 12px; color: var(--ink-mute); line-height: 1.4; margin: 1px 0 0; } /* Controles (texto, número, select, textarea) */ .forma input[type="text"], .forma input[type="email"], .forma input[type="password"], .forma input[type="number"], .forma input[type="date"], .forma input[type="search"], .forma input[type="url"], .forma input[type="tel"], .forma input:not([type]), .forma select, .forma textarea { width: 100%; font-family: var(--fonte); font-size: 14px; color: var(--ink); background: rgba(255,255,255,.035); border: 1px solid var(--card-brd); border-radius: 9px; padding: 10px 12px; transition: border-color .14s, box-shadow .14s, background .14s; } .forma textarea { resize: vertical; min-height: 88px; line-height: 1.5; } .forma input::placeholder, .forma textarea::placeholder { color: var(--ink-mute); } .forma input:hover, .forma select:hover, .forma textarea:hover { border-color: rgba(255,255,255,.2); } .forma input:focus, .forma select:focus, .forma textarea:focus { outline: 0; border-color: var(--verde); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(0,255,151,.16); } /* Opções (checkbox/radio) — linhas limpas, acento da marca, realce quando marcada */ .forma .opcoes { display: flex; flex-direction: column; gap: 2px; } .forma .opcao { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: background .12s, border-color .12s; } .forma .opcao:hover { background: rgba(255,255,255,.04); } .forma .opcao input[type="checkbox"], .forma .opcao input[type="radio"] { width: 17px; height: 17px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--verde); cursor: pointer; } .forma .opcao .txt { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; } .forma .opcao .txt small { display: block; font-weight: 400; color: var(--ink-mute); margin-top: 3px; font-size: 12.5px; line-height: 1.45; } .forma .opcao:has(input:checked) { background: rgba(0,255,151,.055); border-color: rgba(0,255,151,.22); } /* Ações do formulário */ .forma .acoes { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; } /* Botão desabilitado (genérico, útil em todo o app) */ .btn:disabled, .btn[disabled] { opacity: .5; cursor: default; } .btn:disabled:hover, .btn[disabled]:hover { filter: none; } /* --------------------------------------------------------------- Dropzone de arquivo (arrastar-e-soltar) — componente do sistema. Markup: