/* Componente: vista previa de estilos para prompts gráficos. */
.style-preview-card {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 12px 0 14px;
  padding: 12px;
  border: 1px solid #dbeaf2;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdff, #f7fbfe);
}
.style-preview-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px;
  color: #fff;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1.15;
  background: linear-gradient(135deg, var(--style-a, var(--brand-cyan)), var(--style-b, var(--brand-blue)));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 8px 18px rgba(15,23,42,.12);
  overflow: hidden;
  position: relative;
}
.style-preview-thumb::before {
  content: '';
  width: 42px;
  height: 42px;
  border-radius: 999px;
  position: absolute;
  opacity: .16;
  background: #fff;
}
.style-preview-info strong { display: block; color: var(--brand-blue); margin-bottom: 4px; }
.style-preview-info p { margin: 0 0 5px; color: #344054; font-size: .88rem; }
.style-preview-info small { display: block; color: var(--muted); font-size: .76rem; }
@media (max-width: 640px) {
  .style-preview-card { grid-template-columns: 1fr; }
  .style-preview-thumb { max-width: 220px; }
}