/* Editor visual da Copa (#copa-layout, montado por copa-layout-ui.js). Tudo sob .cl.
 * Só tokens da pele 2026 (claro e escuro seguem o tema do portal). As únicas cores próprias são as do contorno dos
 * blocos por cima da prévia: a prévia é a tela da TV, com fundo escolhido pela pessoa, então o contorno precisa de
 * contraste fixo (claro com sombra escura) para aparecer em qualquer fundo. */

.cl{
  --cl-contorno:rgba(255,255,255,.9);
  --cl-contorno-fraco:rgba(255,255,255,.55);
  --cl-sombra:rgba(0,0,0,.6);
  --cl-etiqueta:rgba(12,22,20,.82);
  --cl-etiqueta-tinta:#fff;
  display:flex; flex-direction:column; gap:14px; min-width:0;
}
.cl *{ box-sizing:border-box; }
.cl-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- topo ---------- */
.cl-topo{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
.cl-tit h2{ margin:2px 0 0; font-size:20px; font-weight:800; color:var(--ink); line-height:1.15; }
.cl-edicao{ display:flex; align-items:center; gap:8px; }
.cl-rot{ display:block; font-size:12px; font-weight:700; color:var(--ink-2); }
.cl-situ{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-height:28px; }
.cl-selo{ display:inline-flex; align-items:center; font-size:11.5px; font-weight:800; padding:4px 10px; border-radius:99px; border:1px solid var(--line); color:var(--ink-2); background:var(--chip); white-space:nowrap; }
.cl-selo--rasc{ color:var(--amber); background:var(--amber-soft); border-color:color-mix(in srgb,var(--amber) 35%,transparent); }
.cl-selo--pub{ color:var(--good); background:var(--good-soft); border-color:color-mix(in srgb,var(--good) 35%,transparent); }
.cl-salvo{ font-size:12.5px; color:var(--ink-3); }
.cl-salvo--erro{ color:var(--red); font-weight:700; }
.cl-acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-left:auto; }
.cl-acoes .og-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.cl-ico-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:36px; padding-left:9px !important; padding-right:9px !important; }
.cl[data-estado]:not([data-estado="pronto"]) .cl-situ,
.cl[data-estado]:not([data-estado="pronto"]) .cl-acoes{ display:none; }

/* ---------- corpo: prévia + painel ---------- */
.cl-corpo{ display:grid; grid-template-columns:minmax(0,1fr) 392px; gap:16px; align-items:start; }
.cl-previa{ min-width:0; }
.cl-palco{
  position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden;
  /* nunca mais alto que a tela: sobra lugar para o topo do portal e a dica */
  max-width:calc((100vh - 250px) * 16 / 9); min-width:280px; margin:0 auto;
  border-radius:var(--radius-sm,12px); border:1px solid var(--line); background:var(--bg-2);
  box-shadow:var(--shadow-soft);
}
.cl-frame{ position:absolute; left:0; top:0; width:1920px; height:1080px; border:0; transform-origin:0 0; pointer-events:none; background:transparent; }
.cl-camada{ position:absolute; left:0; top:0; width:100%; height:100%; touch-action:none; user-select:none; -webkit-user-select:none; }
.cl-camada--gesto{ cursor:grabbing; }
.cl[data-estado]:not([data-estado="pronto"]) .cl-camada,
.cl[data-estado]:not([data-estado="pronto"]) .cl-frame{ visibility:hidden; }

/* sem prévia: só o esquema dos blocos, num fundo neutro */
.cl--esquema .cl-frame{ visibility:hidden; }
.cl--esquema .cl-palco{ background:var(--trilho-degrade); }
.cl-aviso{
  position:absolute; left:10px; right:10px; bottom:10px; z-index:400; padding:8px 12px; border-radius:10px;
  background:var(--panel); color:var(--ink); border:1px solid var(--line-2); font-size:12.5px; font-weight:600; text-align:center;
}
.cl-estado{
  position:absolute; inset:0; z-index:500; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:24px; text-align:center; background:var(--bg-2);
}
.cl-estado[hidden], .cl-aviso[hidden]{ display:none; }
.cl-estado-tit{ margin:0; font-size:16px; font-weight:800; color:var(--ink); }
.cl-estado-msg{ margin:0; max-width:460px; font-size:13px; line-height:1.5; color:var(--ink-2); }
.cl-dica{ margin:10px auto 0; max-width:calc((100vh - 250px) * 16 / 9); font-size:12.5px; line-height:1.45; color:var(--ink-3); }
.cl[data-estado]:not([data-estado="pronto"]) .cl-dica{ visibility:hidden; }

