/* ================================================================
   MÁSCARAS AO VIVO — as telas da REDAÇÃO (não o que vai ao ar)
   ----------------------------------------------------------------
   Linguagem do MONITOR ICL (design-system/icl-monitor/MASTER.md, no repo
   news-monitor): PAPEL. Fundo claro com grão, três famílias com trabalhos
   diferentes, canto macio, e — a decisão que dá a cara de redação —
   NADA DE CARTÃO. O conteúdo senta no papel; a separação é fio e respiro,
   como coluna de jornal. Antes daqui as telas usavam o brand.css do
   extrator-pesquisas (escuro azul-marinho, cartão, condensada de telão).
   São dois produtos e duas propostas: aquela é voz de AR, esta é mesa de
   trabalho. A do ar continua intacta em saida.html.

   O AR É A EXCEÇÃO. Vermelho cheio (--ar) é a única cor que grita, e só
   diz uma coisa: isto está na tela agora. É a luz de tally do estúdio.

   ATENÇÃO: saida.html — a página que o vMix abre — NÃO inclui este arquivo
   e não pode incluir. Ela é transparente, tem as próprias fontes (Roboto
   do guia Eleições) e os próprios tokens. Mexer aqui não muda o ar.
   ================================================================ */

/* ---- fontes, embutidas (o estúdio pode estar sem internet) ---------------
   Source Sans 3 e Source Serif 4 são variáveis: um arquivo cobre 200–900.  */
