/* Connect Alpes — painel. Visual aprovado em 07/10/2026 (docs/design/*.dc.html):
   menu lateral, painéis com contorno fino (raio 8), botões e campos raio 6, etiquetas raio 4.
   Exceções: o radar e a linha de campanha da Conferência ficam como antes. */

/* ---------- fontes (guardadas no projeto, licença OFL em ../fonts/OFL.txt) ---------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2"); }

/* ---------- temas (exatamente as variáveis da referência de 07/10) ---------- */
.t-light{--bg:#F2F4F8;--pn:#FFFFFF;--ln:#DDE2EC;--tx:#18203A;--mu:#5E6885;--ac:#2F5FC4;--act:#FFFFFF;--acs:#E8EEFA;--ok:#17734F;--oks:#E5F3EC;--wa:#7D5A12;--was:#FBF1DA;--er:#AE3A2E;--ers:#F9E7E4;--off:#E4E8F0;--bok:#2E9E74;--bwa:#D9A43A;--ber:#CC5546;--cokt:#FFFFFF;--cwat:#18203A;--cert:#FFFFFF;--top:#0C1A3F;--sh:0 0 0 1px #DDE2EC,0 1px 2px rgba(20,40,90,0.04);
  --sh-campanha:0 1px 2px rgba(20,40,90,0.06),0 8px 24px rgba(20,40,90,0.07)}
.t-dark{--bg:#0D1222;--pn:#161D33;--ln:#263051;--tx:#EAF0FF;--mu:#98A3C4;--ac:#86A6E8;--act:#0B1220;--acs:#1C2A52;--ok:#5CC9A0;--oks:#15332A;--wa:#DDB868;--was:#352B14;--er:#EE8A7F;--ers:#3B2320;--off:#232C49;--bok:#3DB58A;--bwa:#D9AE5A;--ber:#D9695E;--cokt:#06140D;--cwat:#18203A;--cert:#18203A;--top:#080D1C;--sh:0 0 0 1px #263051,0 1px 2px rgba(0,0,0,0.3);
  --sh-campanha:0 1px 2px rgba(0,0,0,0.3),0 8px 24px rgba(0,0,0,0.25);color-scheme:dark}

/* ---------- base ---------- */
html, body { background: var(--bg); }
body { margin: 0; color: var(--tx); font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.45; }
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }
button, input, select, textarea { font-family: inherit; font-size: 14px; }
.mono { font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--ac); outline-offset: 2px; }
[hidden] { display: none !important; }
.cor-ok { color: var(--ok); } .cor-er { color: var(--er); } .cor-wa { color: var(--wa); } .cor-tx { color: var(--tx); } .cor-mu { color: var(--mu); } .cor-ac { color: var(--ac); }
.texto-mu, .mu { color: var(--mu); }
.forte { font-weight: 600; }
.pequeno { font-size: 13px; }

