/* ==========================================================================
Dois temas, um só conjunto de nomes.
==========================================================================
O escuro continua sendo o padrão — é o cockpit que fica aberto a noite toda
numa sala de operação, e é o tema que o wordmark branco do
radiomonitor.com.br pede. O claro existe porque o painel também é usado de
dia, em sala com janela, onde tela preta cansa e projetor não mostra nada.
A troca é UM atributo no (`data-tema="claro"`), gravado no
localStorage e aplicado antes da primeira pintura pelo script no do
_Layout — senão a página pisca preta antes de clarear.
Regra para quem for escrever tela nova: NENHUMA cor literal fora deste
bloco. Três tokens fazem quase todo o trabalho:
--fundo / --painel / --campo as três superfícies (página, cartão, campo)
--tinta os canais RGB do realce (hover, zebra,
fim de semana). Branco no escuro, PRETO no
claro — é o que impede que um hover de
`rgba(255,255,255,.04)` desapareça sobre
fundo branco. Use `rgba(var(--tinta), .04)`.
--texto / --texto-fraco / --texto-tenue
`color-scheme` não é enfeite: é o que faz o navegador desenhar no tema certo
o que o CSS não alcança — o calendário do , a barra de rolagem e o autofill. Sem ele, o seletor de data abre
branco no meio do painel preto. */
:root {
color-scheme: dark;
--fundo: #0d1117;
--painel: #161b22;
--painel-alto: #1c2330;
--campo: #0d1117;
--borda: #2a3038;
--texto: #e6edf3;
--texto-fraco: #8b949e;
--texto-tenue: #6e7681;
--no-ar: #3fb950;
--parada: #6e7681;
--reconectando: #d29922;
--erro: #f85149;
--match: #58a6ff;
--nao-ident: #d29922;
--silencio: #6e7681;
/* Fala detectada pela transcrição. Violeta de propósito: azul e âmbar já dizem
'identificado' e 'não identificado', e a fala é uma leitura de outra natureza —
ela se sobrepõe às duas em vez de competir. */
--fala: #bc8cff;
--destaque: #58a6ff;
--anunciante: #f0883e;
--ruim: #f85149;
/* Botão de ação principal: o azul é o mesmo nos dois temas — sobre ele o texto
é branco de qualquer jeito. */
--primario: #1f6feb;
--primario-alto: #388bfd;
--primario-texto: #fff;
/* O log ao vivo é terminal, e terminal é escuro nos dois temas: as cores dos
eventos (violeta, verde, vermelho claros) foram escolhidas contra preto. */
--terminal: #010409;
/* Barra de sinal cheia (a marca "mais de uma inserção no dia"). */
--barra-forte: #79c0ff;
--tinta: 255, 255, 255;
--fundo-suave: rgba(var(--tinta), .10);
--raio: 8px;
--mono: ui-monospace, "Cascadia Code", "Consolas", monospace;
}
:root[data-tema="claro"] {
color-scheme: light;
/* Página cinza, cartão branco: no claro a hierarquia inverte — o que estava
afundado passa a saltar. Sem isso o cartão sumiria no fundo, porque no
escuro ele é MAIS claro que a página. */
--fundo: #f3f5f9;
--painel: #ffffff;
--painel-alto: #e9edf2;
--campo: #ffffff;
--borda: #d3dae3;
--texto: #1b2430;
--texto-fraco: #566274;
--texto-tenue: #68727f;
/* Os mesmos significados, escurecidos: o verde e o âmbar do tema escuro têm
contraste de 2:1 sobre branco — viram texto que não se lê. */
--no-ar: #17803d;
--parada: #68727f;
--reconectando: #8a5a00;
--erro: #c9252d;
--match: #0a5fc2;
--nao-ident: #8a5a00;
--silencio: #68727f;
--fala: #7c3aed;
--destaque: #0a5fc2;
--anunciante: #a4530b;
--ruim: #c9252d;
--barra-forte: #08306b;
--tinta: 0, 0, 0;
}
/* --------------------------------------------------------------------------
As ilhas escuras do tema claro.
--------------------------------------------------------------------------
Duas partes do painel continuam escuras no tema claro, e cada uma por um
motivo que não é estético:
· a ARTE DO LOGIN é uma fotografia noturna, e o texto sobre ela é branco;
· o LOG AO VIVO é terminal — fundo preto nos dois temas, e as cores dos
eventos (violeta, verde e vermelho claros) foram escolhidas contra preto.
Sem a ilha, `.log div` viraria cinza-escuro sobre preto.
A BARRA DO TOPO **saiu** desta lista. Ela ficou escura enquanto o logotipo
era o único problema — wordmark branco sobre transparente não existe sobre
fundo claro. Mas o cabeçalho passou a desenhar a marca do LICENCIADO, e arte
de cliente é quase sempre feita para fundo claro: manter a barra preta
resolveria o nosso logotipo e estragaria o dele. A saída certa é escurecer o
NOSSO wordmark por filtro (ver `.marca-propria` adiante) e deixar a barra
seguir o tema.
O truque das ilhas é redeclarar os tokens NO ELEMENTO: tudo que está dentro
herda a paleta escura sem uma única regra reescrita. */
:root[data-tema="claro"] .entrar-arte,
:root[data-tema="claro"] .log {
--painel: #161b22;
--painel-alto: #262d3a;
--borda: #2a3038;
--texto: #e6edf3;
--texto-fraco: #aeb8c4;
--texto-tenue: #8b949e;
--destaque: #58a6ff;
--match: #58a6ff;
--tinta: 255, 255, 255;
color-scheme: dark;
/* `color` explícito, e não só os tokens: cor HERDA por VALOR já resolvido.
Redeclarar `--texto` aqui só muda o que este bloco e os filhos DECLARAM —
um texto que não declara cor nenhuma continua chegando com o cinza-escuro
que o claro resolveu. Foi exatamente o que apagou a frase da arte do
login (`.entrar-arte .frase` não declara cor) sobre a foto escura. */
color: var(--texto);
}
* { box-sizing: border-box; }
body {
margin: 0;
background: var(--fundo);
color: var(--texto);
font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--destaque); text-decoration: none; }
a:hover { text-decoration: underline; }
/* O título de uma lista que ABRE ALGO NESTA PÁGINA — o formulário do topo em
/Marcas, por exemplo. Nas outras listas o título é e navega; aqui não há
para onde ir, e um mentiria sobre isso além de sujar a URL. Este
é o mesmo desenho do , num que é o elemento honesto. */
button.titulo-acao {
background: none;
border: 0;
padding: 0;
font: inherit;
color: var(--destaque);
cursor: pointer;
}
button.titulo-acao:hover { text-decoration: underline; }
/* ---------- estrutura ---------- */
.topo {
display: flex;
align-items: center;
gap: 24px;
padding: 12px 24px;
background: var(--painel);
border-bottom: 1px solid var(--borda);
position: sticky;
top: 0;
z-index: 10;
}
/* ---------- a marca no cabeçalho ---------- */
.topo .marca { display: flex; align-items: center; }
.topo img { height: 26px; width: auto; }
/* O NOSSO wordmark é branco sobre transparente. `brightness(0)` zera os canais de
cor e NÃO toca no alfa: o desenho vira preto com o mesmo antialiasing, sem
arquivo novo e sem a inversão de matiz que estragaria um logotipo colorido.
Medi o PNG antes: ele é monocromático (branco com as bordas em cinza), que é a
condição para isto funcionar. */
:root[data-tema="claro"] .topo img.marca-propria { filter: brightness(0) opacity(.86); }
/* Arte de terceiro NÃO passa por filtro nenhum — inverter a marca de um cliente é
destruí-la. O que se controla aqui é só o espaço que ela ocupa: o cabeçalho não
pode depender de o cliente ter mandado a arte na proporção certa. */
.topo img.marca-licenciado { max-width: 190px; object-fit: contain; }
.topo nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topo nav a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: var(--raio);
color: var(--texto-fraco);
font-size: 14px;
}
/* ---------- os ícones do menu ---------- */
/* Traço, espessura e junção ficam AQUI e não em cada : é o que mantém as
trinta e sete peças parecendo uma família só, e o que faz um ícone novo nascer
certo sem copiar atributos. Ver Pages/Shared/_Icones.cshtml. */
svg.ic {
width: 14px;
height: 14px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
/* Um pouco atrás do rótulo: o ícone é para achar o item de relance, não para
competir com a palavra que diz o que ele é. */
opacity: .72;
}
.topo nav a:hover svg.ic,
.topo nav a.ativo svg.ic,
.menu-grupo[open] > summary svg.ic,
.menu-grupo.ativo > summary svg.ic,
.menu-lista a:hover svg.ic,
.menu-lista a.ativo svg.ic { opacity: 1; }
.topo nav a:hover { background: var(--painel-alto); color: var(--texto); text-decoration: none; }
.topo nav a.ativo { background: var(--painel-alto); color: var(--texto); }
.topo .resumo {
margin-left: auto;
font-size: 13px;
color: var(--texto-fraco);
display: flex;
gap: 16px;
align-items: center;
/* Sem isto o "12 no ar" quebra em duas linhas quando a barra aperta, e a barra
inteira cresce de altura por causa de três palavras. */
white-space: nowrap;
}
/* ---------- barra do copiloto ---------- */
/* UMA pílula, e não um campo mais um botão soltos.
*
* A primeira versão punha um input com borda própria ao lado de um botão com borda
* própria, e o resultado eram três retângulos disputando a mesma linha do menu — o
* cabeçalho ficava com cara de formulário. Aqui a MOLDURA é do