/* =================================================================
BNews — design system
Dois temas: CLARO (padrão, redação) e ESCURO (sala de controle).
O tema vem de data-tema no ; o display do apresentador é
sempre preto, independente do tema escolhido.
100% local: nenhuma dependência de CDN, funciona sem internet.
================================================================= */
/* A Inter vem dentro do sistema, em assets/fonts — um arquivo de 48 KB que
cobre todos os pesos. Nada de Google Fonts: o servidor do estúdio pode
estar sem internet e a tela não pode mudar de cara por causa disso. */
@font-face{
font-family:'Inter';
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url('../fonts/inter-variavel.woff2') format('woff2');
}
:root{
/* ---------------- TEMA CLARO ---------------- */
/* superfícies
O fundo esfriou e clareou, e as linhas ficaram mais leves: com cantos
redondos, borda grossa vira contorno de desenho. O que separa um painel
do outro agora é a sombra e o ar entre eles, não o traço. */
--bg: #F7F8FA;
--bg-rail: #FFFFFF;
--panel: #FFFFFF;
--panel-2: #F7F8FA;
--panel-3: #EFF1F5;
--line: #E8EAEF;
--line-2: #D9DCE3;
--line-3: #B9BEC9;
--hover: #F2F4F7;
/* texto — cinza neutro, sem puxar para o azul nem para o verde */
--txt: #0F1218;
--txt-2: #4A5160;
--txt-3: #6E7686;
--txt-4: #9AA1AE;
/* acento — azul de trabalho. O VERMELHO fica reservado para NO AR:
numa emissora, vermelho na tela só pode querer dizer uma coisa. */
--accent: #2563EB;
--accent-2: #1D4ED8;
--accent-bg: #EFF4FF;
--accent-ln: #C7D9FE;
/* estados */
--onair: #D22A20;
--onair-bg: #FDECEA;
--onair-ln: #F2B7B1;
--onair-txt: #AF231A;
--ok: #1B9A62;
--ok-bg: #E5F6EE;
--ok-ln: #A8DEC3;
--ok-txt: #137A4E;
--warn: #B57A05;
--warn-bg: #FCF3E1;
--warn-ln: #EACF9A;
--warn-txt: #8C5D05;
--info: #2B7CC3;
--info-bg: #E8F2FB;
--info-ln: #B3D4EF;
--info-txt: #1D5D96;
--vt: #6B5BD6;
--vt-bg: #EFECFC;
--vt-ln: #C8BFF2;
--vt-txt: #5747BC;
--neutro-bg: #EDF0F4;
/* diff */
--add: #1B9A62;
--add-bg: #DFF3E8;
--del: #D1493E;
--del-bg: #FBE7E4;
--del-txt: #A83127;
/* profundidade — é ela que separa as coisas agora que a linha recuou */
--sombra: 0 1px 2px rgba(20,32,48,.04), 0 6px 16px -10px rgba(20,32,48,.16);
--sombra-alta: 0 2px 4px rgba(20,32,48,.05), 0 14px 32px -14px rgba(20,32,48,.22);
--sombra-2: 0 32px 80px -28px rgba(18,32,46,.34);
--veu: rgba(22,34,46,.38);
--font-ui: 'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
/* A monoespaçada sobrou onde ela serve para alguma coisa: tempo, relógio
e o texto do teleprompter, onde toda linha precisa medir o mesmo. */
--font-mono: ui-monospace,"SF Mono","Cascadia Mono",Consolas,"Roboto Mono",Menlo,monospace;
--rail: 244px;
--topbar: 62px;
/* ---------------- ARREDONDAMENTO ----------------
Uma escala só, usada no sistema inteiro. Mexer aqui muda a cara de
todas as telas de uma vez — é o botão de "mais redondo" e "menos
redondo" do projeto. */
--r-s: 8px; /* coisas pequenas: chip, miniatura */
--r: 10px; /* padrão: botão, campo, item de lista */
--r-m: 14px; /* painel */
--r-l: 18px; /* diálogo, cartão grande */
--pill: 999px; /* etiqueta e contador — só eles */
color-scheme: light;
}
html[data-tema="escuro"]{
/* ---------------- TEMA ESCURO ---------------- */
--bg: #0C0E12;
--bg-rail: #121419;
--panel: #16191F;
--panel-2: #1B1F26;
--panel-3: #232831;
--line: #232730;
--line-2: #2F343F;
--line-3: #3E4451;
--hover: #1A1E25;
--txt: #E9EBEF;
--txt-2: #A2A9B6;
--txt-3: #79808E;
--txt-4: #565D69;
--accent: #5B8DEF;
--accent-2: #93B4F7;
--accent-bg: #16223A;
--accent-ln: #27406B;
--onair: #E63329;
--onair-bg: #33100D;
--onair-ln: #5C201B;
--onair-txt: #FF8B84;
--ok: #3DB27C;
--ok-bg: #0F2C22;
--ok-ln: #1E5540;
--ok-txt: #7FD9AE;
--warn: #E0A428;
--warn-bg: #2E2310;
--warn-ln: #5A4514;
--warn-txt: #EBC877;
--info: #4A9EDA;
--info-bg: #10263A;
--info-ln: #1E4665;
--info-txt: #93C7EE;
--vt: #8B7BE8;
--vt-bg: #1B1836;
--vt-ln: #3B3372;
--vt-txt: #B0A4F0;
--neutro-bg: #161E24;
--add: #3DB27C;
--add-bg: #12301F;
--del: #E0655A;
--del-bg: #341714;
--del-txt: #F0A29A;
--sombra: 0 1px 2px rgba(0,0,0,.34), 0 8px 20px -12px rgba(0,0,0,.6);
--sombra-alta: 0 2px 6px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.7);
--sombra-2: 0 32px 80px -24px rgba(0,0,0,.9);
--veu: rgba(4,7,9,.74);
/* O escuro usa a MESMA escala de arredondamento do claro: é a mesma
casa, só com a luz apagada. */
color-scheme: dark;
}
*,*::before,*::after{box-sizing:border-box}
/* hidden tem que ganhar de qualquer display: sem isto, um .campo escondido
continuava aparecendo (o display:flex da classe passava por cima). */
[hidden]{display:none !important}
/* Todo ícone tem tamanho previsível; regras específicas abaixo ajustam. */
svg{width:16px; height:16px; flex-shrink:0; vertical-align:-.16em}
html,body{height:100%}
body{
margin:0; background:var(--bg); color:var(--txt);
font-family:var(--font-ui); font-size:14px; line-height:1.5;
-webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:600; letter-spacing:-.011em}
p{margin:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
::selection{background:var(--accent-ln); color:var(--txt)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-2); border:3px solid var(--bg); border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--line-3)}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
/* ---------- micro-rótulo ---------- */
.lbl{
font-size:10px; font-weight:600;
letter-spacing:.005em; color:var(--txt-3);
}
/* =================================================================
Estrutura
================================================================= */
.app{display:grid; grid-template-columns:var(--rail) 1fr; min-height:100vh}
/* ---------- barra lateral ---------- */
.rail{
background:var(--bg-rail); border-right:1px solid var(--line);
display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.brand{
display:flex; align-items:center; gap:11px; height:68px;
padding:0 16px; flex-shrink:0;
}
.brand-mark{
width:32px; height:32px; flex-shrink:0; border:0;
background:var(--accent); color:#fff; display:grid; place-items:center;
border-radius:var(--r); box-shadow:0 4px 12px -4px var(--accent);
}
.brand-mark svg{width:17px; height:17px; color:#fff}
.brand-name{font-size:13.5px; font-weight:600; letter-spacing:.01em; line-height:1.15}
.brand-name span{display:block; font-size:9.5px;
font-weight:500; letter-spacing:.005em; color:var(--txt-3);}
/* O menu deixou de ser uma coluna de faixas coladas na borda: cada item é
uma pílula com ar em volta, e o item aberto é um bloco cheio em vez de um
tracinho na lateral. É o que mais muda a cara da tela. */
.nav{padding:10px 10px 14px; flex:1; overflow-y:auto}
.nav-sec{padding:15px 12px 7px; font-size:9.5px;
font-weight:600; letter-spacing:.005em; color:var(--txt-4)}
.nav a{
display:flex; align-items:center; gap:11px; padding:9px 12px; margin-bottom:2px;
color:var(--txt-2); font-size:13.5px; border-radius:var(--r);
transition:background .14s, color .14s;
}
.nav a svg{width:16px; height:16px; flex-shrink:0; opacity:.72}
.nav a:hover{background:var(--hover); color:var(--txt)}
.nav a.on{
background:var(--accent-bg); color:var(--accent-2); font-weight:600;
}
.nav a.on svg{opacity:1; color:var(--accent)}
.nav-badge{
margin-left:auto; font-family:var(--font-mono); font-size:10px; font-weight:600;
padding:1.5px 7px; border-radius:var(--pill); background:var(--panel-3); color:var(--txt-2);
}
.nav a.on .nav-badge{background:var(--accent-ln); color:var(--accent-2)}
.nav-badge.alerta{background:var(--warn-bg); color:var(--warn)}
.rail-foot{padding:12px; margin:0 4px 4px; flex-shrink:0}
.who{display:flex; align-items:center; gap:10px}
.avatar{
width:34px; height:34px; flex-shrink:0; border-radius:50%;
background:var(--panel-3); border:1px solid var(--line-2);
display:grid; place-items:center; font-size:11.5px; font-weight:600; color:var(--txt-2);
}
.who-name{display:block; font-size:13px; font-weight:550; line-height:1.3;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.who-role{display:block; font-size:11.5px; color:var(--txt-3); line-height:1.3;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rail-foot a.sair{display:block; margin-top:10px; text-align:center; font-size:12px;
color:var(--txt-3); padding:7px; border:1px solid var(--line); border-radius:var(--pill);
transition:border-color .14s, color .14s}
.rail-foot a.sair:hover{color:var(--onair); border-color:var(--onair-ln)}
/* ---------- cabeçalho da página ----------
Substituiu a barra de cima. Fica dentro do conteúdo, com o título no
tamanho de título de verdade, e gruda no topo ao rolar — relógio e tally
não podem sair da vista no estúdio. */
.main{display:flex; flex-direction:column; min-width:0}
.pagina{
display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap;
padding:6px 0 18px; margin-bottom:18px; border-bottom:1px solid var(--line);
position:sticky; top:0; z-index:20; background:var(--bg);
}
.pagina::before{
/* tapa o vão entre o topo da janela e o cabeçalho quando a página rola */
content:""; position:absolute; left:0; right:0; top:-26px; height:26px;
background:var(--bg);
}
.pagina-id{min-width:0; flex:1}
.pagina-id h1{font-size:25px; font-weight:640; letter-spacing:-.022em; line-height:1.15}
.pagina-sub{margin-top:5px; font-size:13.5px; color:var(--txt-3); line-height:1.45}
.pagina-acoes{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pagina-estudio{
display:flex; align-items:center; gap:12px; padding-left:14px;
border-left:1px solid var(--line);
}
@media(max-width:820px){
.pagina{align-items:flex-start; flex-direction:column; gap:12px}
.pagina-estudio{padding-left:0; border-left:0}
}
.clock{font-family:var(--font-mono); font-size:13.5px; font-variant-numeric:tabular-nums;
color:var(--txt-2); letter-spacing:.01em}
/* tally — só acende quando algo está no ar */
.tally{
display:flex; align-items:center; gap:7px; padding:5px 12px;
border:1px solid var(--line); background:var(--panel-2); border-radius:var(--pill);
font-size:10.5px; font-weight:600; letter-spacing:.05em;
text-transform:uppercase; color:var(--txt-3);
}
.tally .dot{width:7px; height:7px; border-radius:50%; background:var(--txt-4)}
.tally.ativo{border-color:var(--onair); color:var(--onair-txt); background:var(--onair-bg)}
.tally.ativo .dot{background:var(--onair); box-shadow:0 0 0 3px rgba(230,51,41,.22);
animation:pulsa 1.4s ease-in-out infinite}
@keyframes pulsa{50%{opacity:.35}}
.content{padding:26px 26px 72px; flex:1; min-width:0}
.wide{max-width:1560px; margin:0 auto}
/* =================================================================
Painéis
================================================================= */
.panel{
background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m);
box-shadow:var(--sombra);
}
.panel-head{
display:flex; align-items:center; gap:12px; padding:14px 18px;
border-bottom:1px solid var(--line); min-height:50px;
}
.panel-head h2,.panel-head h3{font-size:14px; font-weight:650; letter-spacing:-.005em}
.panel-head .lbl{margin-right:auto}
.panel-head .acoes{margin-left:auto; display:flex; gap:7px; align-items:center}
/* botão solto no cabeçalho vai para a direita sozinho */
.panel-head > .btn:last-child, .panel-head > a.btn:last-child{margin-left:auto}
.panel-body{padding:18px}
.panel-body.flush{padding:0}
.grid{display:grid; gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1180px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.g2,.g3,.g4{grid-template-columns:1fr}}
/* ---------- indicadores ---------- */
/* Eram uma grade colada por fios de 1px — a cara mais "quadrada" do
sistema. Agora cada número é um cartão com ar em volta. */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr)); gap:12px}
.kpi{
background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m);
box-shadow:var(--sombra); padding:17px 18px 16px; position:relative;
}
.kpi .v{font-family:var(--font-mono); font-size:31px; font-weight:600; line-height:1;
letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.kpi .k{margin-top:9px; font-size:9.5px; font-weight:600;
letter-spacing:.005em; color:var(--txt-3)}
.kpi .d{margin-top:4px; font-size:12px; color:var(--txt-3)}
.kpi.ac .v{color:var(--accent)} .kpi.ok .v{color:var(--ok)}
.kpi.wa .v{color:var(--warn)} .kpi.ar .v{color:var(--onair)}
/* =================================================================
Tabela
================================================================= */
.tabela-wrap{overflow-x:auto}
table.tab{border-collapse:collapse; width:100%; font-size:13.5px}
table.tab th{
text-align:left; padding:11px 18px; background:transparent;
border-bottom:1px solid var(--line); font-size:9.5px;
font-weight:600; letter-spacing:.005em; color:var(--txt-4);
white-space:nowrap;
}
table.tab td{padding:13px 18px; border-bottom:1px solid var(--line); vertical-align:middle}
table.tab tbody tr:last-child td{border-bottom:none}
table.tab tbody tr{transition:background .1s}
table.tab tbody tr:hover{background:var(--panel-2)}
/* a última linha acompanha o canto redondo do painel */
table.tab tbody tr:last-child td:first-child{border-bottom-left-radius:var(--r-m)}
table.tab tbody tr:last-child td:last-child{border-bottom-right-radius:var(--r-m)}
table.tab td.principal{font-weight:500}
table.tab td .abaixo{display:block; font-size:11.5px; color:var(--txt-3); margin-top:2px}
table.tab td.acoes{text-align:right; white-space:nowrap}
table.tab td.num{white-space:nowrap}
.vazio{padding:52px 20px; text-align:center; color:var(--txt-3)}
.vazio svg{width:32px; height:32px; opacity:.32; margin-bottom:12px}
.vazio p{font-size:13.5px}
.vazio .dica{font-size:12.5px; color:var(--txt-4); margin-top:5px}
/* =================================================================
Selos de estado
================================================================= */
.selo{
display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
border:1px solid; border-radius:var(--pill);
font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
white-space:nowrap;
}
.selo::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}
.selo.rascunho{color:var(--txt-3); border-color:var(--line-2); background:var(--panel-2)}
.selo.revisao {color:var(--warn); border-color:var(--warn-ln); background:var(--warn-bg)}
.selo.aprovado{color:var(--ok); border-color:var(--ok-ln); background:var(--ok-bg)}
.selo.final {color:var(--info); border-color:var(--info-ln); background:var(--info-bg)}
.selo.noar {color:var(--onair-txt); border-color:var(--onair); background:var(--onair-bg)}
.selo.noar::before{animation:pulsa 1.4s ease-in-out infinite}
.selo.concluido{color:var(--txt-2);border-color:var(--line-2); background:var(--panel-2)}
/* =================================================================
Botões
================================================================= */
/* Botão em pílula. O primário passou a ser cheio: numa tela clara e sem
traços fortes, botão desbotado deixa de parecer botão. */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:7px;
padding:8px 15px; border:1px solid var(--line-2); border-radius:var(--pill);
background:var(--panel); color:var(--txt); font-size:13px; font-weight:550;
cursor:pointer; white-space:nowrap;
transition:background .14s,border-color .14s,color .14s,box-shadow .14s,transform .06s;
}
.btn svg{width:14px; height:14px}
.btn:hover{background:var(--panel-2); border-color:var(--line-3)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.primario{
background:var(--accent); border-color:var(--accent); color:#fff;
box-shadow:0 4px 12px -6px var(--accent);
}
.btn.primario:hover{background:var(--accent-2); border-color:var(--accent-2); color:#fff}
.btn.primario svg{color:#fff}
.btn.perigo{background:var(--onair-bg); border-color:var(--onair-ln); color:var(--onair-txt)}
.btn.perigo:hover{border-color:var(--onair)}
.btn.aprova{background:var(--ok-bg); border-color:var(--ok-ln); color:var(--ok-txt)}
.btn.aprova:hover{border-color:var(--ok)}
.btn.discreto{background:transparent; border-color:transparent; color:var(--txt-3)}
.btn.discreto:hover{background:var(--panel-2); color:var(--txt)}
.btn.mini{padding:5px 11px; font-size:12px}
.btn.mini svg{width:12.5px; height:12.5px}
.btn.icone{padding:6px; width:32px; height:32px; border-radius:50%}
.btn.bloco{width:100%}
.kbd{
display:inline-block; padding:1px 5px; border:1px solid var(--line-2);
border-bottom-width:2px; border-radius:3px; background:var(--panel-3);
font-family:var(--font-mono); font-size:10.5px; color:var(--txt-2); line-height:1.5;
}
/* =================================================================
Formulários
================================================================= */
.campo{display:flex; flex-direction:column; gap:6px}
.campo > label{display:flex; align-items:center; gap:6px;
font-size:12px; font-weight:600; letter-spacing:0; text-transform:none;
color:var(--txt-2)}
.campo > label svg{width:13px; height:13px; opacity:.75}
.campo .ajuda{font-size:11.5px; color:var(--txt-4)}
/* TODO campo de texto, e não uma lista de tipos.
A lista antiga era por tipo — input[type=text], input[type=email]... — e
um escrito sem type NÃO CASA com nenhuma delas: o navegador
desenhava a caixinha cinza quadrada dele. Metade dos campos do sistema é
escrita sem type. Era daí que vinham os quadrados que sobravam.
Agora a regra é ao contrário: vale para todo input, MENOS os que têm
desenho próprio (marcar, escolher, barra, arquivo, cor, botão). */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=image]):not([type=hidden]),
select,textarea{
width:100%; padding:10px 13px; background:var(--panel-2); color:var(--txt);
border:1px solid var(--line); border-radius:var(--r); font-size:13.5px;
transition:border-color .14s, background .14s, box-shadow .14s;
}
/* Data e hora: o próprio navegador põe um botãozinho dentro. Sem isto ele
fica colado na borda arredondada e parece defeito. */
input[type=date],input[type=time],input[type=datetime-local]{padding-right:10px}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{
opacity:.55; cursor:pointer; border-radius:var(--r-s); padding:2px;
}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=time]:hover::-webkit-calendar-picker-indicator{opacity:1}
input[type=search]::-webkit-search-cancel-button{cursor:pointer}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{
outline:none; border-color:var(--accent); background:var(--panel);
box-shadow:0 0 0 3px var(--accent-bg);
}
input::placeholder,textarea::placeholder{color:var(--txt-4)}
textarea{resize:vertical; line-height:1.6; border-radius:var(--r)}
select{appearance:none; padding-right:30px;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236B808F' stroke-width='1.6'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 9px center; background-size:14px}
/* =================================================================
Diálogo
================================================================= */
.overlay{
position:fixed; inset:0; background:var(--veu); z-index:100;
display:none; align-items:center; justify-content:center; padding:20px;
backdrop-filter:blur(3px);
}
.overlay.aberto{display:flex}
.dialogo{
background:var(--panel); border:1px solid var(--line); border-radius:var(--r-l);
width:100%; max-width:540px; box-shadow:var(--sombra-2);
max-height:88vh; display:flex; flex-direction:column; overflow:hidden;
animation:sobe .16s ease-out;
}
@keyframes sobe{from{opacity:0; transform:translateY(10px) scale(.99)}}
.dialogo-head{padding:18px 22px 14px; display:flex; align-items:center; gap:12px}
.dialogo-head h3{font-size:16px; font-weight:650; letter-spacing:-.01em}
.dialogo-body{padding:4px 22px 20px; overflow-y:auto; display:flex; flex-direction:column; gap:16px}
.dialogo-foot{padding:14px 22px; border-top:1px solid var(--line);
display:flex; gap:9px; justify-content:flex-end; background:var(--panel-2)}
/* =================================================================
Avisos
================================================================= */
.alerta{
display:flex; gap:11px; padding:13px 16px; border:1px solid var(--line);
border-left-width:3px; border-radius:var(--r); background:var(--panel-2); font-size:13px;
}
.alerta svg{margin-top:1px}
.alerta.erro{border-left-color:var(--onair); background:var(--onair-bg); border-color:var(--onair-ln); color:var(--onair-txt)}
.alerta.ok{border-left-color:var(--ok); background:var(--ok-bg); border-color:var(--ok-ln); color:var(--ok-txt)}
.alerta.info{border-left-color:var(--info); background:var(--info-bg); border-color:var(--info-ln); color:var(--info-txt)}
.alerta.atencao{border-left-color:var(--warn); background:var(--warn-bg); border-color:var(--warn-ln); color:var(--warn-txt)}
/* notificação flutuante */
.toast-area{position:fixed; bottom:20px; right:20px; z-index:200;
display:flex; flex-direction:column; gap:9px; max-width:380px}
.toast{
padding:13px 17px; border:1px solid var(--line); border-left-width:3px;
border-radius:var(--r); background:var(--panel); font-size:13px;
box-shadow:var(--sombra-alta); animation:entra .18s ease-out;
}
.toast.ok{border-left-color:var(--ok); color:var(--ok-txt)}
.toast.erro{border-left-color:var(--onair); color:var(--onair-txt)}
@keyframes entra{from{opacity:0; transform:translateY(8px)}}
/* =================================================================
Editor de roteiro
================================================================= */
.editor-layout{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:14px; align-items:start}
@media(max-width:1240px){.editor-layout{grid-template-columns:1fr}}
.editor-barra{
display:flex; align-items:center; gap:10px; padding:11px 16px;
background:var(--panel-2); border-bottom:1px solid var(--line); flex-wrap:wrap;
border-radius:var(--r-m) var(--r-m) 0 0;
}
.editor-barra .sep{width:1px; height:18px; background:var(--line-2)}
#conteudo, .roteiro-txt{
width:100%; min-height:480px; padding:22px 26px; background:var(--panel);
border:none; border-radius:0; box-shadow:none; font-family:var(--font-mono);
font-size:15px; line-height:1.95; letter-spacing:.005em; resize:vertical;
}
#conteudo:focus{outline:none; background:var(--panel); box-shadow:none}
.rodape-editor{
display:flex; align-items:center; gap:20px; padding:9px 16px;
border-top:1px solid var(--line); background:var(--panel-2);
font-family:var(--font-mono); font-size:11.5px; color:var(--txt-3); flex-wrap:wrap;
}
.rodape-editor b{color:var(--txt-2); font-weight:600}
.rodape-editor .item{display:flex; align-items:center; gap:6px; white-space:nowrap}
/* leitura estimada vs duração do bloco */
.barra-tempo{height:4px; background:var(--panel-3); border-radius:2px; overflow:hidden; margin-top:8px}
.barra-tempo i{display:block; height:100%; background:var(--accent); transition:width .3s}
.barra-tempo.estourou i{background:var(--onair)}
.barra-tempo.perto i{background:var(--warn)}
/* =================================================================
Revisor automático
================================================================= */
.medidor{display:grid; grid-template-columns:repeat(2,1fr); gap:9px}
.medidor div{background:var(--panel-2); border:1px solid var(--line);
border-radius:var(--r); padding:12px 14px}
.medidor .v{font-family:var(--font-mono); font-size:19px; font-weight:600; line-height:1.1}
.medidor .k{font-size:9px; font-weight:600;
letter-spacing:.005em; color:var(--txt-3); margin-top:5px}
.legibilidade{padding:13px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r)}
.legibilidade .topo{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.legibilidade .n{font-family:var(--font-mono); font-size:24px; font-weight:600; line-height:1}
.legibilidade .r{font-size:12.5px; color:var(--txt-2); text-align:right}
.escala{height:5px; margin-top:10px; border-radius:3px; position:relative;
background:linear-gradient(90deg,var(--onair) 0%,var(--warn) 40%,var(--ok) 75%,var(--accent) 100%)}
.escala i{position:absolute; top:-3px; width:3px; height:11px; background:var(--txt);
border-radius:1px; box-shadow:0 0 0 2px var(--panel-2); transform:translateX(-50%)}
.nivel-bom{color:var(--ok)} .nivel-medio{color:var(--warn)}
.nivel-ruim{color:var(--onair)} .nivel-neutro{color:var(--txt-3)}
.contagem-rev{display:flex; gap:7px; flex-wrap:wrap}
.pilula{
display:inline-flex; align-items:center; gap:6px; padding:3px 9px;
border:1px solid var(--line-2); border-radius:11px; background:var(--panel-2);
font-size:10.5px; font-weight:600; letter-spacing:.005em;
}
.pilula .p{width:6px; height:6px; border-radius:50%}
.pilula.erro{border-color:var(--onair-ln); background:var(--onair-bg); color:var(--onair-txt)}
.pilula.erro .p{background:var(--onair)}
.pilula.aviso{border-color:var(--warn-ln); background:var(--warn-bg); color:var(--warn-txt)}
.pilula.aviso .p{background:var(--warn)}
.pilula.sugestao{border-color:var(--info-ln); background:var(--info-bg); color:var(--info-txt)}
.pilula.sugestao .p{background:var(--info)}
.apontamentos{display:flex; flex-direction:column; max-height:520px; overflow-y:auto}
.apontamento{
padding:12px 15px; border-bottom:1px solid var(--line); border-left:2px solid transparent;
cursor:pointer; transition:background .12s;
}
.apontamento:last-child{border-bottom:none}
.apontamento:hover{background:var(--panel-2)}
.apontamento.erro{border-left-color:var(--onair)}
.apontamento.aviso{border-left-color:var(--warn)}
.apontamento.sugestao{border-left-color:var(--info)}
.apontamento .cab{display:flex; align-items:baseline; gap:8px; margin-bottom:4px}
.apontamento .tipo{font-size:9px; font-weight:600;
letter-spacing:.005em; color:var(--txt-4); margin-left:auto; flex-shrink:0}
.apontamento h4{font-size:13px; font-weight:600; line-height:1.35}
.apontamento .det{font-size:12.5px; color:var(--txt-2); line-height:1.5}
.apontamento .trecho{
display:block; margin-top:7px; padding:5px 8px; background:var(--bg);
border:1px solid var(--line); border-radius:2px; font-family:var(--font-mono);
font-size:11.5px; color:var(--txt-2); overflow-wrap:anywhere;
}
.tudo-certo{padding:34px 20px; text-align:center}
.tudo-certo svg{width:30px; height:30px; color:var(--ok); margin-bottom:10px}
.tudo-certo p{font-size:13.5px; color:var(--txt-2)}
.tudo-certo .dica{font-size:12px; color:var(--txt-4); margin-top:4px}
/* =================================================================
Diff
================================================================= */
.diff{
padding:20px 24px; background:var(--bg); font-family:var(--font-mono);
font-size:14px; line-height:2; overflow-wrap:anywhere;
}
.diff .igual{color:var(--txt-2)}
.diff .add{background:var(--add-bg); color:var(--ok-txt); padding:1px 3px; border-radius:2px;
box-shadow:inset 0 -1.5px 0 var(--add)}
.diff .del{background:var(--del-bg); color:var(--del-txt); padding:1px 3px; border-radius:2px;
text-decoration:line-through; text-decoration-color:rgba(240,162,154,.55)}
.diff-legenda{display:flex; gap:16px; align-items:center; font-size:10.5px; color:var(--txt-3); letter-spacing:.005em}
.diff-legenda span{display:flex; align-items:center; gap:6px}
.diff-legenda i{width:9px; height:9px; border-radius:2px; display:block}
.diff-legenda .a{background:var(--add)} .diff-legenda .r{background:var(--del)}
.lado-a-lado{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line)}
@media(max-width:980px){.lado-a-lado{grid-template-columns:1fr}}
.lado{background:var(--panel)}
.lado .cab{padding:8px 16px; background:var(--panel-2); border-bottom:1px solid var(--line);
font-size:9.5px; font-weight:600; letter-spacing:.005em; color:var(--txt-3)}
/* linha do tempo de revisões */
.timeline{display:flex; flex-direction:column; max-height:400px; overflow-y:auto}
.tl-item{display:grid; grid-template-columns:26px 1fr; gap:11px; padding:11px 15px;
border-bottom:1px solid var(--line); cursor:pointer; transition:background .12s}
.tl-item:hover{background:var(--panel-2)}
.tl-item:last-child{border-bottom:none}
.tl-marca{width:24px; height:24px; border-radius:50%; background:var(--panel-3);
border:1px solid var(--line-2); display:grid; place-items:center;
font-family:var(--font-mono); font-size:10px; font-weight:600; color:var(--txt-2)}
.tl-item.aprovado .tl-marca{background:var(--ok-bg); border-color:var(--ok-ln); color:var(--ok-txt)}
.tl-item.devolvido .tl-marca{background:var(--onair-bg); border-color:var(--onair-ln); color:var(--onair-txt)}
.tl-cab{display:flex; align-items:baseline; gap:8px}
.tl-cab strong{font-size:12.5px; font-weight:600}
.tl-cab time{font-family:var(--font-mono); font-size:10.5px; color:var(--txt-4); margin-left:auto}
.tl-quem{font-size:11.5px; color:var(--txt-3)}
.tl-nota{font-size:12.5px; color:var(--txt-2); margin-top:5px; font-style:italic;
padding-left:9px; border-left:2px solid var(--line-2)}
/* comentários do revisor */
.comentario{padding:12px 15px; border-bottom:1px solid var(--line)}
.comentario:last-child{border-bottom:none}
.comentario.resolvido{opacity:.5}
.comentario .cab{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.comentario .cab strong{font-size:12.5px}
.comentario .cab time{font-family:var(--font-mono); font-size:10.5px; color:var(--txt-4); margin-left:auto}
.comentario blockquote{margin:0 0 7px; padding:6px 10px; background:var(--bg);
border-left:2px solid var(--warn); border-radius:0 2px 2px 0;
font-family:var(--font-mono); font-size:11.5px; color:var(--txt-2)}
.comentario p{font-size:13px; color:var(--txt); line-height:1.55}
.comentario .pe{margin-top:8px; display:flex; gap:7px; align-items:center}
/* =================================================================
Painel do operador
================================================================= */
.transporte{display:flex; align-items:center; justify-content:center; gap:11px; padding:6px 0 20px}
.tbtn{
width:52px; height:52px; border-radius:50%; border:1px solid var(--line-2);
background:var(--panel-2); display:grid; place-items:center; cursor:pointer;
transition:background .12s,border-color .12s,transform .08s;
}
.tbtn svg{width:19px; height:19px; color:var(--txt-2)}
.tbtn:hover{background:var(--panel-3); border-color:var(--line-3)}
.tbtn:hover svg{color:var(--txt)}
.tbtn:active{transform:scale(.94)}
.tbtn.play{width:78px; height:78px; background:var(--ok-bg); border-color:var(--ok-ln)}
.tbtn.play svg{width:29px; height:29px; color:var(--ok-txt)}
.tbtn.play:hover{border-color:var(--ok); background:var(--ok-bg)}
.tbtn.play.tocando{background:var(--onair-bg); border-color:var(--onair-ln)}
.tbtn.play.tocando svg{color:var(--onair-txt)}
.tbtn.parar{border-color:var(--onair-ln)}
.tbtn.parar svg{color:var(--del)}
.crono{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px}
.crono > div{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m);
box-shadow:var(--sombra); padding:16px 18px}
.crono .v{font-family:var(--font-mono); font-size:32px; font-weight:600; line-height:1;
letter-spacing:.01em; font-variant-numeric:tabular-nums}
.crono .k{margin-top:8px; font-size:9.5px; font-weight:600;
letter-spacing:.005em; color:var(--txt-3)}
.crono .v.folga{color:var(--ok)} .crono .v.aperto{color:var(--warn)}
.crono .v.estouro{color:var(--onair); animation:pulsa 1s ease-in-out infinite}
.slider-linha{display:flex; align-items:center; gap:14px}
input[type=range]{
-webkit-appearance:none; appearance:none; flex:1; height:5px; border-radius:3px;
background:var(--panel-3); border:1px solid var(--line); cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none; width:19px; height:19px; border-radius:50%;
background:var(--accent); border:2px solid var(--bg); cursor:grab;
box-shadow:0 0 0 1px var(--accent-ln);
}
input[type=range]::-webkit-slider-thumb:active{cursor:grabbing; background:var(--accent-2)}
input[type=range]::-moz-range-thumb{width:17px; height:17px; border-radius:50%;
background:var(--accent); border:2px solid var(--bg); cursor:grab}
.slider-marcas{display:flex; justify-content:space-between; margin-top:7px;
font-family:var(--font-mono); font-size:10px; color:var(--txt-4)}
.blocos{display:grid; grid-template-columns:repeat(auto-fill,minmax(172px,1fr)); gap:9px}
.bloco{
padding:11px 13px; background:var(--panel-2); border:1px solid var(--line-2);
border-radius:var(--r); cursor:pointer; text-align:left;
transition:background .12s,border-color .12s,transform .1s;
}
.bloco:hover{background:var(--panel-3); border-color:var(--accent-ln); transform:translateY(-1px)}
.bloco .t{font-family:var(--font-mono); font-size:11px; color:var(--accent); letter-spacing:.04em}
.bloco .n{font-size:13px; font-weight:500; margin-top:4px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bloco .dur{font-family:var(--font-mono); font-size:10.5px; color:var(--txt-4); margin-top:3px}
.bloco.atual{border-color:var(--onair); background:var(--onair-bg)}
.bloco.atual .t{color:var(--onair-txt)}
.opcoes{display:flex; gap:7px; flex-wrap:wrap}
.opcao{
flex:1; min-width:64px; padding:7px 10px; border:1px solid var(--line-2);
border-radius:var(--r); background:var(--panel-2); font-size:12.5px;
cursor:pointer; text-align:center; transition:all .12s;
}
.opcao:hover{background:var(--panel-3)}
.opcao.ligado{border-color:var(--accent); background:var(--accent-bg); color:var(--accent-2)}
.amostra-cor{display:block; width:100%; height:4px; border-radius:2px; margin-top:6px}
.atalhos{display:flex; flex-wrap:wrap; gap:7px 18px; font-size:12px; color:var(--txt-3)}
.atalhos span{display:flex; align-items:center; gap:6px}
/* =================================================================
Login
================================================================= */
.login-tela{min-height:100vh; display:grid; grid-template-columns:1fr 480px}
@media(max-width:960px){.login-tela{grid-template-columns:1fr}.login-arte{display:none}}
.login-arte{
background:var(--bg-rail); border-right:1px solid var(--line);
display:flex; flex-direction:column; justify-content:space-between; padding:44px;
position:relative; overflow:hidden;
}
.login-arte::after{
content:""; position:absolute; inset:0; pointer-events:none;
background-image:linear-gradient(var(--line) 1px,transparent 1px),
linear-gradient(90deg,var(--line) 1px,transparent 1px);
background-size:52px 52px; opacity:.32;
mask-image:radial-gradient(ellipse at 30% 40%,#000 10%,transparent 72%);
}
.login-arte > *{position:relative; z-index:1}
.login-lema{font-size:29px; font-weight:600; line-height:1.25; max-width:15ch; letter-spacing:-.02em}
.login-lema em{font-style:normal; color:var(--accent)}
.login-nota{font-size:13px; color:var(--txt-3); max-width:44ch; margin-top:14px}
.login-rodape{font-size:10.5px; letter-spacing:.005em; color:var(--txt-4)}
.login-form{display:flex; flex-direction:column; justify-content:center; padding:44px; gap:22px}
.login-form h1{font-size:22px}
/* ---- Identidade da casa na tela de entrada ----------------------
A foto entra no painel da esquerda; o véu por cima garante que o
lema continue legível com qualquer foto que a emissora mandar. */
.brand-logo{width:auto; max-width:260px; object-fit:contain; display:block}
/* A logomarca em cima do formulário — no celular o painel da esquerda
some, e então esta é a única marca que a pessoa vê. */
.login-marca{display:flex; align-items:center; gap:11px; min-height:44px}
.login-marca.centro{justify-content:center; text-align:center}
.login-marca.esquerda{justify-content:flex-start}
.login-marca img{width:auto; max-width:100%; object-fit:contain; display:block}
.login-marca b{font-size:17px; letter-spacing:-.01em}
.brand-mark.grande{width:34px; height:34px}
/* ---- Tela de Identidade ----------------------------------------- */
.marca-caixa{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.marca-previa{border:1px solid var(--line); border-radius:4px; background:var(--bg-rail);
display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto}
.marca-previa.logo{width:190px; height:82px; padding:10px}
.marca-previa.fundo{width:230px; height:130px}
.marca-previa img{max-width:100%; max-height:100%; object-fit:contain}
.marca-previa.fundo img{width:100%; height:100%; object-fit:cover}
.marca-previa .sem{font-size:11.5px; color:var(--txt-4); letter-spacing:.005em; text-align:center; padding:0 10px}
.marca-acoes{display:flex; flex-direction:column; gap:8px; align-items:flex-start}
/* ---- Prévia do login dentro da tela de Identidade ---------------- */
.previa-login{border:1px solid var(--line); border-radius:5px; overflow:hidden;
display:grid; grid-template-columns:1.35fr 1fr; min-height:250px; background:var(--bg-card)}
.pv-arte{position:relative; background:var(--bg-rail); background-size:cover;
background-position:center; padding:16px; display:flex; align-items:flex-end}
.pv-veu{position:absolute; inset:0;
background:linear-gradient(105deg,#05090C 0%,rgba(5,9,12,.72) 55%,rgba(5,9,12,.38) 100%)}
.pv-conteudo{position:relative; z-index:1; display:flex; flex-direction:column; gap:7px; width:100%}
.pv-marca{display:flex; flex-direction:column; line-height:1.2}
.pv-marca b{font-size:12px}
.pv-marca span{font-size:9px; color:var(--txt-4)}
.pv-lema{font-size:14px; font-weight:600; line-height:1.25; margin:4px 0 0}
.pv-lema em{font-style:normal; color:var(--accent)}
.pv-nota{font-size:9.5px; line-height:1.4; color:var(--txt-3); margin:0}
.pv-rodape{font-size:8px; letter-spacing:.005em; color:var(--txt-4); margin-top:4px}
.pv-arte.com-foto .pv-marca b,
.pv-arte.com-foto .pv-lema{color:#fff}
.pv-arte.com-foto .pv-marca span,
.pv-arte.com-foto .pv-nota{color:#D6E2EA}
.pv-form{padding:16px; display:flex; flex-direction:column; gap:9px; justify-content:center}
.pv-logo{min-height:0}
.pv-logo{display:flex}
.pv-logo.centro{justify-content:center}
.pv-logo.esquerda{justify-content:flex-start}
.pv-logo img{width:auto; max-width:100%; object-fit:contain; display:block}
.pv-form b{font-size:12px}
.pv-campo{height:22px; border:1px solid var(--line); border-radius:3px; background:var(--bg-rail)}
.pv-botao{height:24px; border-radius:3px; background:var(--accent); color:#fff; font-size:10px;
display:flex; align-items:center; justify-content:center; font-weight:600}
/* No celular o painel da esquerda sai e sobra a entrada, com a logomarca
em cima dela. A regra de tela estreita fica AQUI, depois das regras base:
antes ela vinha primeiro no arquivo e perdia para o `display:flex`. */
/* Tela estreita: o painel da esquerda vira uma FAIXA no alto, com a foto.
Antes ele sumia — e quem cadastrou uma imagem no celular achava que ela
não tinha entrado. O lema e o parágrafo saem; a foto e a marca ficam. */
@media(max-width:960px){
.login-tela{grid-template-columns:1fr; min-height:100vh}
.login-arte{display:none}
.login-arte.com-foto{
display:flex; min-height:190px; padding:20px 22px;
justify-content:flex-end; border-right:none; border-bottom:1px solid #1B2A33;
}
.login-arte.com-foto .login-lema,
.login-arte.com-foto .login-nota,
.login-arte.com-foto .login-rodape,
.login-arte.com-foto .login-lema ~ *{display:none}
.login-arte.com-foto > div:nth-of-type(2){display:none}
.login-arte.com-foto::before{
background:linear-gradient(0deg,rgba(5,9,12,.90) 0%,rgba(5,9,12,.35) 55%,transparent 100%);
}
.login-veu{background:linear-gradient(0deg,rgba(5,9,12,.92) 0%,rgba(5,9,12,.30) 100%)}
.login-form{padding:26px 22px 40px; justify-content:flex-start; gap:18px}
/* No celular a logomarca acompanha a largura da tela: o valor em pixels
escolhido no cadastro serve de piso, não de teto. */
.login-marca img{height:auto !important; width:min(62%, 300px)}
.previa-login{grid-template-columns:1fr}
.pv-arte{min-height:150px}
}
/* =================================================================
Display do apresentador
================================================================= */
body.display{background:#000; overflow:hidden; cursor:none}
.palco{position:relative; height:100vh; background:#000; overflow:hidden}
.esmaece-topo,.esmaece-base{position:absolute; left:0; right:0; height:16vh; z-index:10; pointer-events:none}
.esmaece-topo{top:0; background:linear-gradient(#000,transparent)}
.esmaece-base{bottom:0; background:linear-gradient(0deg,#000,transparent)}
.linha-guia{position:absolute; top:38%; left:3%; right:3%; height:2px; z-index:5;
pointer-events:none; background:linear-gradient(90deg,transparent,rgba(230,51,41,.85),transparent)}
.linha-guia::before,.linha-guia::after{
content:""; position:absolute; top:-5px; width:0; height:0;
border-top:6px solid transparent; border-bottom:6px solid transparent}
.linha-guia::before{left:0; border-left:9px solid var(--onair)}
.linha-guia::after{right:0; border-right:9px solid var(--onair)}
.hud{position:absolute; z-index:20; font-family:var(--font-mono);
text-shadow:0 2px 10px rgba(0,0,0,.9)}
.hud-esq{top:22px; left:30px}
.hud-esq .rot{font-size:11px; letter-spacing:.2em; color:#8FE6DE}
.hud-esq .nome{font-size:19px; font-weight:600; color:#fff; margin-top:3px}
.hud-dir{top:18px; right:30px; font-size:52px; font-weight:600; color:#fff;
font-variant-numeric:tabular-nums; letter-spacing:.01em}
.hud-dir .rot{font-size:10px; letter-spacing:.2em; color:#7A8B98;
text-align:right; margin-bottom:2px; font-weight:500}
.texto-palco{position:absolute; inset:0; top:38%; display:flex;
justify-content:center; padding:0 6vw}
#roteiro{color:#fff; text-align:center; max-width:1500px; font-weight:700;
line-height:1.45; will-change:transform}
.espelhado{transform:scaleX(-1)}
.sem-sinal{
position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:30;
display:none; padding:8px 20px; background:rgba(230,51,41,.94); color:#fff;
font-size:14px; letter-spacing:.005em; border-radius:2px;
}
.sem-sinal.visivel{display:block; animation:pulsa 1.1s ease-in-out infinite}
/* ---- Sinal do canal em tempo real ------------------------------
Três estados, um ponto só. O apresentador não lê texto pequeno em
cima de um roteiro rolando: quem fala é a cor. */
.link-vivo{position:absolute; top:26px; left:50%; transform:translateX(-50%); z-index:25;
display:flex; align-items:center; gap:7px; padding:5px 12px; border-radius:20px;
background:rgba(0,0,0,.55); font-size:10px;
letter-spacing:.005em; color:#7A8B98; opacity:0; transition:opacity .35s}
.link-vivo i{width:8px; height:8px; border-radius:50%; background:#3ED598; display:block}
.link-vivo.mostrar{opacity:1}
.link-vivo.instavel i{background:#F2C14E; animation:pulsa 1.1s ease-in-out infinite}
.link-vivo.instavel{color:#F2C14E}
.link-vivo.caiu i{background:var(--onair); animation:pulsa .8s ease-in-out infinite}
.link-vivo.caiu{color:#FF8F86; background:rgba(230,51,41,.2)}
/* ---- Controle local (pedal do apresentador) ---------------------- */
.controle-local{position:absolute; bottom:26px; left:30px; z-index:30; display:none;
align-items:center; gap:9px; padding:7px 15px; border-radius:3px;
background:rgba(70,200,190,.16); border-left:3px solid #46C8BE;
font-size:11px; letter-spacing:.005em; color:#8FE6DE}
.controle-local.visivel{display:flex}
.controle-local b{font-weight:600; color:#BFF3EE}
.controle-local .sai{color:#7A8B98; letter-spacing:.08em}
/* ---- Texto guardado do último ar --------------------------------- */
.texto-guardado{position:absolute; top:26px; right:50%; transform:translateX(50%);
z-index:26; padding:5px 13px; border-radius:20px; background:rgba(242,193,78,.18);
color:#F2C14E; font-size:10px; letter-spacing:.005em;
display:none}
.texto-guardado.visivel{display:block}
/* ---- Ajuda dos atalhos ------------------------------------------- */
.ajuda-display{position:absolute; inset:0; z-index:60; display:none;
background:rgba(0,0,0,.93); padding:6vh 8vw; overflow:auto}
.ajuda-display.visivel{display:block}
.ajuda-display h3{color:#fff; font-size:22px; margin:0 0 4px}
.ajuda-display .sub{color:#7A8B98; font-size:13px; margin-bottom:26px; display:block}
.ajuda-display dl{display:grid; grid-template-columns:190px 1fr; gap:12px 22px;
align-items:baseline; margin:0}
.ajuda-display dt{font-size:13px; color:#8FE6DE;
letter-spacing:.005em}
.ajuda-display dd{margin:0; color:#C9D6E0; font-size:14px; line-height:1.45}
.ajuda-display .fecha{margin-top:30px; color:#7A8B98; font-size:12px;
font-family:var(--font-mono)}
/* ---- Display vivo, visto da mesa --------------------------------- */
.selo-display{display:inline-flex; align-items:center; gap:6px; font-size:11px;
font-family:var(--font-mono); letter-spacing:.1em; color:var(--txt-3)}
.selo-display i{width:7px; height:7px; border-radius:50%; background:var(--txt-4); display:block}
.selo-display.vivo i{background:var(--ok)}
.selo-display.vivo{color:var(--ok)}
.selo-display.mudo i{background:var(--onair); animation:pulsa 1.1s ease-in-out infinite}
.selo-display.mudo{color:var(--onair)}
/* ---- Resultado do teste de ligação com a API de WhatsApp ---------
Mostra a resposta CRUA da API. Cada serviço chama o endereço e a chave
de um jeito; ver o que voltou é o que evita adivinhar. */
.recado-teste{padding:12px 14px; border-radius:var(--r); background:var(--panel-2);
border:1px solid var(--line-2); font-size:13px; line-height:1.5}
.recado-teste.ruim{background:var(--onair-bg); color:var(--onair-txt); border-color:var(--onair)}
.recado-teste.bom{background:var(--accent-bg); color:var(--accent-2); border-color:var(--accent)}
.chave-ponte code.destacado{background:var(--warn-bg); outline:2px solid var(--warn);
outline-offset:2px; border-radius:3px}
/* =================================================================
O roteiro depois que a Revisão saiu
Um check por história, e o tempo de VT ao lado do nome.
================================================================= */
.check-historia{width:22px; height:22px; flex:0 0 auto; display:inline-flex;
align-items:center; justify-content:center; border:1.5px solid var(--line-2);
border-radius:50%; background:var(--panel); color:var(--txt-4); cursor:pointer;
transition:all .12s; padding:0}
.check-historia svg{width:12px; height:12px}
.check-historia:hover{border-color:var(--ok); color:var(--ok)}
.check-historia.ligado{background:var(--ok); border-color:var(--ok); color:#fff}
.tr.item.conferida{background:var(--accent-bg)}
.tr.item.conferida .nome b{color:var(--accent-2)}
.selo-vt{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; letter-spacing:.005em; padding:1px 7px; border-radius:10px;
background:var(--vt-bg, var(--panel-2)); color:var(--vt-txt, var(--txt-2));
border:1px solid var(--vt-ln, var(--line-2))}
/* ---- Achar a matéria, dentro do diálogo da história ---- */
.filtros-materia{display:grid; grid-template-columns:1.4fr 1fr 1fr auto; gap:8px; align-items:center}
.filtros-materia input, .filtros-materia select{min-width:0}
@media(max-width:620px){.filtros-materia{grid-template-columns:1fr 1fr}}
select.lista-materias{height:auto; padding:4px; font-size:13px}
select.lista-materias option{padding:5px 7px; border-radius:3px}
/* =================================================================
Área do colaborador — os atalhos da casa
================================================================= */
.atalhos-colab{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.atalho{display:flex; flex-direction:column; gap:7px; padding:16px 17px; border-radius:var(--r);
border:1px solid var(--line); background:var(--panel); text-decoration:none;
transition:all .13s}
.atalho:hover{border-color:var(--accent); transform:translateY(-1px);
box-shadow:0 4px 16px rgba(0,0,0,.07)}
.atalho .cima{display:flex; align-items:center; gap:9px}
.atalho .marca{width:30px; height:30px; border-radius:7px; display:flex; align-items:center;
justify-content:center; font-weight:700; font-size:13px; color:#fff; flex:0 0 auto}
.atalho b{font-size:14px; color:var(--txt-1)}
.atalho .oque{font-size:12.5px; color:var(--txt-3); line-height:1.45}
.atalho .endereco{font-family:var(--font-mono); font-size:10.5px; color:var(--txt-4);
word-break:break-all}
.recado-teste .nota{font-style:normal; font-size:11px; color:var(--txt-3);
letter-spacing:.005em}
.recado-teste .tentativa{margin-top:10px; padding-top:9px; border-top:1px solid var(--line)}
.recado-teste .linha{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.recado-teste code{font-size:11.5px; color:var(--txt-2); word-break:break-all}
.recado-teste .cod{font-family:var(--font-mono); font-size:11px; padding:1px 7px;
border-radius:10px; background:var(--panel-3); color:var(--txt-3)}
.recado-teste .cod.ok{background:var(--accent-bg); color:var(--accent-2)}
.recado-teste .cod.ruim{background:var(--onair-bg); color:var(--onair-txt)}
.amostra-webhook{margin:0; padding:10px 12px; background:var(--bg-rail);
border:1px solid var(--line); border-radius:var(--r); font-size:11px;
white-space:pre-wrap; word-break:break-word; max-height:220px; overflow:auto;
color:var(--txt-2)}
.recado-teste pre{margin:7px 0 0; padding:8px 10px; background:var(--bg-rail);
border-radius:3px; font-size:11px; white-space:pre-wrap; word-break:break-word;
max-height:200px; overflow:auto}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}
/* =================================================================
Semáforo da revisão
A cor de cada parágrafo e a cor da matéria inteira.
verde = liberado · âmbar = ajustar · vermelho = erro
cinza = não revisado · azul = mudou depois de liberado
================================================================= */
:root{
--sem-verde:var(--ok); --sem-verde-bg:var(--ok-bg); --sem-verde-ln:var(--ok-ln);
--sem-ambar:var(--warn); --sem-ambar-bg:var(--warn-bg); --sem-ambar-ln:var(--warn-ln);
--sem-vermelho:var(--onair); --sem-vermelho-bg:var(--onair-bg); --sem-vermelho-ln:var(--onair-ln);
--sem-azul:var(--info); --sem-azul-bg:var(--info-bg); --sem-azul-ln:var(--info-ln);
--sem-cinza:var(--txt-3); --sem-cinza-bg:var(--neutro-bg); --sem-cinza-ln:var(--line-2);
}
/* ---------- selo colorido da matéria ---------- */
.farol{
display:inline-flex; align-items:center; gap:7px; padding:3px 10px;
border:1px solid; border-radius:2px; font-size:10px; font-weight:600; letter-spacing:.005em;
white-space:nowrap;
}
.farol::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.farol.verde {color:var(--sem-verde); border-color:var(--sem-verde-ln); background:var(--sem-verde-bg)}
.farol.ambar {color:var(--sem-ambar); border-color:var(--sem-ambar-ln); background:var(--sem-ambar-bg)}
.farol.vermelho{color:var(--onair-txt); border-color:var(--sem-vermelho-ln); background:var(--sem-vermelho-bg)}
.farol.vermelho::before{background:var(--sem-vermelho); animation:pulsa 1.4s ease-in-out infinite}
.farol.azul {color:var(--sem-azul); border-color:var(--sem-azul-ln); background:var(--sem-azul-bg)}
.farol.cinza {color:var(--sem-cinza); border-color:var(--sem-cinza-ln); background:var(--sem-cinza-bg)}
/* ponto compacto, para as tabelas */
.farol-ponto{
display:inline-block; width:9px; height:9px; border-radius:50%;
box-shadow:0 0 0 2px var(--panel); vertical-align:-1px;
}
.farol-ponto.verde{background:var(--sem-verde)}
.farol-ponto.ambar{background:var(--sem-ambar)}
.farol-ponto.vermelho{background:var(--sem-vermelho)}
.farol-ponto.azul{background:var(--sem-azul)}
.farol-ponto.cinza{background:var(--sem-cinza)}
/* ---------- barra de liberação ---------- */
.liberacao{display:flex; flex-direction:column; gap:7px}
.liberacao .topo{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.liberacao .n{font-family:var(--font-mono); font-size:22px; font-weight:600; line-height:1}
.liberacao .r{font-size:12.5px; color:var(--txt-2); text-align:right}
.trilha{display:flex; height:7px; border-radius:4px; overflow:hidden; background:var(--panel-3); gap:1px}
.trilha i{display:block; height:100%; transition:width .25s}
.trilha .t-liberado{background:var(--sem-verde)}
.trilha .t-ajustar {background:var(--sem-ambar)}
.trilha .t-erro {background:var(--sem-vermelho)}
.trilha .t-alterado{background:var(--sem-azul)}
.trilha .t-pendente{background:var(--sem-cinza); opacity:.4}
/* ---------- legenda ---------- */
.legenda{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:11.5px; color:var(--txt-3)}
.legenda span{display:flex; align-items:center; gap:6px}
/* ---------- parágrafos coloridos ---------- */
.materia{display:flex; flex-direction:column; background:var(--bg)}
.para{
display:grid; grid-template-columns:5px 1fr; gap:0 16px;
border-bottom:1px solid var(--line); transition:background .12s;
}
.para:last-child{border-bottom:none}
/* A cor não fica só na faixa: o parágrafo inteiro ganha um fundo tingido,
para a matéria ser lida de longe como verde, âmbar ou vermelha. */
.para.liberado{background:linear-gradient(90deg,var(--sem-verde-bg),transparent 62%)}
.para.ajustar {background:linear-gradient(90deg,var(--sem-ambar-bg),transparent 62%)}
.para.erro {background:linear-gradient(90deg,var(--sem-vermelho-bg),transparent 62%)}
.para.alterado{background:linear-gradient(90deg,var(--sem-azul-bg),transparent 62%)}
.para:hover{filter:brightness(1.28)}
.para .faixa{background:var(--sem-cinza); opacity:.3}
.para.liberado .faixa{background:var(--sem-verde); opacity:1}
.para.ajustar .faixa{background:var(--sem-ambar); opacity:1}
.para.erro .faixa{background:var(--sem-vermelho); opacity:1;
box-shadow:0 0 10px rgba(226,74,62,.55)}
.para.alterado .faixa{background:var(--sem-azul); opacity:1}
.para.marcacao .faixa{background:var(--accent); opacity:.7}
.para .corpo{padding:14px 18px 14px 0; min-width:0}
.para .texto{
font-family:var(--font-mono); font-size:14.5px; line-height:1.85;
color:var(--txt); white-space:pre-wrap; overflow-wrap:anywhere;
}
.para.liberado .texto{color:var(--ok-txt)}
.para.erro .texto{color:var(--del-txt)}
.para.pendente .texto{color:var(--txt-2)}
.para.marcacao .texto{
font-size:12px; letter-spacing:.16em; color:var(--accent); text-transform:uppercase;
}
.para .pe{
display:flex; align-items:center; gap:8px; margin-top:9px; flex-wrap:wrap;
opacity:.32; transition:opacity .14s;
}
.para:hover .pe, .para.marcada .pe{opacity:1}
.para .quem{font-size:11.5px; color:var(--txt-4); margin-left:auto}
.para .nota-mark{
margin-top:8px; padding:6px 10px; border-left:2px solid var(--sem-ambar);
background:var(--panel-2); font-size:12.5px; color:var(--txt-2);
}
.para .erros-auto{
margin-top:7px; font-size:11.5px; color:var(--sem-vermelho);
display:flex; align-items:center; gap:6px;
}
/* botões do semáforo */
.bmark{
display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
border:1px solid var(--line-2); border-radius:2px; background:var(--panel-2);
font-size:10px; font-weight:600; letter-spacing:.005em; color:var(--txt-3); cursor:pointer; transition:all .12s;
}
.bmark::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.55}
.bmark:hover{border-color:var(--line-3); color:var(--txt-2)}
.bmark.v:hover,.bmark.v.on{color:var(--sem-verde); border-color:var(--sem-verde-ln); background:var(--sem-verde-bg)}
.bmark.a:hover,.bmark.a.on{color:var(--sem-ambar); border-color:var(--sem-ambar-ln); background:var(--sem-ambar-bg)}
.bmark.e:hover,.bmark.e.on{color:var(--onair-txt); border-color:var(--sem-vermelho-ln); background:var(--sem-vermelho-bg)}
.bmark.on::before{opacity:1}
/* =================================================================
Espelho do programa (rundown)
================================================================= */
:root{
--t-materia:var(--accent); --t-aovivo:var(--onair); --t-vt:var(--vt);
--t-vinheta:var(--warn); --t-intervalo:var(--info); --t-passagem:var(--ok);
--t-encerramento:var(--txt-3);
}
.tipo-ponto{display:inline-block; width:8px; height:8px; border-radius:2px}
.tipo-ponto.materia{background:var(--t-materia)} .tipo-ponto.aovivo{background:var(--t-aovivo)}
.tipo-ponto.vt{background:var(--t-vt)} .tipo-ponto.vinheta{background:var(--t-vinheta)}
.tipo-ponto.intervalo{background:var(--t-intervalo)} .tipo-ponto.passagem{background:var(--t-passagem)}
.tipo-ponto.encerramento{background:var(--t-encerramento)}
.tipo-selo{
display:inline-block; padding:1px 6px; border-radius:2px;
font-size:9px; font-weight:600;
letter-spacing:.005em; border:1px solid;
}
.tipo-selo.materia{color:var(--t-materia); border-color:var(--accent-ln); background:var(--accent-bg)}
.tipo-selo.aovivo{color:var(--onair-txt); border-color:var(--onair-ln); background:var(--onair-bg)}
.tipo-selo.vt{color:var(--vt-txt); border-color:var(--vt-ln); background:var(--vt-bg)}
.tipo-selo.vinheta{color:var(--t-vinheta); border-color:var(--warn-ln); background:var(--warn-bg)}
.tipo-selo.intervalo{color:var(--t-intervalo); border-color:var(--info-ln); background:var(--info-bg)}
.tipo-selo.passagem{color:var(--t-passagem); border-color:var(--ok-ln); background:var(--ok-bg)}
.tipo-selo.encerramento{color:var(--t-encerramento); border-color:var(--line-2); background:var(--neutro-bg)}
.opcao.tipo-materia.ligado{border-color:var(--t-materia); background:var(--accent-bg); color:var(--t-materia)}
.opcao.tipo-aovivo.ligado{border-color:var(--t-aovivo); background:var(--onair-bg); color:var(--onair-txt)}
.opcao.tipo-vt.ligado{border-color:var(--vt-ln); background:var(--vt-bg); color:var(--vt-txt)}
.opcao.tipo-vinheta.ligado{border-color:var(--t-vinheta); background:var(--warn-bg); color:var(--t-vinheta)}
.opcao.tipo-intervalo.ligado{border-color:var(--t-intervalo); background:var(--info-bg); color:var(--t-intervalo)}
.opcao.tipo-passagem.ligado{border-color:var(--t-passagem); background:var(--ok-bg); color:var(--t-passagem)}
.opcao.tipo-encerramento.ligado{border-color:var(--t-encerramento); background:var(--neutro-bg); color:var(--txt-2)}
.rundown{display:flex; flex-direction:column}
.linha{
display:grid; grid-template-columns:4px 34px 74px 1fr 74px 106px;
align-items:center; gap:0 12px; padding:0 16px 0 0;
border-bottom:1px solid var(--line); min-height:52px; transition:background .12s;
}
.linha:last-child{border-bottom:none}
.linha:hover{background:var(--panel-2)}
.faixa-tipo{align-self:stretch; background:var(--t-materia)}
.linha.tipo-aovivo .faixa-tipo{background:var(--t-aovivo)}
.linha.tipo-vt .faixa-tipo{background:var(--t-vt)}
.linha.tipo-vinheta .faixa-tipo{background:var(--t-vinheta)}
.linha.tipo-intervalo .faixa-tipo{background:var(--t-intervalo)}
.linha.tipo-passagem .faixa-tipo{background:var(--t-passagem)}
.linha.tipo-encerramento .faixa-tipo{background:var(--t-encerramento)}
.linha.tipo-intervalo{background:linear-gradient(90deg,var(--info-bg),transparent 55%)}
.linha .ordem{font-size:12px; color:var(--txt-4); text-align:center}
.linha .entrada{font-size:14px; color:var(--txt-2); font-weight:500}
.linha .corpo{min-width:0; padding:9px 0}
.linha .nome{display:block; font-size:14px; font-weight:500;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.linha .meta{display:flex; align-items:center; gap:7px; margin-top:3px;
font-size:11.5px; color:var(--txt-3); flex-wrap:wrap}
.linha .dur{font-size:14px; color:var(--txt); text-align:right; font-weight:500}
.linha .acoes-linha{display:flex; gap:5px; justify-content:flex-end; opacity:.3; transition:opacity .12s}
.linha:hover .acoes-linha{opacity:1}
.linha.emexecucao{background:linear-gradient(90deg,var(--onair-bg),transparent 60%)}
.linha.emexecucao .nome{color:var(--onair-txt)}
@media(max-width:820px){
.linha{grid-template-columns:4px 30px 1fr 66px; row-gap:6px}
.linha .entrada,.linha .acoes-linha{display:none}
}
/* =================================================================
Intervalo — regressiva para voltar ao ar
================================================================= */
.intervalo-mesa{
border:1px solid var(--t-intervalo); border-radius:var(--r);
background:linear-gradient(180deg,var(--info-bg),var(--panel));
padding:18px; display:flex; flex-direction:column; gap:13px; align-items:center;
}
.intervalo-mesa .rot{font-size:10px; font-weight:600;
letter-spacing:.005em; color:var(--t-intervalo)}
.intervalo-mesa .conta{
font-family:var(--font-mono); font-size:56px; font-weight:600; line-height:1;
font-variant-numeric:tabular-nums; letter-spacing:.01em; color:var(--txt);
}
.intervalo-mesa .conta.perto{color:var(--warn)}
.intervalo-mesa .conta.fim{color:var(--onair); animation:pulsa .8s ease-in-out infinite}
.intervalo-mesa .proximo{font-size:13px; color:var(--txt-2); text-align:center}
.intervalo-mesa .proximo b{color:var(--txt)}
/* tela de intervalo no display */
.palco.intervalo .texto-palco,
.palco.intervalo .linha-guia{display:none}
.tela-intervalo{
position:absolute; inset:0; z-index:25; display:none;
flex-direction:column; align-items:center; justify-content:center; gap:18px;
background:#000; text-align:center; padding:0 6vw;
}
.palco.intervalo .tela-intervalo{display:flex}
.tela-intervalo{gap:10px}
.tela-intervalo .rot{
font-family:var(--font-ui); font-size:clamp(38px,6.4vw,96px); font-weight:700;
letter-spacing:.24em; text-transform:uppercase; color:#4A9EDA; line-height:1;
text-indent:.24em; /* compensa o espaçamento na última letra */
}
.tela-intervalo .conta{
font-family:var(--font-mono); font-size:clamp(84px,15vw,210px); font-weight:700;
line-height:.95; color:#fff; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.tela-intervalo .volta{
font-size:clamp(13px,1.5vw,20px); font-weight:600;
letter-spacing:.005em; color:#7A8B98; margin-top:-6px;
}
/* O relógio geral do programa continua correndo — e à vista. */
.crono-programa{
margin-top:14px; display:flex; align-items:baseline; gap:12px;
padding:9px 22px; border:1px solid rgba(255,255,255,.16); border-radius:3px;
}
.crono-programa .rot-p{
font-size:clamp(11px,1.1vw,15px); font-weight:600;
letter-spacing:.005em; color:#7A8B98;
}
.crono-programa .valor-p{
font-size:clamp(26px,3.4vw,46px); font-weight:600; color:#fff;
font-variant-numeric:tabular-nums; line-height:1;
}
.tela-intervalo .conta.perto{color:#F2C14E}
.tela-intervalo .conta.fim{color:#FF5247; animation:pulsa .7s ease-in-out infinite}
.tela-intervalo .proximo{
font-size:clamp(20px,2.6vw,34px); color:#C9D6E0; max-width:24ch; line-height:1.35;
}
.tela-intervalo .proximo b{color:#fff; font-weight:600}
.tela-intervalo .barra{width:min(70vw,780px); height:6px; border-radius:3px;
background:rgba(255,255,255,.14); overflow:hidden}
.tela-intervalo .barra i{display:block; height:100%; background:#4A9EDA; transition:width 1s linear}
/* =================================================================
NO AR no display — o apresentador precisa saber, sem dúvida
================================================================= */
.palco.no-ar::after{
content:""; position:absolute; inset:0; z-index:12; pointer-events:none;
border:5px solid var(--onair);
box-shadow:inset 0 0 60px rgba(230,51,41,.30);
animation:respiraAr 2.6s ease-in-out infinite;
}
@keyframes respiraAr{50%{border-color:#7E1C16; box-shadow:inset 0 0 32px rgba(230,51,41,.14)}}
.tally-palco{
position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:22;
display:none; align-items:center; gap:11px; padding:7px 22px;
background:var(--onair); border-radius:3px;
font-family:var(--font-mono); font-size:clamp(14px,1.5vw,20px); font-weight:700;
letter-spacing:.3em; color:#fff; text-shadow:none;
}
.palco.no-ar .tally-palco{display:flex}
.tally-palco::before{
content:""; width:11px; height:11px; border-radius:50%; background:#fff;
animation:pulsa 1.1s ease-in-out infinite;
}
.palco.fora-do-ar .hud-esq .rot{color:#5F7080}
/* Anúncio de entrada no ar — some sozinho depois de alguns segundos */
.entrou-no-ar{
position:absolute; inset:0; z-index:60; display:none;
flex-direction:column; align-items:center; justify-content:center; gap:22px;
background:rgba(200,26,18,.97); text-align:center;
}
.entrou-no-ar.visivel{display:flex; animation:surgeAr .35s ease-out}
@keyframes surgeAr{from{opacity:0; transform:scale(1.06)}}
.entrou-no-ar .marca{
font-size:clamp(56px,13vw,180px); font-weight:700;
letter-spacing:.005em; color:#fff; line-height:1;
}
.entrou-no-ar .sub{font-size:clamp(18px,2.4vw,30px); color:rgba(255,255,255,.9)}
.entrou-no-ar .ponto{
width:26px; height:26px; border-radius:50%; background:#fff;
animation:pulsa .85s ease-in-out infinite;
}
/* =================================================================
Papéis — cartões e selos
================================================================= */
.papeis{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:12px; padding:14px}
.papel{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r);
padding:15px 17px; border-top:3px solid var(--line-2)}
.papel .topo{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.papel .nome{font-size:14px; font-weight:600}
.papel .qtd{font-size:19px; font-weight:600; color:var(--txt-3)}
.papel p{margin-top:6px; font-size:12.5px; color:var(--txt-3); line-height:1.5}
.papel-admin{border-top-color:var(--onair)} .papel-director{border-top-color:var(--warn)}
.papel-revisor{border-top-color:var(--ok)} .papel-editor{border-top-color:var(--accent)}
.papel-operator{border-top-color:var(--info)} .papel-presenter{border-top-color:var(--vt)}
.papel-selo{border-radius:var(--pill)}
.papel-selo.admin {color:var(--onair-txt); border-color:var(--onair-ln); background:var(--onair-bg)}
.papel-selo.director {color:var(--warn); border-color:var(--warn-ln); background:var(--warn-bg)}
.papel-selo.revisor {color:var(--ok-txt); border-color:var(--ok-ln); background:var(--ok-bg)}
.papel-selo.editor {color:var(--accent); border-color:var(--accent-ln); background:var(--accent-bg)}
.papel-selo.operator {color:var(--info); border-color:var(--info-ln); background:var(--info-bg)}
.papel-selo.presenter{color:var(--vt-txt); border-color:var(--vt-ln); background:var(--vt-bg)}
/* estado do relógio do programa, na mesa */
.rel-estado{
display:inline-flex; align-items:center; gap:5px; margin-left:6px;
font-size:9px; font-weight:600;
letter-spacing:.005em; color:var(--txt-4);
}
.rel-estado::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}
.rel-estado.correndo{color:var(--ok)}
.rel-estado.correndo::before{animation:pulsa 1.6s ease-in-out infinite}
/* =================================================================
Praça, tema e o roteiro do dia
Tudo abaixo funciona nos dois temas: as cores saem dos tokens.
================================================================= */
/* no tema claro o painel precisa de sombra; no escuro, de contraste */
.panel{box-shadow:var(--sombra)}
html[data-tema="escuro"] .panel{box-shadow:none}
html[data-tema="escuro"] .para:hover{filter:brightness(1.28)}
.para:hover{filter:brightness(.98)}
/* ---------- fita da praça na barra lateral ---------- */
.praca-fita{
display:flex; align-items:center; gap:9px; margin:0 12px 4px; padding:9px 11px;
border:1px solid var(--accent-ln); background:var(--accent-bg); border-radius:var(--r);
}
.praca-fita svg{width:15px; height:15px; color:var(--accent); flex-shrink:0}
.praca-fita b{display:block; font-size:12.5px; font-weight:600; line-height:1.2;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px}
.praca-fita i{display:block; font-style:normal; font-size:9.5px; letter-spacing:.005em; color:var(--txt-3)}
.praca-fita span{min-width:0; flex:1}
/* a mesma caixa, agora com o seletor dentro — o administrador troca de
praça no lugar onde já lia o nome dela */
.praca-fita.escolhe{cursor:pointer}
.praca-fita.escolhe:hover{border-color:var(--accent)}
/* Dentro da caixa da praça o campo não é uma caixa dentro de outra: é o
próprio nome da praça, que por acaso se pode trocar. Então a casca aqui
perde borda, fundo e recheio — fica só o texto e a setinha. */
.praca-fita.escolhe .sel{width:100%; min-width:0}
.praca-fita.escolhe .sel-gatilho{
border:0; background:none; padding:0; box-shadow:none; gap:6px;
font-size:12.5px; font-weight:600; line-height:1.25; color:var(--txt);
}
.praca-fita.escolhe .sel-gatilho:hover,
.praca-fita.escolhe .sel-gatilho:focus-visible,
.praca-fita.escolhe .sel.aberto .sel-gatilho{background:none; box-shadow:none; border:0}
.praca-fita.escolhe .sel-seta{width:12px; height:12px}
.praca-fita.escolhe select{
width:100%; border:0; background:none; padding:0; cursor:pointer;
font-size:12.5px; font-weight:600; line-height:1.25; color:var(--txt);
appearance:none; -webkit-appearance:none;
text-overflow:ellipsis;
}
.praca-fita.escolhe select:focus{outline:none}
.praca-fita.escolhe select option{color:var(--txt); background:var(--panel)}
/* modo leitura: a caixa deixa de ser verde e passa a avisar */
.praca-fita.lendo{border-color:var(--line-3); background:var(--panel-3)}
.praca-fita.lendo svg{color:var(--txt-3)}
.praca-fita.lendo i{color:var(--txt-2); font-weight:600}
/* o aviso na barra de cima, para não esquecer em que praça se está */
.fita-leitura{
display:inline-flex; align-items:center; gap:7px; padding:4px 10px;
border:1px solid var(--line-3); border-radius:var(--r); background:var(--panel-3);
font-size:11px; font-weight:600; letter-spacing:.005em;
color:var(--txt-2); white-space:nowrap;
}
.fita-leitura svg{width:14px; height:14px}
/* ---------- botão de tema ---------- */
.btn-tema{
display:inline-flex; align-items:center; justify-content:center;
width:30px; height:30px; padding:0; border:1px solid var(--line-2);
border-radius:var(--r); background:var(--panel-2); color:var(--txt-2); cursor:pointer;
transition:color .12s, border-color .12s, background .12s;
}
.btn-tema:hover{color:var(--txt); border-color:var(--line-3); background:var(--panel-3)}
.btn-tema svg{width:15px; height:15px; display:block}
.btn-tema .so-escuro{display:none}
html[data-tema="escuro"] .btn-tema .so-escuro{display:inline-flex}
html[data-tema="escuro"] .btn-tema .so-claro{display:none}
.login-topo{display:flex; justify-content:flex-end}
/* ---------- barra de escolha do roteiro ---------- */
.barra-roteiro{margin-bottom:14px}
.linha-escolha{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.rot-escolha{font-size:11px; font-weight:600; letter-spacing:.005em;
color:var(--txt-3); margin-right:-3px}
/* o select do programa cabe no seu tamanho: com width 100% ele empurrava
a data e o botão para a linha de baixo */
.linha-escolha select, .linha-escolha input{width:auto}
.linha-escolha #selPrograma{max-width:min(420px, 46vw)}
/* ---------- relógio da edição ---------- */
.kpis-roteiro{
display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:10px; padding:10px;
}
.kpis-roteiro > div{
background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r);
padding:15px 18px 16px;
display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center;
}
.kpis-roteiro .k{
font-size:9.5px; font-weight:600;
letter-spacing:.005em; color:var(--txt-3);
}
.kpis-roteiro .v{font-size:29px; font-weight:600; line-height:1; letter-spacing:-.02em}
.kpis-roteiro .v.folga{color:var(--info)}
.kpis-roteiro .v.ok{color:var(--ok)}
.kpis-roteiro .v.estouro{color:var(--onair)}
.kpis-roteiro .saldo{
font-family:var(--font-mono); font-size:11px; font-weight:600; padding:1px 7px;
border-radius:9px; border:1px solid var(--line-2); color:var(--txt-3);
}
.kpis-roteiro .saldo.estouro{color:var(--onair-txt); border-color:var(--onair-ln); background:var(--onair-bg)}
.kpis-roteiro .saldo.folga{color:var(--info-txt); border-color:var(--info-ln); background:var(--info-bg)}
.kpis-roteiro .saldo.ok{color:var(--ok-txt); border-color:var(--ok-ln); background:var(--ok-bg)}
/* ---------- bloco (BL 01, BL 02...) ---------- */
.bl{
background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
box-shadow:var(--sombra); margin-top:14px; overflow:hidden;
}
html[data-tema="escuro"] .bl{box-shadow:none}
.bl-cab{
display:flex; align-items:center; gap:12px; padding:11px 16px;
border-bottom:1px solid var(--line); background:var(--panel-2);
}
.bl-nome{
font-size:12.5px; font-weight:600;
letter-spacing:.005em; color:var(--txt);
padding:3px 7px; margin:-3px -7px; border-radius:3px; outline:none;
}
.bl-nome[contenteditable]:hover{background:var(--panel-3)}
.bl-nome[contenteditable]:focus{background:var(--panel); box-shadow:0 0 0 2px var(--accent-ln)}
.bl-inicio{font-size:11.5px; color:var(--txt-3)}
.bl-total{
font-size:13px; font-weight:600; padding:2px 9px; border-radius:9px;
background:var(--accent-bg); color:var(--accent-2); border:1px solid var(--accent-ln);
}
.bl-acoes{display:flex; gap:3px; opacity:.45; transition:opacity .12s}
.bl:hover .bl-acoes{opacity:1}
/* ---------- tabela de histórias ---------- */
.tab-roteiro{display:flex; flex-direction:column}
/* A ÚLTIMA COLUNA TEM QUE CABER OS BOTÕES.
São até quatro (abrir o texto, mandar ao display, editar, remover). Com a
coluna estreita demais eles transbordavam para a esquerda e caíam em cima
do tempo — é o defeito que a redação viu na tela. A largura abaixo é a
conta: 4 botões de 26px + 3 vãos de 3px. */
/* AS DUAS ÚLTIMAS COLUNAS SÃO 'auto', NÃO LARGURA FIXA.
Coluna fixa é o que fazia o tempo ser cortado e os botões caírem em cima
dele: bastava o conteúdo crescer um pixel — um botão maior, um tempo com
hora cheia — e ele transbordava. Com 'auto', a coluna mede o próprio
conteúdo e nunca fica menor que ele; quem cede espaço é a coluna da
história, que é elástica (1fr). */
/* arrasta · seleção · história · criador · total · botões
As duas últimas são 'auto': medem o próprio conteúdo e nunca deixam o
tempo ser coberto pelos botões. */
.tab-roteiro .tr{
display:grid;
grid-template-columns:30px 26px minmax(0,1fr) 140px auto auto;
align-items:center; gap:12px; padding:9px 16px; border-bottom:1px solid var(--line);
}
.tab-roteiro .tr:last-child{border-bottom:none}
.tab-roteiro .cabecalho{
background:var(--panel-2); padding:8px 16px;
font-size:9.5px; font-weight:600;
letter-spacing:.005em; color:var(--txt-3);
}
.tab-roteiro .dir{text-align:right}
.tab-roteiro .item{transition:background .1s}
.tab-roteiro .item:hover{background:var(--panel-2)}
/* ---------- arrastar a história ---------- */
/* A linha de origem fica fantasma no lugar: some o conteúdo, fica o vão.
Sem isso a lista pula de tamanho no meio do arrasto. */
.tab-roteiro .item.arrastando{opacity:.32; background:var(--panel-2)}
/* A cópia que segue o dedo. Fica fora do fluxo e não recebe ponteiro,
senão ela mesma taparia o alvo por baixo do cursor. */
.fantasma-arrasto{
position:fixed; z-index:900; pointer-events:none; margin:0;
background:var(--panel); border:1px solid var(--accent-ln);
border-radius:var(--r); box-shadow:0 12px 28px rgba(15,18,24,.18);
opacity:.96; transform:rotate(-.4deg);
}
.fantasma-arrasto .acoes-linha, .fantasma-arrasto .sel{visibility:hidden}
/* Onde a história vai cair. É uma linha só, grossa o bastante para se ver
de relance de pé na frente do monitor. */
.marca-solta{
height:0; border-top:3px solid var(--accent); position:relative;
margin:-1.5px 0; border-radius:2px;
}
.marca-solta::before{
content:""; position:absolute; left:12px; top:-4px;
width:8px; height:8px; border-radius:50%; background:var(--accent);
}
.bl.recebendo{outline:2px solid var(--accent-ln); outline-offset:2px; border-radius:var(--r-m)}
/* Enquanto se arrasta, nada de selecionar texto nem de zoom por gesto. */
body.arrastando-historia{user-select:none; -webkit-user-select:none; cursor:grabbing}
body.arrastando-historia .tab-roteiro .item{touch-action:none}
/* No dedo, o pegador é a alcinha: nela o navegador não rola a página
(touch-action:none), e no resto da linha o dedo continua rolando a tela
como em qualquer lista. No mouse a linha inteira arrasta. */
.tab-roteiro .item{touch-action:pan-y}
.tab-roteiro .arrasta{display:flex; color:var(--txt-4); cursor:grab; touch-action:none}
.tab-roteiro .item:not(.travada){cursor:grab}
.tab-roteiro .item:not(.travada) .nome b,
.tab-roteiro .item:not(.travada) button,
.tab-roteiro .item:not(.travada) input{cursor:pointer}
.tab-roteiro .item.travada .arrasta{cursor:not-allowed; color:var(--txt-4); opacity:.7}
.tab-roteiro .item.travada .nome b{color:var(--txt-2)}
.tab-roteiro .nome{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
/* O ponto do tipo, o check e a retranca andam juntos: quebrar entre eles
deixava a linha com três andares e a leitura do espelho é de relance. */
.tab-roteiro .nome > .tipo-ponto,
.tab-roteiro .nome > .check-historia{flex:none}
.tab-roteiro .nome b{font-size:13.5px; font-weight:500; min-width:0}
.tab-roteiro .marca-texto{
display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--accent-2);
border:1px solid var(--accent-ln); background:var(--accent-bg);
padding:1px 7px; border-radius:9px; max-width:280px; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap;
}
.tab-roteiro .marca-texto svg{width:11px; height:11px}
.tab-roteiro .nota{
font-style:normal; font-size:11.5px; color:var(--txt-3);
border-left:2px solid var(--line-2); padding-left:7px;
}
.tab-roteiro .quem{font-size:12px; color:var(--txt-2); overflow:hidden;
text-overflow:ellipsis; white-space:nowrap}
.tab-roteiro .sec{font-size:12.5px; color:var(--txt-3); white-space:nowrap}
.tab-roteiro .total{font-size:14px; font-weight:600; white-space:nowrap; min-width:78px}
/* Botão de ícone compacto: aqui a linha é densa e o botão de 32px do resto
do sistema não cabe. */
.tab-roteiro .acoes-linha{display:flex; gap:3px; justify-content:flex-end;
opacity:.25; transition:opacity .12s; min-width:0}
.tab-roteiro .acoes-linha .btn.icone{width:26px; height:26px; padding:0; flex:none}
.tab-roteiro .acoes-linha .btn.icone svg{width:13.5px; height:13.5px}
.tab-roteiro .item:hover .acoes-linha{opacity:1}
.tab-roteiro .confirmando{background:var(--onair-bg); border-color:var(--onair-ln); opacity:1}
.tab-roteiro .vazia .sem{font-size:12.5px; color:var(--txt-4); font-style:italic}
.tab-roteiro .pe{background:var(--panel-2); padding:7px 16px}
/* faixa de cor por tipo, como no espelho */
.tab-roteiro .item{border-left:3px solid transparent}
.tab-roteiro .item.tipo-materia{border-left-color:var(--t-materia)}
.tab-roteiro .item.tipo-aovivo{border-left-color:var(--t-aovivo)}
.tab-roteiro .item.tipo-vt{border-left-color:var(--t-vt)}
.tab-roteiro .item.tipo-vinheta{border-left-color:var(--t-vinheta)}
.tab-roteiro .item.tipo-intervalo{border-left-color:var(--t-intervalo)}
.tab-roteiro .item.tipo-passagem{border-left-color:var(--t-passagem)}
.tab-roteiro .item.tipo-encerramento{border-left-color:var(--t-encerramento)}
.acoes-fim{display:flex; gap:9px; margin-top:14px}
/* Antes de apertar de verdade, some a coluna CRIADOR — quem interessa no
espelho é quem MEXEU POR ÚLTIMO, e o criador continua na tela da matéria. */
@media(max-width:1100px){
/* some o Criador: o que interessa no espelho apertado é slug e tempo */
.tab-roteiro .tr{grid-template-columns:30px 26px minmax(0,1fr) auto auto}
.tab-roteiro .item > span:nth-child(4),
.tab-roteiro .cabecalho > span:nth-child(4){display:none}
}
@media(max-width:760px){
.tab-roteiro .tr{grid-template-columns:26px minmax(0,1fr) auto auto}
.tab-roteiro .item > span:nth-child(1),
.tab-roteiro .cabecalho > span:nth-child(1){display:none}
}
/* ---------- pedidos de cópia ---------- */
.trava-autoria{margin-bottom:14px; align-items:center}
.lista-pedidos{display:flex; flex-direction:column}
.pedido{
display:flex; align-items:center; gap:16px; padding:15px 18px;
border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.pedido:last-child{border-bottom:none}
.pedido-corpo{flex:1; min-width:220px}
.pedido-corpo h3{font-size:14px; font-weight:600}
.pedido .quem-pede{font-size:12px; color:var(--txt-3); margin-top:3px}
.pedido blockquote{
margin:9px 0 0; padding:7px 11px; background:var(--panel-2);
border-left:2px solid var(--accent); border-radius:0 var(--r) var(--r) 0;
font-size:12.5px; color:var(--txt-2); font-style:italic;
}
.pedido-acoes{display:flex; gap:8px}
/* etiqueta de cadeado dentro de um selo */
.selo .cad{display:inline-flex}
.selo .cad svg{width:11px; height:11px}
/* rótulo com caixa de marcar */
label.marca{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--txt-2); cursor:pointer}
label.marca input{width:auto}
/* ---------- ajustes finais dos dois temas ---------- */
/* A arte da entrada é sempre escura: é a "sala de controle" da marca,
e no tema claro ela ficava branco sobre branco. */
.login-arte{
background:linear-gradient(160deg,#0C1116,#111C22 60%,#0A1014);
border-right:1px solid #1B2A33; color:#E6EDF3;
}
.login-arte::after{
background-image:linear-gradient(#22333D 1px,transparent 1px),
linear-gradient(90deg,#22333D 1px,transparent 1px);
}
.login-arte .brand-name{color:#E6EDF3}
.login-arte .brand-name span{color:#7C8F9C}
.login-arte .brand-mark{border-color:#1F5B56; background:#10322F}
.login-arte .brand-mark svg{color:#46C8BE}
.login-lema em{color:#5FD8CD}
.login-arte .login-nota{color:#93A7B4}
.login-arte .login-rodape{color:#5F7480}
.login-form{background:var(--panel)}
/* ---- A foto da emissora na entrada ------------------------------
Fica DEPOIS do bloco de tema de propósito: logo acima, `.login-arte`
usa o atalho `background`, que zera a imagem. Se estas regras viessem
antes, a foto enviada pelo admin nunca apareceria.
O endereço da imagem chega pela variável --foto, escrita no HTML. */
.login-arte.com-foto{
/* O endereço da foto vem no atributo style da própria seção. Tentamos por
variável CSS e a imagem sumia: endereço relativo escrito DENTRO do .css
é resolvido a partir da pasta do .css (assets/css/), não da página. */
background-size:cover; background-position:center; background-repeat:no-repeat;
background-color:#05090C; border-right:none;
}
.login-arte.com-foto::after{opacity:.08}
/* Duas camadas entre a foto e o texto, e cada uma tem um trabalho.
1) A CORTINA lateral é fixa: escurece só a faixa da esquerda, onde o
lema mora, e deixa o lado direito da foto respirar. É ela que
garante texto legível mesmo com o véu no mínimo — foto de estúdio
é clara e movimentada, e legenda branca sobre ela some.
2) O VÉU é o controle do admin, por cima, para a foto inteira. */
.login-arte.com-foto::before{
content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
background:linear-gradient(90deg,rgba(5,9,12,.92) 0%,rgba(5,9,12,.78) 22%,
rgba(5,9,12,.45) 48%,rgba(5,9,12,.10) 78%,transparent 100%);
}
.login-veu{position:absolute; inset:0; z-index:0; pointer-events:none;
background:linear-gradient(105deg,rgba(5,9,12,.97) 0%,rgba(5,9,12,.72) 46%,rgba(5,9,12,.26) 100%)}
.login-arte.com-foto .login-lema,
.login-arte.com-foto .brand-name{color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.8)}
.login-arte.com-foto .brand-name span,
.login-arte.com-foto .login-nota{color:#DCE7EE; text-shadow:0 1px 12px rgba(0,0,0,.75)}
.login-arte.com-foto .login-rodape{color:#A8BAC6}
/* números à direita nas tabelas comuns */
table.tab th.dir, table.tab td.dir{text-align:right}
/* hora de início editável no próprio indicador */
.kpis-roteiro input[type=time]{
width:auto; text-align:center; font-family:var(--font-mono); font-size:26px;
font-weight:600; padding:2px 8px; border:1px solid transparent; background:transparent;
}
.kpis-roteiro input[type=time]:hover{border-color:var(--line-2); background:var(--panel-2)}
.kpis-roteiro input[type=time]:focus{border-color:var(--accent); background:var(--panel-2)}
/* os tipos de história cabem no diálogo sem estourar a caixa */
#fTipos{gap:6px}
#fTipos .opcao{padding:6px 10px; font-size:12.5px}
/* =================================================================
A caixa do sistema — aviso, confirmação e pergunta
Mesma peça em todas as telas, no tema do painel. O cartão entra com
um pulo curto e a marca é desenhada na hora: o olho acha o estado
(verde, vermelho, âmbar) antes de ler a frase.
================================================================= */
.caixa-sistema .alerta-cartao{
background:var(--panel); border:1px solid var(--line-2); border-radius:14px;
width:100%; max-width:410px; padding:30px 26px 0; text-align:center;
box-shadow:var(--sombra-2); overflow:hidden;
animation:pipoca .28s cubic-bezier(.2,1.25,.4,1);
}
.alerta-marca{width:82px; height:82px; margin:0 auto 17px}
.alerta-marca svg{width:82px; height:82px; display:block}
.alerta-marca .anel{
fill:none; stroke:currentColor; stroke-width:2.2; opacity:.32;
stroke-dasharray:145; stroke-dashoffset:145; animation:riscar .5s ease forwards;
}
.alerta-marca .risco{
fill:none; stroke:currentColor; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;
stroke-dasharray:60; stroke-dashoffset:60; animation:riscar .34s .26s ease forwards;
}
.alerta-marca .risco.atrasa{animation-delay:.42s}
.alerta-marca .risco.ponto{stroke-width:4.2; animation-delay:.5s}
.alerta-marca .m-ok{color:var(--ok)}
.alerta-marca .m-erro{color:var(--onair)}
.alerta-marca .m-atencao{color:var(--warn)}
.alerta-marca .m-info{color:var(--info)}
.alerta-marca .m-pergunta{color:var(--accent)}
/* Ação destrutiva usa o mesmo desenho do "atenção", mas em vermelho:
a cor tem de bater com o botão que vai apagar alguma coisa. */
.alerta-cartao.perigosa .alerta-marca svg{color:var(--onair)}
.alerta-cartao h3{font-size:19px; font-weight:600; letter-spacing:-.015em}
.alerta-texto{margin-top:10px; font-size:13.8px; line-height:1.55; color:var(--txt-2)}
.alerta-dica{
margin-top:14px; padding:9px 12px; text-align:left; font-size:12px; line-height:1.5;
color:var(--txt-3); background:var(--panel-2); border:1px solid var(--line);
border-left:2px solid var(--line-2); border-radius:0 8px 8px 0;
}
.alerta-campo{margin-top:17px; text-align:left}
.alerta-botoes{display:flex; gap:9px; justify-content:center; margin:23px 0 22px}
.alerta-botoes .btn{min-width:118px; justify-content:center; padding:9px 17px; border-radius:8px}
.alerta-tempo{height:3px; margin:0 -26px; background:var(--panel-3)}
.alerta-tempo i{display:block; height:100%; width:100%; background:var(--accent)}
.alerta-cartao.tipo-ok .alerta-tempo i{background:var(--ok)}
.alerta-cartao.tipo-erro .alerta-tempo i{background:var(--onair)}
.alerta-cartao.tipo-atencao .alerta-tempo i{background:var(--warn)}
.alerta-cartao.tipo-info .alerta-tempo i{background:var(--info)}
/* Na mesa, ao vivo: o mesmo cartão, sem escurecer o fundo. O operador
continua lendo o timecode e o espelho enquanto o aviso passa. */
.caixa-sistema.leve{background:transparent; backdrop-filter:none}
.caixa-sistema.leve .alerta-cartao{box-shadow:0 24px 60px -18px rgba(0,0,0,.55), 0 0 0 1px var(--line-2)}
@keyframes pipoca{from{opacity:0; transform:scale(.86) translateY(8px)} to{opacity:1; transform:none}}
@keyframes riscar{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
.caixa-sistema .alerta-cartao{animation:none}
.alerta-marca .anel,.alerta-marca .risco{animation:none; stroke-dashoffset:0}
.alerta-tempo i{transition:none !important}
}
/* =================================================================
O caminho da matéria e a mídia presa a ela
================================================================= */
/* ---------- trilho do fluxo (editor) ---------- */
.fluxo{
display:flex; align-items:center; gap:0; padding:11px 16px;
border-top:1px solid var(--line); background:var(--panel-2); flex-wrap:wrap;
}
.fluxo-passo{
display:inline-flex; align-items:center; gap:7px; padding:4px 10px;
border:1px solid var(--line-2); border-radius:99px; background:var(--panel);
color:var(--txt-4); font-size:12px; white-space:nowrap;
}
.fluxo-passo i{display:flex}
.fluxo-passo svg{width:13px; height:13px}
.fluxo-passo.feito{border-color:var(--ok-ln); background:var(--ok-bg); color:var(--ok-txt)}
.fluxo-passo.agora{border-color:var(--accent); background:var(--accent-bg); color:var(--accent-2); font-weight:600}
.fluxo-liga{flex:1; min-width:14px; height:2px; background:var(--line-2); margin:0 6px}
.fluxo-liga.feito{background:var(--ok-ln)}
/* ---------- mídia ---------- */
.midias{display:flex; flex-direction:column}
.midia{border-bottom:1px solid var(--line)}
.midia:last-child{border-bottom:none}
.midia-corpo{background:var(--bg); display:flex; justify-content:center}
.midia-corpo video,
.midia-corpo img{display:block; width:100%; max-height:230px; object-fit:contain; background:#000}
.midia-corpo audio{width:100%; padding:10px 14px}
.midia-pe{display:flex; align-items:center; gap:9px; padding:8px 14px}
.midia-pe .mt{
display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500;
min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.midia-pe .mt svg{width:13px; height:13px; color:var(--txt-3); flex-shrink:0}
.midia-pe .mi{
margin-left:auto; font-family:var(--font-mono); font-size:10.5px;
color:var(--txt-4); white-space:nowrap;
}
.midia.video .mt svg{color:var(--vt)}
.midia.imagem .mt svg{color:var(--info)}
.midia.instagram .mt svg{color:var(--onair)}
.cartao-link{
display:flex; align-items:center; gap:11px; padding:13px 14px; width:100%;
background:var(--panel-2); transition:background .12s;
}
.cartao-link:hover{background:var(--panel-3)}
.cartao-link .ci{
width:34px; height:34px; flex-shrink:0; border-radius:9px; display:grid; place-items:center;
background:var(--onair-bg); border:1px solid var(--onair-ln); color:var(--onair);
}
.cartao-link .ct{min-width:0; display:flex; flex-direction:column}
.cartao-link .ct b{font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cartao-link .ct i{
font-style:normal; font-size:11px; color:var(--txt-4);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:38ch;
}
.cartao-link .cb{
margin-left:auto; font-size:10px; font-weight:600;
letter-spacing:.005em; color:var(--accent-2);
border:1px solid var(--accent-ln); background:var(--accent-bg);
padding:3px 9px; border-radius:99px; white-space:nowrap;
}
/* barra de envio */
.envio{padding:10px 16px; border-bottom:1px solid var(--line); background:var(--panel-2)}
.envio-barra{height:5px; border-radius:3px; background:var(--panel-3); overflow:hidden}
.envio-barra i{display:block; height:100%; background:var(--accent); transition:width .2s}
.envio-txt{
display:block; margin-top:6px; font-family:var(--font-mono); font-size:10.5px;
color:var(--txt-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* ---------- selo do estado da matéria nas listas do espelho ---------- */
.estado-materia{
display:inline-flex; align-items:center; gap:5px; padding:1px 8px; border-radius:99px;
border:1px solid var(--line-2); background:var(--panel-2);
font-size:9.5px; font-weight:600;
letter-spacing:.005em; color:var(--txt-3); white-space:nowrap;
}
.estado-materia::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor}
.estado-materia.draft {color:var(--txt-3)}
.estado-materia.review {color:var(--warn-txt); border-color:var(--warn-ln); background:var(--warn-bg)}
.estado-materia.approved{color:var(--ok-txt); border-color:var(--ok-ln); background:var(--ok-bg)}
.estado-materia.final {color:var(--info-txt); border-color:var(--info-ln); background:var(--info-bg)}
.estado-materia.sem {color:var(--txt-4); border-style:dashed}
.tem-midia{
display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--txt-3);
}
.tem-midia svg{width:12px; height:12px}
/* O cartão de link já mostra o nome; o rodapé só existiria para repetir. */
.midia.instagram .midia-pe .mt,
.midia.link .midia-pe .mt{display:none}
.midia.instagram .midia-pe,
.midia.link .midia-pe{justify-content:flex-end; padding-top:4px}
.midia.instagram .midia-pe:not(:has(button)),
.midia.link .midia-pe:not(:has(button)){display:none}
/* =================================================================
Automático da mesa e o espelho no display
================================================================= */
/* ---------- chave liga/desliga ---------- */
.chave{display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
padding-right:11px; margin-right:3px; border-right:1px solid var(--line)}
.chave input{position:absolute; opacity:0; width:0; height:0}
.chave .pista{
width:34px; height:19px; border-radius:99px; background:var(--panel-3);
border:1px solid var(--line-2); position:relative; transition:background .15s, border-color .15s;
}
.chave .pista i{
position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%;
background:var(--txt-3); transition:transform .15s, background .15s;
}
.chave input:checked + .pista{background:var(--accent-bg); border-color:var(--accent)}
.chave input:checked + .pista i{transform:translateX(15px); background:var(--accent)}
.chave input:focus-visible + .pista{outline:2px solid var(--accent); outline-offset:2px}
.chave-rot{font-size:10px; font-weight:600;
letter-spacing:.005em; color:var(--txt-3)}
.chave input:checked ~ .chave-rot{color:var(--accent-2)}
/* fita do automático, logo abaixo do cabeçalho do espelho */
.fita-auto{
display:flex; align-items:center; gap:9px; padding:7px 16px;
background:var(--accent-bg); border-bottom:1px solid var(--accent-ln);
font-size:11px; letter-spacing:.005em; color:var(--accent-2);
}
.fita-auto .ponto{
width:7px; height:7px; border-radius:50%; background:var(--accent);
animation:pulsa 1.6s ease-in-out infinite;
}
/* ---------- display: bloco no ar e o que vem depois ----------
Cores fixas de propósito: o display é sempre preto, em qualquer tema. */
/* Nada no palco é selecionável: um clique no display não pode deixar
texto marcado em azul na frente do apresentador. */
.palco, .palco *{user-select:none}
.bloco-agora{
display:flex; align-items:baseline; gap:10px; margin-top:9px;
padding-top:9px; border-top:1px solid rgba(255,255,255,.14);
}
.bloco-agora .nome-bloco{
font-size:15px; font-weight:600; color:#8FE6DE; letter-spacing:.04em;
text-transform:uppercase; max-width:30ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bloco-agora .conta{font-size:15px; color:#C9D6E0}
.bloco-agora .conta.fim{color:#F2C14E}
.bloco-agora .conta.estourou{color:#FF6B60}
.bloco-prox{
margin-top:4px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#7A8B98;
max-width:46ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* cartão do bloco sem texto — VT, vinheta, passagem */
.palco.em-cartao .texto-palco,
.palco.em-cartao .linha-guia{display:none}
.cartao-bloco{
/* z-index abaixo do HUD (20 é o HUD): o NO AR, o bloco e o relógio do
programa continuam à vista por cima do cartão. */
position:absolute; inset:0; z-index:15; display:flex;
flex-direction:column; align-items:center; justify-content:center; gap:16px;
background:#000; text-align:center; padding:0 6vw;
}
.cartao-bloco[hidden]{display:none !important}
.cartao-bloco .tipo{
font-size:clamp(13px,1.5vw,18px); font-weight:600;
letter-spacing:.005em; color:#8FE6DE;
border:1px solid rgba(143,230,222,.45); border-radius:99px; padding:7px 22px;
}
.cartao-bloco b{
font-size:clamp(34px,5.5vw,86px); font-weight:700; line-height:1.05; color:#fff;
letter-spacing:-.01em; max-width:22ch;
}
.cartao-bloco .conta{font-size:clamp(30px,4vw,58px); color:#C9D6E0; font-weight:600}
.cartao-bloco .conta.fim{color:#F2C14E}
.cartao-bloco .conta.estourou{color:#FF5247; animation:pulsa .9s ease-in-out infinite}
.cartao-bloco .prox{
font-size:clamp(15px,1.8vw,22px); color:#7A8B98; letter-spacing:.06em; text-transform:uppercase;
}
.cartao-bloco .prox b{font-size:inherit; color:#C9D6E0; font-weight:600}
/* =================================================================
Recados do WhatsApp — a tela do apresentador
Feita para TV de toque: alvo grande, texto grande, nada de hover.
================================================================= */
body.tela-recados{
min-height:100vh; display:flex; flex-direction:column;
background:var(--bg); overflow-x:hidden;
}
.recados-topo{
display:flex; align-items:center; gap:22px; padding:14px 26px;
background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap;
position:sticky; top:0; z-index:30; box-shadow:var(--sombra);
}
.marca-emissora{display:flex; align-items:center; gap:13px; min-width:0}
.marca-emissora img{max-height:52px; max-width:190px; object-fit:contain; display:block}
.marca-emissora .brand-mark{width:44px; height:44px}
.marca-emissora .brand-mark svg{width:24px; height:24px}
.marca-emissora .quem{display:flex; flex-direction:column; min-width:0}
.marca-emissora .quem b{font-size:16px; font-weight:600; line-height:1.2;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34ch}
.marca-emissora .quem i{font-style:normal; font-size:11px;
letter-spacing:.005em; color:var(--txt-3)}
.recados-titulo{
display:flex; align-items:center; gap:11px; margin:0 auto;
font-size:19px; font-weight:600; letter-spacing:-.01em;
}
.recados-titulo svg{width:26px; height:26px; color:#25D366}
.conta-novas{
font-size:12px; font-weight:600; letter-spacing:.005em; padding:3px 11px; border-radius:99px;
background:var(--ok-bg); border:1px solid var(--ok-ln); color:var(--ok-txt);
}
.recados-acoes{display:flex; align-items:center; gap:11px}
/* alvos de toque: nada abaixo de 46px de altura */
.btn.grande{padding:13px 20px; font-size:15px; border-radius:9px; min-height:50px}
.btn.grande svg{width:19px; height:19px}
select.grande{padding:12px 34px 12px 14px; font-size:15px; min-height:50px; width:auto; min-width:210px}
.tela-recados .btn-tema{width:50px; height:50px}
.tela-recados .btn-tema svg{width:20px; height:20px}
/* ---------- o painel: lista à esquerda, conversa à direita ---------- */
.wa-painel{
flex:1; min-height:0; display:grid; grid-template-columns:min(380px,32vw) 1fr;
overflow:hidden;
}
/* ---------- coluna da esquerda: as conversas ---------- */
.wa-lista{
display:flex; flex-direction:column; min-height:0; min-width:0;
background:var(--panel); border-right:1px solid var(--line);
}
.wa-busca{
display:flex; align-items:center; gap:10px; padding:14px 16px;
border-bottom:1px solid var(--line); flex-shrink:0;
}
.wa-busca svg{width:19px; height:19px; color:var(--txt-3); flex-shrink:0}
.wa-busca input{
flex:1; min-width:0; border:0; background:transparent; padding:8px 0;
font-size:15.5px; color:var(--txt); font-family:inherit;
}
.wa-busca input:focus{outline:none}
.wa-busca input::placeholder{color:var(--txt-3)}
.wa-conversas{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
display:flex; flex-direction:column; gap:4px; padding:8px}
.conversa-item{
width:100%; display:flex; align-items:center; gap:13px; text-align:left;
padding:12px 14px; border:1px solid transparent; border-radius:var(--r);
background:transparent; color:inherit; font:inherit; cursor:pointer;
justify-content:flex-start; overflow:hidden; min-height:72px;
transition:background .14s, border-color .14s;
}
.conversa-item.aberta{background:var(--accent-bg); border-color:var(--accent-ln)}
.conversa-item.no-ar{order:-1}
.conversa-item.no-ar:not(.aberta){background:var(--ok-bg); border-color:var(--ok-ln)}
.conversa-item .wa-txt{display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; overflow:hidden}
.conversa-item .wa-l1{display:flex; align-items:baseline; gap:9px; min-width:0; width:100%}
.conversa-item .wa-l1 b{
font-size:16px; font-weight:600; line-height:1.2; flex:1; min-width:0;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.conversa-item .wa-l1 i{
font-style:normal; font-family:var(--font-mono); font-size:11px;
color:var(--txt-3); flex-shrink:0;
}
.conversa-item .wa-l2{display:flex; align-items:center; gap:9px; min-width:0; width:100%}
.conversa-item .wa-previa{
flex:1; min-width:0; font-size:13.5px; color:var(--txt-3); line-height:1.3;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.conversa-item .wa-previa svg{width:14px; height:14px; vertical-align:-2px}
.bolinha{
flex-shrink:0; min-width:22px; height:22px; padding:0 6px; border-radius:99px;
display:grid; place-items:center; font-family:var(--font-mono); font-size:11.5px;
font-weight:600; background:var(--accent); color:#fff;
}
.selo-ar{
flex-shrink:0; display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
font-size:10.5px; font-weight:600; letter-spacing:.14em;
text-transform:uppercase; padding:4px 9px; border-radius:99px;
background:var(--ok-bg); border:1px solid var(--ok-ln); color:var(--ok-txt);
}
.selo-ar svg{width:12px; height:12px}
.retrato{
width:52px; height:52px; border-radius:50%; flex-shrink:0; overflow:hidden;
border:1px solid var(--line-2); background:var(--panel-3);
display:grid; place-items:center; font-size:17px; font-weight:600; color:var(--txt-2);
}
.retrato img{width:100%; height:100%; object-fit:cover; display:block}
.wa-lista .vazio{margin:auto; padding:30px 22px}
/* ---------- coluna da direita: a conversa aberta ---------- */
.wa-conversa{
display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--bg);
}
.wa-nada{
margin:auto; display:flex; flex-direction:column; align-items:center; gap:9px;
text-align:center; padding:30px; color:var(--txt-3);
}
.wa-nada svg{width:52px; height:52px; opacity:.35; margin-bottom:5px}
.wa-nada p{margin:0; font-size:18px; font-weight:600; color:var(--txt-2)}
.wa-nada span{font-size:14px; max-width:38ch; line-height:1.5}
.wa-nada[hidden]{display:none !important}
.wa-cab{
display:flex; align-items:center; gap:13px; padding:13px 20px; flex-shrink:0;
background:var(--panel); border-bottom:1px solid var(--line);
}
.wa-cab .dados{display:flex; flex-direction:column; min-width:0; flex:1}
.wa-cab .dados b{font-size:18px; font-weight:600; line-height:1.25;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wa-cab .dados i{font-style:normal; font-size:12.5px; color:var(--txt-3)}
.wa-cab .cab-acoes{display:flex; gap:9px; flex-shrink:0}
.wa-cab[hidden]{display:none !important}
.wa-bolhas{
flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
padding:22px 26px; display:flex; flex-direction:column; gap:13px; align-items:flex-start;
}
.wa-bolhas[hidden]{display:none !important}
.bolha{
max-width:min(680px,82%); background:var(--panel); border:1px solid var(--line);
border-radius:14px 14px 14px 4px; padding:13px 16px; cursor:pointer;
box-shadow:var(--sombra); transition:border-color .15s, box-shadow .15s;
display:flex; flex-direction:column; gap:9px; text-align:left;
}
/* Esta tela vai ao ar e é lida de longe: o recado nasce grande, e um toque
nele abre maior ainda. */
.bolha p{
margin:0; font-size:var(--tam-recado, 21px); line-height:1.45; color:var(--txt);
white-space:pre-wrap; word-break:break-word;
}
/* o botão A− / A+ do alto da tela */
.tamanho-recado{display:flex; align-items:center; gap:6px}
.tamanho-recado .btn{padding:6px 12px; font-weight:650}
.tamanho-recado b{font-family:var(--font-mono); font-size:12px; color:var(--txt-3); min-width:22px; text-align:center}
.bolha{position:relative}
.bolha::after{
content:"toque para ler grande"; position:absolute; right:14px; bottom:-9px;
font-size:10.5px; color:var(--txt-4); background:var(--bg); padding:0 6px;
border-radius:var(--pill); opacity:0; transition:opacity .14s; pointer-events:none;
}
.bolha:hover::after{opacity:1}
.bolha .bolha-foto{
border-radius:9px; overflow:hidden; background:var(--bg); border:1px solid var(--line);
}
.bolha .bolha-foto img{display:block; width:100%; max-height:320px; object-fit:contain}
.bolha .pe-bolha{display:flex; align-items:center; gap:9px; margin-left:auto}
.bolha .pe-bolha time{font-family:var(--font-mono); font-size:11px; color:var(--txt-3)}
.bolha.escolhida{
border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-ln), var(--sombra);
}
.bolha.no-ar{border-color:var(--ok); background:var(--ok-bg)}
.bolha.no-ar.escolhida{box-shadow:0 0 0 2px var(--ok-ln), var(--sombra)}
.wa-pe{
display:flex; align-items:center; gap:16px; flex-shrink:0; flex-wrap:wrap;
padding:14px 20px; background:var(--panel); border-top:1px solid var(--line);
}
.wa-pe[hidden]{display:none !important}
.wa-pe .escolhida{
flex:1; min-width:200px; font-size:15px; color:var(--txt-2); line-height:1.4;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.wa-pe .pe-botoes{display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0}
/* ---------- leitura grande ----------
Esta tela vai ao ar. O texto ocupa a tela inteira, com o nome e o retrato
de quem escreveu no alto, e a letra cresce quando o recado é curto. */
.wa-leitura{
position:fixed; inset:0; z-index:60; background:var(--bg);
display:flex; flex-direction:column;
}
.wa-leitura[hidden]{display:none !important}
.leitura-cab{
display:flex; align-items:center; gap:16px; flex-shrink:0;
padding:18px 26px; border-bottom:1px solid var(--line); background:var(--panel);
}
.leitura-cab .dados{display:flex; flex-direction:column; gap:3px; min-width:0}
.leitura-cab .dados b{font-size:24px; font-weight:650; line-height:1.15}
.leitura-cab .dados i{font-style:normal; font-size:14px; color:var(--txt-3)}
.leitura-cab .leitura-acoes{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}
.retrato.grande{width:74px; height:74px; font-size:24px}
.leitura-corpo{
flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:22px; padding:38px 6vw;
}
.leitura-foto{
max-width:min(560px, 70vw); max-height:42vh; border-radius:var(--r);
border:1px solid var(--line-2); object-fit:contain;
}
.leitura-foto[hidden]{display:none !important}
.leitura-texto{
margin:0; text-align:center; color:var(--txt); line-height:1.3;
font-weight:600; letter-spacing:-.01em; max-width:22ch; overflow-wrap:anywhere;
}
.leitura-texto[hidden]{display:none !important}
.leitura-texto.gigante{font-size:clamp(34px, 7.4vw, 96px)}
.leitura-texto.grande {font-size:clamp(28px, 5.2vw, 68px); max-width:26ch}
.leitura-texto.media {font-size:clamp(23px, 3.4vw, 46px); max-width:34ch; line-height:1.35}
.leitura-texto.corrida{font-size:clamp(19px, 2.2vw, 30px); max-width:52ch; line-height:1.45;
text-align:left; font-weight:500}
.leitura-pe{
display:flex; align-items:center; justify-content:space-between; gap:14px; flex-shrink:0;
padding:14px 26px; border-top:1px solid var(--line); background:var(--panel);
}
.leitura-conta{font-family:var(--font-mono); font-size:13px; color:var(--txt-3)}
.leitura-pe .btn[disabled]{opacity:.35; pointer-events:none}
@media(max-width:700px){
.leitura-cab{padding:14px 16px; gap:12px}
.leitura-cab .dados b{font-size:19px}
.retrato.grande{width:56px; height:56px; font-size:19px}
.leitura-corpo{padding:24px 20px}
.leitura-pe{padding:12px 16px}
}
@media(max-width:900px){
.wa-painel{grid-template-columns:1fr; grid-template-rows:minmax(0,38vh) minmax(0,1fr)}
.wa-lista{border-right:0; border-bottom:1px solid var(--line)}
.wa-bolhas{padding:16px 14px}
.bolha{max-width:100%}
}
@media(max-width:700px){
.recados-topo{gap:12px; padding:12px 16px}
.recados-titulo{order:3; width:100%; justify-content:center; margin:0}
}
/* ---------- ponte do WhatsApp, na tela de praças ---------- */
.chave-ponte{
display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:12.5px;
background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r);
padding:9px 12px; word-break:break-all;
}
.chave-ponte code{flex:1; min-width:0; color:var(--txt-2)}
/* ---------- recado do WhatsApp no display ----------
Rodapé do palco, cores fixas: o display é sempre preto. */
.recado-display{
position:absolute; left:50%; transform:translateX(-50%); bottom:3.5vh; z-index:22;
width:min(1180px, 88vw); display:flex; align-items:center; gap:20px;
padding:18px 24px; border-radius:16px;
background:rgba(10,16,20,.94); border:1px solid rgba(37,211,102,.55);
box-shadow:0 20px 60px -20px rgba(0,0,0,.9);
}
.recado-display[hidden]{display:none !important}
.recado-display .marca{
position:absolute; top:-13px; left:24px; display:inline-flex; align-items:center; gap:7px;
font-size:11px; font-weight:600; letter-spacing:.2em;
text-transform:uppercase; color:#0A1014; background:#25D366;
padding:4px 12px; border-radius:99px;
}
.recado-display .marca svg{width:13px; height:13px}
.recado-display .retrato{
width:74px; height:74px; flex-shrink:0; border-radius:50%; overflow:hidden;
background:#1B2A33; border:2px solid rgba(37,211,102,.55);
display:grid; place-items:center; font-size:26px; font-weight:600; color:#8FE6DE;
}
.recado-display .retrato img{width:100%; height:100%; object-fit:cover; display:block}
.recado-display .conteudo{display:flex; flex-direction:column; gap:5px; min-width:0; flex:1}
.recado-display .conteudo b{font-size:clamp(17px,1.5vw,22px); color:#8FE6DE; font-weight:600}
.recado-display .conteudo span{
font-size:clamp(20px,2.1vw,32px); line-height:1.35; color:#fff; font-weight:600;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.recado-display .foto{flex-shrink:0; width:120px; height:90px; border-radius:10px; overflow:hidden;
background:#000; border:1px solid rgba(255,255,255,.18)}
.recado-display .foto img{width:100%; height:100%; object-fit:cover; display:block}
.recado-display .foto[hidden]{display:none !important}
/* =================================================================
AGENDA, PAUTAS, OFFs E "MEU DIA"
================================================================= */
/* ---------- grade da semana ---------- */
.grade-semana{
display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:10px; align-items:start;
}
.dia-col{
background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
display:flex; flex-direction:column; min-width:0; overflow:hidden;
}
.dia-col.fds{background:var(--panel-2)}
.dia-col.hoje{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset}
.dia-cab{
display:flex; align-items:baseline; gap:7px; padding:10px 12px;
border-bottom:1px solid var(--line); background:var(--panel-2);
}
.dia-col.hoje .dia-cab{background:var(--ok-bg)}
.dia-cab b{font-size:12.5px; font-weight:650}
.dia-cab i{font-style:normal; font-family:var(--font-mono); font-size:11.5px; color:var(--txt-3)}
.selo-hoje{
margin-left:auto; font-size:9.5px; font-weight:700; letter-spacing:.005em;
color:var(--ok-txt);
}
.dia-corpo{display:flex; flex-direction:column; gap:7px; padding:9px; min-height:120px}
.dia-vazio{margin:auto; font-size:11.5px; color:var(--txt-4); text-align:center}
.dia-mais{margin-top:auto; justify-content:center; opacity:.55}
.dia-col:hover .dia-mais{opacity:1}
.ev{
display:flex; flex-direction:column; gap:3px; padding:8px 9px; cursor:pointer;
background:var(--panel-2); border:1px solid var(--line); border-left-width:3px;
border-left-color:var(--accent); border-radius:var(--r); min-width:0;
}
.ev:hover{border-color:var(--line-3); border-left-color:var(--accent)}
.ev.sit-confirmado{border-left-color:var(--ok)}
.ev.sit-cancelado{border-left-color:var(--txt-4); opacity:.5; text-decoration:line-through}
.ev.sit-coberto{border-left-color:var(--info)}
.ev-hora{font-size:11px; color:var(--txt-3); font-family:var(--font-mono)}
.ev-titulo{font-size:12.5px; line-height:1.3; font-weight:600; overflow-wrap:anywhere}
.ev-local{display:flex; align-items:center; gap:4px; font-size:11px; color:var(--txt-3); overflow-wrap:anywhere}
.ev-local svg{width:11px; height:11px; flex:none}
.ev-pe{display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin-top:2px}
.ev-tipo{font-size:10px; letter-spacing:.005em; color:var(--txt-4)}
.ev-quem{font-size:10.5px; color:var(--txt-2); background:var(--panel-3);
border-radius:99px; padding:1px 7px}
@media(max-width:1200px){ .grade-semana{grid-template-columns:repeat(4, minmax(0,1fr))} }
@media(max-width:820px){ .grade-semana{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media(max-width:520px){ .grade-semana{grid-template-columns:1fr} }
/* ---------- pautas ---------- */
.painel-pautas{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:14px; align-items:start}
@media(max-width:1050px){ .painel-pautas{grid-template-columns:1fr} }
/* Itens de lista são cartões com ar em volta, não faixas separadas por fio.
A prioridade vira um filete arredondado na esquerda do cartão. */
.lista-pautas{display:flex; flex-direction:column; gap:8px; padding:12px; max-height:66vh; overflow:auto}
.pauta{
display:flex; flex-direction:column; gap:6px; padding:13px 15px; cursor:pointer;
border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2);
border-left:3px solid var(--line-2); transition:background .14s, border-color .14s;
}
.pauta:hover{background:var(--panel-3); border-color:var(--line-2)}
.pauta.aberta{background:var(--accent-bg); border-color:var(--accent-ln); border-left-color:var(--accent)}
.pauta.pri-alta{border-left-color:var(--info)}
.pauta.pri-urgente{border-left-color:var(--onair)}
.pauta-l1{display:flex; align-items:center; gap:9px; justify-content:space-between}
.pauta-l1 b{font-size:13.5px; font-weight:620; overflow-wrap:anywhere}
.pauta-l2{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:11.5px; color:var(--txt-3)}
.pauta-dia.atrasada{color:var(--onair-txt); font-weight:600}
.pauta-quem{color:var(--txt-2)}
.pauta-quem.sem{color:var(--txt-4); font-style:italic}
.pauta-origem, .pauta-materia, .pauta-recados{
background:var(--panel-3); border-radius:99px; padding:1px 8px; font-size:10.5px; color:var(--txt-2);
}
.pauta-briefing{margin:0; font-size:12px; color:var(--txt-3); line-height:1.45;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.selo-pri{font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
padding:1px 7px; border-radius:99px}
.selo-pri.alta{background:var(--info-bg); color:var(--info-txt)}
.selo-pri.urgente{background:var(--onair-bg); color:var(--onair-txt)}
/* ---------- a conversa da pauta ---------- */
.painel-conversa{display:flex; flex-direction:column; max-height:74vh}
.conversa-corpo{flex:1; min-height:220px; overflow:auto}
.conv-nada{display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:8px; padding:44px 24px; text-align:center; color:var(--txt-3)}
.conv-nada svg{width:26px; height:26px; color:var(--txt-4)}
.conv-nada p{margin:0; font-size:13.5px}
.conv-nada span{font-size:12px; color:var(--txt-4); max-width:34ch}
.conv-recados{display:flex; flex-direction:column; gap:9px; padding:14px}
.conv-vazio{margin:0; padding:18px 4px; font-size:12.5px; color:var(--txt-4); text-align:center}
.conv-briefing{
background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r);
padding:11px 13px; display:flex; flex-direction:column; gap:6px;
}
.conv-briefing .k{font-size:10px; font-weight:700; letter-spacing:.005em; color:var(--txt-4)}
.conv-briefing p{margin:0; font-size:13px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere}
.conv-origem{font-size:11.5px; color:var(--txt-3)}
.conv-briefing .btn{align-self:flex-start; margin-top:2px}
.recado{
background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r);
padding:9px 12px; max-width:88%; align-self:flex-start;
}
.recado.meu{align-self:flex-end; background:var(--ok-bg); border-color:var(--ok-ln)}
.recado-cab{display:flex; gap:9px; align-items:baseline; justify-content:space-between; margin-bottom:3px}
.recado-cab b{font-size:11.5px; font-weight:650}
.recado-cab time{font-size:10.5px; color:var(--txt-4); font-family:var(--font-mono)}
.recado p{margin:0; font-size:13px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere}
.conv-escrever{display:flex; gap:10px; align-items:flex-end; border-top:1px solid var(--line)}
.conv-escrever textarea{flex:1; resize:vertical; min-height:44px}
/* ---------- offs ---------- */
.painel-offs{display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:14px; align-items:start}
@media(max-width:1050px){ .painel-offs{grid-template-columns:1fr} }
.lista-offs{display:flex; flex-direction:column; gap:8px; padding:12px; max-height:70vh; overflow:auto}
.off-item{
display:flex; flex-direction:column; gap:6px; padding:13px 15px; cursor:pointer;
border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2);
transition:background .14s, border-color .14s;
}
.off-item:hover{background:var(--panel-3); border-color:var(--line-2)}
.off-item.aberto{background:var(--accent-bg); border-color:var(--accent-ln)}
.off-l1{display:flex; align-items:center; gap:9px; justify-content:space-between}
.off-l1 b{font-size:13.5px; font-weight:620; overflow-wrap:anywhere}
.off-l2{display:flex; flex-wrap:wrap; gap:8px; font-size:11.5px; color:var(--txt-3)}
.off-materia{color:var(--txt-2)}
.off-anexos{background:var(--panel-3); border-radius:99px; padding:1px 8px; font-size:10.5px}
.off-previa{margin:0; font-size:12px; color:var(--txt-3); line-height:1.45;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.off-nada{display:flex; flex-direction:column; align-items:center; gap:9px;
padding:46px 24px; text-align:center; color:var(--txt-3)}
.off-nada svg{width:26px; height:26px; color:var(--txt-4)}
.anexos{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px}
.anexo{
display:flex; gap:10px; align-items:center; padding:8px; min-width:0;
background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r);
}
.anexo-capa{
width:52px; height:52px; border-radius:var(--r); overflow:hidden; flex:none;
display:grid; place-items:center; background:var(--panel-3); border:1px solid var(--line);
font-family:var(--font-mono); font-size:11px; color:var(--txt-3);
}
.anexo-capa img{width:100%; height:100%; object-fit:cover; display:block}
.anexo-txt{display:flex; flex-direction:column; gap:2px; min-width:0}
.anexo-txt b{font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.anexo-txt a{font-size:11px; color:var(--accent-2)}
/* o cabeçalho do off aberto: nome, dia, quem grava e situação numa linha */
.off-cab{
display:grid; gap:12px; margin-bottom:16px;
grid-template-columns:minmax(0,2fr) 150px minmax(0,1fr) minmax(0,1fr);
align-items:end;
}
.off-cab .campo{margin:0}
@media(max-width:900px){
.off-cab{grid-template-columns:1fr 1fr}
.off-cab .c-nome{grid-column:1 / -1}
}
.campo-topo{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px}
.campo-topo label{margin:0}
.texto-off{min-height:240px; line-height:1.7; font-size:15px; resize:vertical}
.off-acoes{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px}
.off-acoes .lbl{color:var(--warn-txt)}
/* os cartões do alto viram filtro: clicar num deles filtra a lista */
.kpi-clique{
text-align:left; font:inherit; color:inherit; cursor:pointer; width:100%;
transition:border-color .14s, box-shadow .14s;
}
.kpi-clique:hover{border-color:var(--accent-ln)}
.kpi-clique.ac{border-color:var(--accent-ln); box-shadow:0 0 0 2px var(--accent-bg)}
.off-dia{font-family:var(--font-mono); color:var(--txt-2)}
.off-tempo{font-family:var(--font-mono); background:var(--panel-3);
border-radius:99px; padding:1px 8px; font-size:10.5px}
.off-quem.falta{color:var(--warn-txt)}
.anexo{position:relative}
.off-tirar{
position:absolute; top:3px; right:3px; width:22px; height:22px; padding:0;
font-size:16px; line-height:1; opacity:0; transition:opacity .14s;
}
.anexo:hover .off-tirar, .off-tirar:focus-visible{opacity:1}
.anexo-envio{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px}
.anexo-envio input[type=text], .anexo-envio input:not([type]){flex:1; min-width:220px}
.anexo-envio #linkAnexo{flex:1; min-width:220px}
.anexo-envio .ou{font-size:11.5px; color:var(--txt-4)}
/* ---------- meu dia ---------- */
.meu-dia-lista{display:flex; flex-direction:column; gap:7px; padding:12px}
.md-item{
display:flex; flex-direction:column; gap:5px; padding:12px 14px; color:inherit;
border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2);
transition:background .14s, border-color .14s;
}
.md-item:hover{background:var(--panel-3); border-color:var(--line-2)}
.md-l1{display:flex; align-items:center; gap:9px; justify-content:space-between}
.md-l1 b{font-size:13px; font-weight:620; overflow-wrap:anywhere}
.md-l2{display:flex; flex-wrap:wrap; gap:9px; font-size:11.5px; color:var(--txt-3)}
.md-l2 .atrasada{color:var(--onair-txt); font-weight:600}
.md-recados{background:var(--panel-3); border-radius:99px; padding:1px 8px; font-size:10.5px}
.dialogo.largo{max-width:760px}
/* ---------- aviso de modo leitura ---------- */
.aviso-leitura{
display:flex; align-items:flex-start; gap:11px; margin-bottom:16px;
padding:11px 14px; border:1px solid var(--line-3); border-left:3px solid var(--txt-3);
border-radius:var(--r); background:var(--panel-3); font-size:12.5px; line-height:1.55;
color:var(--txt-2);
}
.aviso-leitura svg{width:16px; height:16px; flex:none; margin-top:1px; color:var(--txt-3)}
.aviso-leitura b{color:var(--txt); font-weight:650; margin-right:4px}
.aviso-leitura a{color:var(--accent-2); text-decoration:underline}
/* Contato de quem a API não mandou o nome: fica claro que é falta de dado,
não um apelido que alguém escolheu. */
.wa-cab .dados b.sem-nome{color:var(--txt-2); font-style:italic}
/* ---------- bloquear direto da lista de recados ---------- */
.conversa-item{position:relative}
.bloquear-aqui{
position:absolute; right:10px; bottom:10px; width:26px; height:26px;
display:grid; place-items:center; border-radius:50%; cursor:pointer;
color:var(--txt-4); background:var(--panel); border:1px solid var(--line);
opacity:0; transition:opacity .14s, color .14s, border-color .14s;
}
.conversa-item:hover .bloquear-aqui{opacity:1}
.bloquear-aqui:hover{color:var(--onair); border-color:var(--onair-ln); background:var(--onair-bg)}
.bloquear-aqui svg{width:13px; height:13px}
.wa-bloqueados-abre{
display:flex; align-items:center; gap:8px; width:calc(100% - 16px); margin:0 8px 4px;
padding:9px 12px; border:1px solid var(--line); border-radius:var(--r);
background:var(--panel-2); color:var(--txt-2); font:inherit; font-size:12.5px;
cursor:pointer; text-align:left;
}
.wa-bloqueados-abre:hover{background:var(--panel-3)}
.wa-bloqueados-abre.aberta{border-color:var(--line-2); color:var(--txt)}
.wa-bloqueados-abre svg{width:14px; height:14px; flex:none}
.wa-bloqueados-abre[hidden]{display:none !important}
.wa-bloqueados{display:flex; flex-direction:column; gap:6px; padding:2px 8px 8px}
.wa-bloqueados[hidden]{display:none !important}
.bloqueado-item{
display:flex; align-items:center; gap:10px; padding:8px 10px;
border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2);
}
.bloqueado-txt{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1}
.bloqueado-txt b{font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bloqueado-txt i{font-style:normal; font-size:11px; color:var(--txt-3)}
.retrato.peq{width:34px; height:34px; font-size:12px}
/* =================================================================
GAVETA LATERAL (offcanvas)
Mesmo diálogo do sistema, encostado na direita e da altura da
janela: dá para escrever o texto sem perder o espelho de vista.
================================================================= */
.overlay.gaveta{align-items:stretch; justify-content:flex-end; padding:0}
.overlay.gaveta .dialogo{
width:min(780px, 96vw); max-width:none; height:100dvh; max-height:100dvh;
border-radius:var(--r-l) 0 0 var(--r-l); animation:entra-lado .2s ease-out;
}
@keyframes entra-lado{from{transform:translateX(26px); opacity:.4}}
.overlay.gaveta .dialogo-head{padding:18px 22px 12px}
/* o corpo ocupa o que sobra: o rodapé fica colado embaixo e o texto cresce
com a janela, em vez de deixar meia tela vazia */
.overlay.gaveta .dialogo-body{flex:1; min-height:0}
.overlay.gaveta .dialogo-foot{margin-top:auto}
/* as abas da gaveta */
.abas{display:flex; gap:4px; padding:0 16px; border-bottom:1px solid var(--line); flex:none}
.aba{
display:inline-flex; align-items:center; gap:7px; padding:10px 14px;
border:0; border-bottom:2px solid transparent; background:none; cursor:pointer;
color:var(--txt-3); font:inherit; font-size:13.5px; font-weight:550;
transition:color .14s, border-color .14s;
}
.aba svg{width:15px; height:15px}
.aba:hover{color:var(--txt-2)}
.aba.ligada{color:var(--accent-2); border-bottom-color:var(--accent)}
.aba-nota{font-size:11px; color:var(--txt-4); font-weight:500}
.aba-painel[hidden]{display:none !important}
/* a aba do texto */
.texto-cab{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.texto-quem{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.texto-quem b{font-size:14px; font-weight:650; overflow-wrap:anywhere}
.texto-quem i{font-style:normal; font-size:11.5px; color:var(--txt-3)}
.texto-roteiro{
flex:1; min-height:340px; resize:none;
font-family:var(--font-mono); font-size:15px; line-height:1.9; letter-spacing:.005em;
padding:16px 18px;
}
.texto-pe{
display:flex; align-items:center; justify-content:space-between; gap:12px;
font-size:12px; color:var(--txt-3); flex:none;
}
.texto-pe #textoConta.sujo{color:var(--warn-txt); font-weight:600}
.texto-sem{
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:10px; text-align:center; padding:40px 24px; margin:auto; color:var(--txt-3);
}
.texto-sem[hidden]{display:none !important}
.texto-sem svg{width:28px; height:28px; color:var(--txt-4)}
.texto-sem p{margin:0; font-size:13.5px}
.texto-sem .dica{font-size:12.5px; color:var(--txt-4); max-width:42ch}
.texto-sem .btn{margin-top:6px}
@media(max-width:700px){
.overlay.gaveta .dialogo{width:100vw; border-radius:0}
}
/* ---------- gaveta: topo com abas, expandir e fechar ---------- */
.gaveta-topo{
display:flex; align-items:center; gap:12px; padding:10px 14px 0 16px;
border-bottom:1px solid var(--line); flex:none;
}
.gaveta-topo .abas{border-bottom:0; padding:0; flex:1}
.gaveta-acoes{display:flex; gap:2px; align-items:center; padding-bottom:8px}
.overlay.gaveta.cheia .dialogo{width:100vw; border-radius:0}
.campo-cresce{flex:1; min-height:0; display:flex; flex-direction:column}
.campo-cresce textarea{flex:1}
.campo > label .rot-dir{margin-left:auto; font-weight:400}
.tempo-script{
display:inline-flex; align-items:center; gap:5px; padding:2px 9px;
border-radius:var(--pill); background:var(--panel-3); color:var(--txt-2);
font-family:var(--font-mono); font-size:11.5px;
}
.tempo-script svg{width:12px; height:12px}
/* o resto da linha fica recolhido: slug e texto é o que se usa toda hora */
.mais-da-linha{
border:1px solid var(--line); border-radius:var(--r); background:var(--panel-2);
flex:none;
}
.mais-da-linha summary{
padding:11px 14px; cursor:pointer; font-size:12.5px; font-weight:550; color:var(--txt-2);
list-style:none;
}
.mais-da-linha summary::-webkit-details-marker{display:none}
.mais-da-linha summary::before{content:"▸ "; color:var(--txt-4)}
.mais-da-linha[open] summary::before{content:"▾ "}
.mais-da-linha summary:hover{color:var(--txt)}
.mais-da-linha > *:not(summary){margin:0 14px 14px}
.mais-da-linha .lista-materias{max-height:150px}
/* ---------- aba História: a matéria completa ---------- */
.materia-cab{display:flex; flex-direction:column; gap:3px; flex:none}
.materia-cab b{font-size:16px; font-weight:650; overflow-wrap:anywhere}
.materia-quem{font-size:12px; color:var(--txt-3)}
.materia-midia{display:flex; gap:10px; flex-wrap:wrap; flex:none}
.materia-midia[hidden]{display:none !important}
.materia-midia img{
width:190px; height:130px; object-fit:cover; border-radius:var(--r);
border:1px solid var(--line); display:block;
}
.materia-midia .midia-link{
display:inline-flex; align-items:center; padding:8px 12px; border-radius:var(--r);
border:1px solid var(--line); background:var(--panel-2); font-size:12.5px;
}
.texto-materia{
flex:1; min-height:260px; resize:none; line-height:1.7; font-size:14px; padding:16px 18px;
}
.materia-sem{
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:10px; text-align:center; padding:40px 24px; margin:auto; color:var(--txt-3);
}
.materia-sem[hidden]{display:none !important}
.materia-sem svg{width:28px; height:28px; color:var(--txt-4)}
.materia-sem p{margin:0; font-size:13.5px}
.materia-sem .dica{font-size:12.5px; color:var(--txt-4); max-width:42ch}
/* ---------- roteiro: coluna de seleção e linha marcada ---------- */
.tab-roteiro .sel{display:flex; align-items:center; justify-content:center}
.tab-roteiro .sel input{width:15px; height:15px; margin:0; cursor:pointer; accent-color:var(--accent)}
.tab-roteiro .item.marcada{background:var(--accent-bg)}
.tab-roteiro .nome b.abre-gaveta{cursor:pointer; color:var(--accent-2)}
.tab-roteiro .nome b.abre-gaveta:hover{text-decoration:underline}
.marca-conferida{display:inline-flex; color:var(--ok)}
.marca-conferida svg{width:14px; height:14px}
.pe-bloco{
display:flex; gap:6px; padding:8px 12px; border-top:1px solid var(--line);
background:var(--panel-2); border-radius:0 0 var(--r-m) var(--r-m);
}
.pe-bloco .btn{color:var(--txt-3)}
.pe-bloco .btn:hover{color:var(--txt)}
/* ---------- adicionar histórias em lote ---------- */
.lista-add{
display:flex; flex-direction:column; gap:4px; max-height:46vh; overflow:auto;
border:1px solid var(--line); border-radius:var(--r); padding:6px; background:var(--panel-2);
}
.add-item{
display:flex; align-items:center; gap:11px; padding:9px 11px; cursor:pointer;
border-radius:var(--r-s); background:var(--panel); border:1px solid var(--line);
}
.add-item:hover{border-color:var(--line-2)}
.add-item input{width:15px; height:15px; margin:0; accent-color:var(--accent); flex:none}
.add-txt{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.add-txt b{font-size:13px; font-weight:600; overflow-wrap:anywhere}
.add-txt i{font-style:normal; font-size:11.5px; color:var(--txt-3)}
/* =================================================================
TELEPROMPTER
Tela de quem lê no ar: roteiro à esquerda, texto grande à direita,
controles embaixo. Sem menu, sem barra lateral do sistema.
================================================================= */
body.tela-prompter{
height:100dvh; display:flex; flex-direction:column; overflow:hidden;
background:var(--bg); --pr-fonte:40px;
}
.pr-app{flex:1; min-height:0; display:grid; grid-template-columns:290px minmax(0,1fr); gap:14px; padding:14px}
body.sem-lista .pr-app{grid-template-columns:0 minmax(0,1fr)}
body.sem-lista .pr-lista{opacity:0; pointer-events:none}
/* ---------- o roteiro ---------- */
.pr-lista{
display:flex; flex-direction:column; gap:10px; min-height:0;
transition:opacity .16s;
}
.pr-carregar{flex:none}
.pr-itens{
flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:7px;
padding-right:2px;
}
.pr-item{
display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
padding:12px 13px; border:1px solid var(--line); border-radius:var(--r);
background:var(--panel); color:var(--txt); font:inherit; font-size:13px;
box-shadow:var(--sombra); transition:border-color .14s, background .14s;
}
.pr-item:hover{border-color:var(--line-2)}
.pr-item.lendo{border-color:var(--accent); background:var(--accent-bg); font-weight:600}
.pr-num{
font-family:var(--font-mono); font-size:11px; color:var(--txt-4); flex:none;
font-variant-numeric:tabular-nums;
}
.pr-item.lendo .pr-num{color:var(--accent)}
.pr-nome{flex:1; min-width:0; line-height:1.3; overflow-wrap:anywhere}
.pr-seta{color:var(--txt-4); font-size:16px; flex:none}
/* ---------- o palco ---------- */
.pr-palco{
position:relative; min-width:0; background:var(--panel);
border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--sombra);
overflow:hidden; display:flex;
}
.pr-recolher{
position:absolute; left:12px; top:12px; z-index:3; width:32px; height:32px;
display:grid; place-items:center; border-radius:var(--r); cursor:pointer;
border:1px solid var(--line); background:var(--panel); color:var(--txt-3);
}
.pr-recolher:hover{color:var(--txt); border-color:var(--line-2)}
.pr-recolher svg{width:15px; height:15px}
body.sem-lista .pr-recolher svg{transform:scaleX(-1)}
.pr-rolagem{flex:1; overflow-y:auto; scroll-behavior:auto; padding:60px 6% 60vh}
.pr-texto{max-width:1100px; margin:0 auto}
body.espelhado .pr-texto{transform:scaleX(-1)}
.pr-bloco{padding:10px 0 40px; opacity:.42; transition:opacity .2s}
.pr-bloco.lendo{opacity:1}
.pr-cab{
display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:var(--r);
background:var(--panel-2); border-left:4px solid transparent;
}
.pr-bloco.lendo .pr-cab{background:var(--accent-bg); border-left-color:var(--accent)}
.pr-cab-num{font-family:var(--font-mono); font-size:13px; color:var(--txt-4)}
.pr-cab-nome{font-size:14px; color:var(--txt-2); letter-spacing:.02em}
.pr-slug{
margin:16px 0 6px; font-size:calc(var(--pr-fonte) * 1.05); font-weight:750;
line-height:1.15; letter-spacing:-.015em;
}
.pr-corpo{
font-size:var(--pr-fonte); font-weight:650; line-height:1.42; letter-spacing:-.005em;
overflow-wrap:anywhere;
}
.pr-corpo.sem{font-size:calc(var(--pr-fonte) * .5); font-weight:500; color:var(--txt-4); font-style:italic}
/* Cada parágrafo é um elemento próprio: é ele que o espelho usa de âncora
para mostrar o MESMO texto, mesmo com a coluna de outra largura. */
.pr-corpo .pr-lin{margin:0}
.pr-corpo .pr-lin.vazia{height:.55em}
/* a mira: onde o olho fica quando está rolando */
.pr-mira{
position:absolute; left:0; right:0; top:28%; height:2px; pointer-events:none;
background:linear-gradient(90deg, transparent, var(--accent) 12%, var(--accent) 88%, transparent);
opacity:.35;
}
/* ---------- os controles ---------- */
.pr-controles{
flex:none; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
padding:12px 18px; background:var(--panel); border-top:1px solid var(--line);
}
.pr-transporte{display:flex; align-items:center; gap:9px}
.pr-transporte .btn.icone.grande{width:46px; height:46px; border-radius:50%}
.pr-transporte .btn.icone.grande svg{width:20px; height:20px}
.pr-transporte .btn.primario.icone svg{width:22px; height:22px}
.pr-transporte .btn.tocando{background:var(--onair); border-color:var(--onair); box-shadow:none}
.pr-velocidade{display:flex; align-items:center; gap:12px; flex:1; min-width:260px}
.pr-velocidade label{font-size:13px; color:var(--txt-2); white-space:nowrap}
.pr-velocidade input[type=range]{flex:1; max-width:320px}
.pr-velocidade b{font-family:var(--font-mono); font-size:14px; min-width:22px; text-align:center}
.pr-fonte{display:flex; align-items:center; gap:8px}
.pr-fonte .btn.icone{width:34px; height:34px; font-size:17px; font-weight:600}
.pr-fonte b{font-family:var(--font-mono); font-size:13px; min-width:52px; text-align:center; color:var(--txt-2)}
.pr-extras{display:flex; align-items:center; gap:6px; margin-left:auto}
.pr-extras .btn.icone{width:36px; height:36px}
.pr-extras .btn.ligado{background:var(--accent-bg); border-color:var(--accent-ln); color:var(--accent-2)}
@media(max-width:900px){
.pr-app{grid-template-columns:1fr; grid-template-rows:minmax(0,32vh) minmax(0,1fr)}
.pr-controles{gap:12px; padding:10px 12px}
.pr-velocidade{min-width:180px}
}
/* ------------------------------------------------------------------
Produção de hoje — os números do painel e os selos de pendência
------------------------------------------------------------------ */
.producao-ajuda{ margin:0; color:var(--txt-3); font-size:.86rem; line-height:1.5 }
.producao-ajuda + .producao-numeros{ margin-top:14px }
.producao-numeros{
display:grid; gap:10px; margin:0 0 14px;
grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
}
.producao-numero{
display:flex; flex-direction:column; gap:2px;
padding:12px 14px; border:1px solid var(--line); border-radius:var(--r);
background:var(--panel-2); color:inherit; text-decoration:none;
transition:border-color .15s, background .15s;
}
.producao-numero:hover{ border-color:var(--accent); background:var(--hover) }
.producao-numero strong{ font-size:1.55rem; line-height:1.1; font-variant-numeric:tabular-nums }
.producao-numero span{ color:var(--txt-3); font-size:.8rem; line-height:1.3 }
.producao-selos{ display:flex; flex-wrap:wrap; gap:6px }
.producao-selo{
display:inline-block; padding:3px 9px; border-radius:var(--pill);
font-size:.76rem; line-height:1.4; white-space:nowrap;
border:1px solid var(--line); background:var(--panel-2); color:var(--txt-2);
}
.producao-selo.pendente{
border-color:var(--warn-ln);
background:var(--warn-bg);
color:var(--warn-txt, var(--warn));
}
.producao-tabela td .abaixo{ display:block; color:var(--txt-3); font-size:.78rem; margin-top:2px }
@media (max-width:640px){
.producao-numeros{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.producao-numero strong{ font-size:1.3rem }
}
/* ---------- ficha da matéria: repórter, quem cadastrou, quem atualizou ---------- */
.ficha{display:flex; flex-direction:column; gap:10px}
.ficha .campo{margin:0}
.ficha-linha{
display:flex; align-items:baseline; gap:10px; justify-content:space-between;
padding-top:8px; border-top:1px solid var(--line);
}
.ficha-linha .k{font-size:11.5px; color:var(--txt-3); flex:none}
.ficha-linha .v{font-size:12.5px; color:var(--txt); text-align:right; overflow-wrap:anywhere}
/* ==================================================================
A TELA DO APRESENTADOR — o espelho do BNews na segunda tela
==================================================================
Preta, sem menu e sem botão: no ar, tudo que não é o texto atrapalha.
Não segue o tema do sistema — a tela do estúdio é escura sempre, senão
um branco de 40 polegadas cega quem está na bancada. */
body.tela-espelho{
margin:0; height:100vh; overflow:hidden;
background:#000; color:#fff;
display:flex; flex-direction:column;
--pr-fonte:40px;
}
.es-topo{
display:flex; align-items:center; gap:12px; flex:none;
padding:10px 22px; border-bottom:1px solid #1b1f27; background:#07090c;
}
body.sem-topo .es-topo{display:none}
.es-num{
font-family:var(--font-mono); font-size:13px; font-weight:600;
color:#0a0c10; background:#5b9dff; border-radius:6px; padding:2px 8px;
}
.es-nome{
font-size:14px; font-weight:600; color:#cfd6e4; letter-spacing:.01em;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1;
}
.es-sinal{
font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
color:#8a94a6; border:1px solid #2a303c; border-radius:99px; padding:2px 10px; flex:none;
}
.es-sinal.ligado{color:#4ade80; border-color:#1f6b40; background:#0b2418}
.es-rolagem{
flex:1; overflow:hidden; padding:14vh 6vw 60vh;
scrollbar-width:none;
}
.es-rolagem::-webkit-scrollbar{display:none}
.es-bloco{margin:0 0 10vh; opacity:.34; transition:opacity .25s}
.es-bloco.lendo{opacity:1}
.es-slug{
font-size:calc(var(--pr-fonte) * .62); line-height:1.2; margin:0 0 .5em;
font-weight:800; color:#5b9dff; letter-spacing:-.01em;
}
.es-corpo{
font-size:var(--pr-fonte); line-height:1.5; font-weight:700;
letter-spacing:-.005em; overflow-wrap:anywhere;
}
.es-corpo.sem{color:#6b7382; font-weight:500; font-size:calc(var(--pr-fonte) * .6)}
.es-corpo .es-lin{margin:0}
.es-corpo .es-lin.vazia{height:.55em}
/* A mira: onde o olho de quem lê fica parado enquanto o texto sobe. */
.es-mira{
position:fixed; left:0; right:0; top:28%; height:0; pointer-events:none;
border-top:2px solid rgba(91,157,255,.5);
}
.es-mira::before, .es-mira::after{
content:""; position:absolute; top:-7px; border:7px solid transparent;
}
.es-mira::before{left:0; border-left-color:#5b9dff}
.es-mira::after {right:0; border-right-color:#5b9dff}
/* Espelhar de verdade: o vidro do teleprompter devolve a imagem invertida.
Inverte só o texto — o cabeçalho tem que continuar legível de frente. */
body.tela-espelho.espelhado .es-rolagem{transform:scaleX(-1)}
.es-vazio{
position:fixed; inset:0; display:flex; flex-direction:column;
align-items:center; justify-content:center; gap:8px;
color:#6b7382; font-size:18px; text-align:center;
}
.es-vazio .dica{font-size:14px; color:#4d5563}
.es-ajuda{
position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
background:rgba(12,15,20,.92); border:1px solid #232a35; border-radius:99px;
padding:8px 18px; font-size:12px; color:#9aa4b4;
transition:opacity .6s; text-align:center;
}
.es-ajuda b{color:#cfd6e4; font-family:var(--font-mono); font-size:11px}
.es-ajuda.sumindo{opacity:0; pointer-events:none}
/* ==================================================================
O SELECT DA CASA
==================================================================
A caixinha fechada de um