@font-face { font-family: "Source Sans 3"; src: url("/static/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/static/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/static/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }

/* ================================================================
   TOKENS — PAPEL é o padrão (é o tema do Monitor desde 12/08/2026).
   TINTA (azul-meia-noite) fica a um clique, pro turno da noite e pra
   quem opera no escuro do switcher. A escolha fica salva por pessoa.
   Contraste: todos os pares texto/superfície passam AA (≥4.5:1) nos
   dois temas. Mexeu em cor? refaça a conta.
   ================================================================ */
:root {
  color-scheme: light;

  --bg:      #f6f3ea;
  --sidebar: #f0ecdf;
  --card:    #fbf8f0;
  --hover:   #eae5d6;
  --border:  #ddd6c4;
  --border2: #c4bca4;

  --text:  #221e15;
  --muted: #564f3d;
  /* MEDIDO, não escolhido: em #6e6753 a função sob o nome dava 4,47:1 sobre a linha
     destacada (--hover) — abaixo do mínimo de 4,5 da WCAG. Um passo mais escuro leva o
     pior caso a 4,54:1 e continua bem mais claro que --muted, que é o degrau de cima. */
  --dim:   #6d6652;

  /* verde-petróleo = interativo. Longe do vermelho de propósito: a cor de
     "clique aqui" não pode disputar com a cor de "está no ar". */
  --accent:      #1f6f68;
  --accent-soft: rgba(31,111,104,.10);
  --on-accent:   #ffffff;

  /* O AR. Não é o --red (que quer dizer erro): é ESTADO, e no estúdio o
     tally é vermelho. --ar para tinta e fio; --ar-bg para fundo cheio
     (branco sobre --ar-bg = 6.6:1). */
  --ar:     #c8281e;
  --ar-bg:  #b3231a;
  --ar-veu: rgba(200,40,30,.055);

  --red:       #b3402f;
  --danger-bg: #9c3a2e;
  --orange:    #8a5a12;
  --green:     #357045;
  --cyan:      #2a6b73;
  --icl:       #7d6210;

  /* o losango oficial do ICL Notícias (mesmo gradiente do Monitor) */
  --icl-grad: linear-gradient(135deg, #7c5ce6, #4a90e8 50%, #1fd1b6);

  /* papel tem caimento de luz e grão em duas escalas: a fibra fina e o
     mosqueado maior da polpa. É o que separa "papel" de "app branco". */
  --luz: linear-gradient(180deg, #faf7ee 0%, #f2eee2 100%);
  --grao-fibra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  --grao-polpa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  --sombra: 0 1px 2px rgba(20,24,28,.07);
  --sombra-flut: 0 8px 26px rgba(20,24,28,.16);

  /* três famílias, cada uma com um trabalho */
  --ff-ui:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ff-dados: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --fs-micro: 11px;
  --fs-xs:    12.5px;
  --fs-sm:    13.5px;
  --fs-base:  15px;
  --fs-lg:    17px;
  --fs-xl:    22px;
  --fs-2xl:   28px;

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
  --r-1: 6px;   --r-2: 9px;
  --tempo: .15s;

  /* A MEDIDA da página: uma só, e o cabeçote obedece a mesma. Jornal alinha o
     cabeçote com a coluna; se cada um tem a sua largura, a página desalinha.
     Cada tela ajusta a medida no seu <style> (`html { --medida: … }`). */
  --medida: 1100px;
}

html[data-theme="tinta"] {
  color-scheme: dark;

  --bg:      #0f1320;
  --sidebar: #0c101a;
  --card:    #161c2e;
  --hover:   #1d2540;
  --border:  #28304e;
  --border2: #3a4568;

  --text:  #e9ebf4;
  --muted: #a9b0c4;
  --dim:   #8b93ab;

  --accent:      #5aa9a0;
  --accent-soft: rgba(90,169,160,.14);
  --on-accent:   #07201d;

  --ar:     #e8433a;
  --ar-bg:  #a83a2c;   /* fundo cheio: branco sobre ele dá 6.9:1 */
  --ar-veu: rgba(232,67,58,.10);

  --red:       #e2796b;
  --danger-bg: #a83a2c;
  --orange:    #d99a4e;
  --green:     #6fae7d;
  --cyan:      #5fb0b8;
  --icl:       #d9b155;

  --icl-grad: linear-gradient(135deg, #a98bf5, #6aa4f5 50%, #2fd9c2);
  --luz: linear-gradient(180deg, #141a2f 0%, #0c101d 100%);
  --grao-fibra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  --grao-polpa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  --sombra: 0 1px 2px rgba(0,0,0,.28);
  --sombra-flut: 0 10px 30px rgba(0,0,0,.45);
}

/* ================================================================
   BASE
   ================================================================ */
* { box-sizing: border-box; }
body, h1, h2, h3, p, figure { margin: 0; }

body {
  font-family: var(--ff-ui);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--grao-fibra), var(--grao-polpa), var(--luz);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;   /* número alinha em coluna */
  min-height: 100vh;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }
::selection { background: var(--accent); color: var(--on-accent); }

* { scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--r-2); border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }

/* Movimento 3/10: micro-transição e a luz de tally. Nada mais. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

[hidden] { display: none !important; }

/* ================================================================
   CABEÇALHO — não é barra de app: é o cabeçote do jornal. Título
   serifado com o losango, fio, e a navegação em caixa alta miúda com
   sublinhado na ativa (sem pílula). À direita, o TALLY: o que está no
   ar agora, em toda tela, porque é a informação que a equipe precisa
   ter sempre no olho.
   ================================================================ */
.gc-topo { position: sticky; top: 0; z-index: 20; background-color: var(--bg);
  background-image: var(--grao-fibra), var(--luz); border-bottom: 2px solid var(--border2); }
.gc-cabeca { display: flex; align-items: center; gap: var(--sp-4); padding: 10px var(--sp-6) 9px;
  max-width: var(--medida); margin: 0 auto; flex-wrap: wrap; }
.gc-marca { display: inline-flex; align-items: baseline; gap: 9px; text-decoration: none; color: var(--text); }
.gc-marca::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--icl-grad);
  transform: rotate(-18deg); flex: none; align-self: center; }
.gc-marca .nm { font-family: var(--ff-serif); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.015em; }
.gc-marca .kicker { font-family: var(--ff-dados); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .14em; color: var(--dim); }

/* o tally */
.gc-tally { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--ff-dados); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .1em;
  color: var(--dim); padding: 5px 9px; border: 1px solid transparent; border-radius: var(--r-1); }
.gc-tally:hover { border-color: var(--border2); color: var(--muted); }
.gc-tally .luz { width: 9px; height: 9px; border-radius: 3px; transform: rotate(-18deg); flex: none;
  background: var(--border2); }
.gc-tally .curto { display: none; }
.gc-tally.on { color: var(--ar); font-weight: 500; }
.gc-tally.on .luz { background: var(--ar); animation: tally 2.2s ease-in-out infinite; }
@keyframes tally { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* quem está logado */
.gc-user { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.gc-nome { font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; max-width: 150px; }
.gc-papel { font-family: var(--ff-dados); font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--dim); }

/* navegação: fio de baixo na ativa, como aba de jornal */
.gc-barra { display: flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-6);
  max-width: var(--medida); margin: 0 auto; flex-wrap: wrap; }
.gc-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.gc-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px 7px; text-decoration: none;
  color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .09em;
  border-bottom: 2px solid transparent; transition: color var(--tempo), border-color var(--tempo); }
