/* =====================================================
   MONTADOR DE PEÇA · KIT DO AGENTE · HOTEL JATIÚCA
   Camada de página. Depende de kit.css.
   ===================================================== */

.comp-body { background: var(--jat-bg-soft); }

.comp { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(3rem, 8vw, 5rem); }

.comp__grid {
  display: grid;
  gap: var(--jat-space-8);
  align-items: start;
}
@media (min-width: 980px) {
  .comp__grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: var(--jat-space-12); }
  /* O palco fica à direita no desktop e no topo no mobile: o agente precisa
     ver a peça enquanto digita, sem rolar. */
  .comp__palco { position: sticky; top: 88px; order: 2; }
  .comp__painel { order: 1; }
}

.comp__intro { display: grid; gap: var(--jat-space-2); margin-bottom: var(--jat-space-8); }
.comp__intro .jat-lead { max-width: 52ch; }

/* ── PASSOS ─────────────────────────────────────────── */
.comp__passo {
  background: var(--jat-surface);
  border: 1px solid var(--jat-border);
  border-radius: var(--jat-radius-lg);
  padding: var(--jat-space-5);
  margin-bottom: var(--jat-space-5);
  display: grid;
  gap: var(--jat-space-4);
}
.comp__passo-titulo {
  display: flex;
  align-items: center;
  gap: var(--jat-space-3);
  margin: 0;
  font-family: var(--jat-font-display);
  font-size: var(--jat-text-h3);
  font-weight: var(--jat-weight-bold);
  color: var(--jat-mar-800);
}
.comp__num {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: var(--jat-radius-full);
  background: var(--jat-accent);
  color: var(--jat-on-accent);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-variant-numeric: var(--jat-nums);
}
/* text-soft (#616161 = 5,4:1) em vez de muted: dica pequena sobre superfície clara passa AA */
.comp__dica { font-size: var(--jat-text-micro); margin: 0; color: var(--jat-text-soft); }

/* ── FOTOS ──────────────────────────────────────────── */
.comp__filtros {
  display: flex;
  gap: var(--jat-space-2);
  overflow-x: auto;
  padding-bottom: var(--jat-space-2);
}
.comp__filtros button {
  flex: none;
  border: 1px solid var(--jat-border-medium);
  background: transparent;
  color: var(--jat-text-soft);
  border-radius: var(--jat-radius-full);
  padding: 0.34rem 0.8rem;
  font: inherit;
  font-size: var(--jat-text-micro);
  cursor: pointer;
  white-space: nowrap;
}
.comp__filtros button.is-ativo {
  background: var(--jat-mar-800);
  border-color: var(--jat-mar-800);
  color: var(--jat-branco);
  font-weight: var(--jat-weight-bold);
}

.comp__fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--jat-space-3);
  max-height: 340px;
  overflow-y: auto;
  padding: 2px;
  /* respiro pra barra de rolagem não colar nas fotos */
  padding-right: var(--jat-space-2);
}
/* Miniatura robusta: ALTURA EXPLÍCITA no próprio card + imagem em absoluto
   preenchendo. Altura explícita sempre se aplica, inclusive em <button> (que
   NÃO cresce pra conter o conteúdo dentro de grids aninhados: media 0 de altura
   mesmo com a foto de 108px). Nada de aspect-ratio nem padding-hack, que
   colapsavam. Largura vem da coluna do grid; altura é fixa; cover enquadra. */
.comp__foto {
  position: relative;
  display: block;
  width: 100%;
  height: 108px;
  border: 0;
  padding: 0;
  border-radius: var(--jat-radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--jat-cinza-bg);
}
.comp__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Selecionado com três pistas: contorno, marca de seleção e aria-checked */
.comp__foto[aria-checked="true"] { outline: 3px solid var(--jat-accent); outline-offset: 1px; }
.comp__foto[aria-checked="true"]::after {
  content: "✓";
  position: absolute;
  top: 3px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: var(--jat-radius-full);
  background: var(--jat-accent);
  color: var(--jat-on-accent);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 700;
}
.comp__foto-vertical {
  position: absolute;
  left: 3px;
  bottom: 3px;
  background: rgba(0, 39, 50, 0.78);
  color: var(--jat-branco);
  font-size: 0.6rem;
  padding: 1px 5px;
  border-radius: var(--jat-radius-full);
}

