/* Marca do cliente (#117) no molde config (#146 · onda 5). Só layout e tokens:
   as cores do cliente aparecem nos campos e na prévia (iframe), nunca aqui. */
.marca .marca-situacao { display: flex; gap: var(--ds-s2); align-items: center; flex-wrap: wrap; margin: 0 0 var(--ds-s3); }
.marca .nota { color: var(--muted); font-size: var(--ds-fs-sm); }
.marca .erro { color: var(--ink-err); font-size: var(--ds-fs-sm); }
.marca .marca-grade { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr); gap: var(--ds-s4); }
@media (max-width: 820px) { .marca .marca-grade { grid-template-columns: 1fr; } }
.marca .campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--ds-s3); margin-top: var(--ds-s3); }
.marca label { display: flex; flex-direction: column; gap: 4px; font-size: var(--ds-fs-sm); color: var(--muted); min-width: 0; }
.marca input:not([type="color"]):not([type="file"]) {
  min-height: 32px; padding: 4px 8px; background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--ds-r-sm); font: inherit; min-width: 0; width: 100%;
}
.marca .cor { display: flex; gap: 6px; align-items: center; }
.marca .cor input[type="color"] { width: 36px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: var(--ds-r-sm); background: none; }
.marca .cor code { font-family: var(--ds-font-mono); font-size: var(--ds-fs-sm); color: var(--ink); }
.marca .acoes { display: flex; gap: var(--ds-s2); flex-wrap: wrap; align-items: center; margin-top: var(--ds-s3); }
.marca .marca-logo { display: flex; gap: var(--ds-s3); align-items: center; flex-wrap: wrap; }
.marca .marca-logo .acoes { margin-top: 0; }
.marca .marca-logo img { height: 56px; max-width: 160px; object-fit: contain; border: 1px solid var(--line-soft); border-radius: var(--ds-r-sm); background: var(--panel-2); }
.marca .marca-mono {
  width: 56px; height: 56px; display: grid; place-items: center; font-size: var(--ds-fs-lg, 20px); font-weight: 800;
  border: 1px solid var(--line); border-radius: var(--ds-r-sm); background: var(--panel-2); color: var(--ink);
}
.marca .marca-previa { margin: 0; display: grid; gap: var(--ds-s2); align-content: start; }
.marca .marca-previa iframe { width: 100%; min-height: 420px; border: 1px solid var(--line); border-radius: var(--ds-r-lg); background: var(--panel); }
.marca .marca-busca { margin-top: var(--ds-s4); padding-top: var(--ds-s3); border-top: 1px solid var(--line-soft); }
.marca .marca-busca h4 { margin: 0 0 var(--ds-s1, 4px); font-size: var(--ds-fs); color: var(--ink); }
.marca .marca-busca .nota { margin: 0; }
.marca .marca-candidatos { list-style: none; margin: var(--ds-s3) 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--ds-s3); }
.marca .marca-candidatos li { display: grid; gap: var(--ds-s2); justify-items: start; padding: var(--ds-s3); border: 1px solid var(--line); border-radius: var(--ds-r-lg); background: var(--panel); }
.marca .marca-candidatos img { height: 64px; max-width: 100%; object-fit: contain; }
@media (max-width: 820px) { .marca .marca-previa iframe { min-height: 300px; } }