.gc-nav a:hover { color: var(--text); border-bottom-color: var(--border2); }
.gc-nav a.ativo { color: var(--accent); border-bottom-color: var(--accent); }
.gc-nav .badge { font-family: var(--ff-dados); font-size: 10px; font-weight: 500; letter-spacing: 0;
  color: var(--on-accent); background: var(--orange); border-radius: var(--r-1); padding: 1px 5px; }
/* tema e sair moram na linha de cima, ao lado de quem está logado: no celular a
   navegação sozinha cabe numa fileira, em vez de empurrar os botões para outra. */
.gc-user .ibtn { margin-left: 2px; }

/* botões utilitários: fantasma até o hover (o topo fica quieto) */
.ibtn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid transparent;
  border-radius: var(--r-1); padding: 5px 8px; cursor: pointer; font: inherit; font-size: var(--fs-micro);
  color: var(--dim); transition: color var(--tempo), border-color var(--tempo), background var(--tempo); }
.ibtn:hover { color: var(--text); border-color: var(--border2); background: var(--hover); }
.ibtn svg { width: 15px; height: 15px; }

.gc-aviso-local { border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  font-size: var(--fs-xs); color: var(--muted); padding: 6px var(--sp-6); }
/* fundo de ponta a ponta, TEXTO na coluna — igual ao cabeçote e à barra de menu */
.gc-aviso-local .gc-aviso-tx { max-width: var(--medida); margin: 0 auto; }
.gc-aviso-local b { color: var(--text); }

@media (max-width: 720px) {
  .gc-cabeca, .gc-barra { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .gc-marca .kicker, .gc-papel, .gc-nome { display: none; }
  .gc-tally .longo { display: none; }
  .gc-tally .curto { display: inline; }
  .gc-nav a { padding: 8px 8px 7px; letter-spacing: .06em; }
}

/* ================================================================
   CONTEÚDO — medida editorial: a coluna tem limite e o respiro sobra
   à direita, como rail de jornal. Sem cartão embalando seção.
   ================================================================ */
.gc-main { max-width: var(--medida); margin: 0 auto; padding: var(--sp-6) var(--sp-6) 72px; }
@media (max-width: 720px) { .gc-main { padding: var(--sp-4) var(--sp-4) 56px; } }

/* a abertura da tela: chapéu, manchete, linha fina — gramática de matéria */
.eyebrow { font-family: var(--ff-dados); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .16em; font-weight: 500; color: var(--accent); margin-bottom: 7px; }
.gc-main h1 { font-family: var(--ff-serif); font-size: clamp(26px, 3.4vw, 38px); font-weight: 600;
  line-height: 1.08; letter-spacing: -.022em; text-wrap: balance; }
.gc-main .desc { font-family: var(--ff-serif); font-size: var(--fs-lg); line-height: 1.55; color: var(--muted);
  max-width: 62ch; margin-top: var(--sp-3); }
.gc-main .desc b { font-weight: 600; color: var(--text); }
.gc-main .desc a { color: var(--accent); }

/* CHAPÉU DE SEÇÃO: fio grosso em cima, fio fino embaixo. É isto que
   substitui a caixinha — separa sem embalar. */
.gc-main h2 { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3);
  padding: 7px 0; border-top: 2px solid var(--border2); border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text); }
.gc-main h2 > a { margin-left: auto; font-family: var(--ff-ui); font-size: var(--fs-xs); font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--accent); text-decoration: none; }
.gc-main h2 > a:hover { text-decoration: underline; }
.gc-main section { margin-top: var(--sp-8); }
.gc-main h3 { font-size: var(--fs-base); font-weight: 600; }

.duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
@media (max-width: 900px) { .duas { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* ================================================================
   INDICADORES — número grande na serifa, rótulo micro em caixa alta,
   separados por fio vertical. Sem caixa (era um quadrante).
   ================================================================ */
.indicadores { display: flex; flex-wrap: wrap; border-top: 3px double var(--border2);
  padding: var(--sp-2) 0; margin-top: var(--sp-6); }
.st { padding: 4px var(--sp-6); border-left: 1px solid var(--border); }
.st:first-child { border-left: 0; padding-left: 0; }
.st .l { font-family: var(--ff-dados); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .1em; color: var(--dim); }
.st .v { font-family: var(--ff-serif); font-size: var(--fs-2xl); font-weight: 600; line-height: 1.05;
  letter-spacing: -.02em; margin-top: 2px; }
.st.no-ar .v { color: var(--ar); }

/* ================================================================
   DESTINOS (início) — o que era grade de cartões virou sumário: uma
   linha por destino, separada por fio. Título na serifa, explicação
   em sans. É índice de jornal, não painel de azulejos.
   ================================================================ */
.destinos a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-2) var(--sp-3) 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text); transition: background var(--tempo), padding-left var(--tempo); }
.destinos a:hover { background: var(--hover); padding-left: var(--sp-2); }
.destinos .t { font-family: var(--ff-serif); font-size: var(--fs-lg); font-weight: 600; line-height: 1.25; }
.destinos .d { font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.destinos .seta { color: var(--border2); display: inline-flex; }
.destinos a:hover .seta { color: var(--accent); }
.destinos .badge { font-family: var(--ff-dados); font-size: var(--fs-micro); font-weight: 500;
  color: var(--on-accent); background: var(--orange); border-radius: var(--r-1); padding: 1px 6px;
  margin-left: 6px; vertical-align: 2px; }

/* os três passos: aqui a numeração é honesta — é sequência de verdade */
.passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0;
  border-bottom: 1px solid var(--border); }
.passo { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-left: 1px solid var(--border); }
.passo:first-child { border-left: 0; padding-left: 0; }
.passo .n { font-family: var(--ff-dados); font-size: var(--fs-micro); letter-spacing: .1em; color: var(--accent); }
.passo h3 { font-family: var(--ff-serif); font-size: var(--fs-base); font-weight: 600; margin: 5px 0 3px; }
.passo p { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
@media (max-width: 720px) { .passo { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); }
  .passo:first-child { border-top: 0; } }

/* ================================================================
   FORMULÁRIOS — campo com corpo claro e fio; rótulo micro em caixa
   alta. `.card` existe no HTML de antes: aqui ele é BLOCO, não caixa.
   ================================================================ */
.forma .campo { display: block; }
.forma .campo + .campo { margin-top: var(--sp-3); }
.forma .rot, .rot-forte { display: block; font-family: var(--ff-dados); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin-bottom: 5px; }
.forma .rot .opc { text-transform: none; letter-spacing: 0; font-family: var(--ff-ui); color: var(--dim);
  font-size: var(--fs-xs); }
.forma .ajuda, .ajuda { font-size: var(--fs-xs); color: var(--dim); line-height: 1.5; margin-top: 5px; }

.forma input, .forma select, .forma textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], select, textarea {
  width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--text); background: var(--card);
  border: 1px solid var(--border2); border-radius: var(--r-1); padding: 8px 10px;
  transition: border-color var(--tempo), box-shadow var(--tempo); }
.forma textarea, textarea { resize: vertical; line-height: 1.5; }
.forma input:focus, .forma select:focus, .forma textarea:focus,
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft); }
.forma input::placeholder, textarea::placeholder { color: var(--dim); opacity: .75; }
.forma input[type="color"] { width: 44px; height: 34px; padding: 2px; }
.forma input[type="file"] { display: none; }
.forma .campos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-3); }
.forma .campos-grid .campo + .campo, .forma .campos-grid .campo { margin-top: 0; }
.forma .acoes { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
select { width: auto; padding-right: 26px; }

/* ================================================================
   BOTÕES — um só primário por tela. O resto é fio.
   ================================================================ */
.btn { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-xs);
  font-weight: 600; padding: 8px 14px; border-radius: var(--r-1); border: 1px solid var(--border2);
  background: var(--card); color: var(--muted); cursor: pointer; text-decoration: none;
  transition: background var(--tempo), color var(--tempo), border-color var(--tempo); }
