/* ============================================================================
   Comerziofy — Landing de Producto. Prefijo .cflp-
   La tira de imágenes va a ancho completo, sin huecos entre ellas, como en las
   landings COD. El panel usa los tokens de panel.css. 2026-09-24
   ========================================================================== */

/* ── Tienda: la tira de imágenes ─────────────────────────────────────── */

.cflp-landing {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    display: block;
    font-size: 0;            /* mata el hueco entre imágenes en línea */
}

.cflp-img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.cflp-cta {
    display: block;
    padding: 18px 16px;
    background: #fff;
}

/* el botón clonado ocupa el ancho del bloque */
.cflp-cta > button,
.cflp-cta > a {
    width: 100%;
    /* sin tope fijo: el boton llena la columna igual que las imagenes
       (el ancho de la columna ya lo controla ancho_pc en escritorio) */
    max-width: none;
    margin: 0 auto;
    display: flex;
}

@media (prefers-color-scheme: dark) {
    .cflp-cta { background: transparent; }
}

/* ── Panel: elegir producto ──────────────────────────────────────────── */

.cflp-aviso {
    padding: 13px 16px; border-radius: 10px; margin-bottom: 20px;
    font-size: 14px; line-height: 1.5; border: 1px solid transparent;
}
.cflp-success { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.cflp-error   { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.cflp-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.cflp-aviso a { color: inherit; font-weight: 700; }

.cflp-productos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;
}
.cflp-producto {
    display: flex; flex-direction: column; gap: 8px; padding: 10px;
    border: 2px solid var(--gray-200, #e5e7eb); border-radius: 12px;
    text-decoration: none; background: #fff; transition: all .15s ease;
}
.cflp-producto:hover { border-color: var(--primary-200, #c7d2fe); transform: translateY(-2px); }
.cflp-producto-on { border-color: var(--primary, #6366f1); background: var(--primary-50, #eef2ff); }
.cflp-producto img {
    width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px;
    background: var(--gray-100, #f3f4f6);
}
.cflp-sinfoto {
    width: 100%; aspect-ratio: 1; border-radius: 8px; display: grid; place-items: center;
    background: var(--gray-100, #f3f4f6); color: var(--gray-400, #9ca3af); font-size: 26px;
}
.cflp-producto-nombre {
    font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--gray-700, #374151);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cflp-badge {
    font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
    background: var(--gray-100, #f3f4f6); color: var(--gray-500, #6b7280); align-self: flex-start;
}
.cflp-badge-on { background: #dcfce7; color: #166534; }

/* ── Panel: subir imágenes ───────────────────────────────────────────── */

.cflp-soltar {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 30px 20px; text-align: center; cursor: pointer;
    border: 2px dashed var(--gray-300, #d1d5db); border-radius: 14px;
    background: var(--gray-50, #f9fafb); transition: all .15s ease;
}
.cflp-soltar:hover { border-color: var(--primary, #6366f1); background: var(--primary-50, #eef2ff); }
.cflp-soltar i { font-size: 30px; color: var(--primary, #6366f1); margin-bottom: 4px; }
.cflp-soltar strong { font-size: 15px; color: var(--gray-800, #1f2937); }
.cflp-soltar span { font-size: 12.5px; color: var(--gray-500, #6b7280); }
.cflp-elegidas { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--primary, #6366f1); text-align: center; }
.cflp-btn { margin-top: 16px; }
.cflp-tip {
    margin: 16px 0 0; padding: 12px 14px; font-size: 12.5px; line-height: 1.6;
    color: var(--gray-600, #4b5563); background: var(--gray-50, #f9fafb);
    border-left: 3px solid var(--primary, #6366f1); border-radius: 0 8px 8px 0;
}
.cflp-vacio { margin: 0; padding: 22px 0; text-align: center; font-size: 13.5px; color: var(--gray-500, #6b7280); }
.cflp-vacio a { color: var(--primary, #6366f1); font-weight: 600; }

/* ── Panel: orden de los bloques ─────────────────────────────────────── */

.cflp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cflp-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--gray-700, #374151); }
.cflp-switch input { width: 17px; height: 17px; accent-color: var(--primary, #6366f1); cursor: pointer; }

.cflp-lista { display: flex; flex-direction: column; gap: 8px; }
.cflp-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 11px; background: #fff;
}
.cflp-item img {
    width: 62px; height: 62px; object-fit: cover; border-radius: 8px; flex-shrink: 0;
    border: 1px solid var(--gray-200, #e5e7eb);
}
.cflp-mango { color: var(--gray-300, #d1d5db); font-size: 14px; cursor: grab; flex-shrink: 0; }
.cflp-alt {
    flex: 1; min-width: 0; padding: 8px 11px; font-size: 13px;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 8px; color: var(--gray-700, #374151);
}
.cflp-alt:focus { outline: none; border-color: var(--primary, #6366f1); }

.cflp-item-cta { background: #fffbeb; border-color: #fde68a; }
.cflp-cta-etq { flex: 1; font-size: 13.5px; font-weight: 700; color: #92400e; }
.cflp-cta-etq i { margin-right: 6px; }

.cflp-acciones { display: flex; gap: 4px; flex-shrink: 0; }
.cflp-ico {
    width: 30px; height: 30px; border: 1px solid var(--gray-200, #e5e7eb);
    background: #fff; border-radius: 7px; color: var(--gray-500, #6b7280);
    cursor: pointer; font-size: 12px; display: grid; place-items: center;
}
.cflp-ico:hover { background: var(--gray-50, #f9fafb); color: var(--gray-700, #374151); }
.cflp-quitar:hover { background: #fef2f2; border-color: #fecaca; color: var(--danger, #ef4444); }

.cflp-herramientas { margin-top: 16px; }
.cflp-guardar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--gray-100, #f3f4f6); }

.cflp-apagar { margin: -8px 0 24px; text-align: center; }
.cflp-enlace-apagar {
    border: 0; background: none; cursor: pointer; font-size: 13px;
    color: var(--gray-500, #6b7280); text-decoration: underline;
}
.cflp-enlace-apagar:hover { color: var(--danger, #ef4444); }

@media (max-width: 640px) {
    .cflp-item img { width: 48px; height: 48px; }
    .cflp-alt { display: none; }
}

/* ── Barra de estado: se ve o no se ve en la tienda ───────────────────── */

.cflp-estado {
    display: flex; align-items: center; gap: 14px; cursor: pointer;
    padding: 14px 18px; margin: 0 0 20px;
    border: 1px solid transparent; border-radius: 12px;
    transition: background .15s ease, border-color .15s ease;
}
.cflp-estado input { width: 20px; height: 20px; flex-shrink: 0; cursor: pointer; accent-color: currentColor; }

.cflp-estado-luz {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    background: currentColor; box-shadow: 0 0 0 4px rgba(255, 255, 255, .5);
}

.cflp-estado-txt { display: flex; flex-direction: column; gap: 2px; }
.cflp-estado-txt strong { font-size: 14.5px; font-weight: 700; }
.cflp-estado-txt small { font-size: 12.5px; opacity: .85; }

.cflp-estado-on {
    background: #ecfdf5; border-color: #a7f3d0; color: #065f46;
}
.cflp-estado-off {
    background: #fffbeb; border-color: #fcd34d; color: #92400e;
}

/* ── Selector de modo: solo imágenes o con cabecera y pie ─────────────── */

.cflp-modo {
    margin: 0 0 20px; padding: 16px 18px;
    background: var(--gray-50, #f9fafb); border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 12px;
}
.cflp-modo > strong {
    display: block; margin-bottom: 12px;
    font-size: 13.5px; font-weight: 700; color: var(--gray-800, #1f2937);
}
.cflp-radio {
    display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
    padding: 10px 12px; border-radius: 9px; transition: background .15s ease;
}
.cflp-radio:hover { background: #fff; }
.cflp-radio input { margin-top: 3px; width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--primary, #6366f1); cursor: pointer; }
.cflp-radio span { display: flex; flex-direction: column; gap: 2px; }
.cflp-radio b { font-size: 13.5px; font-weight: 600; color: var(--gray-800, #1f2937); }
.cflp-radio small { font-size: 12px; line-height: 1.5; color: var(--gray-500, #6b7280); }

/* ============================================================================
   Taller de la landing: editor a la izquierda, vista previa en vivo a la
   derecha. Las animaciones se replican aquí con nombres propios para no pisar
   las de la tienda. 2026-09-24
   ========================================================================== */

.cflp-taller {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 372px;
    gap: 24px;
    align-items: start;
}
.cflp-editor { min-width: 0; }

/* ── Vista previa ────────────────────────────────────────────────────── */

.cflp-previa { position: sticky; top: 20px; }
.cflp-previa-caja {
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 16px; padding: 18px;
}
.cflp-previa-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 16px;
}
.cflp-previa-head h4 {
    margin: 0; font-size: 14px; font-weight: 700; color: var(--gray-800, #1f2937);
    display: inline-flex; align-items: center; gap: 8px;
}
.cflp-previa-head i { color: var(--primary, #6366f1); }

.cflp-previa-tabs { display: flex; gap: 4px; background: var(--gray-100, #f3f4f6); padding: 3px; border-radius: 9px; }
.cflp-tab {
    border: 0; background: none; cursor: pointer; padding: 6px 12px;
    border-radius: 7px; color: var(--gray-500, #6b7280); font-size: 13px;
}
.cflp-tab-on { background: #fff; color: var(--primary, #6366f1); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }

.cflp-marco {
    margin: 0 auto; background: #111827; border-radius: 30px; padding: 12px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
    transition: width .2s ease, border-radius .2s ease, padding .2s ease;
}
.cflp-marco-movil { width: 300px; }
.cflp-marco-escritorio { width: 100%; border-radius: 12px; padding: 10px 10px 16px; }

.cflp-pantalla {
    background: #fff; border-radius: 20px; overflow-y: auto; overflow-x: hidden;
    height: 520px; font-size: 0;
    scrollbar-width: thin;
}
.cflp-marco-escritorio .cflp-pantalla { border-radius: 6px; height: 420px; }
.cflp-pantalla::-webkit-scrollbar { width: 5px; }
.cflp-pantalla::-webkit-scrollbar-thumb { background: var(--gray-300, #d1d5db); border-radius: 3px; }

.cflp-previa-img { display: block; width: 100%; height: auto; }
.cflp-previa-cta { display: block; padding: 12px 10px; background: #fff; }
.cflp-boton-previa {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; margin: 0 auto; padding: 13px 18px; cursor: default;
    line-height: 1.25; text-align: center; font-family: inherit;
}
.cflp-boton-previa i { font-size: .95em; margin-right: 7px; }
.cflp-boton-previa span { display: inline; }
.cflp-boton-previa small { font-size: .72em; opacity: .9; font-weight: 400; }

.cflp-previa-vacia {
    margin: 0; padding: 70px 24px; text-align: center; font-size: 13px;
    line-height: 1.6; color: var(--gray-400, #9ca3af);
}
.cflp-previa-pie {
    margin: 14px 0 0; font-size: 11.5px; line-height: 1.5;
    color: var(--gray-500, #6b7280); text-align: center;
}

/* ── Campos del personalizador ───────────────────────────────────────── */

.cflp-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cflp-ancho2 { grid-column: 1 / -1; }

.cflp-campo { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cflp-campo > span {
    font-size: 12.5px; font-weight: 600; color: var(--gray-700, #374151);
}
.cflp-campo > span em { font-style: normal; font-weight: 400; color: var(--gray-400, #9ca3af); }
.cflp-campo > span b {
    font-variant-numeric: tabular-nums; color: var(--primary, #6366f1);
}

.cflp-campo input[type="text"],
.cflp-campo select {
    padding: 9px 12px; font-size: 13.5px; font-family: inherit;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 9px;
    color: var(--gray-800, #1f2937); background: #fff; width: 100%;
}
.cflp-campo input[type="text"]:focus,
.cflp-campo select:focus { outline: none; border-color: var(--primary, #6366f1); }

.cflp-campo input[type="range"] {
    width: 100%; accent-color: var(--primary, #6366f1); cursor: pointer;
}
.cflp-color input[type="color"] {
    width: 100%; height: 38px; padding: 3px; cursor: pointer;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 9px; background: #fff;
}

.cflp-grupo { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; }
.cflp-grupo[hidden] { display: none; }

.cflp-casillas { flex-direction: row; gap: 22px; align-items: center; }
.cflp-casillas label {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 13.5px; font-weight: 600; color: var(--gray-700, #374151);
}
.cflp-casillas input { width: 16px; height: 16px; accent-color: var(--primary, #6366f1); cursor: pointer; }

/* ── El botón, ya en la tienda ───────────────────────────────────────── */

.cflp-boton {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; margin: 0 auto; padding: 15px 20px; cursor: pointer;
    line-height: 1.25; text-align: center; font-family: inherit;
    transition: transform .12s ease, filter .12s ease;
}
.cflp-boton:hover { filter: brightness(1.07); }
.cflp-boton:active { transform: scale(.985); }
.cflp-boton i { font-size: .95em; margin-right: 8px; }
.cflp-boton-sub { font-size: .72em; opacity: .9; font-weight: 400; }

/* ── Animaciones de la vista previa ──────────────────────────────────── */

.cflp-anim-pulse  { animation: cflp-pulse 2s ease-in-out infinite; }
.cflp-anim-bounce { animation: cflp-bounce 2s ease-in-out infinite; }
.cflp-anim-shake  { animation: cflp-shake 3s ease-in-out infinite; }
.cflp-anim-glow   { animation: cflp-glow 2s ease-in-out infinite; }
.cflp-anim-float  { animation: cflp-float 3s ease-in-out infinite; }
.cflp-anim-wiggle { animation: cflp-wiggle .5s ease-in-out infinite; }

@keyframes cflp-pulse  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes cflp-bounce { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-4px); } 50% { transform: translateY(0); } 75% { transform: translateY(-2px); } }
@keyframes cflp-shake  { 0%, 100% { transform: translateX(0); } 10%, 30% { transform: translateX(-3px); } 20%, 40% { transform: translateX(3px); } 50% { transform: translateX(0); } }
@keyframes cflp-glow   { 0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, .3); } 50% { box-shadow: 0 0 20px rgba(99, 102, 241, .6), 0 0 40px rgba(99, 102, 241, .3); } }
@keyframes cflp-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes cflp-wiggle { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-1deg); } 75% { transform: rotate(1deg); } }

@media (prefers-reduced-motion: reduce) {
    .cflp-boton-previa { animation: none !important; }
}

@media (max-width: 1100px) {
    .cflp-taller { grid-template-columns: 1fr; }
    .cflp-previa { position: static; order: -1; }
    .cflp-marco-movil { width: 280px; }
}
@media (max-width: 640px) {
    .cflp-campos { grid-template-columns: 1fr; }
}

/* ============================================================================
   Personalizador del botón: secciones, pastillas, rejillas y ajustes rápidos.
   2026-09-24
   ========================================================================== */

.cflp-pers { padding-top: 6px; }

.cflp-bloque { padding: 20px 0; border-bottom: 1px solid var(--gray-100, #f3f4f6); }
.cflp-bloque:first-child { padding-top: 4px; }
.cflp-bloque-ultimo { border-bottom: 0; padding-bottom: 4px; }

.cflp-bloque-tit {
    display: flex; align-items: center; gap: 9px; margin: 0 0 16px;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--gray-500, #6b7280);
}
.cflp-bloque-tit i {
    display: grid; place-items: center; width: 24px; height: 24px; flex-shrink: 0;
    font-size: 11px; border-radius: 7px;
    background: var(--primary-50, #eef2ff); color: var(--primary, #6366f1);
}
.cflp-nota-bloque {
    margin: -6px 0 16px; font-size: 12.5px; line-height: 1.6; color: var(--gray-500, #6b7280);
}

/* ── Ajustes rápidos ─────────────────────────────────────────────────── */

.cflp-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.cflp-preset {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 7px 13px 7px 8px; font-size: 12.5px; font-weight: 600; font-family: inherit;
    color: var(--gray-700, #374151); background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 999px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.cflp-preset:hover { border-color: var(--primary-200, #c7d2fe); transform: translateY(-1px); }
.cflp-preset.cflp-on { border-color: var(--primary, #6366f1); box-shadow: 0 0 0 3px var(--primary-50, #eef2ff); }
.cflp-preset-muestra {
    width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}

/* ── Rejilla y campos de texto ───────────────────────────────────────── */

.cflp-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cflp-etq {
    margin: 18px 0 9px; font-size: 12.5px; font-weight: 600; color: var(--gray-700, #374151);
}

/* ── Pastillas (control segmentado) ──────────────────────────────────── */

.cflp-seg {
    display: inline-flex; gap: 3px; padding: 3px; margin-bottom: 16px;
    background: var(--gray-100, #f3f4f6); border-radius: 10px;
}
.cflp-seg-ancho { display: flex; width: 100%; }
.cflp-seg button {
    flex: 1; border: 0; cursor: pointer; padding: 8px 16px; white-space: nowrap;
    font-size: 13px; font-weight: 600; font-family: inherit;
    color: var(--gray-500, #6b7280); background: none; border-radius: 8px;
    transition: background .15s ease, color .15s ease;
}
.cflp-seg button:hover { color: var(--gray-700, #374151); }
.cflp-seg button.cflp-on {
    background: #fff; color: var(--primary, #6366f1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
}

/* ── Rejilla de iconos ───────────────────────────────────────────────── */

.cflp-iconos { display: flex; flex-wrap: wrap; gap: 8px; }
.cflp-icono {
    width: 42px; height: 42px; cursor: pointer; display: grid; place-items: center;
    font-size: 15px; color: var(--gray-500, #6b7280); background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 11px;
    transition: all .15s ease;
}
.cflp-icono:hover { border-color: var(--primary-200, #c7d2fe); color: var(--gray-700, #374151); }
.cflp-icono.cflp-on {
    border-color: var(--primary, #6366f1); color: var(--primary, #6366f1);
    background: var(--primary-50, #eef2ff); box-shadow: 0 0 0 3px var(--primary-50, #eef2ff);
}

/* ── Fila de color ───────────────────────────────────────────────────── */

.cflp-colorfila {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    padding: 9px 12px; margin-bottom: 8px;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 11px; background: #fff;
}
.cflp-colorfila:hover { border-color: var(--gray-300, #d1d5db); }
.cflp-colorfila > span {
    flex: 1; font-size: 13.5px; font-weight: 500; color: var(--gray-700, #374151);
}
.cflp-colorfila input[type="color"] {
    width: 34px; height: 34px; flex-shrink: 0; padding: 0; cursor: pointer;
    border: 0; background: none; border-radius: 9px; overflow: hidden;
}
.cflp-colorfila input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.cflp-colorfila input[type="color"]::-webkit-color-swatch {
    border: 1px solid rgba(0, 0, 0, .12); border-radius: 9px;
}
.cflp-colorfila code {
    font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--gray-400, #9ca3af); min-width: 62px; text-align: right;
}

/* ── Deslizadores ────────────────────────────────────────────────────── */

.cflp-rango { display: flex; flex-direction: column; gap: 9px; }
.cflp-rango > span {
    font-size: 12.5px; font-weight: 600; color: var(--gray-700, #374151);
}
.cflp-rango > span b {
    display: inline-block; min-width: 26px; padding: 1px 7px; margin: 0 2px;
    font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: center;
    color: var(--primary, #6366f1); background: var(--primary-50, #eef2ff); border-radius: 999px;
}
.cflp-rango input[type="range"] {
    -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
    background: var(--gray-200, #e5e7eb); border-radius: 999px; cursor: pointer;
}
.cflp-rango input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 17px; height: 17px;
    background: #fff; border: 2px solid var(--primary, #6366f1); border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18); cursor: grab;
}
.cflp-rango input[type="range"]::-moz-range-thumb {
    width: 15px; height: 15px; background: #fff;
    border: 2px solid var(--primary, #6366f1); border-radius: 50%; cursor: grab;
}

/* ── Interruptores de estilo de texto ────────────────────────────────── */

.cflp-toggles { display: flex; gap: 10px; margin-top: 18px; }
.cflp-toggle { cursor: pointer; }
.cflp-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cflp-toggle span {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
    font-size: 13px; font-weight: 600; color: var(--gray-600, #4b5563);
    background: #fff; border: 1px solid var(--gray-200, #e5e7eb); border-radius: 10px;
    transition: all .15s ease;
}
.cflp-toggle span b, .cflp-toggle span em { font-size: 14px; width: 12px; text-align: center; }
.cflp-toggle:hover span { border-color: var(--gray-300, #d1d5db); }
.cflp-toggle input:checked + span {
    color: var(--primary, #6366f1); border-color: var(--primary, #6366f1);
    background: var(--primary-50, #eef2ff);
}

/* ── Movimiento ──────────────────────────────────────────────────────── */

.cflp-anims { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.cflp-anim {
    display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
    padding: 13px 8px; font-size: 12px; font-weight: 600; font-family: inherit;
    color: var(--gray-600, #4b5563); background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 12px;
    transition: all .15s ease;
}
.cflp-anim:hover { border-color: var(--primary-200, #c7d2fe); }
.cflp-anim.cflp-on {
    border-color: var(--primary, #6366f1); color: var(--primary, #6366f1);
    background: var(--primary-50, #eef2ff);
}
.cflp-anim-muestra {
    width: 34px; height: 13px; border-radius: 4px; flex-shrink: 0;
    background: linear-gradient(135deg, #818cf8, #6366f1);
}

@media (max-width: 720px) {
    .cflp-rejilla { grid-template-columns: 1fr; }
    .cflp-anims { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}

/* ── El icono va al lado del texto, no encima ─────────────────────────── */

.cflp-boton,
.cflp-boton-previa {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 9px;
    row-gap: 2px;
}
/* el subtítulo se lleva su propia línea */
.cflp-boton-sub,
.cflp-boton-previa small {
    flex-basis: 100%;
}
.cflp-boton i,
.cflp-boton-previa i {
    margin-right: 0;
}

/* Botón para igualar el fondo de las franjas al de la página */
.cflp-aplicar {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    margin-top: 10px; padding: 9px 15px;
    font-size: 12.5px; font-weight: 600; font-family: inherit;
    color: var(--primary, #6366f1); background: var(--primary-50, #eef2ff);
    border: 1px solid var(--primary-100, #e0e7ff); border-radius: 10px;
    transition: all .15s ease;
}
.cflp-aplicar:hover { background: var(--primary-100, #e0e7ff); }
.cflp-aplicar i { font-size: 11px; }

/* ── Zona de soltar y barra de progreso ───────────────────────────────── */

.cflp-soltar small {
    display: block; margin-top: 4px;
    font-size: 11.5px; color: var(--gray-400, #9ca3af);
}
.cflp-elegir {
    border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
    color: var(--primary, #6366f1); font-weight: 600; text-decoration: underline;
}
.cflp-soltando {
    border-color: var(--primary, #6366f1) !important;
    background: var(--primary-50, #eef2ff) !important;
    transform: scale(1.01);
}

.cflp-progreso {
    margin-top: 16px; padding: 14px 16px;
    background: var(--gray-50, #f9fafb);
    border: 1px solid var(--gray-200, #e5e7eb); border-radius: 12px;
}
.cflp-progreso[hidden] { display: none; }
.cflp-progreso-cab {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 9px; font-size: 13px; font-weight: 600; color: var(--gray-700, #374151);
}
.cflp-progreso-cab span:last-child {
    font-variant-numeric: tabular-nums; color: var(--primary, #6366f1);
}

.cflp-barra {
    height: 7px; border-radius: 999px; overflow: hidden;
    background: var(--gray-200, #e5e7eb);
}
.cflp-barra-relleno {
    height: 100%; width: 0%; border-radius: 999px;
    background: linear-gradient(90deg, #818cf8, #6366f1);
    transition: width .18s ease;
}

.cflp-subidas { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.cflp-subidas li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: 12px; color: var(--gray-600, #4b5563);
}
.cflp-subida-nombre {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cflp-subida-estado {
    flex-shrink: 0; font-variant-numeric: tabular-nums; font-weight: 600;
    color: var(--gray-500, #6b7280);
}
.cflp-subida-estado.cflp-ok  { color: #059669; }
.cflp-subida-estado.cflp-mal { color: var(--danger, #ef4444); }

/* ── Cronómetro de oferta ─────────────────────────────────────────────── */

.cflp-reloj {
    display: block; text-align: center; font-size: initial;
}
.cflp-reloj-titulo {
    margin: 0 0 12px; font-weight: 700; line-height: 1.3;
}
.cflp-reloj-cajas {
    display: flex; align-items: flex-start; justify-content: center; gap: 10px;
}
.cflp-reloj-u { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cflp-reloj-n {
    display: grid; place-items: center; min-width: 2em; padding: 8px 12px;
    font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
.cflp-reloj-u small { font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }

@media (max-width: 420px) {
    .cflp-reloj-cajas { gap: 7px; }
    .cflp-reloj-n { padding: 7px 9px; }
}

/* el mismo aspecto dentro de la maqueta del panel */
.cflp-previa-reloj { display: block; }

/* El cronómetro en la lista de bloques del panel */
.cflp-item-reloj { background: #fff1f2; border-color: #fecdd3; }
.cflp-item-reloj .cflp-cta-etq { color: #b91c1c; }

/* ── Animaciones extra del botón (2026-09-28) ────────────────────────────
   .btn-auto-X = botón real de la tienda (y su copia en la barra fija)
   .cflp-anim-X = vista previa y muestras del panel */

.btn-auto-heartbeat, .cflp-anim-heartbeat { animation: cflp-heartbeat 1.6s ease-in-out infinite; }
.btn-auto-tada,      .cflp-anim-tada      { animation: cflp-tada 2.6s ease-in-out infinite; }
.btn-auto-jello,     .cflp-anim-jello     { animation: cflp-jello 2.4s ease-in-out infinite; }
.btn-auto-swing,     .cflp-anim-swing     { animation: cflp-swing 2.2s ease-in-out infinite; transform-origin: top center; }
.btn-auto-rubber,    .cflp-anim-rubber    { animation: cflp-rubber 2.4s ease-in-out infinite; }
.btn-auto-ring,      .cflp-anim-ring      { animation: cflp-ring 1.8s ease-out infinite; }
.btn-auto-vibrate,   .cflp-anim-vibrate   { animation: cflp-vibrate 2.5s linear infinite; }
.btn-auto-breathe,   .cflp-anim-breathe   { animation: cflp-breathe 3.2s ease-in-out infinite; }
.btn-auto-jump,      .cflp-anim-jump      { animation: cflp-jump 1.8s cubic-bezier(.28,.84,.42,1) infinite; }
.btn-auto-shine,     .cflp-anim-shine     { position: relative; overflow: hidden; }
.btn-auto-shine::after, .cflp-anim-shine::after {
    content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
    background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg); pointer-events: none;
    animation: cflp-shine 2.6s ease-in-out infinite;
}

@keyframes cflp-heartbeat { 0%, 40%, 100% { transform: scale(1); } 10%, 30% { transform: scale(1.06); } 20% { transform: scale(1.01); } }
@keyframes cflp-tada {
    0%, 60%, 100% { transform: scale(1) rotate(0); }
    6%, 12% { transform: scale(.95) rotate(-2deg); }
    18%, 30%, 42% { transform: scale(1.05) rotate(2deg); }
    24%, 36%, 48% { transform: scale(1.05) rotate(-2deg); }
    54% { transform: scale(1) rotate(0); }
}
@keyframes cflp-jello {
    0%, 50%, 100% { transform: skew(0, 0); }
    11% { transform: skew(-6deg, -2deg); } 22% { transform: skew(4deg, 1.5deg); }
    33% { transform: skew(-2deg, -.8deg); } 44% { transform: skew(1deg, .4deg); }
}
@keyframes cflp-swing { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(3deg); } 40% { transform: rotate(-2deg); } 60% { transform: rotate(1deg); } 80% { transform: rotate(-1deg); } }
@keyframes cflp-rubber {
    0%, 50%, 100% { transform: scale3d(1, 1, 1); }
    15% { transform: scale3d(1.08, .92, 1); } 20% { transform: scale3d(.94, 1.06, 1); }
    27% { transform: scale3d(1.04, .96, 1); } 35% { transform: scale3d(.98, 1.02, 1); }
}
@keyframes cflp-ring { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, .35); } 80%, 100% { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); } }
@keyframes cflp-vibrate {
    0%, 30%, 100% { transform: translate(0); }
    3%, 11%, 19% { transform: translate(-2px, 1px); } 7%, 15%, 23% { transform: translate(2px, -1px); } 27% { transform: translate(1px, 1px); }
}
@keyframes cflp-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes cflp-jump {
    0%, 55%, 100% { transform: translateY(0) scale(1, 1); }
    10% { transform: translateY(0) scale(1.04, .94); }
    25% { transform: translateY(-9px) scale(.97, 1.04); }
    40% { transform: translateY(0) scale(1.03, .96); }
    48% { transform: translateY(-2px) scale(1, 1); }
}
@keyframes cflp-shine { 0% { left: -75%; } 60%, 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
    [class*="btn-auto-"], [class*="cflp-anim-"] { animation: none !important; }
    .btn-auto-shine::after, .cflp-anim-shine::after { animation: none !important; display: none; }
}