/* ===================== U_STAGE — design system ===================== */
:root{
  --accent:#2dd4a7; --accent-2:#12b3d6; --accent-ink:#04231c;
  --warn:#f5a524; --danger:#f0576b; --ok:#2dd4a7; --coord:#9b8cff;
  --radius:14px; --radius-sm:10px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --shadow:0 6px 24px rgba(0,0,0,.28);
  --tap:44px;
}
html[data-theme="dark"]{
  color-scheme:dark;   /* faz checkbox, date picker e scrollbar nativos ficarem escuros */
  --bg:#0b0f14; --bg-2:#111823; --surface:#151d29; --surface-2:#1b2534; --line:#26334a;
  --ink:#e8eef7; --ink-2:#9dabc2; --ink-3:#66748d; --input:#0e1520;
  --row-alt:rgba(255,255,255,.025);
  /* A MESMA faixa zebrada, só que opaca. Coluna travada precisa de fundo sólido
     (senão o que rola por baixo aparece), e se esse sólido não for exatamente a
     cor da linha, a coluna travada vira uma faixa de outro tom no meio dela. */
  --row-alt-solid:color-mix(in srgb,#fff 2.5%,var(--surface));
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f2f5f9; --bg-2:#e9eef5; --surface:#ffffff; --surface-2:#f6f8fc; --line:#d9e1ec;
  --ink:#16202e; --ink-2:#5a6a80; --ink-3:#8a99ad; --input:#ffffff;
  --accent:#0f9b7a; --accent-ink:#ffffff; --coord:#6d5bd0;
  --row-alt:rgba(0,0,0,.018);
  --row-alt-solid:color-mix(in srgb,#000 1.8%,var(--surface));
  --shadow:0 4px 18px rgba(20,40,70,.10);
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font);
  font-size:15px; line-height:1.45; -webkit-text-size-adjust:100%;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--accent); text-decoration:none}
h1,h2,h3{margin:0 0 .4em; line-height:1.2; font-weight:650}
h1{font-size:1.35rem} h2{font-size:1.08rem} h3{font-size:.95rem}
small{color:var(--ink-2)}

/* ---------- topbar ---------- */
#topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:8px;
  padding:10px 12px; padding-top:calc(10px + env(safe-area-inset-top));
  background:color-mix(in srgb,var(--bg-2) 88%, transparent);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0; color:inherit; text-decoration:none}
.logo-full{height:26px; width:92.7px; flex:none; display:none; color:var(--ink)}
.logo-mini{height:26px; width:26px; flex:none; color:var(--ink)}
@media(min-width:640px){
  .logo-full{display:block}
  .logo-mini{display:none}
}
/* separador entre o logo e o título da página */
.brand-txt{padding-left:10px; border-left:1px solid var(--line)}
.brand-txt{min-width:0}
.brand-txt strong{display:block; font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.brand-txt small{display:block; font-size:.72rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* O MÓDULO da tela (24/09/2026): "logo | Nome do evento | Módulo: …". Cada
   módulo tem a sua cor, e ela também tinge a linha de baixo da barra. */
:root{ --mod-rf:#01C3FF; --mod-prod:#FFB020 }
.top-modulo{flex:none; font-size:.72rem; font-weight:700; letter-spacing:.02em;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
  border:1px solid currentColor; margin-left:4px}
.top-modulo.rf{color:var(--mod-rf); background:color-mix(in srgb,var(--mod-rf) 12%,transparent)}
.top-modulo.producao{color:var(--mod-prod); background:color-mix(in srgb,var(--mod-prod) 12%,transparent)}
body.mod-rf #topbar{border-bottom:2px solid var(--mod-rf)}
body.mod-producao #topbar{border-bottom:2px solid var(--mod-prod)}
@media (max-width:640px){ .top-modulo{font-size:.62rem; padding:3px 7px} .top-modulo b{display:none} }
.spacer{flex:1}
.icon-btn{
  width:var(--tap); height:38px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font-size:1.05rem; cursor:pointer; flex:none;
}
.icon-btn:active{transform:scale(.96)}
#btnBack{font-size:1.6rem; line-height:0; padding-bottom:4px}

/* ---------- drawer ---------- */
#drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(300px,84vw); z-index:60;
  background:var(--surface); border-left:1px solid var(--line); box-shadow:var(--shadow);
  padding:16px; padding-top:calc(16px + env(safe-area-inset-top));
  display:flex; flex-direction:column; gap:2px; animation:slideIn .18s ease;
}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.drawer-head{display:flex; gap:10px; align-items:center; padding:6px 6px 16px; border-bottom:1px solid var(--line); margin-bottom:10px}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);font-weight:700}
.drawer-head small{display:block; text-transform:capitalize}
#drawer a{padding:12px 10px; border-radius:var(--radius-sm); color:var(--ink); font-weight:500}
#drawer a:hover,#drawer a:active{background:var(--surface-2)}
.danger-link{margin-top:auto; background:none; border:1px solid var(--line); color:var(--danger);
  padding:12px; border-radius:var(--radius-sm); font:inherit; cursor:pointer; font-weight:600}
#scrim{position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:50}
/* o aviso antes do show passa por cima de tudo, inclusive de outra janela
   aberta: perder a hora do show é pior que interromper o que se estava
   fazendo */
.scrim-fixo{position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:120}

/* ---------- layout ---------- */
main{padding:14px 12px 80px; max-width:1400px; margin:0 auto}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; margin-bottom:12px;
}
.card.pad0{padding:0; overflow:hidden}
.card-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.card-head h2{margin:0}
.card-head .spacer{flex:1}
.section-title{
  display:flex;align-items:center;gap:8px;font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);font-weight:700;margin:18px 2px 8px;
}
.section-title::after{content:"";flex:1;height:1px;background:var(--line)}
.muted{color:var(--ink-2)}
.tiny{font-size:.76rem}
.tiny.warn{color:var(--warn)}
.center{text-align:center}
.grid{display:grid; gap:10px}
.g2{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
/* uma apresentação por linha: data e hora do show, data e hora da passagem,
   palco e o ✕. No celular vira coluna, como o resto das grades. */
.showrow{display:flex; gap:8px; align-items:flex-start; margin-bottom:10px;
  padding:10px 12px; border:1px solid var(--line); border-radius:10px}
/* A agenda do artista em TRÊS COLUNAS (23/09/2026): o que é · de quando até
   quando · palco ou agenda. Antes eram dois andares de campos soltos, e com
   cinco compromissos de duas pontas cada isso vira uma parede de caixinhas em
   que ninguém acha a linha que quer. Em grade, a coluna do meio alinha todos os
   horários um debaixo do outro — e ler a agenda é ler essa coluna. */
.ag-grade{flex:1; display:grid; gap:6px 12px;
  grid-template-columns:minmax(150px,1.1fr) minmax(210px,1.3fr) minmax(120px,.7fr);
  align-items:end}
.showrow .field{margin:0}
.ag-cel{display:flex; flex-direction:column; gap:3px}
.ag-cel>span{color:var(--muted)}
.ag-horas{display:flex; align-items:center; gap:6px}
.ag-horas input{flex:1; min-width:0}
.ag-tra{color:var(--muted); font-size:12px}
/* o rótulo dos cinco: alinhado com a caixa de hora da mesma linha */
.ag-rot{padding-bottom:9px; font-size:13px; color:var(--text)}
.ag-ag{padding-bottom:7px}
.ag-nota{padding-bottom:9px}
.showrow [data-delshow]{padding:6px 10px; margin-top:18px}
@media (max-width:820px){
  .ag-grade{grid-template-columns:1fr}
  .ag-rot{padding-bottom:0; font-weight:600; margin-top:6px}
  .ag-nota{display:none}
  .showrow [data-delshow]{margin-top:0}
}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}

/* ---------- forms ---------- */
label.field,.field{display:block; margin-bottom:10px}
label.field > span,.field > span{display:block; font-size:.75rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--ink-2); font-weight:650; margin-bottom:5px}
/* campo de link com botão de abrir ao lado */
.inline-field{display:flex; gap:6px; align-items:stretch}
.inline-field input{flex:1; min-width:0}
.open-link{flex:none; padding:0 14px; white-space:nowrap}
.open-link:disabled{opacity:.4}
input,select,textarea{
  width:100%; background:var(--input); color:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:11px 12px; font:inherit; font-size:16px; min-height:var(--tap);
  appearance:none;
}
textarea{min-height:84px; resize:vertical}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:32px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent}
/* IMPORTANTE: o appearance:none acima apaga a marca do checkbox. Reativa aqui. */
input[type=checkbox]{
  -webkit-appearance:checkbox; appearance:checkbox;
  width:22px; height:22px; min-height:0; margin:0; padding:0; flex:none;
  accent-color:var(--accent); cursor:pointer; border:none; background:none;
}
input[type=checkbox]:focus{outline:2px solid var(--accent); outline-offset:1px}
/* ---------- soundcheck: cor da linha, alça e arraste ----------
 *
 * A cor é guardada pelo NOME ("azul"), e o tom sai daqui — assim o tema claro e
 * o escuro escolhem cada um o seu, e o PDF o dele. `color-mix` sobre a
 * superfície mantém a linha legível: é uma tinta por cima, não um fundo opaco
 * que apaga o texto.
 *
 * O `--tinta` de cada linha serve também para a coluna travada, que tem fundo
 * próprio e ficaria branca no meio de uma linha pintada. */