.btn:hover { background: var(--hover); color: var(--text); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }
.btn.primary, .btn.ok { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover, .btn.ok:hover { filter: brightness(1.08); color: var(--on-accent); }
.btn.perigo { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); background: none; }
.btn.perigo:hover { background: var(--danger-bg); border-color: var(--danger-bg); color: #fff; }
.btn.sm { padding: 6px 10px; font-size: var(--fs-micro); }
/* `grande` e não `lg`: `.lg` é a composição da porta (login) e o botão herdava
   o grid dela, esticando e quebrando o rótulo em duas colunas. */
.btn.grande { padding: 10px 18px; font-size: var(--fs-sm); }
.lnk { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; }
.lnk.forte { font-weight: 600; }

/* ================================================================
   INTERRUPTOR — retangular de canto macio, como chave de mesa de
   corte. O grande (.tog.ar) é o botão do ar: a única coisa da tela
   que fica vermelha cheia.
   ================================================================ */
.tog { position: relative; width: 44px; height: 24px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--border2); border-radius: var(--r-1); background: var(--card);
  transition: background var(--tempo), border-color var(--tempo); }
.tog::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 4px; background: var(--dim); transition: left var(--tempo), background var(--tempo); }
.tog:hover { border-color: var(--dim); }
.tog:disabled { opacity: .45; cursor: not-allowed; }
.tog:disabled:hover { border-color: var(--border2); }
.tog.on { background: var(--accent); border-color: var(--accent); }
.tog.on::after { left: 22px; background: var(--on-accent); }
.tog.ar { width: 62px; height: 32px; }
.tog.ar::after { width: 24px; height: 24px; top: 3px; left: 3px; }
.tog.ar.on { background: var(--ar-bg); border-color: var(--ar-bg); }
.tog.ar.on::after { left: 32px; background: #fff; }

/* a caixa do ar, no painel */
.ar-box { display: inline-flex; align-items: center; gap: var(--sp-3); }
.ar-box .st-ar { font-family: var(--ff-dados); font-size: var(--fs-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--dim); min-width: 92px; text-align: right; }
.ar-box.on .st-ar { color: var(--ar); }

/* ================================================================
   SELOS DE ESTADO — caixa alta discreta. Fundo cheio só no AR.
   Nunca só cor: o estado também está escrito.
   ================================================================ */
.chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ff-dados);
  font-size: var(--fs-micro); font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
  color: var(--dim); padding: 1px 0; white-space: nowrap; }
