/* kunst-estudio · a interface da ferramenta.
   Nao e a peca: e a caixa. Usa as cores da Anabolic para nao haver salto
   visual, mas com contraste de interface, nao de arte. */

:root {
  --fundo: #101010;
  --painel: #171717;
  --painel-2: #1F1F1F;
  --linha: rgba(255, 255, 255, 0.10);
  --linha-forte: rgba(255, 255, 255, 0.18);
  --texto: #F5F7F6;
  --texto-suave: #A3A29D;
  --acento: #FEC401;
  --alerta: #E5484D;
  --ok: #30A46C;
  --raio: 10px;
  --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
/* Varias regras abaixo dao display a elementos que tambem usam [hidden].
   Sem isto, "hidden" nao esconde nada e a caixa de recusa aparece de arranque. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font-family: var(--fonte); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────── entrada */
.entrada { display: grid; place-items: center; padding: 24px; }
.cartao-entrada {
  width: min(400px, 100%); background: var(--painel);
  border: 1px solid var(--linha); border-radius: 16px; padding: 32px;
}
.cartao-entrada form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.nota-entrada { color: var(--texto-suave); font-size: 12.5px; margin: 24px 0 0; }

.marca-estudio { display: flex; align-items: center; gap: 12px; }
.marca-estudio__k {
  width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
  background: var(--acento); color: #000; border-radius: 10px;
  font-weight: 900; font-size: 20px;
}
.marca-estudio strong { display: block; font-size: 16px; letter-spacing: -0.01em; }
.marca-estudio small { display: block; color: var(--texto-suave); font-size: 12px; }

label span, .campo__rotulo {
  display: block; font-size: 12px; font-weight: 600; color: var(--texto-suave);
  margin-bottom: 6px; letter-spacing: 0.02em;
}
input[type=text], input[type=password], select, textarea {
  width: 100%; background: var(--painel-2); color: var(--texto);
  border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 9px 11px; font: inherit; font-size: 13.5px;
}
textarea { resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(254, 196, 1, 0.16);
}
input.mau, textarea.mau { border-color: var(--alerta); box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.18); }

button { font: inherit; cursor: pointer; }
.botao-principal {
  width: 100%; background: var(--acento); color: #000; border: none;
  border-radius: var(--raio); padding: 11px 16px; font-weight: 700; font-size: 14px;
}
.botao-principal:disabled { opacity: 0.45; cursor: not-allowed; }
.cartao-entrada button[type=submit] {
  background: var(--acento); color: #000; border: none; border-radius: var(--raio);
  padding: 11px 16px; font-weight: 700;
}
.botao-fantasma {
  background: transparent; color: var(--texto-suave); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 6px 12px; font-size: 12.5px;
}
.erro { color: var(--alerta); font-size: 13px; margin: 0; }

/* ──────────────────────────────────────────────────────────────── estudio */
.estudio { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.barra {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--linha); background: var(--painel);
}
.barra__direita { display: flex; align-items: center; gap: 12px; }
.quem { color: var(--texto-suave); font-size: 12.5px; }

.corpo { flex: 1 1 auto; display: flex; min-height: 0; }

.painel {
  flex: 0 0 400px; overflow-y: auto; background: var(--painel);
  border-right: 1px solid var(--linha);
}

.seccao { border-bottom: 1px solid var(--linha); }
.seccao__topo {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; color: var(--texto); padding: 14px 20px;
  font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
}
.seccao__topo i {
  width: 8px; height: 8px; border-right: 2px solid var(--texto-suave);
  border-bottom: 2px solid var(--texto-suave); transform: rotate(45deg); transition: transform .15s;
}
.seccao[data-aberta] .seccao__topo i { transform: rotate(-135deg); }
.seccao__corpo { display: none; padding: 4px 20px 20px; }
.seccao[data-aberta] .seccao__corpo { display: block; }

.campo { display: block; margin-bottom: 14px; }
.campo__ajuda { color: var(--texto-suave); font-size: 12px; margin: -8px 0 14px; }
.campo__aviso {
  display: flex; gap: 7px; align-items: flex-start;
  color: #E8C468; font-size: 11.5px; margin: 6px 0 0; line-height: 1.35;
}
.campo__aviso::before { content: "!"; flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px;
  border-radius: 50%; background: rgba(232, 196, 104, .18); color: #E8C468;
  font-weight: 800; font-size: 10px; display: grid; place-items: center; }
.campo__dica { color: var(--texto-suave); font-size: 11.5px; margin: 5px 0 0; }
.campo__erro { color: var(--alerta); font-size: 11.5px; margin: 5px 0 0; }

.interruptor { display: flex; align-items: center; gap: 9px; margin: 4px 0 14px; }
.interruptor input { width: 15px; height: 15px; accent-color: var(--acento); }
.interruptor span { margin: 0; color: var(--texto); font-size: 13px; font-weight: 500; }

/* fotos */
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.foto {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; background: var(--painel-2); padding: 0; cursor: pointer;
}
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto.ativa { border-color: var(--acento); }
.foto--nenhuma { display: grid; place-items: center; color: var(--texto-suave); font-size: 11px;
  border: 1px dashed var(--linha-forte); }

/* paletas */
.paletas { display: flex; flex-direction: column; gap: 8px; }
.paleta {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--painel-2); border: 2px solid transparent; border-radius: var(--raio);
  padding: 11px 12px; color: var(--texto);
}
.paleta.ativa { border-color: var(--acento); }
.paleta__amostras { flex: 0 0 auto; display: flex; }
.paleta__amostras span {
  width: 18px; height: 34px; display: block; border: 1px solid rgba(255,255,255,.14);
}
.paleta__amostras span:first-child { border-radius: 5px 0 0 5px; }
.paleta__amostras span:last-child { border-radius: 0 5px 5px 0; }
.paleta strong { display: block; font-size: 13.5px; }
.paleta small { display: block; color: var(--texto-suave); font-size: 11.5px; line-height: 1.35; margin-top: 3px; }
.paleta em { display: block; color: var(--texto-suave); font-size: 11px; font-style: normal; margin-top: 5px; }

/* veredito */
.veredito { margin: 6px 0 14px; display: flex; flex-direction: column; gap: 8px; }
.aviso-caixa {
  border-radius: var(--raio); padding: 10px 12px; font-size: 12.5px; line-height: 1.45;
  border: 1px solid var(--linha);
}
.aviso-caixa b { display: block; margin-bottom: 3px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.aviso-caixa--bloqueio { border-color: rgba(229,72,77,.55); background: rgba(229,72,77,.10); }
.aviso-caixa--bloqueio b { color: var(--alerta); }
.aviso-caixa--aviso { border-color: rgba(232,196,104,.45); background: rgba(232,196,104,.08); }
.aviso-caixa--aviso b { color: #E8C468; }
.aviso-caixa--regra { border-color: rgba(48,164,108,.45); background: rgba(48,164,108,.08); }
.aviso-caixa--regra b { color: var(--ok); }
.aviso-caixa ul { margin: 0; padding-left: 16px; }
.aviso-caixa li + li { margin-top: 5px; }
.aviso-caixa .como { display: block; color: var(--texto-suave); margin-top: 2px; }

/* estado dos dados */
.estado { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.estado li { font-size: 12.5px; color: var(--texto-suave); line-height: 1.45; }
.estado b {
  display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.estado b.ok { background: rgba(48,164,108,.18); color: #55C08B; }
.estado b.aprox { background: rgba(232,196,104,.16); color: #E8C468; }

/* palco */
.palco { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.palco__topo {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 10px 20px; border-bottom: 1px solid var(--linha);
}
.formatos { display: inline-flex; background: var(--painel); border: 1px solid var(--linha); border-radius: 999px; padding: 3px; }
.formatos button {
  background: none; border: none; color: var(--texto-suave); padding: 5px 14px;
  border-radius: 999px; font-size: 12.5px; font-weight: 600;
}
.formatos button.ativo { background: var(--acento); color: #000; }
.palco__estado { color: var(--texto-suave); font-size: 12px; }

.palco__area { flex: 1 1 auto; overflow: auto; display: grid; place-items: center; padding: 24px; }
.moldura {
  position: relative; background: #000; border-radius: 4px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(0,0,0,.6);
}
.moldura iframe { border: none; display: block; transform-origin: top left; background: #000; }

/* recusa */
.recusa {
  position: fixed; inset: 0; background: rgba(0,0,0,.72); display: grid; place-items: center;
  padding: 24px; z-index: 20;
}
.recusa__caixa {
  width: min(620px, 100%); max-height: 84vh; overflow-y: auto;
  background: var(--painel); border: 1px solid rgba(229,72,77,.5); border-radius: 16px; padding: 28px;
}
.recusa__caixa h2 { margin: 0 0 6px; font-size: 20px; color: var(--alerta); }
.recusa__intro { color: var(--texto-suave); font-size: 13px; margin: 0 0 18px; }
.recusa__item { border-left: 3px solid var(--alerta); padding: 2px 0 2px 14px; margin-bottom: 16px; }
.recusa__item h3 { margin: 0 0 4px; font-size: 14px; }
.recusa__item p { margin: 0; font-size: 13px; color: var(--texto-suave); line-height: 1.5; }
.recusa__item .trecho { color: var(--alerta); font-weight: 600; }
.recusa__item .como { display: block; margin-top: 7px; color: var(--texto); }
.recusa__item .como b { color: var(--ok); }