table.sctab tr[data-cor]:not([data-cor=""]) > td{background:var(--tinta)}
table.sctab tr[data-cor="azul"]{--tinta:color-mix(in srgb,#4ea1ff 14%,var(--surface))}
table.sctab tr[data-cor="verde"]{--tinta:color-mix(in srgb,#30a46c 14%,var(--surface))}
table.sctab tr[data-cor="amarelo"]{--tinta:color-mix(in srgb,#f5d524 16%,var(--surface))}
table.sctab tr[data-cor="laranja"]{--tinta:color-mix(in srgb,#f5a524 15%,var(--surface))}
table.sctab tr[data-cor="vermelho"]{--tinta:color-mix(in srgb,#e5484d 13%,var(--surface))}
table.sctab tr[data-cor="roxo"]{--tinta:color-mix(in srgb,#a855f7 14%,var(--surface))}
table.sctab tr[data-cor="cinza"]{--tinta:color-mix(in srgb,#8b97a8 16%,var(--surface))}
/* a cor mora na coluna travada, ao lado da alça: um seletor estreito, que
   mostra o tom da própria linha em vez de um nome que ninguém lê duas vezes */
table.sctab .corsel{width:auto; min-width:34px; max-width:34px; min-height:26px;
  padding:1px 2px; font-size:.62rem; display:block; margin:3px auto 0;
  background:var(--tinta,var(--surface-2)); color:transparent;
  border-radius:6px; cursor:pointer}
table.sctab .corsel option{color:var(--ink); background:var(--surface)}
table.sctab .pega{cursor:grab; text-align:center; color:var(--ink-3); user-select:none;
  min-width:46px}
/* o balão de "repetir na coluna": preso à célula que o abriu, e por cima da
   tabela travada (que tem z-index próprio) */
.repcol{
  position:absolute; z-index:60; display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:8px 10px; box-shadow:0 6px 22px rgba(0,0,0,.28); font-size:.8rem;
  max-width:min(420px,92vw);
}
.repcol b{font-weight:700}

/* o passo a passo do app da NIIMBOT: números à vista, porque são cliques em
   OUTRO programa e a pessoa vai olhar de volta para cá no meio do caminho */
ol.passos{margin:10px 0 0; padding-left:22px; font-size:.86rem; line-height:1.5}
ol.passos li{margin-bottom:6px}
ol.passos li::marker{color:var(--accent); font-weight:700}

/* ---------- prévia da etiqueta ----------
 *
 * A caixa tem o tamanho REAL em milímetros, e o texto vai em mm convertido de
 * pontos. É isso que faz a prévia responder a pergunta que importa — "o nome do
 * baterista cabe?" — antes de gastar rolo. Fundo branco e letra preta sempre,
 * inclusive no tema escuro: a etiqueta sai numa impressora térmica, que só sabe
 * fazer preto no branco, e uma prévia em tema escuro mentiria sobre o contraste. */
.et-palco{
  display:flex; justify-content:center; padding:18px 10px;
  background:repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%)
    50% / 14px 14px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
}
.et-papel{
  position:relative; background:#fff; color:#000; border:1px solid #bbb;
  border-radius:1mm; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,.22);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.et-fundo{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; opacity:.85}
.et-txt{position:relative; text-align:center; padding:1mm 1.5mm; width:100%;
  line-height:1.15; overflow:hidden}
.et-l{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.et-l i{opacity:.35}

/* "outra pessoa mexeu nesta ficha": embaixo, fora do caminho do que se está
   digitando — e com o botão, porque quem decide a hora de atualizar é quem
   está com a mão na planilha. Fica acima da barra de salvar. */
.mudoubar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:78px; z-index:70;
  display:flex; align-items:center; gap:10px; max-width:min(520px,94vw);
  background:var(--surface); border:1px solid var(--accent); border-radius:99px;
  padding:8px 10px 8px 16px; box-shadow:0 8px 26px rgba(0,0,0,.34); font-size:.84rem;
}
@media(max-width:639px){ .mudoubar{bottom:70px; font-size:.78rem; padding-left:12px} }
table.sctab .pega:active{cursor:grabbing}
table.sctab tr.arrastando{opacity:.4}
table.sctab th[data-col]{cursor:grab}
/* o "?" ao lado do título avisa que existe lembrete ali — sem ele, ninguém
   descobre uma dica que só aparece quando o mouse já está parado em cima */
/* o balão do lembrete de coluna, desenhado à mão porque o `title` do navegador
   não aparece em elemento arrastável — nem existe no toque */
.dicacol{
  position:absolute; z-index:75; max-width:min(280px,86vw);
  background:var(--ink); color:var(--bg); border-radius:var(--radius-sm);
  padding:7px 10px; font-size:.78rem; line-height:1.35; font-weight:500;
  box-shadow:0 6px 20px rgba(0,0,0,.32); pointer-events:none;
}
table.sctab th .dica{
  font-style:normal; font-size:.62rem; font-weight:700; opacity:.5;
  border:1px solid currentColor; border-radius:50%; padding:0 3px; margin-left:3px;
  vertical-align:top; cursor:help;
}
table.sctab th.alvo-col{outline:2px solid var(--accent); outline-offset:-2px}
table.sctab th.arrastando{opacity:.45}

.check{display:flex;align-items:center;gap:8px;min-height:var(--tap);cursor:pointer}
.check span{font-size:.9rem}
/* caixinha que mora COLADA num campo (a de "agenda", ao lado do horário):
   sem margem, sem esticar, e com a caixa no tamanho do dedo mesmo assim */
.check.nomargin{margin:0; flex:none; gap:5px; white-space:nowrap}
.check.nomargin input{width:18px; min-height:18px; flex:none}
.check.nomargin span{color:var(--ink-2)}

:is(button,a,label).btn{
  min-height:var(--tap); padding:11px 16px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--surface-2); color:var(--ink); font:inherit; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; justify-content:center; text-decoration:none; box-sizing:border-box;
}
:is(button,a,label).btn:active{transform:scale(.98)}
:is(button,a,label).btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); border-color:transparent}
:is(button,a,label).btn.ghost{background:transparent}
:is(button,a,label).btn.danger{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
:is(button,a,label).btn.wide{width:100%}
:is(button,a,label).btn.sm{min-height:34px; padding:6px 11px; font-size:.85rem}
:is(button,a,label).btn:disabled{opacity:.5; cursor:not-allowed}

/* ---------- big nav buttons (PAG 3) ---------- */
.navgrid{display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); align-items:start}

/* TUDO NUMA LINHA SÓ, na tela do evento (07/09/2026).
 *
 * `grid-auto-flow:column` põe cada coluna na sua própria faixa, numa fileira
 * só, SEM ninguém ter que contar quantas são — acrescentar ou tirar uma coluna
 * amanhã continua funcionando sozinho, e um número 7 escrito aqui viraria
 * mentira no dia em que virasse 8.
 *
 * O `minmax(0,1fr)` é o que impede a coluna de texto mais comprido de empurrar
 * as outras: sem o zero, o mínimo de uma faixa é o conteúdo dela, e uma coluna
 * cresceria às custas das vizinhas.
 *
 * Só a partir de 1180px. Abaixo disso sete colunas viram sete tiras ilegíveis,
 * e a quebra automática de antes vale mais — no celular, uma embaixo da outra. */
@media (min-width:1180px){
  .navgrid.uma-linha{grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
    grid-template-columns:none}
}
/* E nesta tela a página pode passar do limite do resto do sistema: são sete
   colunas, e parar em 1400px as espremeria à toa em monitor grande. */
@media (min-width:1500px){
  main:has(.navgrid.uma-linha){max-width:1760px}
}

.navcol{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px;
  container-type:inline-size}
.navcol > h3{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.bigbtn{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  padding:14px; margin-bottom:8px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  font:inherit; font-weight:600; cursor:pointer; min-height:56px;
}
.bigbtn:active{transform:scale(.99)}
.bigbtn .ico{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--accent) 16%,transparent); font-size:1.05rem}
.bigbtn .sub{display:block; font-weight:400; font-size:.76rem; color:var(--ink-2)}
.bigbtn.accent{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--surface-2)),var(--surface-2));
  border-color:color-mix(in srgb,var(--accent) 35%,transparent)}

/* Coluna estreita se arruma sozinha, e quem decide é a largura DELA — não a da
   janela. Assim a mesma regra serve para cinco colunas numa tela pequena e para
   sete numa grande, sem eu ter que adivinhar em que largura cada caso cai.
   Contas com sete colunas: janela de 1440px dá ~160px por dentro de cada uma e
   de 1512px dá ~176px (as duas entram no modo compacto); 1728px dá ~207px e não
   entra.
   FICA DEPOIS das regras do .bigbtn de propósito: mesma especificidade, então
   quem vem por último é que vale — antes, o compacto era apagado pelo normal. */
@container (max-width:190px){
  .bigbtn{padding:10px 11px; gap:8px; min-height:46px; margin-bottom:6px}
  .bigbtn .ico{width:26px; height:26px; border-radius:7px; font-size:.92rem}
  .bigbtn .sub{font-size:.68rem; line-height:1.25}
}

/* ---------- list items ---------- */
.item{
  display:flex; align-items:center; gap:11px; padding:13px 14px; cursor:pointer;
  border-bottom:1px solid var(--line); background:var(--surface); color:inherit;
  width:100%; text-align:left; font:inherit; border-left:0;border-right:0;border-top:0;
}
.item:last-child{border-bottom:none}
.item:active{background:var(--surface-2)}
.item .main{flex:1; min-width:0}
.item .main strong{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.item .main small{display:block}
.chev{color:var(--ink-3); font-size:1.2rem; flex:none}

.badge{display:inline-block; padding:2px 8px; border-radius:99px; font-size:.7rem; font-weight:700;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-2); white-space:nowrap}
.badge.ok{color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%,transparent);
  background:color-mix(in srgb,var(--ok) 12%,transparent)}
.badge.warn{color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,transparent);
  background:color-mix(in srgb,var(--warn) 12%,transparent)}
.badge.danger{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 45%,transparent);
  background:color-mix(in srgb,var(--danger) 12%,transparent)}
.badge.accent{color:var(--accent); border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); border:1px solid var(--line)}
/* SEM TETO DE ALTURA o cabeçalho nunca gruda: quem rola é a página, e o
   `position:sticky` do <th> não tem contra o que se segurar. Só a tabela do
   inventário — as outras são curtas e ficam melhor rolando com a página. */
.invwrap{max-height:min(72vh,720px); overflow-y:auto}
table{border-collapse:separate; border-spacing:0; width:100%; min-width:max-content; background:var(--surface)}
th,td{padding:6px 8px; text-align:left; font-size:.84rem; border-bottom:1px solid var(--line); white-space:nowrap}
th{background:var(--surface-2); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-2); font-weight:700; position:sticky; top:0; z-index:2}
tbody tr:nth-child(even) td{background:var(--row-alt)}
tbody tr:last-child td{border-bottom:none}
td.sticky,th.sticky{position:sticky; left:0; z-index:3; background:var(--surface-2); box-shadow:1px 0 0 var(--line)}
th.sticky{z-index:4}
table input:not([type=checkbox]),table select{min-height:34px; padding:5px 7px; font-size:14px;
  border-radius:7px; border-color:transparent; background:transparent}
table input:not([type=checkbox]):hover,table select:hover{background:var(--input); border-color:var(--line)}
table input:not([type=checkbox]):focus,table select:focus{background:var(--input)}
table td.center{text-align:center}
td.nowrap,th.nowrap{white-space:nowrap}
.photo-btn{opacity:.55}
.photo-btn.has{opacity:1; color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
/* campos com lista suspensa + digitação livre */
input[list]{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
  linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 13px) calc(50% + 1px),calc(100% - 9px) calc(50% + 1px);
  background-size:4px 4px,4px 4px; background-repeat:no-repeat; padding-right:22px}
input[list]::-webkit-calendar-picker-indicator{opacity:0; position:absolute; right:0; width:22px; cursor:pointer}
.w-xs input,.w-xs select{width:64px} .w-sm input,.w-sm select{width:104px}
.w-md input,.w-md select{width:150px} .w-lg input,.w-lg select{width:210px}
.rownum{color:var(--ink-3); font-variant-numeric:tabular-nums; font-size:.78rem; text-align:center}
/* tabela só de leitura (o espelho do kit na tela do palco): sem cara de
   formulário, para ninguém tentar digitar dentro dela */
table.ro td{padding:6px 8px; font-size:.86rem}
table.ro tbody tr:hover{background:var(--bg-2)}
.freqcell{font-variant-numeric:tabular-nums; font-weight:600}
/* a linha que a busca achou: as vizinhas ficam ao redor dela, e sem destaque
   ninguém sabe qual é o centro da conta */
tr.achada > td{background:color-mix(in srgb,var(--accent) 18%,transparent) !important;
  font-weight:600}

/* ---- inventário: alça de arrasto e filtro por coluna */
td.grip,th.grip{width:26px; padding:0 2px; text-align:center; color:var(--ink-3);
  cursor:grab; user-select:none; touch-action:none; font-size:1rem}
/* a alça gruda na esquerda junto com a QTD: esta tabela rola muito de lado, e
   uma alça que some é uma alça que não serve. A QTD sai do zero para não ficar
   por cima dela. Só na tabela do inventário — as outras usam .sticky sozinha. */
/* As colunas paradas: o `left` de cada uma é MEDIDO no JS (as larguras mudam
   com o texto digitado), aqui fica só o comportamento. */
table.inv td.parada,table.inv th.parada{position:sticky; z-index:3; box-shadow:none}
/* a risca divisória vem depois, e só na última travada: `td.sticky` traz uma
   por conta própria, e sem este `none` a coluna do meio ficaria com a dela */
table.inv td.borda,table.inv th.borda{box-shadow:1px 0 0 var(--line)}
table.inv th.parada{z-index:5}          /* o canto passa por cima dos dois */
/* O FUNDO É O DA LINHA, não um próprio.
   Travada, a célula precisa de fundo sólido — senão o que rola por baixo
   aparece através dela. Mas a linha zebrada é pintada com um branco
   translúcido, e dar às colunas travadas uma cor qualquer transformava-as numa
   faixa de outro tom no meio da própria linha. Então: linha ímpar recebe o
   fundo da tabela, linha par recebe a MESMA faixa zebrada já resolvida em cor
   sólida (`--row-alt-solid`). */
table.inv tbody tr td.parada{background:var(--surface)}
table.inv tbody tr:nth-child(even) td.parada{background:var(--row-alt-solid)}
/* a do equipamento não pode comer a tela: parada, ela não sai mais do caminho */
table.inv td.fixa.parada input{max-width:min(38vw,240px)}
td.grip.off{cursor:not-allowed; opacity:.3}
tr.arrastando{opacity:.75; outline:2px dashed var(--accent); outline-offset:-2px}
th .thtxt{margin-right:2px}
.fbtn{background:none; border:none; color:var(--ink-3); cursor:pointer; padding:0 2px;
  font-size:.8rem; min-height:0; line-height:1}
.fbtn:hover{color:var(--ink)}
.fbtn.on{color:var(--accent); font-weight:700}
.filtrobar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 4px}
.fpop{position:absolute; z-index:90; width:min(300px,92vw); background:var(--surface);
  border:1px solid var(--line); border-radius:12px; padding:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.35)}
.fpop-head{font-weight:700; font-size:.85rem; margin:2px 4px 8px}
.fpop-busca{width:100%; margin-bottom:6px}
.fpop-lista{max-height:240px; overflow:auto; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); padding:4px 0}
.fpop-item{display:flex; gap:8px; align-items:center; padding:4px 6px; cursor:pointer;
  font-size:.85rem; border-radius:6px}
.fpop-item:hover{background:var(--bg-2)}
.fpop-item span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fpop-pe{display:flex; gap:6px; align-items:center; margin-top:8px}

/* ---------- freq / RF ---------- */
.freq{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:600}
tr.conflict-dup td{background:color-mix(in srgb,var(--danger) 15%,transparent) !important}
tr.conflict-near td{background:color-mix(in srgb,var(--warn) 13%,transparent) !important}
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-2); margin:8px 2px}
.legend i{display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px}

/* ---------- photos ---------- */
.photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px}
.photo{position:relative; aspect-ratio:1; border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--line); background:var(--surface-2)}
.photo img{width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in}
.photo .cap{position:absolute; left:0; right:0; bottom:0; padding:4px 6px; font-size:.66rem;
  background:linear-gradient(transparent,rgba(0,0,0,.8)); color:#fff; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.photo .del{position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%;
  border:none; background:rgba(0,0,0,.6); color:#fff; cursor:pointer; font-size:.8rem; line-height:1}
.uploader{border:1.5px dashed var(--line); border-radius:var(--radius-sm); padding:16px;
  text-align:center; color:var(--ink-2); cursor:pointer; font-size:.85rem}
.uploader:active{border-color:var(--accent)}

#lightbox{position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.92); display:grid; place-items:center}
#lightbox img{max-width:96vw; max-height:92vh; object-fit:contain}
#lightboxClose{position:absolute; top:calc(12px + env(safe-area-inset-top)); right:12px; width:42px; height:42px;
  border-radius:50%; border:none; background:rgba(255,255,255,.15); color:#fff; font-size:1.1rem; cursor:pointer}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin-bottom:10px; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:9px 15px; border-radius:99px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-2); font:inherit; font-weight:600; font-size:.85rem; cursor:pointer; white-space:nowrap; min-height:38px}
.tab.on{background:var(--accent); color:var(--accent-ink); border-color:transparent}
.tab.sem-show{opacity:.45}              /* dia sem nenhum show cadastrado */
.tab.sem-show.on{opacity:1}
/* abas de data do schedule: menores que as outras, para não roubar a tela */
#tDays{gap:5px; padding-bottom:4px; margin-bottom:8px}
#tDays .tab{padding:5px 12px; min-height:30px; font-size:.78rem; font-weight:700;
  border-radius:8px; line-height:1.15}

/* abas de dia do To do Stage: o placar de cada dia vai DENTRO da aba, embaixo
   da data, porque é ele que responde de longe "qual dia ficou para trás". */
#tDias .tab{display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:6px 13px; line-height:1.2}
#tDias .tab .tiny{font-weight:700; font-size:.7rem; opacity:.9}
#tDias .tab.on .tiny{color:var(--accent-ink); opacity:.85}
#tDias .tab .tiny.ok{color:var(--ok,#30a46c)}
#tDias .tab.on .tiny.ok{color:var(--accent-ink)}

/* ---------- login ---------- */
.auth-wrap{min-height:100dvh; display:grid; place-items:center; padding:20px}
.auth{width:100%; max-width:400px}
.auth .logo-big{display:block; width:min(268px,74vw); height:auto; margin:0 auto 18px; color:var(--ink)}

/* ---------- toast ---------- */
#toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(22px + env(safe-area-inset-bottom));
  z-index:100; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  padding:12px 18px; border-radius:99px; font-size:.88rem; font-weight:600; max-width:90vw; text-align:center}
#toast.err{border-color:var(--danger); color:var(--danger)}
#toast.ok{border-color:var(--accent); color:var(--accent)}

/* ---------- sticky save bar ---------- */
.savebar{position:sticky; bottom:0; z-index:30; display:flex; gap:8px; padding:10px 0;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,var(--bg) 30%)}
.savebar .btn{flex:1}