/* ── FORMATOS ───────────────────────────────────────── */
.comp__formatos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--jat-space-3); }
.comp__formato {
  display: grid;
  gap: 0.2rem;
  justify-items: center;
  padding: var(--jat-space-3) var(--jat-space-2);
  border: 1px solid var(--jat-border-medium);
  border-radius: var(--jat-radius-md);
  background: transparent;
  font: inherit;
  font-size: var(--jat-text-micro);
  cursor: pointer;
  color: var(--jat-text);
}
.comp__formato strong { font-size: var(--jat-text-body-sm); }
.comp__formato.is-ativo {
  border-color: var(--jat-accent);
  border-width: 2px;
  background: var(--jat-mar-50);
  padding: calc(var(--jat-space-3) - 1px) calc(var(--jat-space-2) - 1px);
}
.comp__formato-icone {
  display: block;
  border: 2px solid var(--jat-mar-700);
  border-radius: 2px;
  margin-bottom: 0.25rem;
}
.comp__formato-icone--story { width: 17px; height: 30px; }
.comp__formato-icone--feed { width: 26px; height: 26px; }
.comp__formato-icone--flyer { width: 21px; height: 30px; border-style: dashed; }

/* ── LOGO DO AGENTE ─────────────────────────────────── */
.comp__logo-campo { display: grid; gap: var(--jat-space-2); justify-items: start; }
.comp__logo-botao { cursor: pointer; }
.comp__logo-preview {
  display: flex;
  align-items: center;
  gap: var(--jat-space-3);
  padding: var(--jat-space-3);
  background: var(--jat-bg-soft);
  border: 1px solid var(--jat-border);
  border-radius: var(--jat-radius-md);
}
.comp__logo-preview img { max-height: 46px; max-width: 150px; width: auto; }
.comp__logo-remover {
  border: 0;
  background: transparent;
  color: var(--jat-accent);
  font: inherit;
  font-size: var(--jat-text-micro);
  font-weight: var(--jat-weight-bold);
  cursor: pointer;
  text-decoration: underline;
}

.comp__fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--jat-space-2); }
.comp__fieldset legend { padding: 0; font-size: var(--jat-text-body-sm); font-weight: var(--jat-weight-medium); }
.comp__opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--jat-space-2); }
.comp__opcao {
  border: 1px solid var(--jat-border-medium);
  border-radius: var(--jat-radius-md);
  background: transparent;
  padding: var(--jat-space-3);
  font: inherit;
  font-size: var(--jat-text-body-sm);
  font-weight: var(--jat-weight-medium);
  cursor: pointer;
  display: grid;
  gap: 0.1rem;
  text-align: left;
  color: var(--jat-text);
}
.comp__opcao span { font-size: var(--jat-text-micro); }
.comp__opcao.is-ativo {
  border-color: var(--jat-accent);
  border-width: 2px;
  background: var(--jat-mar-50);
  padding: calc(var(--jat-space-3) - 1px);
}

.comp__baixar { width: 100%; }

/* ── PALCO ──────────────────────────────────────────── */
.comp__palco { display: grid; gap: var(--jat-space-3); justify-items: center; }
.comp__palco-caixa {
  position: relative;
  width: 100%;
  max-width: 320px;
  background: var(--jat-cinza-bg);
  border: 1px solid var(--jat-border);
  border-radius: var(--jat-radius-md);
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 260px;
}
.comp__palco-caixa canvas { width: 100%; height: auto; display: block; }
.comp__palco-caixa canvas[hidden] { display: none; }
.comp__palco-vazio {
  padding: var(--jat-space-8) var(--jat-space-5);
  text-align: center;
  color: var(--jat-text-muted);
  margin: 0;
}
.comp__palco-nota { font-size: var(--jat-text-micro); text-align: center; margin: 0; }