.chip.fila { color: var(--orange); }
.chip.retirado { color: var(--dim); }
.chip.no_ar, .chip.ar-on { color: #fff; background: var(--ar-bg); border-radius: var(--r-1); padding: 2px 7px; }
.chip.no_ar::before, .chip.ar-on::before { content: ""; width: 7px; height: 7px; border-radius: 2px;
  transform: rotate(-18deg); background: #fff; animation: tally 2.2s ease-in-out infinite; }

/* ================================================================
   RETRATO — a foto que vai ao ar. Canto macio, não círculo: no ar ela
   é redonda, aqui é ficha de redação.
   ================================================================ */
.av { width: 38px; height: 38px; border-radius: var(--r-1); object-fit: cover; flex: 0 0 auto;
  display: inline-block; background: var(--hover); border: 1px solid var(--border); }
.av-ini { display: inline-flex; align-items: center; justify-content: center; font-family: var(--ff-dados);
  font-size: var(--fs-xs); font-weight: 500; color: var(--muted); background: var(--hover); }
.av-sm { width: 28px; height: 28px; font-size: var(--fs-micro); }
.av-lg { width: 76px; height: 76px; font-size: var(--fs-xl); border-radius: var(--r-2); }

/* ================================================================
   A LAUDA — o comentário na mesa de revisão. Sem caixa: o que separa
   é o fio de baixo, e o FIO DO AR à esquerda diz o estado num relance.
     fio âmbar  = esperando revisão
     fio vermelho + véu = no ar agora
     fio apagado = recusado ou fora do ar
   O texto vai na serifa porque é ele que vai ao ar: é o que se lê e
   se corrige, não um dado de interface.
   ================================================================ */
.lista { display: flex; flex-direction: column; }
.lista > *:last-child { border-bottom: 0; }
.lista > p { padding: var(--sp-3) 0; }

.post { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border); border-left: 3px solid var(--border2); background: none;
  transition: background var(--tempo); }
.post.fila { border-left-color: var(--orange); }
.post.no_ar { border-left-color: var(--ar); background: var(--ar-veu); }
.post.retirado { border-left-color: var(--border); }
.post .corpo { flex: 1; min-width: 0; }
.post .quem { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: var(--fs-xs); }
.post .quem b { font-size: var(--fs-sm); font-weight: 600; }
.post .quem .fn { color: var(--dim); }
.post .quem .masc-nome, .post .quem .editado { color: var(--dim); font-size: var(--fs-micro); }
.post .quem .quando { margin-left: auto; font-family: var(--ff-dados); font-size: var(--fs-micro); color: var(--dim); }
.post .txt { font-family: var(--ff-serif); font-size: var(--fs-lg); line-height: 1.55; margin: 6px 0 var(--sp-3);
  overflow-wrap: anywhere; max-width: 62ch; }
.post .acoes { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* o texto em revisão É o campo: parece lauda, vira campo ao clicar */
/* O campo tem respiro por dentro para o realce de foco não colar no texto, mas a
   margem negativa devolve esse respiro: assim a primeira letra do comentário fica
   na MESMA prumada do nome, como no item que já está no ar. Sem isto a lauda em
   revisão aparece deslocada e as duas listas não alinham. */
.post textarea.edit { font-family: var(--ff-serif); font-size: var(--fs-lg); line-height: 1.55;
  background: none; border: 1px solid transparent; border-radius: var(--r-1); padding: 7px 9px;
  margin: 4px -10px 5px; width: calc(100% + 20px); resize: none; overflow: hidden; }
.post textarea.edit:hover { background: var(--card); border-color: var(--border); }
.post textarea.edit:focus { background: var(--card); }
.post textarea.edit:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.post textarea.edit.mudou { border-color: var(--orange); box-shadow: none; }
.rodape-ed { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-micro);
  color: var(--dim); margin-bottom: var(--sp-2); }
.rodape-ed .mudou-tag { font-family: var(--ff-dados); text-transform: uppercase; letter-spacing: .08em;
  color: var(--orange); }
.rodape-ed .orig { font-family: var(--ff-serif); font-style: italic; }
.contador { font-family: var(--ff-dados); font-size: var(--fs-micro); color: var(--dim); }
.contador.perto { color: var(--orange); }
.contador.passou { color: var(--red); font-weight: 500; }

/* ================================================================
   PESSOA (Pessoas) — linha de expediente, sem caixa
   ================================================================ */
.pessoa { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom: 1px solid var(--border); border-left: 3px solid transparent; flex-wrap: wrap; }
.pessoa.pend { border-left-color: var(--orange); padding-left: var(--sp-3); }
.pessoa .tx { flex: 1; min-width: 170px; }
.pessoa .tx b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.pessoa .tx small { display: block; font-size: var(--fs-xs); color: var(--dim); }
.pessoa select { font-size: var(--fs-xs); padding: 6px 24px 6px 9px; }
/* o link de definir senha: endereço longo, então quebra e fica todo selecionável */
.link-senha { font-family: var(--ff-dados); font-size: var(--fs-micro); color: var(--accent);
  background: var(--accent-soft); border-radius: var(--r-1); padding: 4px 8px; user-select: all;
  overflow-wrap: anywhere; flex-basis: 100%; }

/* ================================================================
   PAINEL — duas colunas: o rol de máscaras (coluna sobre o MESMO
   papel, separada por fio) e o editor.
   ================================================================ */
.painel { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
@media (max-width: 980px) { .painel { grid-template-columns: 1fr; } }
/* o fio da coluna corre a altura TODA do conteúdo (fio que morre no meio parece
   engano, não coluna de jornal) */
.trilho-col { border-right: 1px solid var(--border2); padding-right: var(--sp-4); align-self: stretch; }
@media (max-width: 980px) { .trilho-col { border-right: 0; padding-right: 0;
  border-bottom: 1px solid var(--border2); padding-bottom: var(--sp-4); } }
.trilho .item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; text-align: left;
  padding: 9px var(--sp-2); border: 0; border-left: 3px solid transparent; border-bottom: 1px solid var(--border);
  background: none; color: var(--muted); cursor: pointer; font: inherit;
  transition: background var(--tempo), color var(--tempo); }
.trilho .item:hover { background: var(--hover); color: var(--text); }
.trilho .item.ativo { border-left-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.trilho .item .ic { color: var(--dim); display: inline-flex; flex: none; }
.trilho .item.ativo .ic { color: var(--accent); }
.trilho .item .tx { flex: 1; min-width: 0; }
.trilho .item .tx b { display: block; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.trilho .item .tx small { display: block; font-size: var(--fs-micro); color: var(--dim); }
.trilho .item .tx .fila-n { color: var(--orange); }
.trilho .item .pt { width: 8px; height: 8px; border-radius: 2px; transform: rotate(-18deg); flex: none;
  background: var(--border2); }
.trilho .item .pt.on { background: var(--ar); animation: tally 2.2s ease-in-out infinite; }

/* cabeçalho da máscara aberta */
.cab-m { padding-bottom: var(--sp-3); border-bottom: 2px solid var(--border2); margin-bottom: var(--sp-6); }
.cab-m .nome-in { font-family: var(--ff-serif); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.015em;
  width: auto; min-width: 240px; background: none; border: 0; border-bottom: 1px dashed transparent;
  border-radius: 0; padding: 2px 0; }
.cab-m .nome-in:hover { border-bottom-color: var(--border2); }
.cab-m .nome-in:focus { border-bottom-color: var(--accent); box-shadow: none; }
.cab-m .meta { font-family: var(--ff-dados); font-size: var(--fs-micro); color: var(--dim); margin-top: 3px; }
.url-txt { font-family: var(--ff-dados); font-size: var(--fs-micro); color: var(--dim); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ed section:first-of-type { margin-top: 0; }

/* ================================================================
   VOTAÇÃO — tabela de chamada: fio, sem zebra, número alinhado
   ================================================================ */
.placar { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: var(--sp-2);
  margin: var(--sp-3) 0 var(--sp-4); }
.placar > div { padding: 0 var(--sp-6) 0 0; }
.placar .n { font-family: var(--ff-serif); font-size: var(--fs-2xl); font-weight: 600; line-height: 1; }
.placar .r { font-family: var(--ff-dados); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .1em; color: var(--dim); margin-top: 3px; }
.votos { width: 100%; border-collapse: collapse; }
.votos th { text-align: left; font-family: var(--ff-dados); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .09em; font-weight: 500; color: var(--dim); padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--border2); }
.votos td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
.votos .vb { display: flex; gap: 5px; flex-wrap: wrap; }
.votos .vb button { font: inherit; font-family: var(--ff-dados); font-size: var(--fs-micro); font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em; padding: 5px 9px; border-radius: var(--r-1);
  border: 1px solid var(--border2); background: var(--card); color: var(--muted); cursor: pointer; }
.votos .vb button:hover { background: var(--hover); color: var(--text); }
.votos .vb button.on { color: var(--on-accent); background: var(--green); border-color: var(--green); }
.votos .vb button.on.neg { background: var(--danger-bg); border-color: var(--danger-bg); color: #fff; }
.votos .vb button.on.outra { background: var(--orange); border-color: var(--orange); color: #fff; }
.votos .mv { background: none; border: 0; color: var(--dim); cursor: pointer; padding: 3px 4px;
  display: inline-flex; }
.votos .mv:hover { color: var(--text); }
.votos .mv svg { width: 14px; height: 14px; }

/* ================================================================
   MONITOR DE PRÉVIA — o único retângulo escuro da tela, e é honesto:
   é o quadro do vMix. Moldura de fio, rótulo em mono, como monitor de
   conferência na mesa de corte.
   ================================================================ */
.previa { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid var(--border2); border-radius: var(--r-1); background: #0b1620; }
.previa iframe { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; border: 0;
  transform-origin: 0 0; pointer-events: none; }
/* z-index: o iframe vem depois no HTML e cobria o rótulo */
.previa .rot { position: absolute; z-index: 2; left: 9px; top: 7px; margin: 0; font-family: var(--ff-dados);
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.55);
  text-shadow: 0 1px 3px rgba(0,0,0,.7); }

/* ================================================================
   AVISO (toast) — flutua, então tem corpo próprio
   ================================================================ */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(14px); opacity: 0;
  background: var(--text); color: var(--bg); padding: 11px 16px; border-radius: var(--r-1);
  box-shadow: var(--sombra-flut); font-size: var(--fs-xs); font-weight: 500; z-index: 50;
  pointer-events: none; max-width: 90vw; transition: opacity var(--tempo), transform var(--tempo);
  border-left: 3px solid var(--text); }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { border-left-color: var(--green); }
.toast.erro { border-left-color: var(--ar); }

/* aviso de queda: a única coisa na tela quando o /me não responde */
.gc-queda { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-6); background: color-mix(in srgb, var(--red) 12%, transparent);
  border-bottom: 1px solid var(--border2); font-size: var(--fs-sm); }
.gc-queda span { color: var(--muted); font-family: var(--ff-dados); font-size: var(--fs-xs); }

/* ================================================================
   VAZIOS — convite pra agir, nunca "sem resultados"
   ================================================================ */
.vazio, .vazio-rev { padding: var(--sp-4) 0; color: var(--dim); font-size: var(--fs-xs); }
.vazio-rev { font-family: var(--ff-serif); font-size: var(--fs-base); font-style: italic; }

/* ================================================================
   UTILITÁRIOS
   ================================================================ */
.linha { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.espaco { flex: 1; }
.mute { color: var(--dim); font-size: var(--fs-xs); }
.dim { color: var(--muted); }
.dados { font-family: var(--ff-dados); }
code { font-family: var(--ff-dados); font-size: .92em; }

/* ================================================================
   A PORTA (login) — não é cartão flutuando no vazio. A entrada é
   COMPOSTA como matéria: chapéu, manchete, linha fina; e o formulário
   com campo de fio embaixo, que é formulário em papel. No pé, o fio
   com o estado do sistema.
   ================================================================ */
body.porta { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; }
.lg { align-self: center; width: 100%; max-width: 1080px; margin: 0 auto;
  padding: var(--sp-8) clamp(24px, 7vw, 96px); display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
@media (max-width: 860px) { .lg { grid-template-columns: 1fr; gap: var(--sp-8); } }
.lg-losango { width: 20px; height: 20px; border-radius: 5px; background: var(--icl-grad);
  transform: rotate(-18deg); margin-bottom: var(--sp-4); }
.lg-chapeu { font-family: var(--ff-dados); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: .18em; font-weight: 500; color: var(--accent); margin-bottom: var(--sp-3); }
.lg-manchete { font-family: var(--ff-serif); font-size: clamp(32px, 5vw, 50px); font-weight: 600;
  line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.lg-linhafina { font-family: var(--ff-serif); font-size: var(--fs-lg); line-height: 1.55; color: var(--muted);
  max-width: 46ch; margin-top: var(--sp-4); }
.lg-painel h2 { font-family: var(--ff-serif); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -.015em; }
.lg-sub { font-size: var(--fs-xs); color: var(--muted); margin: 5px 0 var(--sp-6); }
/* ARMADILHA: o padrão aqui é ESCONDER. Todo form dentro de .lg-painel nasce
   invisível e só aparece com `.ativo` — a regra serve à tela de entrada, que
   alterna entre entrar e pedir acesso. Tela nova que reaproveite este painel
   precisa marcar o form com `ativo`, senão ele some inteiro e sem aviso: foi o
   que aconteceu com senha.html, e o sintoma foi ninguém conseguir definir a
   primeira senha do sistema. */
.lg-painel form { display: none; }
.lg-painel form.ativo { display: block; }
/* campo com fio embaixo, não caixa */
.lg-painel .campo { display: block; margin-bottom: var(--sp-4); }
.lg-painel input { background: none; border: 0; border-bottom: 2px solid var(--border2); border-radius: 0;
  padding: 8px 2px; font-size: var(--fs-base); box-shadow: none !important; }
.lg-painel input:focus { border-bottom-color: var(--accent); }
.lg-painel .btn { margin-top: var(--sp-2); }
.lg-msg { font-size: var(--fs-xs); margin-top: var(--sp-3); color: var(--muted); }
.lg-msg.erro { color: var(--red); }
.lg-msg.ok { color: var(--green); }
.lg-troca { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--sp-4);
  border-top: 1px solid var(--border); padding-top: var(--sp-3); }
.lg-aviso { font-size: var(--fs-micro); color: var(--dim); margin-bottom: var(--sp-3); }
.lg-rail { border-top: 1px solid var(--border); padding: 11px clamp(24px, 7vw, 96px); display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap; font-family: var(--ff-dados); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.lg-rail .luz { width: 9px; height: 9px; border-radius: 3px; transform: rotate(-18deg); flex: none;
  background: var(--green); animation: tally 2.6s ease-in-out infinite; }
.lg-rail .fim { margin-left: auto; }
/* entrada orquestrada, não efeitos espalhados */
.lg > div > * { animation: lgSobe .34s cubic-bezier(.2,.7,.3,1) both; }
.lg > div > *:nth-child(2) { animation-delay: .05s; }
.lg > div > *:nth-child(3) { animation-delay: .1s; }
.lg > div > *:nth-child(4) { animation-delay: .15s; }
@keyframes lgSobe { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }