/* Mesa de revisão — ferramenta interna de direção de arte.
   Rampa neutra do design-guide-luan.md. Sem lilás, sem saturação, sem SaaS. */

:root{
  --bg:#0E0E0E;
  --bg-soft:#1A1A1A;
  --bg-card:#242424;
  --bg-alto:#2E2E2E;
  --text:#E8E8E8;
  --muted:#A8A8A8;
  --dim:#8C8C8C;
  --border:#2A2A2A;
  --border-forte:#4A4A4A;
  --accent:#F5F5F5;
  --cor-ajustar:#9A9BE5;
  --cor-aprovado:#5FBF77;
  --cor-descartado:#C97A6B;

  --sans:'IBM Plex Sans','IBM Plex Sans Var',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;

  --r:6px;
  --topo-h:56px;
  --painel-w:392px;
}

*{margin:0;padding:0;box-sizing:border-box}
/* Toda a tela liga/desliga por [hidden]; sem isto qualquer display: local ganha do UA. */
[hidden]{display:none !important}

html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

.mono{font-family:var(--mono);font-size:11px;letter-spacing:.06em}
.dim{color:var(--dim)}
svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

kbd{
  font-family:var(--mono);font-size:9px;line-height:1;
  padding:3px 4px;border-radius:3px;
  border:1px solid var(--border-forte);color:var(--dim);
  margin-left:2px;
}

/* ── botões ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;
  font:500 13px/1.2 var(--sans);
  color:var(--text);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r);
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
  white-space:nowrap;
}
.btn:hover{background:var(--bg-alto);border-color:var(--border-forte)}
.btn:active{transform:translateY(.5px)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn:disabled:hover{background:var(--bg-card);border-color:var(--border)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:var(--bg-card)}
.btn.solido{background:var(--accent);color:#0E0E0E;border-color:var(--accent);font-weight:600}
.btn.solido:hover{background:#fff;border-color:#fff}
.btn.solido kbd{border-color:rgba(14,14,14,.3);color:rgba(14,14,14,.55)}
.btn.sutil{background:transparent;border-color:transparent;color:var(--dim);padding:7px 8px}
.btn.sutil:hover{color:var(--text);background:var(--bg-card)}
.btn.icone{padding:7px;width:30px;justify-content:center}
.btn.ativo{background:var(--accent);color:#0E0E0E;border-color:var(--accent)}
.btn.ativo kbd{border-color:rgba(14,14,14,.3);color:rgba(14,14,14,.55)}
:focus-visible{outline:1px solid var(--accent);outline-offset:1px}

/* ── fila ───────────────────────────────────────────────────────────────── */
#tela-fila{height:100%;overflow-y:auto;padding:0 32px 64px}

.topo{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:40px 0 28px;
}
.topo h1{font:500 27px/1.1 var(--sans);letter-spacing:-.02em}
.topo-sub{color:var(--dim);font-size:13px;margin-top:5px}
.contador{text-align:right;line-height:1.2}
.contador b{display:block;font:500 21px/1 var(--mono);letter-spacing:-.01em}
.contador span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

.barra{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 0;margin-bottom:20px;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--bg);z-index:5;
}
.filtros{display:flex;gap:4px;flex-wrap:wrap}
.filtros .btn{padding:6px 11px;font-size:12px}
.filtros .btn .n{font-family:var(--mono);font-size:10px;color:var(--dim)}
.filtros .btn.ativo .n{color:rgba(14,14,14,.55)}

.busca{
  display:flex;align-items:center;gap:8px;
  padding:0 11px;min-width:280px;
  background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--r);
}
.busca:focus-within{border-color:var(--border-forte)}
.busca svg{color:var(--dim)}
.busca input{
  flex:1;padding:8px 0;font:400 13px var(--sans);
  background:none;border:0;color:var(--text);
}
.busca input::placeholder{color:var(--dim)}
.busca input:focus{outline:none}
.busca input::-webkit-search-cancel-button{filter:grayscale(1) opacity(.5)}

.grade{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
}
.vazio{color:var(--dim);padding:48px 0;text-align:center}

.card{
  display:flex;flex-direction:column;text-align:left;
  background:var(--bg-soft);
  border:1px solid var(--border);border-radius:var(--r);
  cursor:pointer;overflow:hidden;
  transition:border-color .12s,background .12s;
  font:inherit;color:inherit;
}
.card:hover{border-color:var(--border-forte);background:var(--bg-card)}
.card-arte{
  aspect-ratio:4/5;background:#141414;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
}
.card-arte img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.card-arte .sem{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#4A4A4A;
}
.card-arte .qtd{
  position:absolute;right:7px;bottom:7px;
  padding:2px 6px;border-radius:3px;
  background:rgba(14,14,14,.82);border:1px solid var(--border-forte);
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--muted);
}
.card-corpo{padding:11px 12px 12px;display:flex;flex-direction:column;gap:7px;flex:1}
.card-corpo h2{font:500 14px/1.28 var(--sans);letter-spacing:-.01em}
.card-file{
  font-family:var(--mono);font-size:10px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card-linha{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:auto;padding-top:8px;border-top:1px solid var(--border);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);
}
/* v1, v2, v3 são rótulos do pipeline: minúsculos sempre. */
.card-linha .versao-tag{text-transform:none;letter-spacing:.04em;color:var(--muted)}

/* Status por cor — ferramenta interna do Luan, não peça de marca: aqui o
   matiz pode trabalhar a favor de escanear rápido qual peça está em quê. */
.selo{
  display:inline-flex;align-items:center;gap:5px;
  padding:2px 7px;border-radius:3px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--border-forte);color:var(--muted);
}
.selo::before{content:'';width:5px;height:5px;border-radius:50%;border:1px solid currentColor}
.selo.AGUARDANDO{border-color:#3A3A3A;color:var(--dim)}
.selo.AJUSTAR{border-color:var(--cor-ajustar);color:var(--cor-ajustar)}
.selo.AJUSTAR::before{background:currentColor}
.selo.APROVADO{background:var(--cor-aprovado);border-color:var(--cor-aprovado);color:#0E1B10}
.selo.APROVADO::before{background:currentColor;border-color:currentColor}
.selo.BLOQUEADO{
  border-style:dashed;border-color:#3A3A3A;color:#5E5E5E;
}
.card.BLOQUEADO .card-arte{opacity:.5}
.selo.DESCARTADO{border-color:var(--cor-descartado);color:var(--cor-descartado);text-decoration:line-through}
.card.DESCARTADO .card-arte{opacity:.3;filter:grayscale(1)}
.card.DESCARTADO h2{color:var(--dim);text-decoration:line-through}

/* Chips de filtro: traçado + texto na cor do status (igual ao selo do card),
   e preenche sólido só quando o filtro está ativo. */
.filtros .btn[data-filtro="AJUSTAR"]{border-color:var(--cor-ajustar);color:var(--cor-ajustar)}
.filtros .btn[data-filtro="APROVADO"]{border-color:var(--cor-aprovado);color:var(--cor-aprovado)}
.filtros .btn[data-filtro="DESCARTADO"]{border-color:var(--cor-descartado);color:var(--cor-descartado)}
.filtros .btn[data-filtro="AJUSTAR"] .n,
.filtros .btn[data-filtro="APROVADO"] .n,
.filtros .btn[data-filtro="DESCARTADO"] .n{color:inherit;opacity:.75}
.filtros .btn[data-filtro="AJUSTAR"].ativo{background:var(--cor-ajustar);border-color:var(--cor-ajustar);color:#18172B}
.filtros .btn[data-filtro="APROVADO"].ativo{background:var(--cor-aprovado);border-color:var(--cor-aprovado);color:#0E1B10}
.filtros .btn[data-filtro="DESCARTADO"].ativo{background:var(--cor-descartado);border-color:var(--cor-descartado);color:#241010}

.pendentes{color:var(--accent)}

/* ── barra de progresso do lote de ajustes ──────────────────────────────── */
.lote{margin:0 0 20px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--bg-soft)}
.lote-topo{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px}
.lote-rotulo{font:500 13px var(--sans);color:var(--text)}
.lote-rotulo b{color:var(--cor-ajustar);font-weight:500}
.lote-tempo{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.lote-trilho{height:4px;border-radius:2px;background:#2A2A2A;overflow:hidden}
.lote-preenche{height:100%;background:var(--cor-ajustar);border-radius:2px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.lote-agora{margin-top:9px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cor-ajustar);display:flex;align-items:center;gap:7px}
.lote-agora::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;animation:pulso 1.4s ease-in-out infinite}

/* ── processamento automático (watch.js aplicando um ajuste) ─────────────── */
@keyframes pulso{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes girar{to{transform:rotate(360deg)}}
.processando-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 8px;border-radius:3px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--accent);color:var(--accent);
}
.processando-badge i{width:5px;height:5px;border-radius:50%;background:currentColor;animation:pulso 1.4s ease-in-out infinite}
/* Scrim escuro + bolinha girando — sem texto em cima da arte, que fica ilegível. */
.card.processando .card-arte::before{
  content:'';position:absolute;inset:0;background:rgba(8,8,8,.6);
}
.card.processando .card-arte::after{
  content:'';position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;border:2px solid rgba(245,245,245,.3);border-top-color:var(--accent);
  animation:girar .8s linear infinite;
}

/* ── revisão ────────────────────────────────────────────────────────────── */
#tela-revisao{display:flex;flex-direction:column;height:100%}

.rev-topo{
  display:flex;align-items:center;gap:16px;
  height:var(--topo-h);padding:0 14px;flex:0 0 auto;
  border-bottom:1px solid var(--border);background:var(--bg-soft);
}
.rev-id{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px}
.rev-id b{font:500 14px var(--sans);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rev-id span{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.rev-nav{display:flex;align-items:center;gap:8px}

.rev-corpo{flex:1;display:grid;grid-template-columns:1fr var(--painel-w);min-height:0}
/* Grid item nasce com min-height:auto e se recusa a encolher: sem isto o palco
   cresce com a arte e empurra a barra de zoom pra fora da tela em notebook. */
.rev-corpo>*{min-height:0;min-width:0}

/* palco */
.palco{
  position:relative;display:flex;flex-direction:column;min-width:0;
  background:#0B0B0B;
  background-image:
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:32px 32px;
}
.palco-area{flex:1;min-height:0;overflow:auto;display:flex;padding:44px 40px}
.palco-area.comentando{cursor:crosshair}
.quadros{margin:auto;display:flex;gap:24px;align-items:flex-start}

.quadro{position:relative;flex:0 0 auto;line-height:0}
/* A proporção nativa manda: referência e render quase nunca têm o mesmo ratio. */
.quadro img{
  display:block;
  border:1px solid var(--border);
  box-shadow:0 1px 0 rgba(255,255,255,.03);
}
.quadro-rotulo{
  position:absolute;top:-22px;left:0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}
.quadro-sem{
  display:flex;align-items:center;justify-content:center;
  border:1px dashed #333;color:#5E5E5E;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:#111;
}

/* marcadores */
.pino{
  position:absolute;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font:600 10px/1 var(--mono);
  background:var(--accent);color:#0E0E0E;
  border:2px solid #0E0E0E;
  box-shadow:0 0 0 1px var(--accent);
  cursor:pointer;z-index:2;
}
.pino.resolvido{background:#0E0E0E;color:var(--muted);box-shadow:0 0 0 1px var(--border-forte)}
.pino.destaque{width:28px;height:28px;font-size:11px}

/* rodapé do palco */
.palco-rodape{
  flex:0 0 auto;display:flex;align-items:center;gap:16px;
  padding:8px 14px;min-height:52px;
  border-top:1px solid var(--border);background:var(--bg-soft);
}
.slides{display:flex;align-items:center;gap:8px}
.slides .mono{min-width:52px;text-align:center;color:var(--muted)}

.tiras{flex:1;display:flex;gap:6px;overflow-x:auto;padding:2px 0}
.tiras::-webkit-scrollbar{height:4px}
.tiras::-webkit-scrollbar-thumb{background:#333;border-radius:2px}
.tira{
  flex:0 0 auto;width:34px;aspect-ratio:4/5;padding:0;
  border:1px solid var(--border);border-radius:3px;
  background:#141414;overflow:hidden;cursor:pointer;position:relative;
}
.tira img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;opacity:.55}
.tira:hover img{opacity:.85}
.tira.ativa{border-color:var(--accent)}
.tira.ativa img{opacity:1}
.tira .marca{
  position:absolute;top:2px;right:2px;width:5px;height:5px;border-radius:50%;
  background:var(--accent);
}

.zoom{display:flex;align-items:center;gap:4px;margin-left:auto}
.zoom .btn{padding:6px 9px;font-size:12px}
#zoom-nivel{min-width:38px;text-align:right}

/* ── painel ─────────────────────────────────────────────────────────────── */
.painel{
  display:flex;flex-direction:column;min-height:0;
  border-left:1px solid var(--border);background:var(--bg-soft);
}
.painel-rolagem{flex:1;overflow-y:auto;min-height:0}
.painel-rolagem::-webkit-scrollbar{width:8px}
.painel-rolagem::-webkit-scrollbar-thumb{background:#2E2E2E;border-radius:4px}

.bloco{padding:16px;border-bottom:1px solid var(--border)}
.bloco h3{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  margin-bottom:10px;
}
.bloco-cabeca{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.bloco-cabeca h3{margin:0}

.cabeca{background:var(--bg)}
.linha-status{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.cabeca h2{font:500 17px/1.25 var(--sans);letter-spacing:-.015em;margin-bottom:5px}
.cabeca .mono{display:block;color:var(--dim);word-break:break-all;line-height:1.6}

.ref-linha{display:flex;gap:12px}
.ref-thumb{
  flex:0 0 76px;aspect-ratio:4/5;border-radius:4px;overflow:hidden;
  background:#141414;border:1px solid var(--border);cursor:zoom-in;
}
.ref-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.ref-thumb.sem{
  display:flex;align-items:center;justify-content:center;cursor:default;
  border-style:dashed;color:#5E5E5E;font-family:var(--mono);font-size:9px;
  letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:6px;
}
.ref-acoes{flex:1;display:flex;flex-direction:column;gap:6px}
.ref-acoes .btn{justify-content:center}
.nota{margin-top:10px;color:var(--dim);line-height:1.6}

/* versões */
.versoes{display:flex;flex-direction:column;gap:1px}
.versao{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;background:var(--bg);
  border:1px solid var(--border);border-radius:4px;
  font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;
}
.versao:hover{border-color:var(--border-forte)}
.versao.atual{border-color:var(--border-forte);background:var(--bg-card)}
.versao b{font:500 12px var(--mono);letter-spacing:.04em;flex:0 0 26px}
.versao .quando{flex:1;font-family:var(--mono);font-size:10px;color:var(--dim)}
.versao .tag{
  font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--border-forte);border-radius:3px;padding:1px 5px;
}
.versao .tag.ok{background:var(--accent);color:#0E0E0E;border-color:var(--accent)}

/* ajustes */
.ajustes{list-style:none;display:flex;flex-direction:column;gap:1px;margin-bottom:12px}
.ajustes:empty{display:none}
.ajuste{
  display:grid;grid-template-columns:auto 1fr auto;gap:8px;
  padding:9px 10px;background:var(--bg);
  border:1px solid var(--border);border-radius:4px;
  align-items:start;
}
.ajuste:hover{border-color:var(--border-forte)}
.ajuste.resolvido{opacity:.45}
.ajuste.resolvido .ajuste-texto{text-decoration:line-through}
.ajuste-n{
  font:600 10px/18px var(--mono);
  width:18px;height:18px;text-align:center;border-radius:3px;
  background:var(--bg-card);color:var(--muted);border:1px solid var(--border-forte);
}
.ajuste.tem-pino .ajuste-n{background:var(--accent);color:#0E0E0E;border-color:var(--accent)}
.ajuste-corpo{min-width:0}
.ajuste-cat{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);display:block;margin-bottom:3px;
}
.ajuste-texto{font-size:13px;line-height:1.45;word-wrap:break-word}
.ajuste-acoes{display:flex;flex-direction:column;gap:2px}
.ajuste-acoes button{
  width:22px;height:20px;padding:0;
  background:none;border:0;color:#5E5E5E;cursor:pointer;
  font:400 13px/1 var(--sans);border-radius:3px;
}
.ajuste-acoes button:hover{color:var(--text);background:var(--bg-card)}

.form-ajuste{display:flex;flex-direction:column;gap:8px}
.form-ajuste select,.form-ajuste textarea{
  width:100%;padding:8px 10px;
  font:400 13px var(--sans);color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:4px;
}
.form-ajuste select{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238C8C8C' stroke-width='1.6'><path d='m4 6 4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;background-size:13px;
  padding-right:28px;
}
.form-ajuste textarea{resize:vertical;min-height:64px;line-height:1.45}
.form-ajuste :focus{outline:none;border-color:var(--border-forte)}
.form-ajuste .btn{justify-content:center}

.marcador-aviso{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:4px;
  background:var(--bg-card);border:1px solid var(--accent);
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--text);
}
.marcador-aviso button{
  margin-left:auto;background:none;border:0;color:var(--dim);
  cursor:pointer;font-size:13px;line-height:1;padding:2px 4px;
}
.marcador-aviso button:hover{color:var(--text)}

details summary{
  cursor:pointer;list-style:none;
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
details summary::-webkit-details-marker{display:none}
details summary::before{content:'▸ ';font-size:9px}
details[open] summary::before{content:'▾ '}
details summary:hover{color:var(--text)}
.briefing{
  margin-top:10px;max-height:340px;overflow:auto;
  font:400 11px/1.65 var(--mono);color:var(--muted);
  white-space:pre-wrap;word-break:break-word;
  padding:10px;background:var(--bg);border:1px solid var(--border);border-radius:4px;
}
.historico{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:5px}
.historico li{
  font:400 10px/1.5 var(--mono);color:var(--dim);
  display:flex;gap:8px;
}
.historico li b{color:var(--muted);font-weight:500;flex:0 0 auto}

.painel-acoes{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 16px;border-top:1px solid var(--border);background:var(--bg);
}
.acoes-par{display:flex;gap:8px;margin-left:auto;flex:1 1 auto;justify-content:flex-end}
/* Painel estreito: as duas decisões ganham a linha inteira e o reset sobe. */
@media (max-width:1440px){
  .acoes-par{flex-basis:100%;margin-left:0}
  .acoes-par .btn{flex:1;justify-content:center}
  .painel-acoes #resetar{order:-1}
}

.drawer-toggle{display:none}

/* ── lightbox ───────────────────────────────────────────────────────────── */
.lightbox{
  position:fixed;inset:0;z-index:40;
  display:flex;align-items:center;justify-content:center;padding:48px;
  background:rgba(8,8,8,.94);
}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border:1px solid var(--border)}
.lightbox-x{position:fixed;top:16px;right:20px;font-size:15px}

/* ── modal (confirmação com texto, no lugar do prompt()/confirm() nativo) ── */
.modal{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(8,8,8,.72);
}
.modal-caixa{
  width:min(420px,92vw);background:var(--bg-card);border:1px solid var(--border-forte);
  border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.modal-caixa h3{font:500 15px/1.35 var(--sans);letter-spacing:-.005em}
.modal-caixa p{font-size:13px;line-height:1.5;color:var(--muted)}
.modal-caixa textarea{
  background:var(--bg);border:1px solid var(--border-forte);border-radius:var(--r);
  color:var(--text);font:13px/1.5 var(--sans);padding:9px 10px;resize:vertical;
}
.modal-caixa textarea:focus{outline:none;border-color:var(--accent)}
.modal-acoes{display:flex;justify-content:flex-end;gap:8px}

/* ── aviso ──────────────────────────────────────────────────────────────── */
.aviso{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;
  padding:9px 16px;max-width:min(560px,90vw);
  background:var(--bg-card);border:1px solid var(--border-forte);border-radius:var(--r);
  font-size:13px;color:var(--text);
  box-shadow:0 6px 24px rgba(0,0,0,.5);
}
.aviso.erro{border-color:var(--accent)}
.aviso .mono{display:block;color:var(--dim);margin-top:3px}

/* ── notebook / viewport estreita ───────────────────────────────────────── */
@media (max-width:1380px){ :root{--painel-w:344px} }

@media (max-width:1080px){
  :root{--painel-w:min(360px,86vw)}
  .rev-corpo{grid-template-columns:1fr}
  .painel{
    position:absolute;top:0;right:0;bottom:0;width:var(--painel-w);z-index:20;
    transform:translateX(100%);transition:transform .18s ease;
    box-shadow:-12px 0 32px rgba(0,0,0,.4);
  }
  .painel.aberto{transform:none}
  .drawer-toggle{display:inline-flex;position:absolute;top:12px;right:12px;z-index:21}
  .palco-area{padding:44px 20px}
  #tela-fila{padding:0 20px 48px}
  .barra{flex-direction:column;align-items:stretch;gap:10px}
  .busca{min-width:0}
}