/* ---------- retângulos dos blocos ---------- */
.cl-ret{
  position:absolute; cursor:grab; border-radius:4px;
  border:1px solid var(--cl-contorno-fraco);
  box-shadow:0 0 0 1px var(--cl-sombra);
  background:transparent;
}
.cl-ret:hover{ border-color:var(--cl-contorno); background:rgba(255,255,255,.06); }
.cl-ret--oculto{
  border-style:dashed; border-width:2px; border-color:var(--cl-contorno);
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 8px, rgba(0,0,0,.18) 8px 16px);
}
.cl-ret--sel{ border:2px solid var(--accent); box-shadow:0 0 0 1px var(--cl-contorno), 0 0 0 2px var(--cl-sombra); cursor:move; }
.cl-ret--sel.cl-ret--oculto{ border-style:dashed; }
.cl-ret:focus{ outline:none; }
.cl-ret:focus-visible{ outline:3px solid var(--cl-contorno); outline-offset:2px; box-shadow:0 0 0 2px var(--accent), 0 0 0 7px var(--cl-sombra); }
.cl-ret-nome{
  position:absolute; left:4px; top:4px; max-width:calc(100% - 8px); padding:2px 7px; border-radius:6px;
  font-size:11px; font-weight:700; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--cl-etiqueta-tinta); background:var(--cl-etiqueta); pointer-events:none;
}
.cl-ret--sel .cl-ret-nome{ background:var(--accent); }
.cl-alca{
  position:absolute; width:12px; height:12px; border-radius:3px; background:var(--cl-etiqueta-tinta);
  border:2px solid var(--accent); box-shadow:0 0 0 1px var(--cl-sombra); z-index:2;
}
/* área de toque maior que o desenho */
.cl-alca::before{ content:""; position:absolute; inset:-7px; }
.cl-alca--nw{ left:-7px; top:-7px; cursor:nwse-resize; }
.cl-alca--n{ left:calc(50% - 6px); top:-7px; cursor:ns-resize; }
.cl-alca--ne{ right:-7px; top:-7px; cursor:nesw-resize; }
.cl-alca--e{ right:-7px; top:calc(50% - 6px); cursor:ew-resize; }
.cl-alca--se{ right:-7px; bottom:-7px; cursor:nwse-resize; }
.cl-alca--s{ left:calc(50% - 6px); bottom:-7px; cursor:ns-resize; }
.cl-alca--sw{ left:-7px; bottom:-7px; cursor:nesw-resize; }
.cl-alca--w{ left:-7px; top:calc(50% - 6px); cursor:ew-resize; }

/* ---------- painel lateral ---------- */
.cl-painel{
  display:flex; flex-direction:column; min-width:0; overflow:hidden;
  max-height:calc(100vh - 170px);
  border-radius:var(--radius,20px); border:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow-soft);
}
.cl[data-estado]:not([data-estado="pronto"]) .cl-painel{ display:none; }
.cl[data-estado]:not([data-estado="pronto"]) .cl-corpo{ grid-template-columns:minmax(0,1fr); }
.cl-abas{ display:flex; gap:2px; padding:6px 8px 0; border-bottom:1px solid var(--line-soft); overflow-x:auto; scrollbar-width:none; flex:none; }
.cl-abas::-webkit-scrollbar{ display:none; }
.cl-aba{
  background:transparent; border:0; border-bottom:2px solid transparent; padding:9px 8px 10px; cursor:pointer; white-space:nowrap;
  font:inherit; font-size:12.5px; font-weight:700; color:var(--ink-3);
}
.cl-aba:hover{ color:var(--ink); }
.cl-aba[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--accent); }
/* um scroll só: o miolo do painel */
.cl-painel-corpo{ flex:1 1 auto; min-height:0; overflow:auto; padding:14px 16px 18px; display:flex; flex-direction:column; gap:12px; }

.cl-sec{ margin:6px 0 0; font-size:13px; font-weight:800; color:var(--ink); }
.cl-sec:first-child{ margin-top:0; }
.cl-ajuda{ margin:0; font-size:12px; line-height:1.45; color:var(--ink-3); }
.cl-vazio{ margin:18px 4px; font-size:13px; line-height:1.5; color:var(--ink-2); text-align:center; }
.cl-campo{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.cl-linha{ display:flex; flex-wrap:wrap; gap:12px 16px; align-items:flex-start; }
.cl-linha > .cl-campo{ flex:1 1 130px; }
.cl-inp{
  width:100%; min-width:0; font:inherit; font-size:13px; color:var(--ink); background:var(--panel);
  border:1px solid var(--line-2); border-radius:var(--radius-sm,12px); padding:8px 11px;
}
.cl-inp::placeholder{ color:var(--ink-3); opacity:.8; }
.cl-ta{ resize:vertical; min-height:74px; line-height:1.4; }

/* segmentado (no lugar de <select>) */
.cl-seg{ display:flex; flex-wrap:wrap; gap:4px; padding:3px; border-radius:var(--radius-sm,12px); background:var(--chip); }
.cl-seg-b{
  flex:1 1 auto; border:0; background:transparent; cursor:pointer; padding:6px 10px; border-radius:9px;
  font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;
}
.cl-seg-b:hover{ color:var(--ink); }
.cl-seg-b.on{ background:var(--panel); color:var(--accent-ink,var(--accent)); font-weight:800; box-shadow:var(--shadow-soft); }

/* liga/desliga */
.cl-sw{ display:inline-flex; align-items:center; gap:8px; border:0; background:transparent; cursor:pointer; padding:3px 2px; font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-2); border-radius:8px; }
.cl-sw-trilho{ position:relative; flex:none; width:32px; height:18px; border-radius:99px; background:var(--line-2); transition:background .15s ease; }
.cl-sw-bola{ position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:var(--panel); box-shadow:0 1px 2px var(--line-2); transition:transform .15s ease; }
.cl-sw[aria-checked="true"]{ color:var(--ink); }
.cl-sw[aria-checked="true"] .cl-sw-trilho{ background:var(--accent); }
.cl-sw[aria-checked="true"] .cl-sw-bola{ transform:translateX(14px); }

/* lista de blocos */
.cl-add{ display:flex; flex-wrap:wrap; gap:8px; }
.cl-add .og-btn{ flex:1 1 auto; }
.cl-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.cl-item{ border:1px solid var(--line); border-radius:var(--radius-sm,12px); padding:8px 10px; display:flex; flex-direction:column; gap:6px; background:var(--panel); }
.cl-item--sel{ border-color:var(--accent); background:var(--accent-50); }
.cl-item--oculto .cl-item-nome{ color:var(--ink-3); }
.cl-item-nome{ border:0; background:transparent; cursor:pointer; padding:2px 0; text-align:left; font:inherit; font-size:13px; font-weight:800; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border-radius:6px; }
.cl-item-acoes{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; }
.cl-mini-b{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--ink-2); cursor:pointer; padding:0; }
.cl-mini-b:hover{ color:var(--ink); border-color:var(--line-2); }
.cl-mini-b[disabled]{ opacity:.35; cursor:not-allowed; }
.cl-mini-b--perigo{ color:var(--red); }
.cl-perigo{ color:var(--red) !important; align-self:flex-start; }

/* posição e tamanho */
.cl-pos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.cl-pos-c{ display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:600; color:var(--ink-3); }
.cl-pos-c .cl-inp{ padding:7px 8px; font-variant-numeric:tabular-nums; }

/* cores */
.cl-cor{ display:flex; align-items:center; gap:8px; }
.cl-cor input[type="color"]{ flex:none; width:38px; height:36px; padding:2px; border:1px solid var(--line-2); border-radius:10px; background:var(--panel); cursor:pointer; }
.cl-inp--hex{ max-width:112px; font-family:var(--font-code,ui-monospace,monospace); text-transform:uppercase; }
.cl-faixa{ display:flex; align-items:center; gap:10px; }
.cl-faixa input[type="range"]{ flex:1 1 auto; min-width:0; accent-color:var(--accent); }
.cl-faixa output{ flex:none; min-width:42px; text-align:right; font-size:12.5px; font-weight:700; color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* paletas prontas */
.cl-paletas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; }
.cl-paleta{ display:flex; flex-direction:column; gap:6px; align-items:stretch; padding:6px; border-radius:var(--radius-sm,12px); border:1px solid var(--line); background:var(--panel); cursor:pointer; font:inherit; font-size:12px; font-weight:700; color:var(--ink-2); }
.cl-paleta:hover{ border-color:var(--accent); color:var(--ink); }
.cl-paleta-am{ display:flex; align-items:flex-end; justify-content:flex-end; gap:3px; height:38px; padding:5px; border-radius:8px; border:1px solid var(--line-soft); }
.cl-paleta-am i{ width:11px; height:11px; border-radius:50%; border:1px solid var(--cl-sombra); }

/* imagens */
.cl-upload{ display:flex; align-items:center; gap:10px; }
.cl-upload-b{ display:flex; flex-wrap:wrap; gap:6px; }
.cl-mini{ flex:none; width:64px; height:44px; border-radius:8px; border:1px solid var(--line); object-fit:contain; background:var(--chip); }
.cl-mini--vazia{ display:block; border-style:dashed; border-color:var(--line-2); }

/* ---------- foco visível em todos os controles da tela ---------- */
.cl-aba:focus-visible, .cl-seg-b:focus-visible, .cl-sw:focus-visible, .cl-item-nome:focus-visible, .cl-mini-b:focus-visible,
.cl-paleta:focus-visible, .cl .og-btn:focus-visible, .cl-inp:focus-visible, .cl-cor input[type="color"]:focus-visible,
.cl-faixa input[type="range"]:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---------- tela estreita: o painel desce para baixo da prévia ---------- */
@media (max-width:1099.98px){
  .cl-corpo{ grid-template-columns:minmax(0,1fr); }
  .cl-painel{ max-height:none; overflow:visible; }
  .cl-painel-corpo{ overflow:visible; }
  .cl-palco, .cl-dica{ max-width:none; }
  .cl-acoes{ margin-left:0; }
}

@media (prefers-reduced-motion:reduce){
  .cl-sw-trilho, .cl-sw-bola{ transition:none; }
}

/* avisos dentro do painel */
.cl-ajuda--erro{ color:var(--red); font-weight:700; }
.cl-ajuda--erro[hidden]{ display:none; }
.cl-inp[aria-invalid="true"]{ border-color:var(--red); }
.cl-nota{ margin:0; padding:9px 11px; border-radius:var(--radius-sm,12px); background:var(--amber-soft); color:var(--amber); font-size:12.5px; font-weight:600; line-height:1.45; }

/* =====================================================================
 * Rodada 2: efeitos, estilo, modelos prontos e tela ocupada
 * ===================================================================== */

/* barra em cima da prévia ("Ver tudo") */
.cl-previa-barra{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:34px; margin:0 auto 8px; max-width:calc((100vh - 250px) * 16 / 9); }
.cl[data-estado]:not([data-estado="pronto"]) .cl-previa-barra{ visibility:hidden; }
.cl-ver{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; }
.cl-ver svg{ flex:none; }

/* tela ocupada (publicando, descartando, restaurando, trocando de edição): nada aceita mudança */
.cl-ocupado{ position:absolute; inset:0; z-index:450; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb,var(--bg) 55%,transparent); cursor:progress; }
.cl-ocupado[hidden]{ display:none; }
.cl-ocupado span{ padding:9px 16px; border-radius:99px; background:var(--panel); color:var(--ink); border:1px solid var(--line-2); font-size:13px; font-weight:700; box-shadow:var(--shadow-soft); }
.cl--ocupado .cl-camada{ pointer-events:none; }
.cl--ocupado .cl-painel{ opacity:.55; cursor:progress; }

/* seções que abrem e fecham */
.cl-dob{ border:1px solid var(--line); border-radius:var(--radius-sm,12px); background:var(--panel); }
.cl-dob[open]{ border-color:var(--line-2); }
.cl-dob-t{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; cursor:pointer; list-style:none; font-size:13px; font-weight:800; color:var(--ink); border-radius:var(--radius-sm,12px); user-select:none; }
.cl-dob-t::-webkit-details-marker{ display:none; }
.cl-dob-t::after{ content:""; flex:none; width:7px; height:7px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(45deg); margin:-3px 4px 0 0; transition:transform .15s ease; }
.cl-dob[open] > .cl-dob-t::after{ transform:rotate(-135deg); margin-top:3px; }
.cl-dob-t:hover{ background:var(--hover); }
.cl-dob-c{ display:flex; flex-direction:column; gap:12px; padding:4px 12px 14px; }

/* rótulo com "voltar ao padrão deste item" */
.cl-rot-l{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:22px; }
.cl-repor{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:24px; height:22px; padding:0; border-radius:7px; border:1px solid var(--line); background:var(--panel); color:var(--accent-ink,var(--accent)); cursor:pointer; }
.cl-repor:hover{ border-color:var(--accent); }

/* controle deslizante: pontas escritas embaixo */
.cl-pontas{ display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--ink-3); margin-top:-2px; padding-right:52px; }
.cl-faixa output{ min-width:52px; white-space:nowrap; }

/* opções em grade (fontes na própria fonte, marcadores com desenho) */
.cl-seg--grade{ display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); }
.cl-seg--grade .cl-seg-b{ white-space:normal; min-height:38px; line-height:1.15; }
.cl-seg-b--ico{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 6px; }
.cl-ico{ display:block; width:44px; height:26px; color:var(--ink); }
.cl-seg-b.on .cl-ico{ color:var(--accent-ink,var(--accent)); }
.cl-ico svg{ display:block; width:100%; height:100%; }

/* bloco selecionado dentro da aba Blocos, e o atalho nas outras abas */
.cl-selcab{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:var(--radius-sm,12px); background:var(--accent-50); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); }
.cl-selcab .cl-sec{ margin:2px 0 0; }
.cl-atalho{ position:sticky; top:-14px; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:8px 12px; border-radius:var(--radius-sm,12px); border:1px solid color-mix(in srgb,var(--accent) 35%,transparent); background:var(--accent-soft); color:var(--ink); cursor:pointer; font:inherit; font-size:12.5px; text-align:left; }
.cl-atalho-ir{ flex:none; font-weight:800; color:var(--accent-ink,var(--accent)); }

/* modelos prontos */
.cl-modelos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.cl-modelo{ display:flex; flex-direction:column; gap:5px; padding:8px; text-align:left; border-radius:var(--radius-sm,12px); border:1px solid var(--line); background:var(--panel); cursor:pointer; font:inherit; color:var(--ink); }
.cl-modelo:hover{ border-color:var(--accent); }
.cl-modelo-mini{ position:relative; display:block; width:100%; aspect-ratio:16 / 9; border-radius:8px; overflow:hidden; border:1px solid var(--line-soft); }
.cl-modelo-mini i{ position:absolute; border:1px solid; border-radius:2px; opacity:.9; box-shadow:inset 0 0 0 1px var(--cl-sombra); }
.cl-modelo-nome{ font-size:12.5px; font-weight:800; }
.cl-modelo-desc{ font-size:11.5px; line-height:1.35; color:var(--ink-3); }

.cl-dob-t:focus-visible, .cl-repor:focus-visible, .cl-atalho:focus-visible, .cl-modelo:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

@media (max-width:1099.98px){
  .cl-previa-barra{ max-width:none; }
  .cl-atalho{ position:static; }
}
@media (prefers-reduced-motion:reduce){
  .cl-dob-t::after{ transition:none; }
}