/* ---------- timeline vertical (schedule) ---------- */
.tl-wrap{
  position:relative; overflow:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface);
  max-height:calc(100dvh - 210px);
}
.tl-grid{position:relative; display:grid; min-width:max-content}
.tl-head{
  position:sticky; top:0; z-index:6; display:grid; grid-column:1/-1;
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
.tl-head > div{
  padding:9px 10px; font-size:.72rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2); text-align:center;
  border-left:1px solid var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tl-head > div:first-child{border-left:none; position:sticky; left:0; z-index:7; background:var(--surface-2)}
.tl-head .dot{display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:0}
.tl-body{position:relative; display:grid; grid-column:1/-1}
.tl-times{
  position:sticky; left:0; z-index:5; background:var(--surface-2);
  border-right:1px solid var(--line);
}
.tl-t{
  position:absolute; left:0; right:0;
  font-size:.68rem; color:var(--ink-3); font-variant-numeric:tabular-nums;
  padding-left:8px; border-top:1px solid var(--line); line-height:1;
  display:flex; align-items:flex-start; padding-top:2px;
}
.tl-t.hour{color:var(--ink); font-weight:700; border-top-color:color-mix(in srgb,var(--ink-3) 45%,transparent)}
.tl-col{position:relative; border-left:1px solid var(--line); min-width:150px}
.tl-col.over{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.tl-lines{position:absolute; inset:0; pointer-events:none}
.tl-line{position:absolute; left:0; right:0; border-top:1px solid var(--line)}
.tl-line.hour{border-top-color:color-mix(in srgb,var(--ink-3) 40%,transparent)}
.tl-now{position:absolute; left:0; right:0; height:2px; background:var(--accent-2); z-index:8; pointer-events:none}
.tl-now::after{
  content:attr(data-t); position:absolute; left:4px; top:-9px; font-size:.62rem; font-weight:700;
  background:var(--accent-2); color:#fff; padding:1px 6px; border-radius:99px;
}
.tl-card{
  position:absolute; left:3px; right:3px; border-radius:9px; padding:5px 7px;
  overflow:hidden; cursor:grab; border:1px solid rgba(255,255,255,.16);
  font-size:.72rem; line-height:1.25; color:#fff; z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.25); user-select:none; -webkit-user-select:none;
  touch-action:none;
}
.tl-card:active{cursor:grabbing}
/* cor de preenchimento = palco · cor da borda = passagem x show */
.tl-card{border-width:2.5px; border-style:solid}
.tl-card.sc{border-style:dashed}
.tl-card.dragging{opacity:.45; z-index:20}
.tl-card b{display:block; font-size:.76rem; font-weight:700; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.tl-card .tm{opacity:.9; font-variant-numeric:tabular-nums; font-size:.66rem}
.tl-card .ch{display:flex; gap:4px; margin-top:2px; flex-wrap:wrap}
.tl-card .ch i{font-style:normal; background:rgba(0,0,0,.34); border-radius:4px;
  padding:0 4px; font-size:.62rem; font-weight:700}
.tl-card .ch i.sis{background:#ff4d4f; color:#fff}
.tl-card .ch i.kit{background:#22c55e; color:#04231c}
.tl-legend .sw{display:inline-block; width:16px; height:11px; border-radius:3px;
  border:2px solid; vertical-align:-1px; margin-right:4px; background:var(--ink-3)}
.tl-card .grip{position:absolute; left:0; right:0; bottom:0; height:8px; cursor:ns-resize}
.tl-card.tiny{padding:1px 6px; font-size:.62rem}
.tl-card.tiny .tm,.tl-card.tiny .ch{display:none}

/* FAIXA DO LOAD IN — a subcor da passagem.
 *
 * O card é um só: em cima o load in, embaixo a passagem. A tira NÃO troca a
 * cor, ela ESCURECE a que já está lá (a do palco) com um preto translúcido —
 * por isso qualquer palco ganha a sua própria versão mais fraca sem precisar de
 * uma segunda paleta, e continua dando para ver de que palco é o card.
 *
 * A margem negativa cancela o padding do card para a tira encostar nas bordas;
 * a linha de baixo, na cor da passagem, marca o instante em que ela começa.
 * `pointer-events:none` porque quem arrasta agarra o card, e a tira não pode
 * roubar o clique dele. */
.tl-loadin{
  margin:-5px -7px 4px; padding:1px 7px; box-sizing:border-box;
  background:rgba(0,0,0,.36);
  border-bottom:1.5px solid;                 /* a cor vem do JS: a da passagem */
  font-size:.6rem; font-weight:700; letter-spacing:.05em;
  color:rgba(255,255,255,.86); overflow:hidden; pointer-events:none;
  display:flex; align-items:flex-start;
}
.tl-card.tiny .tl-loadin{margin:-1px -6px 2px; padding:0 6px; font-size:.55rem}

/* A tira do SETUP OFF, embaixo: mesma ideia da de cima, mas ancorada no rodapé.
   O conteúdo do card corre de cima para baixo, então uma tira no fim do fluxo
   ficaria logo abaixo do texto em vez de colada na base — daí o absolute. */
.tl-setoff{
  position:absolute; left:0; right:0; bottom:0; padding:1px 7px; box-sizing:border-box;
  background:rgba(0,0,0,.36); border-top:1.5px solid;
  font-size:.6rem; font-weight:700; letter-spacing:.05em;
  color:rgba(255,255,255,.86); overflow:hidden; pointer-events:none;
  display:flex; align-items:flex-start;
}
.tl-card.tiny .tl-setoff{padding:0 6px; font-size:.55rem}
/* o pegador de esticar fica POR CIMA da tira, senão não dá para redimensionar
   um show que tenha setup off */
.tl-card .grip{z-index:2}
.tl-legend .sw.load{background:rgba(0,0,0,.5); border-color:#ff4d4f; border-style:dashed}

/* UMA FAIXA POR COMPROMISSO dentro do card da passagem (24/09/2026).
 *
 * Load in, set-up off, set-up on, line check e sound check, cada um na altura
 * do seu horário. Continua sendo UM card — é o mesmo compromisso de trabalho, e
 * dois cards disputariam faixa entre si. As faixas ESCURECEM a cor do palco em
 * vez de trocá-la (qualquer palco ganha a sua versão sem segunda paleta), e se
 * alternam em dois tons para que a fronteira entre um compromisso e o próximo
 * se leia de longe. O rótulo vai à DIREITA: à esquerda está o nome do artista,
 * e é ele que se procura primeiro. */
.tl-seg{
  position:absolute; left:0; right:0; box-sizing:border-box; z-index:0;
  background:rgba(0,0,0,.30); border-top:1px solid rgba(255,255,255,.35);
  pointer-events:none; overflow:hidden;
  display:flex; justify-content:flex-end; align-items:flex-start;
}
.tl-seg:nth-of-type(even){background:rgba(0,0,0,.44)}
.tl-seg span{font-size:.56rem; font-weight:700; letter-spacing:.05em;
  color:rgba(255,255,255,.9); padding:1px 5px; white-space:nowrap}
.tl-card b, .tl-card .tm, .tl-card .ch{position:relative; z-index:1}
/* card baixinho: o nome do artista e o rótulo da faixa disputam a mesma linha
   e um escreve por cima do outro. O nome ganha — o rótulo continua no balão
   (title) e no cartão que abre ao tocar. */
.tl-card.tiny .tl-seg span{display:none}
/* os horários das faixas, no rodapé do card: o topo é do nome do artista */
.tl-segtxt{position:absolute; left:0; right:0; bottom:0; z-index:1; pointer-events:none;
  display:flex; flex-direction:column; gap:1px; padding:3px 6px 4px;
  background:linear-gradient(to bottom, transparent, rgba(0,0,0,.45) 35%)}
.tl-segtxt span{font-size:.56rem; font-weight:700; letter-spacing:.04em; line-height:1.2;
  color:rgba(255,255,255,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* bandeja de artistas ainda sem horário */
.tl-tray{
  border:1px dashed var(--line); border-radius:var(--radius); padding:9px 11px; margin-bottom:8px;
  background:var(--surface);
}
.tl-tray > b{font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.tl-tray > .tiny{margin-left:8px}
.tl-tray .chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; max-height:132px; overflow:auto}
.tl-chip{
  display:inline-flex; align-items:baseline; gap:5px; padding:4px 9px; border-radius:8px;
  font-size:.74rem; font-weight:600; color:#fff; cursor:grab; user-select:none;
  border:2px solid; touch-action:none; white-space:nowrap;
}
.tl-chip.sc{border-style:dashed}
.tl-chip i{font-style:normal; font-weight:400; font-size:.64rem; opacity:.85}
.tl-chip.dragging{opacity:.6; z-index:40; position:relative; cursor:grabbing}

.tl-pop{
  position:fixed; z-index:95; width:min(320px,92vw); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:12px; font-size:.8rem; pointer-events:none;
}
.tl-pop h4{margin:0 0 6px; font-size:.92rem}
.tl-pop dl{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:6px 0 0}
.tl-pop dt{color:var(--ink-2); font-size:.72rem}
.tl-pop dd{margin:0; font-size:.75rem}
/* lista de canais por equipamento dentro do pop (e da janela de ações) */
.chlist{list-style:none; margin:2px 0 4px; padding:0}
.chlist li{
  display:flex; gap:6px; font-size:.72rem; color:var(--ink-2); line-height:1.45;
  padding-left:9px; position:relative;
}
.chlist li::before{content:"•"; position:absolute; left:0; color:var(--accent)}
.chlist li b{color:var(--ink); font-variant-numeric:tabular-nums; font-weight:700}
/* mesmo resumo dentro da janela de ações do card */
.popbox h4{margin:0 0 6px; font-size:1rem}
.popbox dl{display:grid; grid-template-columns:auto 1fr; gap:3px 12px; margin:8px 0 0}
.popbox dt{color:var(--ink-2); font-size:.74rem; padding-top:1px}
.popbox dd{margin:0; font-size:.8rem}
.tl-legend{display:flex; gap:12px; flex-wrap:wrap; font-size:.74rem; color:var(--ink-2); margin:6px 2px}
.tl-legend b{color:var(--ink)}

.viewtoggle{display:inline-flex; border:1px solid var(--line); border-radius:99px; overflow:hidden}
.viewtoggle button{background:var(--surface); color:var(--ink-2); border:none; font:inherit;
  font-weight:600; font-size:.82rem; padding:8px 14px; cursor:pointer; min-height:38px}
.viewtoggle button.on{background:var(--accent); color:var(--accent-ink)}

/* ---------- estado de salvamento ---------- */
.saved{display:inline-flex; align-items:center; gap:6px; font-size:.74rem; color:var(--ink-2)}
.saved i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);display:inline-block}
.saved.dirty i{background:var(--warn)}
.saved.ok i{background:var(--ok)}
.saved.err{color:var(--danger)} .saved.err i{background:var(--danger)}

.donebar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 13px;
  border-radius:var(--radius); border:1px solid var(--line); background:var(--surface-2); margin-bottom:12px}
.donebar.done{border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:color-mix(in srgb,var(--ok) 10%,transparent)}

/* janela grande (cadastro de artista, envio de frequências) */
.modal-lg{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(1000px,95vw); max-height:92vh; overflow:auto; margin:0}
.modes{gap:18px}
.modes .check{border:1px solid var(--line); border-radius:99px; padding:4px 14px 4px 10px;
  background:var(--surface-2)}
.modes .check:has(input:checked){border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent)}

/* ---------- monitoramento ao vivo ---------- */
.meter{display:inline-block; width:62px; height:8px; border-radius:99px; background:var(--surface-2);
  border:1px solid var(--line); overflow:hidden; vertical-align:0; margin-right:5px}
.meter i{display:block; height:100%; background:var(--ok)}
.meter.warn i{background:var(--warn)}
.meter.bad i{background:var(--danger)}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
tr.stale td{opacity:.45}
.badge.danger{color:var(--danger)}

.empty{padding:34px 16px; text-align:center; color:var(--ink-2)}
.empty .big{font-size:2rem; display:block; margin-bottom:6px; opacity:.5}
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--accent);
  border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

@media(min-width:820px){
  body{font-size:14.5px}
  main{padding:18px 20px 90px}
  input,select,textarea{font-size:14.5px}
}
/* ---------- impressão: sai a tela inteira, sem os controles ---------- */
@media print{
  @page{margin:12mm}
  /* fora: só o que é botão de comando. As listas continuam, mesmo sendo <button>. */
  #topbar,#drawer,#scrim,#crumbs,.savebar,.tabs,.viewtoggle,.uploader,
  .btn,.icon-btn,.chev,.rownum,#toast,#lightbox,#verBar{display:none !important}
  html,body{background:#fff !important; color:#000 !important;
    height:auto !important; overflow:visible !important}
  #app{padding:0 !important; max-width:none !important}
  /* cabeçalho de papel, com o caminho da página */
  body::before{
    content:attr(data-print-title); display:block; font-size:15pt; font-weight:700;
    margin-bottom:2mm; color:#000;
  }
  body::after{content:none}
  .card,.item,.linkrow .lk-main,.bigbtn,.donebar,.chkhead{
    background:#fff !important; color:#000 !important;
    border-color:#bbb !important; box-shadow:none !important; break-inside:avoid;
  }
  .card{margin-bottom:4mm}
  .item{border-bottom:1px solid #ddd !important}
  .muted,.tiny,.item .main small{color:#444 !important}
  .field > span,.navcol > h3,label > span{color:#333 !important}
  .badge{border:1px solid #999 !important; color:#000 !important;
    background:#fff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .badge.warn{border-color:#000 !important; font-weight:700}
  .section-title{color:#000 !important; break-after:avoid}
  .tablewrap{overflow:visible !important; border-color:#bbb !important}
  /* a timeline não fica presa na altura da tela ao imprimir (para o schedule
     bonito de verdade, use o botão Exportar) */
  .tl-wrap{max-height:none !important; overflow:visible !important; border-color:#bbb !important}
  .tl-card{-webkit-print-color-adjust:exact; print-color-adjust:exact;
    box-shadow:none !important; color:#fff !important}
  .tl-head,.tl-times{background:#f2f2f2 !important}
  table{width:100% !important; font-size:8pt}
  th,td{border-color:#ddd !important}
  input:not([type=checkbox]),select,textarea{border:none !important;
    background:#fff !important; color:#000 !important; padding:0 !important}
  /* quadradinho do check tem que aparecer no papel, marcado ou não */
  input[type=checkbox]{
    appearance:none !important; -webkit-appearance:none !important;
    width:12pt; height:12pt; border:1.2pt solid #000 !important; border-radius:2pt;
    background:#fff !important; position:relative;
  }
  input[type=checkbox]:checked::after{
    content:"✓"; position:absolute; inset:-3pt 0 0 0; text-align:center;
    font-size:13pt; font-weight:700; color:#000;
  }
  a{color:#000 !important; text-decoration:none}
  *:focus,*:focus-visible{outline:none !important; box-shadow:none !important;
    border-color:#bbb !important}
}

/* pré-show: check da passagem na esquerda, check do show na direita */
.item .chkcol{display:flex; align-items:center; justify-content:center; flex:none; width:74px}
.item.chkhead{background:var(--surface-2); border-bottom:1px solid var(--line)}
.item.chkhead .chkcol{font-size:.62rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-2); font-weight:700}

/* ---------- monitoramento em blocos (estilo Wireless Workbench) ---------- */
.rfgrid{display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.rfcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 12px 8px}
.rfcard.stale{opacity:.45}
.rfcard.alarm{border-color:var(--danger); box-shadow:0 0 0 1px var(--danger) inset}
.rfhead{display:flex; align-items:center; gap:7px; margin-bottom:2px}
.rfhead b{flex:1; font-size:.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rffreq{font-family:var(--mono); font-size:1.5rem; font-weight:700; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums; line-height:1.1}
.rffreq small{font-size:.62rem; font-weight:600; color:var(--ink-2); margin-left:4px}
.rfrow{display:flex; align-items:center; gap:7px; margin-top:5px}
.rfrow .lbl{font-size:.6rem; font-weight:700; letter-spacing:.08em; color:var(--ink-3); width:24px}
.dots{display:inline-flex; gap:3px}
.dots i{width:9px; height:9px; border-radius:50%; background:var(--surface-2);
  border:1px solid var(--line); display:block}
.dots.ok i.on{background:var(--ok); border-color:var(--ok)}
.dots.warn i.on{background:var(--warn); border-color:var(--warn)}
.dots.bad i.on{background:var(--danger); border-color:var(--danger)}
.bat{flex:1; height:9px; border-radius:99px; background:var(--surface-2);
  border:1px solid var(--line); overflow:hidden}
.bat i{display:block; height:100%; background:var(--ok)}
.bat.warn i{background:var(--warn)} .bat.bad i{background:var(--danger)}
.rffoot{display:flex; gap:8px; flex-wrap:wrap; margin-top:7px; padding-top:6px;
  border-top:1px solid var(--line); color:var(--ink-2)}
.rfdev{margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rfrow .dots + .dots{margin-left:7px}
.bat.aud i{background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* aviso de servidor desatualizado */
#verBar{position:fixed; left:12px; right:12px; bottom:12px; z-index:120;
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  background:var(--surface); border:2px solid var(--warn); border-radius:var(--radius);
  padding:12px 16px; box-shadow:var(--shadow); font-size:.84rem}
#verBar b{color:var(--warn)}
#verBar span{flex:1; min-width:240px; color:var(--ink-2)}

/* ---------- cabeçalho de caminho (breadcrumb) ---------- */
#crumbs{
  position:sticky; top:var(--topbar-h,54px); z-index:39;
  display:flex; align-items:center; gap:2px; flex-wrap:nowrap; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:6px 12px; font-size:.76rem; line-height:1.2;
  background:color-mix(in srgb,var(--bg-2) 92%, transparent);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
#crumbs::-webkit-scrollbar{display:none}
#crumbs a,#crumbs span.cr{
  display:inline-block; max-width:34ch; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; padding:2px 6px; border-radius:6px; text-decoration:none;
}
#crumbs a{color:var(--ink-2)}
#crumbs a:hover{color:var(--ink); background:var(--surface-2)}
#crumbs .sep{color:var(--ink-3,var(--ink-2)); opacity:.55; flex:none; padding:0 1px}
#crumbs .cr.here{color:var(--ink); font-weight:700}
#crumbs .cr.home{flex:none; padding-left:0}
@media(max-width:639px){
  #crumbs{font-size:.72rem; padding:5px 10px}
  #crumbs a,#crumbs span.cr{max-width:16ch}
  #crumbs .cr.here{max-width:22ch}
}

/* ---------- links úteis do evento (com arquivo anexado) ---------- */
.linkrow{display:flex; align-items:stretch; gap:6px; margin-bottom:8px}
.linkrow .lk-main{
  display:flex; align-items:center; gap:11px; flex:1; min-width:0; text-align:left;
  padding:12px 14px; border-radius:var(--radius-sm); min-height:56px;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  font:inherit; font-weight:600; cursor:pointer;
}
.linkrow .lk-main:active{transform:scale(.99)}
.linkrow .lk-main[disabled]{cursor:default; opacity:.75}
.linkrow .lk-main[disabled]:active{transform:none}
.linkrow .ico{width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  flex:none; background:color-mix(in srgb,var(--accent) 16%,transparent); font-size:1.05rem}
.linkrow .txt{min-width:0}
.linkrow .txt strong{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.linkrow .txt small{display:block; font-weight:400; font-size:.74rem; color:var(--ink-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.linkrow.vazio .ico{background:color-mix(in srgb,var(--warn) 20%,transparent)}
.linkrow.vazio .txt small{color:var(--warn)}
.icon-btn.sm{width:38px; height:auto; font-size:.95rem}
.icon-btn.danger{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,var(--line))}

/* janela média (link / arquivo) */
.modal-sm{position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px,94vw); max-height:92vh; overflow:auto; margin:0}

/* ---------- kit básico no topo do inventário do palco ---------- */
.kitcard{border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
.kitcard input[type=number]{font-weight:700; font-size:1.05rem}

/* ---------- resumo do palco ---------- */
.item .qtds{flex:none}
@media(max-width:639px){
  .item:has(.qtds){flex-wrap:wrap; padding-bottom:11px}
  .item:has(.qtds) .main{flex:1 1 100%}
  .item:has(.qtds) .chev{display:none}
  .item .qtds{flex:1 1 100%; margin-top:6px; flex-wrap:wrap}
}

/* ---------- página do palco: 4 colunas fixas, resumo embaixo do inventário ---------- */
.stagegrid{display:grid; gap:10px; grid-template-columns:repeat(4,1fr); margin-bottom:12px}
.stagegrid .bigbtn{margin:0; height:100%; min-height:72px; align-items:flex-start}
.stagegrid .bigbtn > span:last-child{align-self:center}
@media(max-width:1099px){.stagegrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:539px){.stagegrid{grid-template-columns:1fr}}

/* ---------- tabela de gerenciamento de artistas ---------- */
.lotebar{position:sticky; top:calc(var(--topbar-h,54px) + 34px); z-index:38;
  border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); padding:10px 12px}
.lotebar .inline{width:auto; min-width:150px}
table.gerencia tbody tr.sel > td{background:color-mix(in srgb,var(--accent) 12%,transparent)}
table.gerencia td.sticky,table.gerencia th.sticky{width:74px}
table.gerencia td.selcell{white-space:nowrap}
table.gerencia td.selcell .btn{padding:2px 7px; margin-left:5px; vertical-align:middle}
table.gerencia input[type=checkbox]{margin:0}
table.gerencia .badge{margin-right:3px}
@media print{.lotebar,table.gerencia th.sticky,table.gerencia td.sticky{display:none !important}}
@media(max-width:639px){
  .filtros{grid-template-columns:1fr 1fr; gap:8px}
  .filtros .field span{font-size:.66rem}
  .lotebar .row{gap:6px}
  .lotebar .inline{min-width:120px; flex:1}
}

/* botão de ação destrutiva na coluna de administração */
.bigbtn.perigo{border-color:color-mix(in srgb,var(--danger) 42%,var(--line));
  background:color-mix(in srgb,var(--danger) 8%,var(--surface-2))}
.bigbtn.perigo .ico{background:color-mix(in srgb,var(--danger) 20%,transparent)}
.bigbtn.perigo > span:last-child{color:var(--danger)}
.bigbtn.perigo .sub{color:color-mix(in srgb,var(--danger) 70%,var(--ink-2))}

/* ---------- agenda contínua: a régua atravessa os dias ---------- */
.tl-t.dia{
  gap:4px; align-items:center; padding-top:0; color:var(--ink); white-space:nowrap;
  border-top:2px solid var(--accent); background:var(--surface-2); z-index:2; overflow:hidden;
}
.tl-t.dia b{font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em}
.tl-t.dia span{font-size:.62rem; color:var(--ink-2)}
/* linha de virada do dia, atravessando todas as colunas */
.tl-vira{
  position:absolute; left:0; right:0; height:0; z-index:1; pointer-events:none;
  border-top:2px solid color-mix(in srgb,var(--accent) 60%,transparent);
}
/* rótulo do dia no canto do cabeçalho, que acompanha a rolagem */
.tl-head > div.tl-diahdr{
  display:flex; flex-direction:column; gap:0; justify-content:center; line-height:1.15;
  text-transform:none; letter-spacing:0; color:var(--ink);
}
.tl-head > div.tl-diahdr b{font-size:.72rem; font-weight:800; text-transform:uppercase}
.tl-head > div.tl-diahdr span{font-size:.64rem; font-weight:600; color:var(--ink-2)}

/* ---------- duplo check da ficha do artista ---------- */
.donebar.duplo{border-style:dashed}
.donebar.duplo.done{border-style:solid}
.donebar.duplo .check{
  border:1px solid var(--line); border-radius:99px; padding:4px 14px 4px 10px;
  background:var(--surface); display:inline-flex; align-items:center; gap:8px;
  font-weight:700; cursor:pointer;
}
.donebar.duplo .check:has(input:checked){
  border-color:var(--ok); background:color-mix(in srgb,var(--ok) 16%,transparent);
}
.donebar.duplo input.inline{width:auto; min-width:190px; flex:0 1 240px}
@media(max-width:639px){
  .donebar.duplo input.inline{flex:1 1 100%; min-width:0}
  .donebar.duplo .btn{flex:1 1 100%}
}
.tl-card .ch i.rid{background:#f5a524; color:#3a2600}

/* ---------- relatório do evento ---------- */
.relcapa{padding:6px 2px 2px}
.relcapa h1{font-size:1.5rem; margin:0 0 2px}
.relcapa p{margin:0; color:var(--ink-2); font-size:.86rem}
.card.kpi{display:flex; flex-direction:column; gap:2px; padding:12px 14px; margin:0}
.card.kpi .n{font-size:1.6rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}
.card.kpi .t{font-size:.72rem; color:var(--ink-2); line-height:1.25}
.reldia{font-size:1rem; margin:18px 2px 6px; padding-bottom:4px; border-bottom:2px solid var(--accent)}
.relpalco{margin:0 0 10px}
.relpalco h4{font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2);
  margin:8px 2px 4px; display:flex; align-items:center; gap:8px}
.relrow{display:flex; align-items:baseline; gap:10px; padding:4px 8px; border-radius:7px;
  border-bottom:1px solid var(--line)}
.relrow:last-child{border-bottom:none}
.relrow b{font-variant-numeric:tabular-nums; font-size:.8rem; width:52px; flex:none; color:var(--ink-2)}
.relrow .nome{flex:1; min-width:0; font-weight:600; font-size:.88rem}
.relrow .tags{display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end}
.check.bloco{align-items:flex-start; gap:9px; padding:9px 11px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--surface-2); cursor:pointer}
.check.bloco:has(input:checked){border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
.check.bloco input{margin-top:2px}
.check.bloco b{display:block; font-size:.84rem}
.check.bloco small{display:block; font-size:.72rem; color:var(--ink-2); line-height:1.3}
@media print{.no-print{display:none !important}}
.tl-pop .bp{font-size:.68rem; color:var(--ink-2); font-weight:600}
.chlist li i{font-style:normal; color:var(--ink-2); font-size:.68rem}

/* schedule travado: o card continua clicável, mas não se arrasta */
.tl-wrap.travado .tl-card{cursor:pointer; touch-action:auto}
.tl-wrap.travado .tl-card:active{cursor:pointer}
.tl-chip{cursor:grab}

/* dica dentro da caixa (o item que veio do modelo, no inventário) */
input::placeholder, textarea::placeholder{color:var(--ink-3); opacity:1}

/* ---- ficha do artista: o que o artista traz ---------------------------- */
/* Só o que o artista traz ganha cor. O resto é do kit básico do palco e fica
   com o cinza normal da tabela — o contraste é mais forte assim do que pintando
   os dois. Na linha colorida a faixa intercalada vira um tom mais forte da MESMA
   cor, senão a tabela alternava vermelho e cinza. A primeira célula é sticky e
   por isso leva o tom misturado com o fundo, para continuar opaca ao rolar. */
tbody tr.rf-traz > td{background:color-mix(in srgb,var(--danger) 11%,transparent)}
tbody tr.rf-traz:nth-child(even) > td{background:color-mix(in srgb,var(--danger) 20%,transparent)}
tbody tr.rf-traz > td.sticky{background:color-mix(in srgb,var(--danger) 11%,var(--surface-2))}
tbody tr.rf-traz:nth-child(even) > td.sticky{
  background:color-mix(in srgb,var(--danger) 20%,var(--surface-2))}
tbody tr.rf-traz > td:first-child{box-shadow:inset 3px 0 0 var(--danger), 1px 0 0 var(--line)}

/* frequência que veio do SoundBase Coord: marca só a célula, porque é outra
   informação — de onde veio a frequência, não de quem é o equipamento */
td.decoord{box-shadow:inset 3px 0 0 var(--coord)}
td.decoord input{color:var(--coord); font-weight:700}

.rf-legenda{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 2px 8px}
.rf-legenda .lg{display:inline-flex; align-items:center; gap:6px; font-size:.82rem;
  color:var(--muted)}
.rf-legenda .lg::before{content:''; width:12px; height:12px; border-radius:3px}
.rf-legenda .traz::before{background:color-mix(in srgb,var(--danger) 55%,transparent)}
.rf-legenda .kit::before{background:var(--row-alt); border:1px solid var(--line)}
.rf-legenda .coord::before{background:var(--coord)}
@media print{
  tbody tr.rf-traz > td:first-child{box-shadow:inset 3px 0 0 #222}
  td.decoord{box-shadow:inset 3px 0 0 #555}
}

/* ---------------------------------------------- coordenação em tela cheia
   A coordenação de RF é uma ferramenta de espectro: gráfico, árvore e listas
   disputando a mesma tela. Cada faixa de cabeçalho ali em cima é faixa a menos
   de banda visível, então ela toma a janela inteira. O caminho de volta fica
   dentro dela, no botão "← RF.M". */
body.tela-cheia #topbar,
body.tela-cheia #crumbs { display: none }
body.tela-cheia main { padding: 0; max-width: none }
body.tela-cheia #coordFrame {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  border: 0; margin: 0; display: block; background: var(--bg); z-index: 10;
}

/* Fila de aprovação do SoundBase Coord: cada item é uma decisão a tomar, então
   fica com moldura própria — lista corrida faria dois grupos parecerem um. */
.item-fila{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.item-fila:last-of-type{margin-bottom:0}
.item-fila table{font-size:12.5px}
.item-fila select.sm{padding:2px 6px;font-size:12px}

/* Escolher artista numa lista de 156: a caixa de escrever o nome fica colada na
   lista, porque as duas são a mesma decisão. Em tela estreita elas empilham. */
.busca-art{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.busca-art .busca-art-in{width:150px;min-width:110px}
.busca-art select{min-width:230px}
@media (max-width:640px){
  .busca-art{display:flex;width:100%}
  .busca-art .busca-art-in,.busca-art select{flex:1;min-width:0}
}

/* ===================== cronômetro de palco =====================
   Feito para ser lido de longe e de lado: no backstage a tela fica num monitor
   a três metros, e quem olha está andando. Daí o número enorme em fonte
   tabular (dígito que muda não pode empurrar os vizinhos) e a barra grossa —
   a barra é o que se lê sem focar, o número é a confirmação. */
.cr-grade{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(var(--cr-min,320px),1fr));
}
/* Três tamanhos, porque a mesma grade serve para o telão do backstage e para
   um evento de oito palcos numa tela de notebook. */
.cr-grade[data-tam="p"]{--cr-min:250px; --cr-num:2.2rem}
.cr-grade[data-tam="m"]{--cr-min:340px; --cr-num:3.1rem}
.cr-grade[data-tam="g"]{--cr-min:520px; --cr-num:5rem}

.cr-card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; overflow:hidden;
  container-type:inline-size;
}
/* a faixa da cor do palco: é por ela que se sabe de qual palco é o cartão
   antes de ler o nome */
.cr-card::before{content:''; position:absolute; inset:0 auto 0 0; width:5px; background:var(--cr)}
.cr-topo{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:8px}
.cr-palco{font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  font-size:.78rem; color:var(--cr)}
.cr-abrir{background:none; border:1px solid var(--line); color:var(--ink-2);
  border-radius:8px; width:26px; height:26px; cursor:pointer; flex:none; line-height:1}
.cr-abrir:hover{color:var(--ink); border-color:var(--ink-3)}
.cr-artista{font-weight:700; font-size:1.05rem; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cr-fase{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-2); margin-top:6px}
.cr-num{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:var(--cr-num,3.1rem); font-weight:700; line-height:1.05;
  letter-spacing:-.02em; margin:2px 0 8px;
}
/* O relógio sozinho ocupa o lugar do número; ao lado da contagem, recua para
   segunda voz — duas informações do mesmo tamanho não têm hierarquia, e a
   pergunta principal no intervalo é "falta quanto", não "que horas são". */
.cr-relogio{font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:var(--cr-num,3.1rem); font-weight:700; line-height:1.05; margin:2px 0 8px;
  color:var(--ink)}
.cr-relogio-sec{font-size:1.15rem; font-weight:600; color:var(--ink-2); margin:-4px 0 8px}
.cr-bar{height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden}
.cr-bar i{display:block; height:100%; background:var(--cr); border-radius:99px;
  transition:width .9s linear}
.cr-horas{display:flex; gap:8px; flex-wrap:wrap; align-items:baseline;
  margin-top:8px; font-size:.8rem; color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.cr-plan{text-decoration:line-through; color:var(--ink-3)}
.cr-prox{margin-top:6px; font-size:.78rem; color:var(--ink-3)}
.cr-prox b{color:var(--ink-2)}
.cr-vazio{color:var(--ink-3); font-size:.85rem; padding:14px 0}
.cr-btn-atraso{margin-top:12px}

/* O show que passou do horário e ninguém carimbou. Fica em bloco próprio, com
   moldura, porque é a única coisa nesta tela que pede uma decisão. */
.cr-pendente{border:1px solid color-mix(in srgb,var(--danger) 55%,var(--line));
  background:color-mix(in srgb,var(--danger) 10%,transparent);
  border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:10px; font-size:.85rem}

/* As fases mudam a COR e nada mais. Trocar o layout entre estados faria a tela
   piscar de forma diferente a cada show e obrigaria a reler tudo. */
.cr-noar .cr-num{color:var(--ok)}
.cr-intervalo .cr-num{color:var(--accent-2)}
.cr-intervalo .cr-bar i{background:var(--accent-2)}
.cr-encerrado .cr-relogio{color:var(--ink-2)}

/* ---- palco sozinho: escala com a janela, nas DUAS direções ----
   Só largura não basta: a mesma janela esticada e baixa cortaria o número.
   `min(vw, vh)` faz o painel caber no menor lado disponível, que é o que
   "ocupar a tela" quer dizer num monitor de proporção qualquer. */
.cr-solo{min-height:100vh; display:flex; flex-direction:column; padding:10px; gap:8px}
.cr-solo-barra{display:flex; align-items:center; gap:8px; opacity:.55; transition:opacity .2s}
.cr-solo-barra:hover{opacity:1}
.cr-solo-corpo{flex:1; display:flex; align-items:center; justify-content:center; min-height:0}
.cr-solo .cr-card{width:100%; height:100%; display:flex; flex-direction:column;
  justify-content:center; padding:clamp(14px,3vw,40px)}
.cr-solo .cr-num,.cr-solo .cr-relogio{font-size:min(19vw,24vh); margin:0 0 .12em}
.cr-solo .cr-relogio-sec{font-size:min(5vw,7vh); margin:-.1em 0 .3em}
.cr-solo .cr-artista{font-size:min(5.5vw,7vh); white-space:normal; line-height:1.1}
.cr-solo .cr-palco{font-size:min(2.4vw,3.4vh)}
.cr-solo .cr-fase{font-size:min(2.2vw,3vh)}
.cr-solo .cr-bar{height:min(2.4vw,3vh)}
.cr-solo .cr-horas,.cr-solo .cr-prox{font-size:min(2.2vw,3vh)}

/* Cartão estreito na grade (evento com muitos palcos): o número encolhe junto,
   senão ele estoura a coluna e a grade inteira ganha rolagem lateral. */
@container (max-width: 300px){
  .cr-num,.cr-relogio{font-size:2rem}
  .cr-artista{font-size:.95rem}
}

.cr-modal .field{margin-bottom:4px}
.cr-modal input[type=number]{font-size:1.4rem; font-weight:700; font-family:var(--mono)}

/* ==================================================== GERENCIAMENTO DE EVENTO
   As três tabelas da ficha. O que elas têm de diferente das outras é o título
   de coluna renomeável — daí o botão dentro do <th>, que só aparece no hover
   para não poluir uma tabela que tem seis deles. */

.g-abas{align-items:center}
.g-abas .badge{margin-left:6px}

.g-th{display:inline-flex; align-items:center; gap:5px}
.g-ren{background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:.8rem;
  padding:0 2px; border-radius:4px; opacity:.3; transition:opacity .12s}
th:hover .g-ren, .g-ren:focus-visible{opacity:1}
.g-ren:hover{color:var(--accent); background:var(--surface-2)}
/* o ponto que diz "este nome é só desta ficha". Discreto de propósito: é
   informação de canto de olho, não aviso */
.g-exc{color:var(--accent); font-style:normal; font-size:.9rem; line-height:0}
.g-ficha td input{width:100%}
.g-ficha .w-xs input{width:60px}

/* touch não tem hover: no celular os botões de renomear ficam sempre visíveis,
   senão a coluna simplesmente não teria como ser renomeada ali */
@media (hover:none){ .g-ren{opacity:.7} }

/* ============================================================== COUNTDOWN
   A tela do get on time. Três regras mandam no desenho:
     1. o NÚMERO é o maior elemento da tela, sempre;
     2. o ESTADO vem escrito por extenso acima dele — número sem estado faz
        alguém ler "12:30" como horário quando é tempo restante;
     3. a cor é do ESTADO, não do palco; a cor do palco fica na borda, para não
        competir com o vermelho de "deveria ter subido". */

.ct-topo{display:flex; align-items:center; gap:12px; padding:10px 2px 14px;
  border-bottom:1px solid var(--line); margin-bottom:14px}
.ct-marca{display:flex; align-items:center; gap:10px; min-width:0}
.ct-marca .logo-mini{width:26px; height:26px; flex:none}
.ct-ev{font-weight:700; font-size:1.02rem; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap}
.ct-agora{margin-left:auto; text-align:right; line-height:1.1}
.ct-agora small{display:block; font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3)}
.ct-agora b{font-size:1.5rem; font-variant-numeric:tabular-nums}
.ct-acoes{gap:8px; align-items:center; margin-bottom:12px; flex-wrap:wrap}
.ct-vazio{text-align:center; padding:34px 16px}
.ct-escolha{display:grid; gap:4px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  margin-bottom:10px}

.ct-grade{display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.ct-item{background:var(--surface); border:1px solid var(--line);
  border-left:4px solid var(--ct,var(--accent)); border-radius:var(--radius);
  padding:14px 16px}
.ct-status{font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:2px}
.ct-num{font-size:clamp(2.1rem,6vw,3.1rem); font-weight:800; line-height:1.05;
  font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.ct-tit{font-weight:700; font-size:1.02rem; margin-top:4px}
.ct-sub{display:flex; flex-wrap:wrap; gap:6px 10px; margin-top:6px;
  font-size:.76rem; color:var(--ink-2); align-items:center}
.ct-palco{color:var(--ct,var(--accent)); font-weight:700}
.ct-bar{height:4px; border-radius:99px; background:var(--surface-2); margin-top:10px;
  overflow:hidden}
.ct-bar i{display:block; height:100%; background:var(--ct,var(--accent));
  transition:width .9s linear}

.ct-foco{position:relative}
.ct-grande{padding:26px 28px}
.ct-grande .ct-num{font-size:clamp(3.4rem,13vw,7.5rem)}
.ct-grande .ct-tit{font-size:1.5rem}
.ct-fab{position:absolute; right:12px; top:12px}

/* as cores de estado. `color-mix` com a superfície mantém o fundo legível nos
   dois temas sem escrever a paleta duas vezes */
.ct-futuro .ct-num{color:var(--ink)}
.ct-noar{border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.ct-noar .ct-num, .ct-noar .ct-g-num{color:var(--ok)}
.ct-noar .ct-status{color:var(--ok)}
.ct-atrasado{border-color:color-mix(in srgb,var(--warn) 55%,var(--line));
  background:color-mix(in srgb,var(--warn) 8%,var(--surface))}
.ct-atrasado .ct-num, .ct-atrasado .ct-g-num{color:var(--warn)}
.ct-atrasado .ct-status{color:var(--warn)}
.ct-pendente{border-color:color-mix(in srgb,var(--danger) 55%,var(--line));
  background:color-mix(in srgb,var(--danger) 8%,var(--surface))}
.ct-pendente .ct-num, .ct-pendente .ct-g-num{color:var(--danger)}
.ct-pendente .ct-status{color:var(--danger)}
.ct-encerrado{opacity:.62}

/* -------------------------------------------------- as duas telas de monitor */

/* sem barra de cima: numa tela pendurada a três metros, cabeçalho é área que
   não conta segundo nenhum */
body.ct-limpo #topbar, body.ct-limpo #crumbs{display:none}
body.ct-limpo main{max-width:none; padding:0; margin:0}

.ct-tela{min-height:100vh; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; padding:4vh 4vw; gap:.4rem;
  background:var(--bg)}
.ct-g-status{font-size:clamp(.8rem,2.2vw,1.3rem); letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-3)}
.ct-g-num{font-size:clamp(4rem,22vw,17rem); font-weight:800; line-height:.95;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.ct-g-tit{font-size:clamp(1.3rem,5vw,3.4rem); font-weight:700; margin-top:.3rem}
.ct-g-sub{font-size:clamp(.85rem,2vw,1.4rem); color:var(--ink-2)}
.ct-g-bar{width:min(80vw,900px); height:6px; border-radius:99px;
  background:var(--surface-2); overflow:hidden; margin-top:1.4rem}
.ct-g-bar i{display:block; height:100%; background:var(--ct,var(--accent));
  transition:width .9s linear}
.ct-g-rodape{position:fixed; left:0; right:0; bottom:10px; display:flex;
  justify-content:space-between; padding:0 16px; font-size:.8rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- a timeline */

.ct-linha-tempo{position:relative; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:26px 10px 10px;
  overflow:hidden}
.ct-regua{position:relative; height:16px; margin-bottom:6px}
.ct-regua span{position:absolute; transform:translateX(-50%); font-size:.66rem;
  color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap}
.ct-faixa{display:flex; align-items:stretch; gap:8px; margin-bottom:6px}
.ct-faixa-nome{width:120px; flex:none; font-size:.74rem; font-weight:700;
  color:var(--ink-2); display:flex; align-items:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ct-faixa-pista{position:relative; flex:1; height:34px; background:var(--surface-2);
  border-radius:7px}
.ct-bloco{position:absolute; top:3px; bottom:3px; border:0; cursor:pointer;
  border-radius:5px; padding:0 6px; overflow:hidden; text-align:left;
  background:color-mix(in srgb,var(--ct,var(--accent)) 26%,var(--surface));
  border-left:3px solid var(--ct,var(--accent)); color:var(--ink)}
.ct-bloco b{font-size:.7rem; font-weight:700; white-space:nowrap}
.ct-bloco:hover{filter:brightness(1.15)}
.ct-bloco.ct-noar{outline:2px solid var(--ok)}
.ct-bloco.ct-atrasado{outline:2px solid var(--warn)}
.ct-bloco.ct-pendente{outline:2px solid var(--danger)}
/* a linha do agora começa depois do rótulo do palco: atravessando o nome ela
   pareceria uma borda de tabela, e não o instante em que se está */
.ct-agora-linha{position:absolute; top:26px; bottom:10px; width:2px;
  background:var(--danger); margin-left:128px; pointer-events:none;
  box-shadow:0 0 8px color-mix(in srgb,var(--danger) 60%,transparent)}

@media (max-width:640px){
  .ct-faixa-nome{width:76px; font-size:.66rem}
  .ct-agora-linha{margin-left:84px}
}

/* ============================================= BUSCA DE FREQUÊNCIA =========
   O campo da barra de cima. A lista sai com as MAIORES em cima e as menores
   embaixo, como o espectro é desenhado — quem procura frequência lê de cima
   para baixo esperando o número descer, e inverter isso faria ler duas vezes. */
.freqbusca{position:relative; margin-right:6px}
.freqbusca input{width:104px; padding:5px 9px; border-radius:8px;
  border:1px solid var(--line); background:var(--input); color:var(--ink);
  font-variant-numeric:tabular-nums; font-size:.84rem}
.freqbusca input:focus{width:150px; outline:2px solid var(--accent); outline-offset:-1px}
@media (max-width:640px){ .freqbusca input{width:78px} .freqbusca input:focus{width:120px} }

#fqPop{position:absolute; right:0; top:calc(100% + 6px); z-index:60; min-width:330px;
  max-width:min(94vw,440px); background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.35); overflow:hidden}
.fq-lin{display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left;
  padding:8px 11px; background:none; border:0; border-bottom:1px solid var(--line);
  color:var(--ink); cursor:pointer; font-size:.8rem}
.fq-lin:last-child{border-bottom:0}
.fq-lin:hover{background:var(--surface-2)}
.fq-lin b{font-variant-numeric:tabular-nums; font-weight:700; flex:none; width:64px}
.fq-quem{flex:1; line-height:1.35}
/* a exata é a resposta; as vizinhas são contexto, e ficam mais apagadas */
.fq-exata{background:color-mix(in srgb,var(--accent) 14%,var(--surface))}
.fq-exata b{color:var(--accent)}
.fq-acima, .fq-abaixo{opacity:.72}
.fq-livre{padding:8px 11px; font-size:.82rem; border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--ok) 12%,var(--surface));
  font-variant-numeric:tabular-nums}
.fq-vazio{margin:0; padding:11px; font-size:.78rem; color:var(--ink-2)}
@media print{ .freqbusca{display:none} }

/* ---------- check list de produção (23/09/2026) ----------
   O da ferramenta de EVENTO, que não é o pré-show do RF. A lista é do evento e
   a marcação é do artista, então esta tela é de EDITAR TEXTO e a outra é de
   MARCAR — daí as duas terem cara diferente de propósito. */
.pc-lin{gap:8px; margin-bottom:6px; align-items:center}
.pc-lin .pc-txt{flex:1}
.pc-arrasta{color:var(--muted); font-size:13px; cursor:default; user-select:none}
.pc-item{display:flex; align-items:baseline; gap:10px; padding:9px 2px;
  border-bottom:1px solid var(--line)}
.pc-item span{flex:1}
.pc-item:last-child{border-bottom:0}

/* ======================================================================
   A TELA DO PALCO — o countdown de todas as etapas
   ======================================================================
   Desenho próprio do U_STAGE (30/09/2026): fundo azul-noite da marca, a faixa
   das quatro cores no topo, a coluna principal com o palco, o estado, o número
   em algarismos de largura fixa e a régua do dia; a coluna lateral com o
   relógio, a lista do que vem e a marca. As cores vêm de variáveis porque a
   tela é editável e a configuração é do evento.

   O tamanho do número se mede pelo MENOR entre a largura e a altura da tela:
   só pela largura, um monitor de coxia em pé cortaria os dígitos; só pela
   altura, uma TV larga deixaria o número pequeno no meio de tanto fundo. */
.ctp{position:fixed; inset:0; z-index:40; display:flex; flex-direction:column;
  background:var(--ctp-fundo,#0b0f14); color:var(--ctp-num,#e8eef7);
  --ctp-apagado:#8a98ae; --ctp-painel:rgba(255,255,255,.045); --ctp-linha:rgba(255,255,255,.08);
  font-family:var(--font); box-sizing:border-box;
  box-shadow:inset 0 0 0 0 transparent; transition:box-shadow .5s}
/* no alerta a borda da tela acende: percebe-se de longe, sem ler nada */
.ctp.em-alerta{box-shadow:inset 0 0 0 .8vmin var(--ctp-alerta,#f5a524)}
.ctp-faixa{display:flex; gap:.5vw; padding:1.4vh 2vw 0}
.ctp-faixa i{flex:1; height:.7vh; min-height:3px; border-radius:99px}
.ctp-faixa i:nth-child(1){background:#12b3d6}
.ctp-faixa i:nth-child(2){background:#2dd4a7}
.ctp-faixa i:nth-child(3){background:#e8eef7}
.ctp-faixa i:nth-child(4){background:#f4e04d}
.ctp-corpo{flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(200px,27vw);
  gap:2vw; padding:2.6vh 2vw 2.4vh}
.ctp.lado-esq .ctp-corpo{grid-template-columns:minmax(200px,27vw) minmax(0,1fr)}
.ctp.lado-esq .ctp-lado{order:-1}

.ctp-principal{display:flex; flex-direction:column; min-width:0; min-height:0}
.ctp-cab{display:flex; align-items:center; gap:1.4vw; flex-wrap:wrap}
.ctp-palco{font-size:clamp(18px,3.2vw,68px); font-weight:800; letter-spacing:.02em;
  text-transform:uppercase; line-height:1.05}
.ctp-estado{display:inline-flex; align-items:center; gap:.6em; padding:.35em .9em;
  border-radius:99px; font-size:clamp(11px,1.25vw,26px); font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; background:var(--ctp-painel);
  color:var(--ctp-apagado)}
.ctp-estado::before{content:""; width:.6em; height:.6em; border-radius:50%; background:currentColor}
.ctp-estado.ativo{color:var(--ctp-destaque,#2dd4a7);
  background:color-mix(in srgb,var(--ctp-destaque,#2dd4a7) 14%,transparent)}
.ctp-estado.ativo::before{animation:ctpPulso 1.6s ease-in-out infinite}
.ctp-estado.espera{color:#12b3d6; background:rgba(18,179,214,.12)}
@keyframes ctpPulso{50%{opacity:.25}}
.ctp-etapa{display:flex; align-items:center; gap:.9vw; flex-wrap:wrap; margin-top:1.2vh;
  font-size:clamp(13px,1.9vw,40px); color:var(--ctp-apagado); min-height:1.3em}
.ctp-etapa i{width:.55em; height:1.1em; border-radius:.15em; flex:none}
.ctp-etapa b{color:var(--ctp-num,#e8eef7); font-weight:700}
.ctp-etapa span{text-transform:uppercase; letter-spacing:.04em}
.ctp-etapa time{font-family:var(--mono); font-variant-numeric:tabular-nums}
.ctp-etapa em{font-style:normal; color:var(--ctp-alerta,#f5a524); font-weight:700}

.ctp-contador{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start}
.ctp-num{font-family:var(--mono); font-variant-numeric:tabular-nums; font-weight:700;
  font-size:calc(min(14.5vw, 30vh) * var(--ctp-tam,1)); line-height:.95; letter-spacing:-.04em;
  color:var(--ctp-num,#e8eef7); white-space:nowrap; transition:color .4s}
.ctp-num.alerta{color:var(--ctp-alerta,#f5a524)}
.ctp-legenda{margin-top:1.4vh; font-size:clamp(13px,2.1vw,44px); color:var(--ctp-apagado);
  padding-left:.2em; border-left:.3em solid var(--ctp-destaque,#2dd4a7); padding:0 0 0 .7em}

/* a régua do dia: a jornada do palco em blocos, com a agulha do agora */
.ctp-regua{margin-top:1.6vh}
.ctp-trilho{position:relative; height:5.2vh; min-height:22px; border-radius:.9vh;
  background:var(--ctp-painel); overflow:hidden}
.ctp-bloco{position:absolute; top:0; bottom:0; background:color-mix(in srgb,var(--cor) 28%,transparent);
  border-right:2px solid var(--ctp-fundo,#0b0f14); overflow:hidden; display:flex; align-items:center}
.ctp-bloco.vao{background:transparent}
.ctp-bloco i{position:absolute; left:0; top:0; bottom:0; background:var(--cor); opacity:.55}
.ctp-bloco.atual{outline:2px solid var(--cor); outline-offset:-2px}
.ctp-bloco.atual i{opacity:.9}
.ctp-bloco em{position:relative; font-style:normal; font-weight:800; letter-spacing:.06em;
  font-size:clamp(9px,1vw,20px); padding:0 .6em; color:#fff; white-space:nowrap}
.ctp-agulha{position:absolute; top:-2px; bottom:-2px; width:3px; margin-left:-1px;
  background:#fff; box-shadow:0 0 0 2px rgba(0,0,0,.45); border-radius:2px}
.ctp-horas{display:flex; justify-content:space-between; margin-top:.6vh;
  font-family:var(--mono); font-size:clamp(10px,1vw,20px); color:var(--ctp-apagado)}

/* a coluna lateral */
.ctp-lado{display:flex; flex-direction:column; gap:1.8vh; min-height:0}
.ctp-lado section{background:var(--ctp-painel); border:1px solid var(--ctp-linha);
  border-radius:1.4vh; padding:1.8vh 1.4vw}
.ctp-lado h4{margin:0 0 .8vh; font-size:clamp(10px,.95vw,20px); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ctp-apagado); font-weight:700}
.ctp-agora b{display:block; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:clamp(20px,3.3vw,72px); font-weight:700; line-height:1}
.ctp-agora small{display:block; margin-top:.6vh; color:var(--ctp-apagado);
  font-size:clamp(10px,1vw,20px); text-transform:capitalize}
.ctp-seguir{flex:1; min-height:0; overflow:hidden}
.ctp-seguir ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.1vh}
.ctp-seguir li{display:grid; grid-template-columns:auto 1fr; column-gap:.8vw; align-items:start;
  padding-left:.7vw; border-left:.35vw solid var(--cor,#66748d)}
.ctp-seguir li time{font-family:var(--mono); font-weight:700; font-size:clamp(12px,1.5vw,32px);
  font-variant-numeric:tabular-nums}
.ctp-seguir li div{display:flex; flex-direction:column; min-width:0}
.ctp-seguir li b{font-size:clamp(11px,1.2vw,26px); text-transform:uppercase; letter-spacing:.03em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ctp-seguir li span{font-size:clamp(10px,1vw,22px); color:var(--ctp-apagado);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ctp-seguir li small{grid-column:2; font-size:clamp(9px,.85vw,18px); color:var(--ctp-destaque,#2dd4a7)}
.ctp-seguir li.ctp-nada{border:0; padding:0; color:var(--ctp-apagado); display:block}
.ctp-vao{flex:1}
.ctp-marca{display:flex; align-items:center; gap:.8vw; color:var(--ctp-apagado);
  font-size:clamp(10px,.95vw,20px); padding:0 .3vw}
.ctp-marca img{max-height:5vh; max-width:12vw; object-fit:contain}
.ctp-ustage{width:6.2vw; min-width:60px; height:2.6vh; min-height:12px; color:#fff; flex:none}
.ctp-marca span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* monitor em pé: a coluna lateral desce para baixo do número */
@media (max-aspect-ratio: 1/1){
  .ctp-corpo,.ctp.lado-esq .ctp-corpo{grid-template-columns:1fr; grid-template-rows:1fr auto}
  .ctp.lado-esq .ctp-lado{order:0}
  .ctp-num{font-size:calc(17vw * var(--ctp-tam,1))}
}

/* a barra de botões: some sozinha, volta com o mouse */
.ctp-barra-ferr{position:absolute; top:2.4vh; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; align-items:center; background:rgba(21,29,41,.95);
  border:1px solid #26334a; border-radius:10px; padding:6px; opacity:0;
  pointer-events:none; transition:opacity .25s; z-index:3}
.ctp-barra-ferr.vis{opacity:1; pointer-events:auto}
.ctp-barra-ferr button,.ctp-barra-ferr select{background:#1b2534; color:#dfe7f2;
  border:1px solid #2e3d55; border-radius:7px; padding:6px 10px; font-size:13px; cursor:pointer;
  white-space:nowrap; min-height:0; width:auto}
.ctp-barra-ferr button:hover{background:#243149}
/* o painel de edição: gaveta à direita, por cima da tela, que continua viva
   por baixo — a pessoa vê a mudança enquanto mexe */
.ctp-painel{position:absolute; top:0; right:0; bottom:0; width:min(340px,90vw);
  background:#111823; border-left:1px solid #26334a; padding:18px 16px; overflow:auto;
  z-index:4; color:#dfe7f2; font-size:13px; display:flex; flex-direction:column; gap:10px}
.ctp-painel h3{margin:0; font-size:15px}
.ctp-painel label{display:flex; flex-direction:column; gap:4px; color:#9dabc2; font-size:12px}
.ctp-painel select,.ctp-painel input[type=number]{background:#0e1520; color:#e8eef7;
  border:1px solid #26334a; border-radius:7px; padding:6px 8px; font-size:13px}
.ctp-painel input[type=range]{width:100%; background:none; border:0; padding:0;
  min-height:0; height:22px; accent-color:#2dd4a7}
.ctp-cores{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.ctp-cores label{align-items:center; font-size:11px}
.ctp-cores input{width:100%; height:30px; border:1px solid #26334a; border-radius:6px;
  background:none; padding:0}
.ctp-nota{color:#8a98ae; font-size:11.5px; line-height:1.45; margin:0}
.ctp-painel-acoes{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.ctp-painel-acoes button{background:#1b2534; color:#dfe7f2; border:1px solid #2e3d55;
  border-radius:7px; padding:8px 12px; cursor:pointer}
.ctp-painel-acoes button.primario{background:#2dd4a7; border-color:#2dd4a7; color:#04231c}

/* ===================================================== PRODUÇÃO (24/09/2026) */
/* a foto do palco no lugar da tenda: do tamanho do ícone */
.bigbtn .ico img.palco-foto{width:34px; height:34px; border-radius:9px; object-fit:cover; display:block}
.palco-foto-g{width:64px; height:64px; flex:none; border-radius:12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-size:2rem;
  background:var(--surface-2); box-shadow:0 0 0 1px var(--line)}
.palco-foto-g img{width:100%; height:100%; object-fit:cover}
/* resumo do palco */
.res-cartoes{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:6px}
.res-cartoes .card{margin:0; display:flex; flex-direction:column; gap:2px}
.res-cartoes .n{font-size:1.7rem; line-height:1}
.res-cartoes .n.warn{color:var(--warn)} .res-cartoes .n.danger{color:var(--danger)} .res-cartoes .n.ok{color:var(--ok)}
.res-cartoes span{font-size:.8rem; color:var(--ink-2)}
.res-tab td, .res-tab th{vertical-align:top}
.res-tab tr.sit-excede td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.res-tab tr.sit-diferente td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.res-tab .falta{color:var(--warn); font-size:1.05rem}
/* inventário de produção: foto por linha */
.inv-foto{position:relative; width:40px; height:40px; border-radius:8px; border:1px dashed var(--line);
  background:var(--surface-2); cursor:pointer; padding:0; overflow:hidden; font-size:1rem}
.inv-foto img{width:100%; height:100%; object-fit:cover; display:block}
.inv-foto i{position:absolute; right:2px; bottom:2px; font-style:normal; font-size:.62rem;
  background:var(--accent); color:var(--accent-ink); border-radius:6px; padding:0 4px}
.pi-tab select{min-width:130px}


/* ====================================== TABELA VIVA (25/09/2026) — igual em todas */
table.tv th[data-col]{white-space:nowrap}
.tv-th{display:inline-flex; align-items:center; gap:4px}
.tv-ctl{display:inline-flex; gap:1px; opacity:.55}
table.tv th:hover .tv-ctl{opacity:1}
.tv-ctl button{background:none; border:none; color:var(--ink-3); cursor:pointer; padding:0 2px;
  font-size:.78rem; line-height:1}
.tv-ctl button:hover{color:var(--ink)}
.tv-ctl .tv-f.on{color:var(--accent); font-weight:700}
table.tv th.tv-arrastavel{cursor:grab}
table.tv th.arrastando{opacity:.5; outline:2px dashed var(--accent); outline-offset:-2px}
.tv-pega{cursor:grab; user-select:none; color:var(--ink-2); font-weight:700; padding:0 3px;
  touch-action:none; display:inline-block}
.tv-pega:active{cursor:grabbing}
table.tv-filtrada .tv-pega{opacity:.25; cursor:not-allowed}
/* a cor da linha, em qualquer tabela: o nome vai para o banco, o tom sai daqui */
table.tv tr[data-cor]:not([data-cor=""]) > td{background:var(--tinta)}
table.tv tr[data-cor="azul"]{--tinta:color-mix(in srgb,#4ea1ff 14%,var(--surface))}
table.tv tr[data-cor="verde"]{--tinta:color-mix(in srgb,#30a46c 14%,var(--surface))}
table.tv tr[data-cor="amarelo"]{--tinta:color-mix(in srgb,#f5d524 16%,var(--surface))}
table.tv tr[data-cor="laranja"]{--tinta:color-mix(in srgb,#f5a524 15%,var(--surface))}
table.tv tr[data-cor="vermelho"]{--tinta:color-mix(in srgb,#e5484d 13%,var(--surface))}
table.tv tr[data-cor="roxo"]{--tinta:color-mix(in srgb,#a855f7 14%,var(--surface))}
table.tv tr[data-cor="cinza"]{--tinta:color-mix(in srgb,#8b97a8 16%,var(--surface))}
table.tv .corsel{width:22px; min-width:22px; max-width:22px; min-height:20px; height:20px;
  padding:0; font-size:.62rem; display:inline-block; margin:0 0 0 3px; vertical-align:middle;
  background:var(--tinta,var(--surface-2)); color:transparent; border-radius:50%; cursor:pointer;
  border:1.5px solid var(--ink-3); appearance:none; -webkit-appearance:none}
table.tv tr[data-cor=""] .corsel, table.tv tr:not([data-cor]) .corsel{
  background:conic-gradient(#4ea1ff 0 25%, #30a46c 0 50%, #f5d524 0 75%, #e5484d 0)}
table.tv .corsel option{color:var(--ink); background:var(--surface)}
/* o círculo mostra a cor cheia da linha, não o tom apagado do fundo */
table.tv tr[data-cor="azul"] .corsel{background:#4ea1ff; border-color:#4ea1ff}
table.tv tr[data-cor="verde"] .corsel{background:#30a46c; border-color:#30a46c}
table.tv tr[data-cor="amarelo"] .corsel{background:#f5d524; border-color:#f5d524}
table.tv tr[data-cor="laranja"] .corsel{background:#f5a524; border-color:#f5a524}
table.tv tr[data-cor="vermelho"] .corsel{background:#e5484d; border-color:#e5484d}
table.tv tr[data-cor="roxo"] .corsel{background:#a855f7; border-color:#a855f7}
table.tv tr[data-cor="cinza"] .corsel{background:#8b97a8; border-color:#8b97a8}
table.tv td:first-child{white-space:nowrap}

/* =================================================== PERMISSÕES (27/09/2026)
   Nada some da tela: o que a pessoa não pode fica apagado e, no clique, o
   aviso do rodapé diz o que falta. */
.sem-perm{opacity:.5; cursor:not-allowed !important; filter:saturate(.4)}
input.sem-perm, select.sem-perm, textarea.sem-perm{background-image:none}
.bigbtn.sem-perm{opacity:.55}
.bigbtn.sem-perm::after{content:"🔒"; position:absolute; top:6px; right:8px; font-size:.75rem; opacity:.9}
.bigbtn{position:relative}
#permAviso{position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(14px + env(safe-area-inset-bottom)); z-index:120;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  max-width:min(620px, calc(100vw - 32px)); padding:10px 16px; border-radius:14px;
  background:var(--surface); color:var(--ink); border:1px solid var(--warn);
  box-shadow:var(--shadow); font-size:.88rem; font-weight:600; transition:opacity .35s, transform .35s}
#permAviso small{font-weight:500; color:var(--ink-2)}
#permAviso .pa-ico{font-size:1rem}
#permAviso.some{opacity:0; transform:translate(-50%, 12px); pointer-events:none}
.semperm-card{text-align:center; padding:28px 20px; max-width:520px; margin:24px auto}
.semperm-ico{font-size:2rem; margin-bottom:6px}

/* a tela de Permissões: pessoas à esquerda, o que elas podem à direita */
.pm-grade{display:grid; grid-template-columns:minmax(240px, 320px) 1fr; gap:16px; align-items:start}
.pm-esq{position:sticky; top:calc(var(--topbar-h, 56px) + 8px)}
.pm-esq-cab{display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--line)}
#pmPessoas{max-height:calc(100dvh - 220px); overflow:auto}
.pm-pessoa{display:grid; grid-template-columns:auto auto 1fr auto; grid-template-areas:
  "cx av nome badge" "cx av mods mods"; align-items:center; gap:2px 10px; padding:9px 12px;
  border-bottom:1px solid var(--line); cursor:pointer}
.pm-pessoa > input{grid-area:cx}
.pm-pessoa .avatar{grid-area:av; width:30px; height:30px; font-size:.8rem}
.pm-pessoa .pm-pnome{grid-area:nome; display:flex; flex-direction:column; min-width:0}
.pm-pessoa .pm-pnome small{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pm-pessoa .badge{grid-area:badge}
.pm-pessoa .pm-mods-txt{grid-area:mods; font-size:.72rem}
.pm-pessoa.sel{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.pm-bloq{opacity:.6; cursor:default}
.pm-topo{display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:flex-end}
.pm-quem{display:flex; flex-direction:column; min-width:0}
.pm-perfil{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end}
.pm-perfil .field{margin:0; min-width:200px}
.pm-admin{display:flex; gap:10px; align-items:flex-start; margin:0}
.pm-corpo.pm-apagado{opacity:.45; pointer-events:none}
.pm-mods{display:flex; flex-wrap:wrap; gap:8px 18px; margin:6px 0}
.pm-linha{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:7px 2px; border-bottom:1px solid var(--line)}
.pm-linha:last-child{border-bottom:0}
.pm-cab{border-bottom:1px solid var(--line-2, var(--line)); padding-top:0}
.pm-cab .pm-cols span{width:64px; text-align:center; font-size:.75rem; color:var(--ink-2); font-weight:700}
.pm-nome{flex:1; min-width:0}
.pm-cols{display:flex; gap:6px; flex:none; align-items:center}
.pm-cols .btn{white-space:nowrap}
.pm-cx{display:inline-flex; align-items:center; justify-content:center; gap:5px; width:64px;
  font-size:.78rem; color:var(--ink-2); cursor:pointer}
.pm-cx input{width:18px; height:18px; margin:0; accent-color:var(--accent)}
.pm-mods .pm-cx{width:auto; font-size:.9rem; color:var(--ink)}
.pm-vazio{display:inline-block; width:64px}
.pm-admin .pm-cx{width:auto}
.pm-todos{background:color-mix(in srgb, var(--accent) 6%, transparent); border-radius:8px; padding-left:6px}
.pm-vazio-card{padding:28px; text-align:center}
@media (max-width: 760px){
  .pm-grade{grid-template-columns:1fr}
  .pm-esq{position:static}
  #pmPessoas{max-height:none}
  .pm-cx span{display:none}
  .pm-cx, .pm-vazio, .pm-cab .pm-cols span{width:44px}
  .pm-grupo .pm-cab{flex-wrap:wrap}
}

/* ---------- planos e licença (03/10/2026) ---------- */
.tag-pro{display:inline-flex;align-items:center;padding:1px 7px;border-radius:99px;font-size:10.5px;
  font-weight:800;letter-spacing:.06em;line-height:1.6;color:#1a1300;background:linear-gradient(90deg,#ffd84d,#f5a524);
  vertical-align:middle;white-space:nowrap}
.tag-pro.rfm{color:#04231c;background:linear-gradient(90deg,#73FEBA,#2dd4a7)}
.tag-pro.off{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.tag-proj{display:inline-block;padding:0 6px;border-radius:6px;font-size:10.5px;font-weight:700;
  background:color-mix(in srgb,var(--coord) 22%,transparent);color:var(--coord)}
.so-sem-rfm,.so-free{display:none}
body.sem-rfm .so-sem-rfm{display:inline-flex}
body.plano-free .so-free{display:block}
.pro-pop{max-width:440px}
.pro-lista{margin:0 0 4px;padding-left:20px;color:var(--ink-2);font-size:.92rem}
.pro-lista li{margin:3px 0}
.planos .plano{border-width:1px}
.planos .plano.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.novos .btn{justify-content:center}
.idioma-mini{background:var(--surface-2);color:var(--ink);border:1px solid var(--line);border-radius:8px;
  padding:4px 8px;font-size:12.5px}
.nav-idioma{padding:8px 16px}
.ok-msg{color:var(--ok);margin:12px 2px 0}
select.idioma-mini{width:auto; min-height:0; display:inline-block}

/* telas de entrar: nada do sistema em volta (04/10/2026) */
body.tela-auth #topbar, body.tela-auth #crumbs, body.tela-auth #drawer, body.tela-auth #scrim{display:none !important}
/* versão para computador (04/10/2026) */
table.tbl{width:100%;border-collapse:collapse}
table.tbl td{padding:8px 6px;border-top:1px solid var(--line);vertical-align:middle}

/* ---------- quem tem acesso: pessoas e convites (13/10/2026) ----------
   A linha usava o .linkrow (feito para links, com tudo esticado na altura):
   selo, seleção e ✕ viravam caixas altas e o papel aparecia duas vezes. */
.pessoa-lin{display:flex; align-items:center; gap:11px; padding:11px 14px; border-bottom:1px solid var(--line)}
.pessoa-lin:last-child{border-bottom:0}
.pessoa-lin .ico{width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:color-mix(in srgb,var(--accent) 16%,transparent); font-size:1.05rem}
.pessoa-lin .txt{flex:1; min-width:0}
.pessoa-lin .txt strong{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pessoa-lin .txt small{display:block; font-size:.74rem; color:var(--ink-2); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.pessoa-lin .acoes{display:flex; align-items:center; gap:6px; flex:none}
.pessoa-lin .acoes select{width:auto; min-width:120px; height:34px; padding:4px 30px 4px 10px; font-size:.85rem}
.pessoa-lin .acoes .btn.sm{height:34px; white-space:nowrap}
.pessoa-lin .acoes .badge{align-self:center}
.btn.ghost.danger{color:var(--danger, #e5484d); border-color:color-mix(in srgb,var(--danger, #e5484d) 40%,transparent)}
@media(max-width:560px){
  .pessoa-lin{flex-wrap:wrap; row-gap:8px}
  .pessoa-lin .acoes{width:100%; justify-content:flex-end; padding-left:45px}
}