/* PIVOT — visual do painel. Independente do site. */
:root{
  --amarelo:#FFE500; --preto:#0A0A0A; --preto-2:#141414; --preto-3:#1C1C1C;
  --linha:#2E2E2E; --claro:#F0F0F0; --cinza:#8A8A8A; --cinza-2:#C4C4C4;
  --vermelho:#FF4B3E; --verde:#57D08A;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--preto);color:var(--claro);font-family:var(--sans);font-size:15px;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--amarelo);outline-offset:2px}

/* --- Botões --------------------------------------------------------------- */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 16px;border:1px solid var(--linha);background:transparent;color:var(--claro);
  cursor:pointer;text-decoration:none;transition:.15s}
.bt:hover{border-color:var(--amarelo);color:var(--amarelo)}
.bt--cheio{background:var(--amarelo);color:var(--preto);border-color:var(--amarelo);font-weight:700}
.bt--cheio:hover{background:#fff;border-color:#fff;color:var(--preto)}
.bt--fantasma{color:var(--cinza-2)}
.bt--pequeno{padding:6px 10px;font-size:11px}
.bt--largo{width:100%}
.bt--perigo:hover{border-color:var(--vermelho);color:var(--vermelho)}

/* --- Tela de login -------------------------------------------------------- */
.entrada{min-height:100svh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(circle at 50% 0%,#151515,#0A0A0A 60%)}
.cartao{width:min(100%,380px);background:var(--preto-2);border:1px solid var(--linha);
  padding:34px 30px;display:flex;flex-direction:column;gap:16px}
.cartao h1{margin:0;font-size:19px;letter-spacing:-.01em}
.cartao label{display:flex;flex-direction:column;gap:6px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza)}
.cartao input{font:inherit;font-size:16px;padding:12px 14px;background:var(--preto);
  border:1px solid var(--linha);color:var(--claro)}
.cartao input:focus{border-color:var(--amarelo);outline:none}
.dica{margin:0;font-size:13px;color:var(--cinza);line-height:1.45}
.erro{margin:0;background:rgba(255,75,62,.12);border-left:3px solid var(--vermelho);
  padding:10px 12px;font-size:13px;color:#FFB3AD}

/* --- Barra superior ------------------------------------------------------- */
.barra{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:12px 18px;background:var(--preto-2);border-bottom:1px solid var(--linha)}
.barra__marca{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase}
.barra__acoes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.estado{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
.estado.ok{color:var(--verde)} .estado.ruim{color:var(--vermelho)} .estado.aviso{color:var(--amarelo)}

/* --- Layout --------------------------------------------------------------- */
.area{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:start;min-height:calc(100svh - 57px)}
@media (max-width:860px){.area{grid-template-columns:1fr}}
.lista{border-right:1px solid var(--linha);background:var(--preto-2);position:sticky;top:57px;
  max-height:calc(100svh - 57px);display:flex;flex-direction:column}
@media (max-width:860px){.lista{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--linha)}}
.lista__abas{display:flex;border-bottom:1px solid var(--linha);background:var(--preto-2)}
.lista__abas .aba{
  flex:1;padding:12px 8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cinza);background:var(--preto-2);border:0;border-bottom:2px solid transparent;
}
.lista__abas .aba:hover{color:var(--claro);background:var(--preto-3)}
.lista__abas .aba:focus-visible{outline-offset:-2px}
.lista__abas .aba.ativa{color:var(--amarelo);border-color:var(--amarelo)}
.lista__topo{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--linha);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.lista__itens{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1}
.lista__pe{padding:14px 16px;border-top:1px solid var(--linha);display:flex;flex-direction:column;gap:8px}
.item{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--linha);cursor:pointer}
.item:hover{background:var(--preto-3)}
.item.ativo{background:var(--preto);box-shadow:inset 3px 0 0 var(--amarelo)}
.item__num{font-family:var(--mono);font-size:11px;color:var(--cinza);min-width:22px}
.item__nome{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item__setas{display:flex;flex-direction:column;gap:2px;opacity:.55}
.item__setas button{background:none;border:0;color:var(--claro);cursor:pointer;font-size:10px;line-height:1;padding:2px 4px}
.item__setas button:hover{color:var(--amarelo)}

/* --- Formulário ----------------------------------------------------------- */
.forma{padding:22px 26px 80px;max-width:920px}
@media (max-width:600px){.forma{padding:18px 16px 60px}}
.forma h2{margin:0 0 4px;font-size:20px}
.forma__sub{margin:0 0 22px;font-size:13px;color:var(--cinza);font-family:var(--mono);letter-spacing:.06em}
fieldset{border:1px solid var(--linha);margin:0 0 20px;padding:18px 18px 6px;background:var(--preto-2)}
legend{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amarelo);padding:0 8px}
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.campo>span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza)}
.campo em{font-style:normal;color:#6d6d6d;text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:12px}
.campo input,.campo textarea,.campo select{font:inherit;padding:10px 12px;background:var(--preto);
  border:1px solid var(--linha);color:var(--claro);width:100%;resize:vertical}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--amarelo);outline:none}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.tripla{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
@media (max-width:600px){.dupla,.tripla{grid-template-columns:1fr}}

/* --- Mídia ---------------------------------------------------------------- */
.midia{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:start;margin-bottom:18px}
.midia__previa{width:120px;aspect-ratio:1;background:
  repeating-linear-gradient(135deg,#1C1C1C 0 12px,#232323 12px 24px);
  border:1px solid var(--linha);display:grid;place-items:center;overflow:hidden}
.midia__previa img,.midia__previa video{width:100%;height:100%;object-fit:cover}
.midia__previa span{font-family:var(--mono);font-size:10px;color:#555;text-align:center;padding:6px}
.midia__lado{display:flex;flex-direction:column;gap:8px;min-width:0}
.midia__lado input[type=text]{font:inherit;padding:8px 10px;background:var(--preto);
  border:1px solid var(--linha);color:var(--claro);width:100%}
.midia__lado input[type=text]:focus{border-color:var(--amarelo);outline:none}
.midia__nome{font-family:var(--mono);font-size:11px;color:var(--cinza);word-break:break-all}
.campo-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--claro)}
.campo-check input{width:auto}
.campo-check em{font-style:normal;color:#6d6d6d;font-size:12px}
.midia__acoes{display:flex;gap:8px;flex-wrap:wrap}
.midia__dica-arrastar{font-family:var(--mono);font-size:11px;color:#555}
.midia__youtube{margin-top:2px}
input[type=file]{display:none}

/* --- Arrastar e soltar ------------------------------------------------------ */
.midia.arrastando,[data-cliente].arrastando{outline:2px dashed var(--amarelo);outline-offset:-2px;background:rgba(255,229,0,.05)}
.galeria.arrastando{outline:2px dashed var(--amarelo);outline-offset:6px}

.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-bottom:16px}
.galeria__item{position:relative;border:1px solid var(--linha);aspect-ratio:4/3;overflow:hidden;background:var(--preto-3)}
.galeria__item img,.galeria__item video{width:100%;height:100%;object-fit:cover}
.galeria__item button{position:absolute;top:6px;right:6px;background:rgba(10,10,10,.85);color:#fff;
  border:1px solid var(--linha);width:26px;height:26px;cursor:pointer;font-size:13px;line-height:1}
.galeria__item button:hover{background:var(--vermelho);border-color:var(--vermelho)}

.rodape-forma{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:26px;
  border-top:1px solid var(--linha);padding-top:18px}
.ficha-vazia{padding:60px 26px;color:var(--cinza);text-align:center}
.progresso{height:3px;background:var(--linha);overflow:hidden;display:none}
.progresso.on{display:block}
.progresso i{display:block;height:100%;width:30%;background:var(--amarelo);animation:corre 1s linear infinite}
@keyframes corre{from{transform:translateX(-100%)}to{transform:translateX(400%)}}