/* ---------- estrutura: menu lateral + corpo (igual ao design) ---------- */
.app { container: app / inline-size; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.shell { flex: 1; display: flex; min-height: 0; }
.body { flex: 1; min-width: 0; container: body / inline-size; }
.app { overflow-x: clip; }
.sb { flex: 0 0 232px; width: 232px; min-width: 0; box-sizing: border-box; background: var(--top); color: #fff; padding: 14px 10px 0; display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; height: 100vh; z-index: 40; }
.sb :focus-visible { outline-color: #FFFFFF; }
.sb-brand { display: flex; align-items: baseline; gap: 8px; padding: 0 8px; }
.sb-nome { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.sb-sub { font-size: 12px; color: #B4BEDA; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-gaveta { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sb-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.sb-g { display: flex; flex-direction: column; }
.sb-t { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 28px; padding: 0 8px; border: 0; background: transparent; cursor: pointer; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: #8492B8; border-radius: 6px; }
.sb-t:hover { color: #D5DCF0; }
.sb-seta { transition: transform .15s; font-size: 12px; }
.sb-g.fechado .sb-seta { transform: rotate(-90deg); }
.sb-g.fechado .sb-itens { display: none; }
.sb-itens { display: flex; flex-direction: column; gap: 1px; }
.sb-i { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; padding: 0 10px; border-radius: 6px; color: #D5DCF0; font-size: 13.5px; }
.sb-i:hover { color: #FFFFFF; background: rgba(255,255,255,.06); }
.sb-i.on { background: #2F5FC4; color: #fff; font-weight: 600; }
.sb-n { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: #fff; background: #AE3A2E; border-radius: 4px; padding: 0 6px; }
.sb-n-info { background: rgba(134,166,232,.22); color: #C9D7F7; }
.sb-i.on .sb-n-info { background: rgba(255,255,255,.22); color: #fff; }
.sb-foot { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 6px 12px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: #B4BEDA; }
.sb-av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #2F5FC4; color: #fff; display: grid; place-items: center; font-weight: 700; }
.sb-quem { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sb-quem b { color: #FFFFFF; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-quem small { font-size: 11.5px; color: #8492B8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-mais { flex: none; width: 36px; height: 36px; border-radius: 6px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; }
.sb-usuario { position: absolute; left: 6px; right: 6px; bottom: calc(100% + 6px); display: flex; flex-direction: column; padding: 6px; border-radius: 8px; background: #16224A; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 12px 28px rgba(0,0,0,.35); }
.sb-op { display: flex; align-items: center; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: #E2E8F8; font-size: 13.5px; text-align: left; cursor: pointer; box-sizing: border-box; }
.sb-op:hover { background: rgba(255,255,255,.08); color: #fff; }
.sb-btn { min-height: 40px; padding: 0 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,.28); background: transparent; color: #fff; font-size: 14px; cursor: pointer; }
.sb-menu { display: none; }
.sb-sair { margin: 0; }
.sb-fundo { display: none; }
@container app (max-width: 1000px) {
  .shell { flex-direction: column; }
  .sb { flex: none; width: auto; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 8px 16px; gap: 8px 12px; height: auto; position: sticky; top: 0; }
  .sb-brand { padding: 0; flex: 1; min-width: 0; }
  .sb-menu { display: block; margin-left: auto; min-height: 44px; }
  .sb-gaveta { position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); padding: 14px 10px 0; background: var(--top); transform: translateX(-102%); visibility: hidden; z-index: 60; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .sb.open .sb-gaveta { transform: none; visibility: visible; }
  .sb.pronto .sb-gaveta { transition: transform .2s, visibility .2s; }
  .sb.open ~ .sb-fundo { display: block; position: fixed; inset: 0; background: rgba(5,10,25,.5); z-index: 50; }
  .sb-i, .sb-t { min-height: 44px; }
  .sb-op { min-height: 44px; }
  .sb-mais { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .sb-gaveta, .sb-seta { transition: none; } }

.pg { box-sizing: border-box; width: 100%; max-width: 1680px; margin: 0 auto; padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 20px; }
.h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.h1 .sub, .titulo-sub { font-weight: 400; font-size: 14px; color: var(--mu); }
.h2, .subtitulo { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.subtitulo { margin: 0; }
.pn, .cartao { background: var(--pn); border-radius: 8px; box-shadow: var(--sh); }
.pn { padding: 20px; box-sizing: border-box; }
.linha { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--ln); min-height: 44px; box-sizing: border-box; }
.link-acao { color: var(--ac); font-size: 13px; font-weight: 600; }
.link-acao:hover { color: var(--ac); text-decoration: underline; }
.aviso { padding: 12px 16px; border-radius: 6px; background: var(--ers); color: var(--er); font-weight: 600; }
.aviso-ok { background: var(--oks); color: var(--ok); }
.aviso-wa { background: var(--was); color: var(--wa); }
.vazio { background: var(--pn); border-radius: 8px; box-shadow: var(--sh); padding: 28px; text-align: center; color: var(--mu); }
.em-breve { padding: 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.em-breve p { margin: 0; color: var(--mu); max-width: 60ch; }

/* ---------- botões, campos e etiquetas ---------- */
.botao, .botao-secundario { min-height: 40px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--ln); background: var(--pn); color: var(--tx); font-size: 14px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; }
.botao-primario { min-height: 44px; padding: 0 20px; border-radius: 6px; border: 0; background: var(--ac); color: var(--act); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; }
.botao-secundario { min-height: 44px; padding: 0 16px; }
.botao-perigo { min-height: 40px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--ber); background: var(--pn); color: var(--er); font-size: 14px; font-weight: 600; cursor: pointer; }
.botao-texto-er { border: 0; background: transparent; color: var(--er); font-size: 14px; font-weight: 600; border-radius: 6px; cursor: pointer; }
button:disabled { cursor: not-allowed; }
.botao-primario:disabled { opacity: 0.6; }
.botao:disabled, .botao-secundario:disabled { color: var(--mu); }
.botao-texto-er:disabled { opacity: 0.6; }
.tag-em-breve { margin-left: 6px; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.22); }
.botao .tag-em-breve, .botao-secundario .tag-em-breve { background: var(--off); color: var(--mu); }
.botao-texto-er .tag-em-breve { background: var(--ers); }
.campo, .campo-pilula, .select-pilula { min-height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: 6px; border: 1px solid var(--ln); background: var(--pn); color: var(--tx); font: inherit; }
textarea.campo { padding: 10px 14px; min-height: 96px; resize: vertical; }
.campo:disabled { background: var(--bg); color: var(--mu); }
.campo-erro { border-color: var(--ber); }
.rotulo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--mu); }
.rotulo > .campo { color: var(--tx); font-size: 14px; }
.erro-campo { color: var(--er); font-size: 13px; font-weight: 600; }
.chip, .etiqueta { font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.chip-ok { color: var(--ok); background: var(--oks); }
.chip-er { color: var(--er); background: var(--ers); }
.chip-wa { color: var(--wa); background: var(--was); }
.chip-neutro { color: var(--mu); background: var(--off); }
.chip-ac { color: var(--ac); background: var(--acs); }
.botao-ouvir { flex: none; display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 6px; background: var(--acs); color: var(--ac); font-weight: 600; font-size: 13px; }
.botao-ouvir:hover { color: var(--ac); }
.botao-ver { flex: none; display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--ln); background: var(--pn); color: var(--tx); font-weight: 600; font-size: 13px; }

/* ---------- abas que filtram (Ao vivo) ---------- */
.abas-sit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@container body (max-width: 1000px) { .abas-sit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aba-sit { min-height: 84px; padding: 12px 16px; border-radius: 8px; border: 2px solid transparent; box-shadow: var(--sh); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; cursor: pointer; color: var(--tx); background: var(--pn); box-sizing: border-box; }
.aba-sit-rotulo, .aba-sit-sub { font-size: 12px; color: var(--mu); }
.aba-sit-titulo { font-weight: 700; font-size: 15px; }
.aba-sit.tom-tx .aba-sit-titulo { color: var(--tx); } .aba-sit.tom-tx.ativa { border-color: var(--ac); }
.aba-sit.tom-er { background: var(--ers); } .aba-sit.tom-er .aba-sit-titulo { color: var(--er); } .aba-sit.tom-er.ativa { border-color: var(--ber); }
.aba-sit.tom-wa { background: var(--was); } .aba-sit.tom-wa .aba-sit-titulo { color: var(--wa); } .aba-sit.tom-wa.ativa { border-color: var(--bwa); }

/* ---------- Ao vivo ---------- */
.av-topo { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.av-topo > div { flex: 1 1 320px; }
.cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.lista-emissoras { flex: 5 1 560px; min-width: 0; display: flex; flex-direction: column; }
.col-d { flex: 4 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.tb { display: flex; flex-direction: column; }
.th { display: flex; gap: 16px; padding: 6px 0; font-size: 12px; color: var(--mu); }
.tr { display: flex; align-items: center; gap: 16px; padding: 10px 0; border-top: 1px solid var(--ln); min-height: 44px; box-sizing: border-box; }
a.tr:hover { background: var(--bg); }
.c-nome { flex: 2 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; }
.c-cli { flex: 1.3 1 0; min-width: 0; overflow-wrap: break-word; }
.c-bar { flex: 1.6 1 0; display: flex; align-items: center; gap: 10px; }
.c-hora { flex: 0 0 56px; font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--mu); }
.c-sit { flex: 0 0 104px; font-weight: 600; font-size: 13px; }
.barra-fina { flex: 1; height: 6px; border-radius: 3px; background: var(--off); overflow: hidden; display: flex; }
.seg-ok { background: var(--bok); } .seg-wa { background: var(--bwa); } .seg-er { background: var(--ber); } .seg-off { background: var(--off); }
.logo-mini { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #FFFFFF; object-fit: contain; box-shadow: 0 0 0 1px var(--ln); }
.logo-titulo { width: 32px; height: 32px; vertical-align: -8px; margin-right: 10px; }
.ins { display: flex; flex-direction: column; gap: 2px; }
.ins-barra { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin: 10px 0 12px; background: var(--off); }
.feed-linha { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 0; border-top: 1px solid var(--ln); min-height: 44px; box-sizing: border-box; }
a.feed-linha:hover { background: var(--bg); }
.feed-hora { flex: none; font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--mu); }
.feed-vazio { margin: 0; padding: 10px 0; color: var(--mu); font-size: 13px; border-top: 1px solid var(--ln); }
.fora-da-conta { margin: 4px 0 0; font-size: 13px; color: var(--mu); }

/* ---------- radar (escuro fixo nos dois temas; não muda) ---------- */
@keyframes girar{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes eco{0%{opacity:1;transform:translate(-50%,-50%) scale(1.7)}22%{opacity:.55;transform:translate(-50%,-50%) scale(1)}100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}}
@keyframes onda{0%{opacity:.9;transform:translate(-50%,-50%) scale(.4)}35%{opacity:0;transform:translate(-50%,-50%) scale(3.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(3.2)}}
.radar { background: #0B0F0D; border-radius: 8px; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; color: #C9D3CE; }
.radar-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.radar-titulo { font-weight: 600; color: #E9EFEC; }
.radar-estado { font-family: "IBM Plex Mono", ui-monospace, monospace; color: #35D08A; }
.radar-visor { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1 / 1; margin: 0 auto; border-radius: 50%; overflow: hidden; border: 1px solid #24342D; background: radial-gradient(circle, #10201A 0%, #0B0F0D 72%); }
.radar-anel { position: absolute; border-radius: 50%; border: 1px solid #1D2B25; }
.radar-eixo-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: #1D2B25; }
.radar-eixo-h { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: #1D2B25; }
.radar-mapa { position: absolute; inset: 7%; }
.radar-mapa svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.radar-mapa path { fill: #16241E; stroke: #4A6358; stroke-width: 1.2; stroke-linejoin: round; }
.radar-varredura { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, transparent 285deg, rgba(53,208,138,0.42) 360deg); animation: girar 6s linear infinite; }
.radar-ponteiro { position: absolute; inset: 0; animation: girar 6s linear infinite; }
.radar-ponteiro > div { position: absolute; left: 50%; top: 0; height: 50%; width: 2px; margin-left: -1px; background: linear-gradient(to top, transparent, #35D08A); }
.radar-centro { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #35D08A; }
.rp { position: absolute; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; transform: translate(-50%,-50%); animation: eco 6s linear infinite; }
.rp-localizada { width: 13px; height: 13px; background: #35D08A; }
.rp-no_ar { background: #E9EFEC; }
.rp-sem_conexao { background: #FF7A6B; }
.rp-sem_fonte { border: 2px solid #7F8D86; }
.rp-onda { position: absolute; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; border: 2px solid #35D08A; transform: translate(-50%,-50%); animation: onda 6s ease-out infinite; pointer-events: none; }
.radar-etiqueta { position: absolute; transform: translate(-100%, -150%); margin-left: -10px; padding: 3px 8px; border-radius: 3px; background: #0B0F0D; border: 1px solid #35D08A; color: #E9EFEC; font-size: 12px; white-space: nowrap; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.radar-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 12px; color: #A9B5AF; }
.radar-legenda > span { display: flex; align-items: center; gap: 6px; }
.leg { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; }
.leg-localizada { width: 11px; height: 11px; background: #35D08A; }
.leg-no-ar { background: #E9EFEC; }
.leg-sem-conexao { background: #FF7A6B; }
.leg-sem-fonte { border: 2px solid #7F8D86; }

/* ---------- Conferência: topo, resumo e filtros ---------- */
.conf-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.conf-titulo { flex: 1 1 220px; }
.conf-busca { width: 220px; }
.conf-resumo { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; }
.conf-resumo-numeros { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.conf-total { display: flex; align-items: baseline; gap: 10px; }
.conf-numero { font-size: 48px; font-weight: 700; line-height: 1; color: var(--ok); }
.conf-total-texto { color: var(--mu); }
.barra-mes { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--off); }
.conf-legenda { font-size: 13px; color: var(--mu); }
.conf-filtros { flex: 2 1 420px; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.filtro { min-height: 72px; padding: 10px 14px; border-radius: 8px; border: 2px solid var(--ln); background: var(--pn); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; text-align: left; }
.filtro.ativo { background: var(--bg); }
.filtro-ac { color: var(--ac); } .filtro-ac.ativo { border-color: var(--ac); }
.filtro-er { color: var(--er); } .filtro-er.ativo { border-color: var(--er); }
.filtro-wa { color: var(--wa); } .filtro-wa.ativo { border-color: var(--wa); }
.filtro-ok { color: var(--ok); } .filtro-ok.ativo { border-color: var(--ok); }
.filtro-n { font-size: 26px; font-weight: 700; line-height: 1.1; }
.filtro-rotulo { font-size: 13px; }
.conf-fora { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.conf-fora-rotulo { font-size: 13px; color: var(--mu); margin-right: 2px; }
.pilula-fora { min-height: 36px; padding: 0 12px; border-radius: 6px; border: 1px dashed var(--bwa); background: var(--pn); color: var(--wa); font-size: 13px; cursor: pointer; }
.pilula-fora b { font-weight: 700; }
.pilula-fora.ativo { border-style: solid; border-width: 2px; background: var(--was); }
.pilula-fora:disabled { opacity: 0.5; border-color: var(--ln); color: var(--mu); }
.conf-clientes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.conf-clientes-rotulo { font-size: 13px; color: var(--mu); margin-right: 4px; }
.pilula-cliente { min-height: 44px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--ln); background: var(--pn); color: var(--tx); font-size: 14px; cursor: pointer; }
.pilula-cliente.ativo { border-color: var(--ac); background: var(--ac); color: var(--act); font-weight: 600; }
.conf-contagem { margin-left: auto; font-size: 13px; color: var(--mu); }

/* ---------- Conferência: linha de campanha (EXCEÇÃO: fica exatamente como antes) ---------- */
.conf-campanhas { display: flex; flex-direction: column; gap: 12px; }
.campanha { background: var(--pn); border-radius: 16px; box-shadow: var(--sh-campanha); border: 2px solid transparent; overflow: hidden; }
.campanha.aberta { border-color: var(--ac); }
.campanha-cabecalho { width: 100%; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px; border: 0; background: transparent; color: var(--tx); font-size: 14px; text-align: left; cursor: pointer; }
.campanha-cabecalho:focus-visible { outline-offset: -3px; border-radius: 14px; }
.bola { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: var(--tx); border: 4px solid var(--off); box-sizing: border-box; overflow: hidden; }
.bola-ok { border-color: var(--bok); } .bola-wa { border-color: var(--bwa); } .bola-er { border-color: var(--ber); } .bola-neutra { border-color: var(--off); }
.bola-logo { background: #FFFFFF; padding: 3px; }
.bola-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; display: block; }
.campanha-nome { flex: 1 1 200px; min-width: 0; }
.campanha-emissora { display: block; font-weight: 700; font-size: 15px; }
.campanha-sub { display: block; font-size: 13px; color: var(--mu); }
.campanha-progresso { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.campanha-progresso-texto { font-size: 13px; }
.barra-campanha { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--off); }
.campanha-extra { font-size: 12px; color: var(--mu); }
.recentes { display: flex; gap: 4px; }
.rec { width: 14px; height: 22px; border-radius: 4px; background: var(--off); }
.rec-todas { background: var(--bok); } .rec-parte { background: var(--bwa); } .rec-nenhuma { background: var(--ber); } .rec-vir { background: var(--off); }
.rec-fora { background: transparent; border: 1.5px dashed var(--bwa); box-sizing: border-box; }
.chip-campanha { flex: none; font-size: 12px; padding: 4px 12px; min-width: 88px; box-sizing: border-box; text-align: center; border-radius: 999px; }
.campanha-seta { flex: none; color: var(--mu); }
.campanha.aberta .campanha-seta { transform: rotate(180deg); }
@container body (max-width: 900px) {
  .campanha-cabecalho { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 12px 14px; grid-template-areas: "bola nome chip seta" "prog prog prog rec"; }
  .campanha-cabecalho .bola { grid-area: bola; }
  .campanha-nome { grid-area: nome; }
  .chip-campanha { grid-area: chip; }
  .campanha-seta { grid-area: seta; }
  .campanha-progresso { grid-area: prog; }
  .recentes { grid-area: rec; align-self: end; }
}
@container body (max-width: 640px) {
  .campanha-cabecalho { padding: 14px 16px; gap: 8px 12px; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "bola nome seta" "bola chip rec" "prog prog prog"; }
  .campanha-emissora { font-size: 14px; }
  .chip-campanha { justify-self: start; min-width: 0; }
  .recentes { align-self: center; }
  .campanha-seta { justify-self: end; align-self: start; }
}

/* corpo aberto da campanha (calendário e inserções do dia) no visual novo */
.campanha-corpo { display: flex; flex-wrap: wrap; gap: 24px 32px; padding: 4px 20px 20px; border-top: 1px solid var(--ln); }
.campanha-carregando { margin: 0; padding-top: 16px; color: var(--mu); }
.cal-bloco, .dia-bloco { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.bloco-titulo { font-weight: 700; }
.bloco-titulo-sub { font-weight: 400; color: var(--mu); font-size: 13px; }
.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 420px; }
.cal-semana { text-align: center; font-size: 12px; color: var(--mu); }
.cal-dia { min-height: 46px; border-radius: 6px; border: 2px solid transparent; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; cursor: pointer; background: transparent; color: var(--tx); font: inherit; }
.cal-branco { visibility: hidden; }
.cal-vazio { color: var(--mu); cursor: default; opacity: 0.55; }
.cal-vir { border: 1.5px solid var(--mu); }
.cal-todas { background: var(--bok); color: var(--cokt); }
.cal-parte { background: var(--bwa); color: var(--cwat); }
.cal-nenhuma { background: var(--ber); color: var(--cert); }
.cal-fora { border: 1.5px dashed var(--bwa); color: var(--mu); }
.cal-dia.selecionado { outline: 3px solid var(--ac); outline-offset: 2px; }
.cal-n { font-size: 11px; opacity: 0.8; }
.cal-v { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; font-weight: 600; min-height: 1em; }
.cal-legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--mu); }
.cal-legenda > span { display: flex; align-items: center; gap: 6px; }
.leg-q { width: 11px; height: 11px; border-radius: 3px; box-sizing: border-box; }
.leg-todas { background: var(--bok); } .leg-parte { background: var(--bwa); } .leg-nenhuma { background: var(--ber); } .leg-vir { border: 1.5px solid var(--mu); } .leg-fora { border: 1.5px dashed var(--bwa); }
.insercao-linha { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 6px; background: var(--pn); box-shadow: var(--sh); }
.ponto-insercao { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--off); box-sizing: border-box; }
.pi-foi_ao_ar { background: var(--bok); }
.pi-nao_localizada { background: var(--ber); }
.pi-em_revisao, .pi-fora { background: var(--bwa); }
.pi-nao_deu_para_ouvir, .pi-sem_fonte, .pi-sem_termo { background: transparent; border: 2px solid var(--bwa); }
.pi-cancelada { background: transparent; border: 2px solid var(--mu); }
.insercao-texto { flex: 1; min-width: 0; }
.insercao-ordem { display: block; font-weight: 600; }
.insercao-situacao { display: block; font-size: 13px; color: var(--mu); }
.insercao-grade { display: block; font-size: 12px; color: var(--mu); font-family: "IBM Plex Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.campanha-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip-opec { flex: none; color: var(--mu); background: var(--off); font-family: "IBM Plex Mono", ui-monospace, monospace; }
.chip-opec.chip-wa { color: var(--wa); background: var(--was); }
.opec-linha { font-size: 13px; }
.opec-linha b { font-weight: 600; color: var(--tx); }
.opec-diverge, .opec-diverge b { color: var(--wa); }

/* ---------- Detalhe da inserção ---------- */
.trilha { font-size: 13px; color: var(--mu); }
.detalhe-titulo { margin-top: 4px; }
.abas-insercao { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.aba-insercao { min-height: 84px; padding: 12px 16px; border-radius: 8px; border: 2px solid transparent; box-shadow: var(--sh); display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; cursor: pointer; color: var(--tx); font-size: 14px; }
.aba-ordem, .aba-sub { font-size: 12px; color: var(--mu); }
.aba-titulo { font-weight: 700; font-size: 15px; }
.tom-aba-ok { background: var(--oks); } .tom-aba-ok .aba-titulo { color: var(--ok); } .tom-aba-ok.ativa { border-color: var(--bok); }
.tom-aba-er { background: var(--ers); } .tom-aba-er .aba-titulo { color: var(--er); } .tom-aba-er.ativa { border-color: var(--ber); }
.tom-aba-wa { background: var(--was); } .tom-aba-wa .aba-titulo { color: var(--wa); } .tom-aba-wa.ativa { border-color: var(--bwa); }
.tom-aba-tx { background: var(--pn); } .tom-aba-tx .aba-titulo { color: var(--tx); } .tom-aba-tx.ativa { border-color: var(--mu); }
.tom-aba-mu { background: var(--pn); } .tom-aba-mu .aba-titulo { color: var(--mu); } .tom-aba-mu.ativa { border-color: var(--mu); }
#painel:focus-visible { outline-offset: 4px; border-radius: 8px; }
/* lista compacta (mais de 6 inserções no dia): a selecionada abre logo abaixo dela */
.lista-insercoes { padding: 8px 20px; }
.li-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0 6px; }
.li-linha { width: 100%; display: flex; align-items: center; gap: 16px; padding: 10px 8px; min-height: 44px; box-sizing: border-box; border: 0; border-top: 1px solid var(--ln); border-left: 3px solid transparent; background: transparent; color: var(--tx); font-size: 14px; text-align: left; cursor: pointer; }
.li-linha:hover { background: var(--bg); }
.li-linha.ativa { background: var(--acs); border-left-color: var(--ac); }
.li-ordem { flex: 0 0 34px; font-weight: 600; }
.li-faixa { flex: 0 0 120px; font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--mu); }
.li-sit { flex: 0 0 170px; font-weight: 600; font-size: 13px; }
.li-sub { flex: 1 1 0; min-width: 0; font-size: 13px; color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-seta { flex: none; color: var(--mu); }
.li-linha.ativa .li-seta { transform: rotate(180deg); }
.li-aberta { padding: 4px 0 20px; }
.detalhe-colunas { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.detalhe-principal { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.detalhe-lateral { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.detalhe-secao { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.audio-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.audio-estado { font-size: 13px; }
.audio-linha { display: flex; align-items: center; gap: 16px; }
.botao-tocar { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--ac); color: var(--act); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.botao-tocar:disabled { opacity: 0.5; }
.audio-onda-bloco { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.audio-onda { display: flex; align-items: center; gap: 2px; height: 68px; cursor: pointer; border-radius: 6px; }
.onda-barra { flex: 1 1 0; border-radius: 2px; background: var(--ac); opacity: 0.35; }
.onda-barra.marca { background: var(--bok); opacity: 1; }
.onda-barra.ouvido { opacity: 1; }
.audio-tempos { display: flex; justify-content: space-between; gap: 8px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; color: var(--mu); }
.transcricao { margin: 0; font-size: 17px; line-height: 1.7; max-width: 66ch; }
mark.termo { background: var(--oks); color: var(--ok); font-weight: 600; padding: 2px 8px; border-radius: 4px; font-family: "IBM Plex Mono", ui-monospace, monospace; white-space: nowrap; }
.nota { font-size: 12px; color: var(--mu); }
.detalhe-info { gap: 2px; }
.detalhe-info-titulo { margin-bottom: 8px; }
.detalhe-linha { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--ln); }
.detalhe-linha > span:last-child { text-align: right; overflow-wrap: anywhere; }
.detalhe-acoes { display: flex; flex-direction: column; gap: 10px; }
.botao-grande { min-height: 48px; }
a.botao-secundario { text-decoration: none; }
.painel-vazio { padding: 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.painel-vazio-titulo { margin: 0; font-size: 17px; font-weight: 700; }
.painel-vazio p { margin: 0; max-width: 60ch; color: var(--mu); }
.painel-acoes { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- formulários e listas das telas de gestão ---------- */
.form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; }
.form-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.barra-ferramentas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.barra-ferramentas .campo { flex: 1 1 220px; }
.grupo-abas { display: flex; flex-wrap: wrap; gap: 8px; }
.aba-filtro { min-height: 40px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--ln); background: var(--pn); color: var(--tx); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.aba-filtro.ativa { border-color: var(--ac); background: var(--ac); color: var(--act); font-weight: 600; }
.aba-filtro .n { font-family: "IBM Plex Mono", monospace; font-size: 12px; }
.lista-linha { width: 100%; display: flex; align-items: center; gap: 16px; padding: 12px 8px; min-height: 44px; box-sizing: border-box; border: 0; border-top: 1px solid var(--ln); background: transparent; color: var(--tx); text-align: left; font-size: 14px; }
button.lista-linha, a.lista-linha { cursor: pointer; }
button.lista-linha:hover, a.lista-linha:hover { background: var(--bg); }
.lista-linha.ativa { background: var(--acs); box-shadow: inset 3px 0 0 var(--ac); }
.lista-col { flex: 1 1 0; min-width: 0; }
.lista-col-2 { flex: 2 1 0; min-width: 0; }
.lista-col-fixa { flex: none; }
.lista-nome { font-weight: 600; display: block; }
.lista-sub { font-size: 13px; color: var(--mu); display: block; }
.colunas-gestao { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.colunas-gestao > .lado { flex: 4 1 380px; min-width: 0; }
.colunas-gestao > .principal { flex: 6 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.saude { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.saude > div { flex: 1 1 160px; min-width: 0; }
.saude-valor { font-weight: 700; font-size: 15px; }
.passos { display: flex; flex-wrap: wrap; gap: 8px; }
.passo { min-height: 40px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--ln); background: var(--pn); color: var(--tx); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.passo .num { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--mu); }
.passo.ativo { border-color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac); font-weight: 600; }
.passo.ativo .num { color: var(--ac); }
.trecho { font-size: 14px; line-height: 1.6; }
.trecho mark { background: var(--oks); color: var(--ok); font-weight: 600; padding: 1px 4px; border-radius: 4px; }
.logo-grande { width: 72px; height: 72px; border-radius: 50%; background: #FFFFFF; object-fit: contain; box-shadow: 0 0 0 1px var(--ln); }
.logo-vazia { width: 72px; height: 72px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--ln); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--mu); }
.caixa-segredo { font-family: "IBM Plex Mono", monospace; font-size: 15px; padding: 12px 14px; border-radius: 6px; background: var(--was); color: var(--wa); word-break: break-all; }
.tabela-rolagem { overflow-x: auto; }

/* ---------- Administração ---------- */
.cab-pn { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.cab-pn .h2 { margin: 0; }
.pendencia { flex: none; font-size: 13px; font-weight: 600; text-align: right; }
.pg-config { display: flex; flex-direction: column; gap: 20px; }
.config-linha { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--ln); }
.config-linha .config-texto { flex: 2 1 0; min-width: 0; }
.config-linha .config-campo { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.config-linha .campo { width: 100%; }
.config-padrao { flex: 0 0 150px; font-size: 13px; color: var(--mu); text-align: right; }
.marcas { display: flex; flex-wrap: wrap; gap: 8px; }
.marca { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--ln); border-radius: 6px; font-size: 14px; color: var(--tx); cursor: pointer; }
.marca input { width: 18px; height: 18px; margin: 0; }
.linha-aud { align-items: baseline; }
.aud-quando { flex: 0 0 120px; font-family: "IBM Plex Mono", monospace; font-size: 13px; color: var(--mu); }
@container body (max-width: 720px) {
  .config-linha { flex-wrap: wrap; gap: 8px 12px; }
  .config-linha .config-texto, .config-linha .config-campo { flex: 1 1 100%; }
  .config-padrao { flex: 1 1 100%; text-align: left; }
  .pendencia { flex: 1 1 100%; text-align: left; }
  .linha-aud { flex-wrap: wrap; gap: 4px 12px; }
  .aud-quando { flex: 1 1 auto; }
  .linha-aud > .lista-col { flex: 1 1 100%; order: 2; }
  .intg { flex-wrap: wrap; gap: 6px 12px; }
  .intg > .lista-col-2 { flex: 1 1 100%; }
}

/* ---------- Emissoras e mídias ---------- */
.logo-mini-vazia { display: inline-flex; align-items: center; justify-content: center; background: var(--bg); color: var(--mu); font-size: 10px; font-weight: 700; }
.aba-filtro.aba-alerta { border-color: var(--bwa); background: var(--was); color: var(--wa); font-weight: 600; }
.emi-n { min-width: 32px; text-align: right; color: var(--mu); }
.emi-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.emi-cab > .form-acoes { margin-left: auto; }
.emi-nota-logo { flex: 1 1 100%; margin: 0; }
.saude-largo { flex: 2 1 240px !important; }
.fonte { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; border-top: 1px solid var(--ln); }
.fonte-topo { display: flex; align-items: flex-start; gap: 16px; }
.fonte-endereco { font-size: 12px; color: var(--mu); overflow-wrap: anywhere; margin-top: 2px; }
.fonte-situacao { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.fonte-youtube { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--ln); }
.fonte-youtube .marca { min-height: 36px; }
.video-canal .lista-col, .linha-empilha .lista-col { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .video-canal, .linha-empilha { flex-direction: column; align-items: stretch; gap: 8px; } .video-canal .fonte-situacao, .linha-empilha .fonte-situacao { flex-direction: row; justify-content: space-between; align-items: center; } }
.fonte-teste:empty { display: none; }
.fonte-acoes .botao { min-height: 36px; padding: 0 12px; }
.sug-linha { flex-wrap: wrap; }
@container body (max-width: 720px) {
  .fonte-topo { flex-wrap: wrap; gap: 6px; }
  .fonte-situacao { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 10px; text-align: left; }
  .form-acoes.fonte-acoes > button { flex: 0 1 auto; }
  .emi-cab > .form-acoes { margin-left: 0; flex: 1 1 100%; }
  .emi-cab > .form-acoes > * { flex: 1 1 0; }
  .sug-linha .form-acoes { flex: 1 1 100%; }
  .lista-linha.emi-linha .lista-col { flex: 1 1 calc(100% - 44px); }
  .emi-linha .emi-n { margin-left: 40px; min-width: 0; text-align: left; }
}

/* ---------- Campanhas ---------- */
.cmp-manual { margin-left: 8px; vertical-align: 1px; }
.cmp-pend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cmp-pct { min-width: 64px; text-align: right; font-weight: 600; }
.passo .sb-n { margin-left: 2px; }
.termos { display: flex; flex-direction: column; gap: 4px; }
.termo { padding: 12px 0; border-top: 1px solid var(--ln); display: flex; flex-direction: column; gap: 8px; }
.termo-grade { grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); }
.termo-formas { grid-column: 1 / -1; }
.regra { border: 0; padding: 12px 0 0; margin: 12px 0 0; border-top: 1px solid var(--ln); display: flex; flex-direction: column; gap: 10px; }
.regra legend { padding: 0; margin-bottom: 8px; }
.regra .nota { margin: 0 0 8px; }
.achado { padding: 12px 0; border-top: 1px solid var(--ln); display: flex; flex-direction: column; gap: 6px; }
.achado-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.achado audio { width: 100%; max-width: 420px; height: 36px; }
.tabela-simples { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-simples th { text-align: left; font-size: 12px; font-weight: 600; color: var(--mu); padding: 8px; border-bottom: 1px solid var(--ln); white-space: nowrap; }
.tabela-simples td { padding: 10px 8px; border-bottom: 1px solid var(--ln); }
.marca-linha { cursor: pointer; gap: 12px; }
.marca-linha input { width: 18px; height: 18px; margin: 0; flex: none; }
.emissoras-escolha { max-height: 340px; overflow-y: auto; margin-top: 8px; }
.horarios { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.horarios .campo { width: 130px; }
.plano-linhas { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.plano-linha { border: 1px solid var(--ln); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.largo { grid-column: 1 / -1; }
.repro-numeros { margin-top: 12px; }
.sugestoes { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.sugestao .lista-sub { margin-top: 2px; }
.docs .linha { flex-wrap: wrap; }
.lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lado-a-lado-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px; border-radius: 6px; background: var(--bg); }
@container body (max-width: 720px) { .lado-a-lado { grid-template-columns: 1fr; } }
.area-teste { box-shadow: 0 0 0 1px var(--ac), var(--sh); }
.m3u-lista { max-height: 420px; overflow-y: auto; }
.m3u-linha { flex-wrap: wrap; }
.m3u-nome { flex: 2 1 280px; min-width: 0; display: flex; align-items: center; }
.m3u-linha .campo { flex: 1 1 200px; }
.fonte-endereco, .m3u-nome .lista-sub { overflow-wrap: anywhere; }
@container body (max-width: 720px) {
  .termo-grade { grid-template-columns: minmax(0, 1fr); }
  .lista-linha.cmp-linha .lista-col { flex: 1 1 calc(100% - 80px); }
  .cmp-linha .cmp-pct { flex: 0 0 auto; }
  .tabela-simples { font-size: 13px; }
  .horarios .form-acoes > * { flex: 0 1 auto; }
}

/* ---------- paginação e botão "i" ---------- */
.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--ln); }
.pag-conta { font-size: 13px; color: var(--mu); }
.pag-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pag-pagina { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mu); }
.pag-ir { width: 64px; min-height: 40px; padding: 0 8px; }
.pag-tamanho { min-height: 40px; width: auto; }
.info-caixa { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.info { width: 20px; height: 20px; min-height: 0; padding: 0; border-radius: 50%; border: 1px solid var(--ln); background: var(--pn); color: var(--ac); font: 600 12px/1 "IBM Plex Mono", monospace; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.info::after { content: ""; position: absolute; inset: -12px; }
.info:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.info-balao { position: absolute; z-index: 30; top: calc(100% + 8px); left: -10px; width: min(300px, 80vw); padding: 12px 14px; border-radius: 6px; background: var(--pn); color: var(--tx); box-shadow: 0 0 0 1px var(--ln), 0 8px 24px rgba(10, 20, 50, 0.16); display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 400; line-height: 1.45; text-align: left; letter-spacing: 0; text-transform: none; white-space: normal; }
.info-exemplo { color: var(--mu); }
.rotulo-texto { display: inline-flex; align-items: center; }
.audio-topo-acoes { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; }
.aba-sit-caixa { position: relative; display: flex; min-width: 0; }
.aba-sit-caixa > .aba-sit { flex: 1 1 auto; width: 100%; }
.aba-sit-caixa > .info-caixa { position: absolute; top: 8px; right: 8px; margin: 0; }
@container body (max-width: 720px) {
  .pag-pagina, .pag-tamanho { display: none; }
  .pag-acoes { flex: 1 1 100%; justify-content: space-between; }
  .pag-acoes > .botao { flex: 1 1 0; }
  .info-balao { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
}

/* ---------- Grade da OPEC e Revisão ---------- */
.grd-th { display: flex; gap: 16px; padding: 0 8px 8px; font-size: 12px; font-weight: 600; color: var(--mu); }
.grd-linha { gap: 16px; }
.grd-c-quando { flex: 0 0 150px; font-size: 13px; }
.grd-c-quem { flex: 2 1 0; min-width: 0; }
.grd-c-tipo { flex: 0 0 90px; font-size: 13px; }
.grd-c-opec { flex: 0 0 150px; }
.grd-c-sit { flex: 0 0 210px; display: flex; flex-wrap: wrap; gap: 4px; }
.grd-divergente { box-shadow: inset 3px 0 0 var(--bwa); }
.rev-atalhos { font-size: 12px; }
.rev-acao { display: inline-flex; align-items: center; }
.rev-audio { width: 100%; margin-top: 12px; }
kbd { margin-left: 6px; padding: 0 5px; border-radius: 4px; border: 1px solid currentColor; font: 600 11px/16px "IBM Plex Mono", monospace; opacity: 0.7; }
@container body (max-width: 1000px) {
  .grd-th { display: none; }
  .grd-linha { flex-wrap: wrap; gap: 4px 12px; }
  .grd-c-quem { flex: 1 1 100%; order: 2; }
  .grd-c-quando { flex: 1 1 auto; order: 1; }
  .grd-c-tipo { flex: 0 0 auto; order: 1; }
  .grd-c-opec, .grd-c-sit { flex: 0 1 auto; order: 3; }
  .rev-atalhos { display: none; }
}

/* ---------- sino e alertas ---------- */
.sb-brand { position: relative; }
.sino { margin-left: auto; position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; color: #D5DCF0; border-radius: 6px; }
.sino:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
.sino-n { position: absolute; top: 2px; right: 0; font: 600 11px/16px "IBM Plex Mono", monospace; color: #FFFFFF; background: #AE3A2E; border-radius: 4px; padding: 0 5px; }
.alerta { padding: 14px 0; border-top: 1px solid var(--ln); display: flex; flex-direction: column; gap: 6px; }
.alerta-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.alerta-titulo { font-weight: 600; }
.alerta:first-child { border-top: 0; padding-top: 0; }
.sb-sub { white-space: nowrap; }
@container body (max-width: 720px) {
  .alerta .form-acoes > button, .alerta .form-acoes > a { flex: 1 1 28%; }
  .alerta .form-acoes > .campo { flex: 1 1 100%; }
}
.alerta.nao-lido .alerta-titulo::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ac); margin-right: 8px; vertical-align: 1px; }
.alerta-historico { margin: 4px 0 0; padding: 8px 12px; border-radius: 6px; background: var(--bg); display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
@container app (max-width: 1000px) { .sino { margin-left: 8px; } }

/* ---------- Relatórios ---------- */
.rel-linha { flex-wrap: wrap; }
.rel-c-quando { flex: 0 0 170px; font-size: 13px; }
.rel-grupo { padding: 12px 0; border-top: 1px solid var(--ln); }
.rel-grupo .linha { border-top: 0; padding: 6px 0; min-height: 0; }
.rel-posicao { flex: 0 0 36px; color: var(--mu); }
.rel-barra { flex: 0 0 160px; height: 8px; border-radius: 4px; background: var(--off); overflow: hidden; display: flex; }
.rel-barra > span { display: block; height: 100%; }
.rel-pct { flex: 0 0 90px; text-align: right; font-weight: 600; }
.rel-resumo { white-space: pre-wrap; font: 13px/1.6 "IBM Plex Mono", monospace; margin: 0; padding: 14px; border-radius: 6px; background: var(--bg); }
@container body (max-width: 720px) {
  .rel-c-quando { flex: 1 1 100%; }
  .rel-ranking { flex-wrap: wrap; }
  .rel-barra { flex: 1 1 auto; order: 3; }
  .rel-pct { order: 2; flex: 0 0 auto; }
}

/* ---------- modo TV ---------- */
body.tv { margin: 0; background: var(--bg); }
.tv-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--tx); font-family: "IBM Plex Sans", sans-serif; }
.tv-topo { display: flex; align-items: center; gap: 16px; padding: 14px 24px; background: var(--top); color: #FFFFFF; }
.tv-marca { font-size: 18px; }
.tv-relogio { color: #B4BEDA; }
.tv-acoes { margin-left: auto; display: flex; gap: 10px; }
.tv-sair { display: inline-flex; align-items: center; color: #FFFFFF; }
.tv-corpo { flex: 1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 24px; padding: 24px; }
.tv-radar { min-height: 0; }
.tv-lado { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tv-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tv-numero { background: var(--pn); border-radius: 8px; box-shadow: var(--sh); padding: 18px; }
.tv-valor { font: 700 clamp(28px, 4vw, 56px)/1.1 "IBM Plex Mono", monospace; }
.tv-rotulo { color: var(--mu); font-size: clamp(13px, 1.2vw, 18px); margin-top: 6px; }
.tv-titulo { margin: 8px 0 0; font-size: clamp(15px, 1.4vw, 20px); }
.tv-feed { display: flex; flex-direction: column; gap: 8px; }
.tv-item { display: flex; gap: 12px; font-size: clamp(14px, 1.3vw, 20px); padding: 10px 0; border-top: 1px solid var(--ln); }
.tv-hora { color: var(--ok); }
@media (max-width: 1000px) { .tv-corpo { grid-template-columns: 1fr; } .tv-acoes .sb-btn { min-height: 40px; } }

/* ---------- Início do cliente ---------- */
.mi-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.mi-card { display: flex; flex-direction: column; gap: 8px; text-align: left; padding: 16px; border-radius: 8px; border: 1px solid var(--ln); background: var(--pn); color: var(--tx); cursor: pointer; font: inherit; }
.mi-card:hover { border-color: var(--ac); }
.mi-card.ativa { border-color: var(--ac); box-shadow: inset 0 0 0 1px var(--ac); }
.mi-card-titulo { font-weight: 600; }
.mi-card-numero b { font: 700 28px/1.1 "IBM Plex Mono", monospace; }
.mi-barra { height: 8px; border-radius: 4px; background: var(--off); overflow: hidden; display: flex; }
.mi-barra > span { display: block; height: 100%; }
.mi-item { padding: 12px 0; border-top: 1px solid var(--ln); display: flex; flex-direction: column; gap: 6px; }
.mi-item-topo { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.mi-audio { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mi-audio audio { flex: 1 1 260px; max-width: 480px; height: 40px; }
.mi-guia { box-shadow: 0 0 0 1px var(--ac), var(--sh); }
.mi-passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.mi-passos .feito { color: var(--ok); }

/* ---------- Termos de rastreio travados (docs/design/campanhas-termos.dc.html) ---------- */
.termos-pn { display: flex; flex-direction: column; gap: 12px; }
.termos-pn > .cab-pn { margin-bottom: 0; }
.botao-baixo { min-height: 34px; font-size: 12.5px; }
.botao-tracejado { border-style: dashed; }
.botao-link { min-height: 40px; padding: 0 8px; border: 0; background: transparent; color: var(--ac); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 6px; white-space: nowrap; }
.sugestoes:empty { display: none; }
.rastreio-usando { font-size: 13px; color: var(--mu); margin-top: 4px; }
.rastreio-usando b { color: var(--tx); font-weight: 600; }
.entra-teste { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; margin-bottom: 12px; border: 1px dashed var(--ln); border-radius: 6px; }
.por-fonte { margin: 8px 0; font-size: 13px; color: var(--mu); }
.por-fonte b { color: var(--tx); }
.usos { font-size: 12px; color: var(--mu); padding: 8px 10px; border: 1px dashed var(--ln); border-radius: 6px; }
.usos b { color: var(--tx); font-weight: 600; }
.nota-ok { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; padding: 8px 12px; border-radius: 6px; background: var(--oks); color: var(--ok); }
.nota-ok .botao-link { min-height: 32px; color: var(--ok); text-decoration: underline; }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; letter-spacing: .02em; white-space: nowrap; }
.tg-marca { background: var(--acs); color: var(--ac); }
.tg-produto { background: var(--oks); color: var(--ok); }
.tg-site { background: var(--was); color: var(--wa); }
.tg-frase, .tg-fonte { background: var(--off); color: var(--tx); }
.trow { border: 1px solid var(--ln); border-radius: 6px; overflow: hidden; }
.trow-ed { border: 2px solid var(--ac); }
.trow-cab { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 52px; box-sizing: border-box; }
.trow-tt { flex: 1 1 0; min-width: 0; }
.trow-tt b { font-size: 15px; overflow-wrap: anywhere; }
.trow-avisos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.trow-trava { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ok); font-weight: 600; white-space: nowrap; }
.trow-ver { padding: 0 12px 12px; }
.formas { display: flex; flex-wrap: wrap; gap: 6px; }
.forma { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 4px; background: var(--bg); border: 1px solid var(--ln); font-size: 13px; }
.forma button { border: 0; background: transparent; color: var(--mu); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px 6px; min-height: 24px; }
.forma-ro { padding: 3px 10px; }
.trow-edit { padding: 4px 12px 14px; display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--ln); background: var(--bg); }
.trow-campos { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.trow-campos > .campo { flex: 1 1 220px; }
.trow-tipo { flex: 0 0 160px; }
.trow-termo { flex: 1 1 220px; }
.trow-acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.termos-confirmar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.regra-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-top: 8px; border-top: 1px solid var(--ln); }
.seg { display: inline-flex; border: 1px solid var(--ln); border-radius: 6px; overflow: hidden; }
.seg span { padding: 8px 14px; font-size: 13px; color: var(--mu); }
.seg span.ativo { background: var(--ac); color: var(--act); font-weight: 600; }
.fontes-achado { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.frase-off { opacity: .6; }
@container body (max-width: 720px) {
  .trow-cab { flex-wrap: wrap; }
  .trow-cab .trow-tt { flex: 1 1 100%; order: -1; }
  .trow-tipo { flex: 1 1 100%; }
}

/* ---------- Nomes parecidos e procurar stream ---------- */
.sug-cartao { border: 1px solid var(--ln); border-radius: 6px; padding: 12px; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.sug-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.marca-caixa { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; }
.marca-caixa input { width: 18px; height: 18px; }
.sug-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sug-lado { border: 1px solid var(--ln); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sug-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--mu); }
.sug-nome { font-size: 15px; overflow-wrap: anywhere; }
.sug-campo { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.sug-campo > span:last-child { text-align: right; overflow-wrap: anywhere; }
.palavra-dif { background: var(--was); color: var(--wa); border-radius: 3px; padding: 0 2px; }
.sug-lote { margin-top: 4px; }
.cand { border-top: 1px solid var(--ln); padding: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.cand audio { max-width: 100%; }
.busca-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.busca-motivos { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--mu); }
.busca-motivos li { margin: 1px 0; }
.busca-logo { width: 64px; height: 64px; object-fit: contain; background: var(--pn); border: 1px solid var(--ln); border-radius: 6px; }
.busca-linha { border-top: 1px solid var(--ln); }
.busca-abrir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; width: 100%; text-align: left; background: none; border: 0; padding: 10px 0; cursor: pointer; color: var(--tx); }
.busca-corpo { padding: 0 0 10px 12px; }
.busca-bloco { margin-top: 12px; }
.busca-bloco .h3 { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.busca-form .campo { flex: 1 1 160px; min-width: 0; }
.busca-form .campo-uf { flex: 0 0 64px; }
#busca-lista .busca-cand { word-break: break-word; }
.fila-cab { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 4px; }
@container body (max-width: 720px) { .sug-colunas { grid-template-columns: 1fr; } }

/* ---------- O que foi ouvido ---------- */
.ouv-item { display: grid; grid-template-columns: 76px 1fr; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--ln); align-items: start; }
.ouv-hora { color: var(--mu); padding-top: 2px; }
.ouv-corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ouv-texto { overflow-wrap: anywhere; }
.ouv-texto mark { background: var(--was); color: inherit; border-radius: 3px; padding: 0 2px; }
.ouv-buraco { background: var(--off); color: var(--mu); padding: 8px; border-radius: 6px; border-top: 0; margin: 6px 0; }
@container body (max-width: 520px) { .ouv-item { grid-template-columns: 1fr; } }

/* ---------- login ---------- */
.login-pg { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; box-sizing: border-box; background: var(--bg); }
.login-caixa { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.login-marca { display: flex; align-items: baseline; gap: 8px; }
.login-marca .sb-nome { color: var(--tx); }
.login-marca .sb-sub { color: var(--mu); }

/* ---------- celular (até 720px de área de conteúdo) ---------- */
@container body (max-width: 720px) {
  .pg { padding: 16px 16px 32px; gap: 16px; }
  .pn { padding: 16px; }
  .h1 .sub, .h1 .titulo-sub { display: block; margin-top: 2px; }
  .abas-sit { gap: 8px; }
  .aba-sit { min-height: 76px; padding: 10px 12px; }
  .av-topo .campo { flex: 1 1 100%; }
  .cols { gap: 16px; }
  .col-d { display: contents; }
  .radar { order: -1; flex: 1 1 100%; padding: 16px; }
  .ins { flex: 1 1 100%; }
  .th { display: none; }
  .tr { flex-wrap: wrap; gap: 6px 12px; padding: 12px 0; }
  .c-nome { flex: 1 1 calc(100% - 116px); }
  .c-sit { flex: 0 0 104px; text-align: right; order: 1; }
  .c-cli { order: 2; flex: 0 1 auto; max-width: 45%; font-size: 13px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .c-bar { order: 3; flex: 1 1 110px; }
  .c-hora { order: 4; flex: 0 0 auto; }
  .conf-busca { flex: 1 1 100%; width: auto; }
  .conf-mes, .conf-exportar { flex: 1 1 0; min-width: 0; }
  .conf-exportar { padding: 0 12px; }
  .conf-total { flex-wrap: wrap; }
  .conf-numero { font-size: 36px; }
  .conf-contagem { flex: 1 1 100%; margin-left: 0; }
  .campanha-corpo { padding: 4px 16px 16px; gap: 8px 0; }
  .campanha-acoes > button { flex: 1 1 100%; }
  .abas-insercao { grid-template-columns: 1fr; gap: 8px; }
  .aba-insercao { min-height: 64px; padding: 10px 14px; }
  .lista-insercoes { padding: 4px 12px; }
  .li-linha { flex-wrap: wrap; gap: 4px 12px; }
  .li-faixa { flex: 1 1 auto; }
  .li-sit { flex: 1 1 100%; order: 3; }
  .li-sub { flex: 1 1 100%; order: 4; white-space: normal; }
  .detalhe-secao { padding: 16px; }
  .botao-tocar { width: 48px; height: 48px; }
  .transcricao { font-size: 16px; line-height: 1.6; }
  .saude { gap: 10px 0; }
  .saude > div { flex: 1 1 50%; }
  .lista-linha { flex-wrap: wrap; gap: 6px 12px; }
  .lista-linha .lista-col, .lista-linha .lista-col-2 { flex: 1 1 100%; }
  .barra-ferramentas > * { flex: 1 1 100%; }
  .form-acoes > button, .form-acoes > a { flex: 1 1 100%; }
}

/* ---------- toque: no celular e no tablet todo botão tem pelo menos 44 px (o "i" já tem a área invisível de 44 px) ---------- */
@container app (max-width: 1000px) {
  .botao, .botao-secundario, .botao-perigo, .botao-texto-er, .botao-link, .botao-baixo, .aba-filtro, .passo, .pilula-fora,
  .fonte-acoes .botao, .pag-tamanho, .pag-ir { min-height: 44px; }
}

/* ---------- movimento reduzido: o radar para ---------- */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* Precisão (produto v2, fase 4) */
.pre-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.pre-card { border: 1px solid var(--ln); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--pn); color: var(--tx); text-decoration: none; }
.pre-rotulo { font-size: 13px; color: var(--mu); display: flex; align-items: center; gap: 6px; }
.pre-valor { font-size: 24px; }
.pre-ok .pre-valor { color: var(--ok); }
.pre-wa .pre-valor { color: var(--wa); }
.pre-er .pre-valor { color: var(--er); }
.pre-link:hover { border-color: var(--ac); }

/* Gráficos da campanha (produto v2, fase 5) */
.graf { width: 100%; height: auto; display: block; margin: 4px 0 12px; overflow: visible; }
.graf-rotulo { font-size: 12px; fill: var(--mu); font-family: inherit; }
.graf-eixo { stroke: var(--ln); stroke-width: 1; }
.graf-alvo { fill: transparent; }
.graf-col:hover .graf-alvo { fill: var(--off); }
.graf-ok { fill: var(--ok); background: var(--ok); }
.graf-wa { fill: var(--wa); background: var(--wa); }
.graf-er { fill: var(--er); background: var(--er); }
.graf-ac { fill: var(--ac); }
.graf-legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--tx); }
.graf-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.graf-legenda i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.graf-duas { display: grid; grid-template-columns: 1fr; gap: 8px; }

/* Resultado no Google (produto v2, fase 6) */
.res-linha { fill: none; stroke: var(--ac); stroke-width: 2; stroke-linejoin: round; }
.res-ponto { fill: var(--ac); stroke: var(--pn); stroke-width: 2; }
.res-durante { fill: var(--acs); opacity: .55; }
.res-marca { fill: var(--ok); }
.res-leg-linha { background: var(--ac); height: 3px !important; }
.res-leg-durante { background: var(--acs); }
.res-leg-marca { background: var(--ok); }

/* Plano e cobrança (produto v2, fase 8) */
.pl-uso { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 24px; }
.pl-linha { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 6px; }
.pl-barra { height: 8px; border-radius: 4px; background: var(--off); overflow: hidden; }
.pl-barra i { display: block; height: 100%; border-radius: 4px; background: var(--ac); }
.pl-barra i.pl-ok { background: var(--ok); }
.pl-barra i.pl-wa { background: var(--wa); }
.pl-barra i.pl-er { background: var(--er); }

/* Termos, privacidade e aceite (produto v2, fase 9) */
.doc-pg { min-height: 100vh; background: var(--bg); padding: 24px 16px; display: flex; justify-content: center; }
.doc { max-width: 760px; width: 100%; line-height: 1.6; }
.doc h2 { margin-top: 20px; }
.doc ul { padding-left: 20px; }
.dd-excluir { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ln); }
.dd-excluir .campo { width: 100%; max-width: 340px; min-width: 0; flex: 1 1 260px; }

/* Canais de TV (módulo vídeo) */
.tv-filtros { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.tv-url { overflow-wrap: anywhere; }
.rotulo-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
#tela-tv .fonte-situacao { flex-wrap: wrap; gap: 6px; }
#tela-tv > .lado { flex-basis: 320px; }
#tela-tv .pn { min-width: 0; max-width: 100%; box-sizing: border-box; }
#tela-tv input[type=file] { width: 100%; min-width: 0; box-sizing: border-box; }
#tela-tv .lista-col { flex: 1 1 0; }
.tv-filtros .campo { flex: 1 1 140px; min-width: 0; }
.cmp-imagens-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin: 8px 0; }
.cmp-imagem { margin: 0; border: 1px solid var(--ln); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cmp-imagem img { width: 100%; height: 90px; object-fit: contain; background: var(--pn); }
.cmp-imagem figcaption { display: flex; justify-content: space-between; align-items: center; font-size: 12px; gap: 4px; flex-wrap: wrap; }
.cmp-imagens .form-acoes { flex-wrap: wrap; gap: 8px; }
/* Vídeo do momento (Detalhe da inserção, módulo vídeo) */
.video-player, .video-foto { width: 100%; max-height: 70vh; border-radius: 8px; background: #000; display: block; margin-top: 8px; }
.video-trilha { position: relative; height: 22px; margin: 10px 0 4px; border-radius: 4px; background: var(--off, var(--ln)); }
.video-marca { position: absolute; top: 3px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 2px solid var(--pn); cursor: pointer; padding: 0; }
.video-marca:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.marca-0800, .marca-site { background: var(--ok); } .marca-logo { background: var(--ac); } .marca-tela { background: var(--wa); } .marca-fala { background: var(--er); }
.video-legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--mu); }
.video-legenda-item { display: inline-flex; align-items: center; gap: 4px; }
.video-marca-ponto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.audio-alternativa > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.audio-alternativa[open] > summary { margin-bottom: 8px; }
.aviso-er { background: var(--ers); color: var(--er); }
.video-historico { margin-top: 8px; } .video-historico > summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.video-linha { align-items: center; gap: 12px; } .video-mini { width: 96px; height: 54px; object-fit: cover; border-radius: 4px; background: var(--ln); flex: none; }
.tv-filtros .botao, .tv-filtros .botao-primario { min-height: 36px; }
.video-linha .fonte-situacao { flex-direction: row; flex-wrap: wrap; align-items: center; }
section[aria-label="Vídeos da campanha"] .tv-filtros { justify-content: flex-start; margin: 4px 0 8px; }
@media (max-width: 600px) { .video-linha { align-items: flex-start; } .video-linha .fonte-situacao { justify-content: flex-start; } }

/* ---------- Rodada visual 1: barra de filtros e tabela paginada padrão (docs/design/rodada-visual-1.html) ---------- */
.fx { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; }
.fx-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.fx-titulo { margin: 0; display: inline-flex; align-items: center; }
.fx-acoes { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fx-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.fx-fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fx-fld label { font-size: 12px; color: var(--mu); }
.fx-campo { min-height: 38px; width: 100%; padding: 0 10px; font-size: 13.5px; background: var(--bg); }
.fx-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.fx-esp { flex: 1; }
.fx-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--ln); border-radius: 6px; overflow: hidden; background: var(--pn); }
.fx-seg button { min-height: 34px; padding: 0 12px; border: 0; border-right: 1px solid var(--ln); background: transparent; color: var(--tx); font-size: 13px; cursor: pointer; white-space: nowrap; }
.fx-seg button:last-child { border-right: 0; }
.fx-seg button b { margin-left: 6px; font: 600 12px "IBM Plex Mono", monospace; opacity: .85; }
.fx-seg button.on { background: var(--ac); color: var(--act); }
.fx-seg button.on b { color: inherit; }
.fx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 0; }
.fx-chips:empty { display: none; }
.fx-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--acs); color: var(--tx); font-size: 12.5px; max-width: 100%; }
.fx-chip button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--mu); cursor: pointer; }
.fx-chip button:hover { color: var(--er); }
.fx-resumo { font-size: 12.5px; color: var(--mu); }
.fx-limpar, .lnk { border: 0; background: transparent; color: var(--ac); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 2px; border-radius: 4px; }
.fx-limpar:hover, .lnk:hover { text-decoration: underline; }
.fx-tog { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mu); cursor: pointer; }
.tb-area { display: flex; flex-direction: column; min-width: 0; }
.tb-caixa { overflow-x: auto; border: 1px solid var(--ln); border-radius: 8px; background: var(--pn); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { position: sticky; top: 0; background: var(--bg); color: var(--mu); font-size: 12px; font-weight: 600; text-align: left; padding: 8px; vertical-align: bottom; }
.tbl td { padding: 8px; border-top: 1px solid var(--ln); vertical-align: top; }
.tbl td small { display: block; color: var(--mu); font-size: 12px; }
.tbl .num { font-size: 12.5px; font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl tr.tb-x { cursor: pointer; }
.tbl tr.tb-x:hover td, .tbl tr.tb-x.aberta td { background: var(--bg); }
.tbl tr.tb-det td { background: var(--bg); padding: 12px 14px; }
.tb-vazio { margin: 0; padding: 24px; text-align: center; color: var(--mu); }
.tb-rodape:empty { display: none; }
.tb-corta { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 18px; }
.tb-dl > div > span:first-child { display: block; color: var(--mu); font-size: 12px; }
.tb-colunas-caixa { position: relative; display: inline-flex; }
.tb-colunas { position: absolute; z-index: 30; top: calc(100% + 6px); right: 0; min-width: 220px; padding: 10px 12px; border-radius: 8px; background: var(--pn); box-shadow: 0 0 0 1px var(--ln), 0 8px 24px rgba(10,20,50,.16); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.url-curta { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.url-curta .mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--mu); }
.aviso-flutuante { position: fixed; z-index: 80; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; background: var(--top); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); font-size: 14px; max-width: calc(100vw - 32px); box-sizing: border-box; }
.aviso-flutuante .mono { color: #8492B8; font-size: 12px; }
.aviso-flutuante .lnk { color: #9FBAF5; }
@container body (max-width: 720px) {
  .fx { padding: 14px; }
  .fx-bar { grid-template-columns: 1fr 1fr; }
  .fx-seg { width: 100%; }
  .fx-seg button { flex: 1 1 auto; min-height: 44px; }
  .fx-campo { min-height: 44px; }
}
@container app (max-width: 1000px) { .fx-limpar, .lnk { min-height: 44px; } }
.fx-embutido { padding: 0; }

/* ---------- Buscador (página própria) ---------- */
.bus-cnt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bus-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 16px; border-radius: 8px; border: 2px solid transparent; background: var(--pn); box-shadow: var(--sh); color: var(--tx); text-align: left; cursor: pointer; }
.bus-kpi b { font-size: 24px; line-height: 1.1; }
.bus-kpi.on { border-color: var(--ac); }
.bus-card { display: flex; flex-direction: column; gap: 14px; }
.bus-abas { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--ln); }
.bus-aba { min-height: 40px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--mu); font-size: 14px; cursor: pointer; }
.bus-aba.on { color: var(--tx); border-bottom-color: var(--ac); font-weight: 600; }
.bus-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bus-lote { border-color: var(--bok); color: var(--ok); background: var(--oks); font-weight: 600; }
.bus-lista { display: flex; flex-direction: column; gap: 8px; }
.bus-vazio { margin: 0; padding: 16px 0; }
.bus-item { border: 1px solid var(--ln); border-radius: 8px; background: var(--bg); min-width: 0; }
.bus-ihead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: var(--tx); font-size: 14px; text-align: left; cursor: pointer; box-sizing: border-box; border-radius: 8px; }
.bus-nome { min-width: 0; overflow-wrap: anywhere; }
.bus-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bus-seta { color: var(--mu); }
.bus-corpo { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-top: 1px solid var(--ln); }
.bus-nota { font: 600 12px "IBM Plex Mono", monospace; padding: 1px 6px; border-radius: 4px; }
.bus-nota-ok { color: var(--ok); background: var(--oks); } .bus-nota-wa { color: var(--wa); background: var(--was); } .bus-nota-er { color: var(--er); background: var(--ers); }
.bus-motivos { margin: 4px 0 0; padding-left: 18px; color: var(--mu); font-size: 13px; }
.bus-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bus-ch { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px; border-radius: 8px; background: var(--pn); box-shadow: var(--sh); }
.bus-ch-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bus-ch-acoes { display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.bus-ch-acoes > .botao, .bus-ch-acoes > .botao-primario { min-height: 36px; font-size: 13px; }
.bus-ch-canal { grid-template-columns: 160px minmax(0, 1fr) auto; }
.bus-saida { grid-column: 1 / -1; }
.bus-saida:empty { display: none; }
.bus-saida audio { width: 100%; }
.bus-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bus-colar { display: flex; flex-wrap: wrap; gap: 8px; }
.bus-colar .campo { flex: 1 1 260px; min-width: 0; }
.bus-logos { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px; }
.bus-lgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.bus-lg { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 8px; background: var(--pn); box-shadow: var(--sh); min-width: 0; }
.bus-lg-atual { box-shadow: none; border: 1px dashed var(--ln); }
.bus-lg-topo { display: flex; gap: 6px; align-items: center; }
.bus-duo { display: grid; grid-template-columns: 1fr 1fr; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--ln); }
.bus-duo > div { height: 112px; display: grid; place-items: center; }
.bus-duo-l { background: #F4F6FB; } .bus-duo-d { background: #0B1328; }
.bus-duo img { width: 96px; height: 96px; object-fit: contain; }
.bus-sem { font-size: 12px; color: #6B7590; }
.bus-thumb { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 6px; overflow: hidden; background: linear-gradient(135deg, #2B3D6E, #121C36); color: #fff; display: grid; place-items: end start; }
.bus-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bus-thumb-txt { position: relative; padding: 4px 6px; font-size: 11px; background: linear-gradient(transparent, rgba(0,0,0,.65)); width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bus-live { position: absolute; top: 6px; left: 6px; padding: 0 5px; border-radius: 3px; background: #CC5546; font-size: 11px; font-weight: 700; }
.bus-foto { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--off); }
.bus-progs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.bus-prog { padding: 8px 10px; border-radius: 6px; border: 1px solid var(--ln); font-size: 13px; background: var(--pn); }
.bus-confirma { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 8px; border: 2px solid var(--bok); background: var(--pn); }
.bus-confirma ul { margin: 0; padding-left: 18px; max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.bus-nova { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 8px; border: 1px solid var(--ln); }
.emi-atalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
@container body (max-width: 900px) {
  .bus-cnt { grid-template-columns: 1fr 1fr; }
  .bus-logos, .bus-ch, .bus-ch-canal { grid-template-columns: minmax(0, 1fr); }
  .bus-ch-acoes { min-width: 0; }
  .bus-ch-acoes > .botao, .bus-ch-acoes > .botao-primario { min-height: 44px; }
}
.grd-sit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.grd-dica { margin: 8px 0 0; }
.campanha-linha { display: flex; align-items: center; gap: 0 12px; }
.campanha-linha > .campanha-cabecalho { flex: 1 1 auto; min-width: 0; }
.campanha-buscar { flex: none; margin-right: 20px; }
.conf-grupo { margin: 8px 0 0; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mu); }
@container body (max-width: 640px) {
  .campanha-linha { flex-wrap: wrap; }
  .campanha-buscar { flex: 1 1 100%; margin: 0 16px 14px; }
}
.detalhe-origem { display: block; font-size: 11.5px; color: var(--mu); font-weight: 400; }
.detalhe-locutor .chip { white-space: normal; }
.tbl .grd-0800 { white-space: normal; min-width: 108px; max-width: 130px; overflow-wrap: anywhere; }
.tbl td { padding: 8px 6px; }
.tbl .grd-sit .chip { white-space: normal; }
.tbl .grd-0800 { max-width: 112px; }
.rp-sem_live, .rp-fora_do_ar { background: #7F8D86; }

/* período rápido (Hoje / Ontem / 7 dias / Mês) com as datas sempre preenchidas */
.fx-periodo { grid-column: span 2; gap: 6px; }
.fx-periodo-cab { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.fx-periodo-cab label { font-size: 12px; color: var(--mu); }
.fx-periodo-rotulo { font-size: 13px; }
.fx-rapidos { display: inline-flex; border: 1px solid var(--ln); border-radius: 6px; overflow: hidden; width: max-content; max-width: 100%; }
.fx-rapidos button { min-height: 32px; padding: 0 12px; border: 0; border-right: 1px solid var(--ln); background: var(--pn); color: var(--tx); font-size: 13px; cursor: pointer; }
.fx-rapidos button:last-child { border-right: 0; }
.fx-rapidos button.on { background: var(--ac); color: var(--act); font-weight: 600; }
.fx-datas { display: flex; align-items: center; gap: 6px; }
.fx-datas .fx-campo { flex: 1 1 0; min-width: 0; }
@container body (max-width: 720px) {
  .fx-periodo { grid-column: 1 / -1; }
  .fx-rapidos { width: 100%; }
  .fx-rapidos button { flex: 1 1 0; min-height: 44px; }
}
.cor-mu { color: var(--mu); }
.grd-resumo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 18px; }
.grd-resumo-principal { font-size: 18px; }
.grd-resumo-principal b { font-size: 24px; }

/* prova dupla: rádio + YouTube lado a lado */
.dupla-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.dupla-cartao { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 8px; border: 1px solid var(--ln); min-width: 0; }
.dupla-topo { display: flex; justify-content: space-between; gap: 8px; }
.dupla-cartao audio, .dupla-video { width: 100%; }
.dupla-video { border-radius: 6px; background: #000; aspect-ratio: 16 / 9; }
.fonte-modo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mu); } .fonte-modo .campo { min-height: 40px; }
/* Buscador: destino manual, ocultados e Duplicadas */
.bus-destino { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 10px 12px; border: 1px dashed var(--ln); border-radius: 8px; }
.bus-destino legend { padding: 0 6px; font-size: 12px; font-weight: 600; color: var(--mu); }
.bus-dest-op { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.bus-dest-op .campo { min-height: 38px; min-width: 220px; flex: 1 1 220px; }
.bus-ocultos { margin: 0; font-size: 13px; color: var(--mu); }
.bus-dup-ajuda { margin: 0; font-size: 13px; }
.bus-dup { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.bus-dup-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; min-width: 0; }
.bus-dup-cab .mono { overflow-wrap: anywhere; }
.bus-dup-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.bus-dup-em { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 8px; background: var(--pn); box-shadow: var(--sh); min-width: 0; }
.bus-dup-fontes { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.bus-dup-fontes li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bus-dup-rep .url-curta .mono { color: var(--wa); }
.bus-dup-nome { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mu); }
.bus-dup-nome .campo { min-height: 40px; }
.tr-sem-link { cursor: default; } .lista-todas { margin-left: 10px; font-size: 13px; }

/* Concorrência */
.conc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.conc-form textarea, .conc-form button { grid-column: 1 / -1; }
@media (min-width: 1000px) { .conc-form { grid-template-columns: 1fr 1fr 2fr auto; } .conc-form textarea, .conc-form button { grid-column: auto; } }
.conc-ramo { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.conc-ramo .campo { flex: 1 1 260px; }
.conc-acoes { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.conc-so { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Guia (Driver.js) no visual do Connect, nos dois temas */
.driver-popover.guia-pop { background: var(--pn); color: var(--tx); border: 1px solid var(--ln); border-radius: 10px; max-width: 340px; }
.driver-popover.guia-pop .driver-popover-title { font-size: 16px; font-weight: 700; }
.driver-popover.guia-pop .driver-popover-description { color: var(--tx); font-size: 14px; line-height: 1.45; }
.driver-popover.guia-pop .driver-popover-progress-text { color: var(--mu); }
.driver-popover.guia-pop button { background: var(--pn); color: var(--tx); border: 1px solid var(--ln); text-shadow: none; border-radius: 6px; padding: 6px 12px; font: inherit; font-size: 13px; }
.driver-popover.guia-pop .driver-popover-next-btn { background: var(--ac); color: #fff; border-color: var(--ac); }
.driver-popover.guia-pop .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--pn); }
.driver-popover.guia-pop .driver-popover-close-btn { border: 0; color: var(--mu); }
.ajuda-sit { display: grid; gap: 10px; margin: 0; }
.ajuda-sit > div { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: start; }
.ajuda-sit dd { margin: 0; }
@media (max-width: 600px) { .ajuda-sit > div { grid-template-columns: 1fr; gap: 4px; } }
.ajuda-telas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ajuda-passos { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
/* Mapa de campanhas no ar */
.mapa-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; }
.mapa-aps { min-width: 260px; }
.mapa-ap { display: grid; gap: 2px; margin-bottom: 8px; }
.mapa-ap > span:nth-child(2) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Resultados online (gráficos do Google) */
.gg-caixa { width: 100%; overflow-x: auto; }
.gg { width: 100%; min-width: 520px; height: auto; display: block; }
.gg-eixo { stroke: var(--ln); }
.gg-grade { stroke: var(--ln); stroke-dasharray: 3 4; }
.gg-rot { fill: var(--mu); font-size: 11px; }
.gg-ins { stroke: var(--wa); stroke-width: 1.5; opacity: .55; }
.gg-linha { fill: none; stroke-width: 2; }
.gg-linha.gg-s0 { stroke: var(--ac); } .gg-linha.gg-s1 { stroke: var(--ok); }
.gg-ponto.gg-s0 { fill: var(--ac); } .gg-ponto.gg-s1 { fill: var(--ok); }
.gg-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 14px; font-size: 13px; color: var(--mu); }
.gg-l::before { content: ""; display: inline-block; width: 12px; height: 3px; margin-right: 6px; vertical-align: middle; background: var(--ac); }
.gg-l.gg-s1::before { background: var(--ok); } .gg-l.gg-li::before { background: var(--wa); width: 2px; height: 12px; }
.google-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
@media (max-width: 700px) { .google-form { grid-template-columns: 1fr; } }
.google-botoes { display: flex; gap: 8px; margin-bottom: 8px; }
.mapa-acoes { margin-top: 6px; font-size: 13px; }
.mapa-acoes summary { cursor: pointer; color: var(--ac); }
.mapa-acao { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.mapa-acao .campo { flex: 1 1 140px; min-width: 0; }
.mapa-ramos summary { cursor: pointer; }

/* Campanhas no ar: anunciantes e distribuição por hora. */
.mapa-abas { margin: 16px 0; }
.mapa-abas [aria-pressed="true"] { background: var(--acs); color: var(--ac); border-color: var(--ac); }
.mapa-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,290px),1fr)); gap: 16px; padding: 16px; }
.mapa-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px; border: 1px solid var(--ln); border-radius: 8px; background: var(--pn); }
.mapa-card-cab { display:flex; align-items:center; gap:12px; }
.mapa-card-cab > div { min-width:0; }
.mapa-card h3 { margin:0; overflow-wrap:anywhere; }
.mapa-inicial { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; background:var(--acs); color:var(--ac); border-radius:8px; font-weight:600; }
.mapa-numeros { display:flex; gap:16px; align-items:baseline; }
.mapa-card .mono { overflow-wrap:anywhere; }
.mapa-card .form-acoes { margin-top:auto; }
.mapa-horas { display:flex; gap:3px; height:34px; align-items:end; width:100%; margin-top:8px; }
.mapa-hora { flex:1; height:100%; display:flex; align-items:end; }
.mapa-hora i { display:block; width:100%; border-radius:2px 2px 0 0; background:var(--ln); }
.mapa-hora i.com-anuncio { background:var(--ac); }
.mapa-horas-rotulos { display:flex; justify-content:space-between; color:var(--mu); font-size:11px; }
.mapa-timeline { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:12px; margin:16px; }
.mapa-dia { display:flex; flex-direction:column; gap:4px; border-left:3px solid var(--ac); padding:8px 12px; background:var(--bg); }
.mapa-trecho,.mapa-ocupacao-card { padding:16px; border-top:1px solid var(--ln); display:flex; flex-direction:column; gap:8px; min-width:0; }
.mapa-trecho p { overflow-wrap:anywhere; margin:4px 0; }
.mapa-trecho audio { max-width:100%; width:100%; }
.mapa-youtube { display:block; border:0; width:100%; max-width:800px; aspect-ratio:16/9; margin:10px 0; }
#mapa-por-emissora .campo { width:min(100%,420px); }
#mapa-lista > .h2,#mapa-lista > .botao,#mapa-lista > .mapa-acoes { margin:16px; }

.fora-video { margin-top: 12px; width: 100%; min-width: 0; }
.fora-video > summary { cursor: pointer; color: var(--ac); font-weight: 500; }
.fora-video .detalhe-secao { margin-top: 12px; }
.fora-video video { max-width: 100%; }

/* Configurações > YouTube no servidor */
.yt-bloco { display: grid; gap: 8px; }
.yt-envio { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.yt-envio .campo { flex: 1 1 220px; min-width: 0; max-width: 420px; }
.yt-token { word-break: break-all; display: inline-block; max-width: 100%; }
.yt-dica { overflow-wrap: anywhere; }

/* Administração > Armazenamento e retenção */
.arm-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 12px; }
.arm-cartao { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--ln); border-radius: 10px; align-content: start; background: var(--pn); }
.arm-cartao .chip { justify-self: start; }
.arm-prazo { display: inline-flex; gap: 6px; align-items: center; }
.arm-dias { width: 80px; }
.arm-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.arm-form label { display: grid; gap: 4px; font-size: 13px; }
.arm-form .arm-largo { grid-column: 1 / -1; }
.arm-form [role="status"] { grid-column: 1 / -1; }

/* Planejar > Mídia kit e perfil */
.mk-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 12px 0; }
.mk-form label { display: grid; gap: 4px; font-size: 13px; min-width: 0; }
.mk-form .mk-largo { grid-column: 1 / -1; }
.mk-veio { border-color: var(--ac); background: var(--acs); }
.mk-bloco { display: grid; gap: 8px; margin-top: 16px; }
.mk-resumo { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 8px 0; }
.mk-barras { display: grid; gap: 6px; }
.mk-barra { display: grid; grid-template-columns: 110px 1fr 56px; gap: 8px; align-items: center; font-size: 13px; }
.mk-trilho { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.mk-cheio { display: block; height: 100%; background: var(--ac); }
.mk-trechos p { margin: 4px 0; overflow-wrap: anywhere; }
.mk-kits { margin: 0; padding-left: 18px; font-size: 13px; overflow-wrap: anywhere; }

.pag-exportar-grupo { font-size: 13px; color: var(--mu); white-space: nowrap; }

/* Campanhas no ar > Share of voice */
.sov-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.sov-grupo { display: grid; gap: 6px; align-content: start; min-width: 0; }
.sov-item { display: grid; gap: 4px; padding-bottom: 6px; border-bottom: 1px solid var(--ln); }
.sov-barra { grid-template-columns: minmax(0, 140px) 1fr 52px; }
.sov-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }