/* =====================================================================
   Ticopa Hub · r17 · COLORES POR LIGA y ESTILO DE IMÁGENES (85-colores-liga.js + el editor de 66-colores-comunidad.js)
   ===================================================================== */

/* Sección «Colores de una liga» (debajo de los colores de la comunidad) */
.tl-seccion { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--linea); }
.tl-titulo { margin: 0 0 6px; }
.tl-campo { display: grid; gap: 4px; margin: 0 0 8px; max-width: 520px; }
.tl-select { width: 100%; min-height: var(--toque); }
.tl-editor .tc-editor { border-top: 0; margin-top: 8px; padding-top: 0; }

/* Estilo de imágenes: dos opciones grandes (Marcador / Simple) */
.tc-estilo { margin: 0 0 14px; }
.tc-estilo h5 { margin: 0 0 4px; font-family: var(--f-datos); text-transform: uppercase; letter-spacing: .04em; }
.tc-estilos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 460px; }
.tc-op-estilo { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.tc-op-estilo .tc-desc { color: var(--suave); font: 500 .8rem var(--f-texto); }
.tc-op-estilo:disabled { opacity: .55; cursor: not-allowed; }

/* Guardar + atajo al logo */
.tc-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.tc-acciones .tc-guardar { margin-top: 0; }
.tc-logo[hidden] { display: none; }

/* La vista previa en estilo «Simple» no lleva el marco oscuro del flyer */
.tc-previa[data-estilo-imagenes="simple"] .tc-previa-flyer { background: #f5f5fa; }

@media (max-width: 640px) {
  .tc-estilos { max-width: none; }
  .tc-acciones .hero-btn, .tc-acciones .btn-secondary { flex: 1 1 100%; }
}