/* ════════════════════════════════════════════════════════════════════════
   BUYACÁ — Constructor de Formularios · estilos (scope bqf-*)
   Usa las variables del tema (--bq-*) para integrarse en claro y oscuro.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- Gestor (pestaña propia "Formularios" en modo Admin) ---- */
.bqf-manager{ margin:0; }
.bqf-mgr-head{
    display:flex; align-items:center; gap:12px;
    padding:2px 2px 16px;
    border-bottom:1px solid var(--bq-border-light, rgba(0,0,0,.07));
    margin-bottom:16px;
}
.bqf-mgr-ico{
    flex:0 0 auto; width:34px; height:34px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bq-primary-light, rgba(58,89,239,.12));
    color:var(--bq-primary, #3A59EF);
}
.bqf-mgr-ico svg{ width:18px; height:18px; }
.bqf-mgr-txt{ flex:1; min-width:0; }
.bqf-mgr-title{ font-size:15px; font-weight:800; color:var(--bq-text, #0f172a); letter-spacing:-.01em; }
.bqf-mgr-sub{ font-size:12px; color:var(--bq-text-secondary, #64748b); margin-top:1px; line-height:1.35; }
.bqf-create-btn{
    flex:0 0 auto;
    display:inline-flex; align-items:center; gap:6px;
    border:none; cursor:pointer;
    background:var(--bq-primary, #3A59EF); color:#fff;
    font-size:12.5px; font-weight:700;
    padding:8px 13px; border-radius:9px;
    transition:filter .15s ease, transform .1s ease;
}
.bqf-create-btn svg{ width:14px; height:14px; }
.bqf-create-btn:hover{ filter:brightness(1.06); }
.bqf-create-btn:active{ transform:scale(.97); }

.bqf-list{ display:flex; flex-direction:column; gap:8px; padding:0; }
.bqf-card{
    display:flex; align-items:center; gap:12px;
    padding:11px 12px; border-radius:12px;
    border:1px solid var(--bq-border, #e5e7eb);
    background:var(--bq-bg-surface, var(--bq-bg-card, #fff));
    transition:border-color .15s ease;
}
.bqf-card:hover{ border-color:var(--bq-primary-soft, rgba(58,89,239,.4)); }
.bqf-card-ico{
    flex:0 0 auto; width:34px; height:34px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    background:var(--bq-primary-light, rgba(58,89,239,.10));
    color:var(--bq-primary, #3A59EF);
}
.bqf-card-ico svg{ width:17px; height:17px; }
.bqf-card-info{ flex:1; min-width:0; }
.bqf-card-title{
    font-size:14px; font-weight:700; color:var(--bq-text, #0f172a);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bqf-card-meta{
    display:flex; align-items:center; gap:7px; flex-wrap:wrap;
    font-size:11.5px; color:var(--bq-text-secondary, #64748b); margin-top:3px;
}
.bqf-dot{ opacity:.45; }
.bqf-sent{
    display:inline-flex; align-items:center; gap:4px; font-weight:800;
    color:var(--bq-primary, #3A59EF);
}
.bqf-sent svg{ width:13px; height:13px; }
.bqf-badge{
    display:inline-flex; align-items:center; gap:4px;
    padding:1px 7px; border-radius:999px; font-weight:700;
    font-size:10.5px; letter-spacing:.02em;
}
.bqf-badge svg{ width:11px; height:11px; }
.bqf-badge--mail{ background:rgba(59,130,246,.12); color:#2563eb; }
.bqf-badge--wa{ background:rgba(37,211,102,.15); color:#1ca84e; }
.bqf-card-actions{ flex:0 0 auto; display:flex; align-items:center; gap:2px; }
.bqf-act{
    width:30px; height:30px; border-radius:8px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    border:none; background:transparent; color:var(--bq-text-muted, #94a3b8);
    transition:color .15s ease, background .15s ease;
}
.bqf-act:hover{ color:var(--bq-primary, #3A59EF); background:var(--bq-primary-light, rgba(58,89,239,.10)); }
.bqf-act--del:hover{ color:#ef4444; background:rgba(239,68,68,.10); }
.bqf-act svg{ width:15px; height:15px; }

/* Tooltip chico y propio (en vez del title nativo del navegador, más lento
   y menos vistoso) — reutilizable en cualquier botón con [data-tip]. */
.bqf-tip{ position:relative; }
.bqf-tip::after{
    content:attr(data-tip);
    position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%) translateY(3px);
    background:#0f172a; color:#fff; font-size:11px; font-weight:600; white-space:nowrap;
    padding:5px 9px; border-radius:7px; pointer-events:none;
    opacity:0; transition:opacity .14s ease, transform .14s ease; z-index:20;
}
.bqf-tip:hover::after, .bqf-tip:focus-visible::after{ opacity:1; transform:translateX(-50%) translateY(0); }

.bqf-empty{
    text-align:center; padding:34px 18px; color:var(--bq-text-secondary, #64748b);
    border:1px dashed var(--bq-border, #e5e7eb); border-radius:14px;
}
.bqf-empty svg{ width:40px; height:40px; opacity:.4; margin-bottom:8px; }
.bqf-empty p{ margin:0; font-size:13px; line-height:1.5; }
.bqf-loading{ padding:24px; text-align:center; color:var(--bq-text-secondary,#64748b); font-size:13px; }

/* ---- Overlay (constructor + visor público) ---- */
.bqf-overlay{
    position:fixed; inset:0; z-index:99999;
    display:flex; align-items:center; justify-content:center;
    padding:0; opacity:0; pointer-events:none;
    transition:opacity .2s ease;
}
.bqf-overlay.is-open{ opacity:1; pointer-events:auto; }
.bqf-backdrop{
    position:absolute; inset:0;
    background:rgba(10,12,18,.62);
    backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
}
.bqf-modal{
    position:relative; z-index:1;
    width:100%; max-width:560px; max-height:92vh;
    display:flex; flex-direction:column;
    background:var(--bq-bg-card, #fff);
    border:1px solid var(--bq-border, #e5e7eb);
    border-radius:22px;
    
    transform:translateY(14px) scale(.98);
    transition:transform .24s cubic-bezier(.22,1,.36,1);
    overflow:hidden;
}
.bqf-overlay.is-open .bqf-modal{ transform:translateY(0) scale(1); }

.bqf-modal-head{
    display:flex; align-items:center; gap:12px;
    padding:16px 18px; flex:0 0 auto;
    border-bottom:1px solid var(--bq-border-light, rgba(0,0,0,.07));
}
.bqf-modal-head .bqf-h-ico{
    width:34px; height:34px; border-radius:10px; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:var(--bqf-accent, var(--bq-primary, #3A59EF)); color:#fff;
}
/* [Fix íconos invisibles] Un <svg> sin width/height propios y sin ninguna
   regla que lo acote toma el tamaño de reemplazo por defecto del navegador
   (300×150px) — reventando un botón de 34px o mostrándose recortado/roto.
   Faltaba esta regla (y las de .bqf-close/.bqf-opt-add/.bqf-mini más abajo). */
.bqf-modal-head .bqf-h-ico svg{ width:18px; height:18px; }
.bqf-modal-head h3{
    flex:1; min-width:0; margin:0;
    font-size:16.5px; font-weight:800; color:var(--bq-text, #0f172a);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bqf-close{
    width:34px; height:34px; border-radius:50%; flex:0 0 auto; cursor:pointer;
    border:none; background:var(--bq-bg-secondary, rgba(0,0,0,.05));
    color:var(--bq-text-secondary, #64748b);
    display:flex; align-items:center; justify-content:center; transition:all .15s ease;
}
.bqf-close svg{ width:16px; height:16px; }
.bqf-close:hover{ background:rgba(239,68,68,.12); color:#ef4444; transform:scale(1.06); }

/* [Modo vista] Botón "Vista previa" en el encabezado del constructor. */
.bqf-preview-trigger{
    flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
    padding:8px 12px; border-radius:999px; cursor:pointer;
    border:1.5px solid var(--bqf-accent, var(--bq-primary,#3A59EF));
    background:none; color:var(--bqf-accent, var(--bq-primary,#3A59EF));
    font-size:12.5px; font-weight:700; white-space:nowrap;
    transition:background .14s ease, transform .12s ease;
}
.bqf-preview-trigger svg{ width:15px; height:15px; }
.bqf-preview-trigger:hover{ background:var(--bq-primary-light, rgba(58,89,239,.10)); }
.bqf-preview-trigger:active{ transform:scale(.96); }
@media (max-width:420px){ .bqf-preview-trigger span{ display:none; } .bqf-preview-trigger{ padding:8px; border-radius:50%; } }

/* Insignia "Vista previa" en el visor público cuando se abre desde el
   constructor (previewForm()) — deja clarísimo que nada de esto se envía. */
.bqf-preview-badge{
    flex:0 0 auto; margin-left:-4px; padding:3px 10px; border-radius:999px;
    background:#F59E0B; color:#1a1200; font-size:10.5px; font-weight:800;
    text-transform:uppercase; letter-spacing:.04em;
}

.bqf-modal-body{
    flex:1 1 auto; overflow-y:auto; padding:18px;
    -webkit-overflow-scrolling:touch;
}
.bqf-modal-foot{
    flex:0 0 auto; display:flex; gap:10px; padding:14px 18px;
    border-top:1px solid var(--bq-border-light, rgba(0,0,0,.07));
    background:var(--bq-bg-card, #fff);
}

/* ---- Inputs comunes ---- */
.bqf-label{ display:block; font-size:13px; font-weight:700; color:var(--bq-text, #0f172a); margin:0 0 6px; }
.bqf-label .bqf-req{ color:#ef4444; margin-left:2px; }
.bqf-input, .bqf-textarea, .bqf-select{
    width:100%; box-sizing:border-box;
    padding:11px 13px; font-size:14px; font-family:inherit;
    color:var(--bq-text, #0f172a);
    background:var(--bq-bg-input, var(--bq-bg-secondary, #f8fafc));
    border:1.5px solid var(--bq-border, #e5e7eb);
    border-radius:11px; outline:none;
    transition:border-color .15s ease, box-shadow .15s ease;
}
.bqf-textarea{ min-height:88px; resize:vertical; line-height:1.45; }
.bqf-input:focus, .bqf-textarea:focus, .bqf-select:focus{
    border-color:var(--bqf-accent, var(--bq-primary, #3A59EF));
    
}
.bqf-input::placeholder, .bqf-textarea::placeholder{ color:var(--bq-text-muted, #9aa4b2); }

/* ---- Secciones del constructor ---- */
.bqf-section{ margin-bottom:20px; }
.bqf-section-title{
    font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
    color:var(--bq-text-muted, #94a3b8); margin:0 0 10px;
}
.bqf-field{
    border:1px solid var(--bq-border, #e5e7eb); border-radius:13px;
    padding:13px; margin-bottom:10px; background:var(--bq-bg-surface, var(--bq-bg-card,#fff));
}
.bqf-field-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.bqf-field-type{
    font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.03em;
    color:var(--bqf-accent, var(--bq-primary, #3A59EF));
    background:var(--bq-primary-light, rgba(58,89,239,.10));
    padding:3px 9px; border-radius:999px;
}
/* [Pedido] Recordatorio en cada componente visual: es solo ayuda para
   guiar a la persona, nunca se manda al correo/WhatsApp del dueño. */
.bqf-field-info-badge{
    font-size:10px; font-weight:700; letter-spacing:.01em;
    color:#92720c; background:rgba(245,158,11,.14);
    padding:3px 8px; border-radius:999px; white-space:nowrap;
}
.bqf-field-move{ margin-left:auto; display:flex; gap:4px; }
.bqf-mini{
    width:28px; height:28px; border-radius:8px; cursor:pointer;
    border:1px solid var(--bq-border, #e5e7eb); background:transparent;
    color:var(--bq-text-secondary, #64748b);
    display:flex; align-items:center; justify-content:center;
    transition:all .12s cubic-bezier(.34,1.56,.64,1);
}
/* [Fix íconos invisibles] Subir/Bajar/Eliminar (y la "x" de quitar una
   opción, que reusa esta misma clase) nunca tuvieron un tamaño de ícono
   propio — se veían gigantes/recortados o de plano no se notaban. */
.bqf-mini svg{ width:15px; height:15px; }
.bqf-mini:hover{ color:var(--bq-primary,#3A59EF); border-color:var(--bq-primary-soft, rgba(58,89,239,.4)); transform:scale(1.08); }
.bqf-mini:active{ transform:scale(.92); }
.bqf-mini--del:hover{ color:#fff; background:#ef4444; border-color:#ef4444; }
.bqf-mini[disabled]{ opacity:.35; cursor:default; }
.bqf-mini[disabled]:hover{ transform:none; }
.bqf-field-row{ display:flex; gap:8px; align-items:center; margin-top:8px; }
.bqf-opt-row{ display:flex; gap:8px; align-items:center; margin-top:7px; }
.bqf-opt-row .bqf-input{ padding:8px 11px; font-size:13px; }
.bqf-opt-add{
    margin-top:8px; font-size:12.5px; font-weight:700; cursor:pointer;
    background:none; border:none; color:var(--bqf-accent, var(--bq-primary,#3A59EF));
    display:inline-flex; align-items:center; gap:5px; padding:2px;
    transition:transform .12s ease;
}
.bqf-opt-add svg{ width:14px; height:14px; }
.bqf-opt-add:hover{ transform:translateX(2px); }
.bqf-switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; color:var(--bq-text,#0f172a); }
.bqf-switch input{ appearance:none; -webkit-appearance:none; width:38px; height:22px; border-radius:999px; background:var(--bq-border,#cbd5e1); position:relative; cursor:pointer; transition:background .18s ease; flex:0 0 auto; }
.bqf-switch input:checked{ background:var(--bqf-accent, var(--bq-primary,#3A59EF)); }
.bqf-switch input::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .18s ease;  }
.bqf-switch input:checked::after{ transform:translateX(16px); }

.bqf-add-field{
    width:auto; padding:8px 14px; border-radius:9px; cursor:pointer;
    border:1px dashed var(--bq-primary-soft, rgba(58,89,239,.5));
    background:transparent;
    color:var(--bqf-accent, var(--bq-primary,#3A59EF));
    font-size:12.5px; font-weight:700;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    transition:background .15s ease, border-color .15s ease;
    margin-top:2px;
}
.bqf-add-field svg{ width:14px; height:14px; }
.bqf-add-field:hover{ background:var(--bq-primary-light, rgba(58,89,239,.10)); border-color:var(--bq-primary,#3A59EF); }

/* ════════════════════════════════════════════════════════════════════════
   [Catálogo v2] Picker de componentes — buscador + categorías colapsables +
   tarjetas con vista previa. Reemplaza al .bqf-type-grid/.bqf-type-btn
   plano de antes (11 tipos, sin categorías). Reutiliza siempre
   var(--bqf-accent, var(--bq-primary,#3A59EF)) y el resto de tokens --bq-*
   ya usados en este archivo — ninguna paleta nueva.
   ════════════════════════════════════════════════════════════════════════ */
.bqf-picker{ margin-top:10px; animation:bqfIn .2s ease; }

.bqf-picker-search{
    display:flex; align-items:center; gap:8px;
    padding:9px 13px; margin-bottom:10px;
    border:1.5px solid var(--bq-border, #e5e7eb); border-radius:11px;
    background:var(--bq-bg-input, var(--bq-bg-secondary, #f8fafc));
    transition:border-color .15s ease, box-shadow .15s ease;
}
.bqf-picker-search:focus-within{
    border-color:var(--bqf-accent, var(--bq-primary,#3A59EF));
    
}
.bqf-picker-search svg{ width:16px; height:16px; color:var(--bq-text-muted, #94a3b8); flex:0 0 auto; }
.bqf-picker-search-input{
    flex:1; min-width:0; border:none; background:none; outline:none;
    font-size:13.5px; font-family:inherit; color:var(--bq-text, #0f172a);
}
.bqf-picker-search-input::placeholder{ color:var(--bq-text-muted, #9aa4b2); }

.bqf-picker-cats{ display:flex; flex-direction:column; gap:4px; }
.bqf-picker-cat{ border-radius:11px; overflow:hidden; }
.bqf-picker-cat--hidden{ display:none; }
.bqf-picker-cat-head{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:10px 4px; border:none; background:none; cursor:pointer; text-align:left;
    font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
    color:var(--bq-text-secondary, #64748b);
}
.bqf-picker-cat-head svg{ width:14px; height:14px; transition:transform .2s ease; flex:0 0 auto; }
.bqf-picker-cat.is-open .bqf-picker-cat-head svg{ transform:rotate(180deg); }
.bqf-picker-cat-head:hover{ color:var(--bqf-accent, var(--bq-primary,#3A59EF)); }
.bqf-picker-grid{
    display:none;
    grid-template-columns:repeat(2,1fr); gap:8px;
    padding:2px 2px 10px;
}
.bqf-picker-cat.is-open .bqf-picker-grid{ display:grid; animation:bqfIn .18s ease; }

.bqf-picker-card{ position:relative; }
.bqf-picker-card--hidden{ display:none; }
.bqf-picker-card-btn{
    width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
    cursor:pointer; text-align:left; padding:12px 12px 11px; border-radius:13px;
    border:1px solid var(--bq-border, #e5e7eb); background:var(--bq-bg-surface, var(--bq-bg-card,#fff));
    color:var(--bq-text, #0f172a); font-size:12.5px; font-weight:700;
    transition:transform .15s cubic-bezier(.34,1.56,.64,1), border-color .15s ease, box-shadow .15s ease;
}
.bqf-picker-card-ic{
    width:30px; height:30px; border-radius:9px; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:var(--bq-primary-light, rgba(58,89,239,.10));
    color:var(--bqf-accent, var(--bq-primary,#3A59EF));
    transition:transform .15s cubic-bezier(.34,1.56,.64,1);
}
.bqf-picker-card-ic svg{ width:16px; height:16px; }
.bqf-picker-card-name{ line-height:1.25; }
.bqf-picker-card-btn:hover{
    border-color:var(--bqf-accent, var(--bq-primary,#3A59EF));
    
    transform:translateY(-2px);
}
.bqf-picker-card-btn:hover .bqf-picker-card-ic{ transform:scale(1.08) rotate(-4deg); }
.bqf-picker-card-btn:active{ transform:translateY(0) scale(.97); }
.bqf-picker-card-btn:focus-visible{
    outline:none; border-color:var(--bqf-accent, var(--bq-primary,#3A59EF));
    
}

.bqf-picker-card-info{
    position:absolute; top:6px; right:6px; width:20px; height:20px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--bq-border, #e5e7eb); background:var(--bq-bg-card, #fff);
    color:var(--bq-text-muted, #94a3b8); font-size:11px; font-style:italic; font-family:Georgia,serif;
    cursor:pointer; line-height:1; transition:all .15s ease;
}
.bqf-picker-card-info:hover, .bqf-picker-card-info[aria-expanded="true"]{
    color:#fff; background:var(--bqf-accent, var(--bq-primary,#3A59EF)); border-color:transparent;
}
.bqf-picker-preview{
    margin-top:6px; padding:11px 12px; border-radius:11px;
    border:1px dashed var(--bq-primary-soft, rgba(58,89,239,.4));
    background:var(--bq-primary-light, rgba(58,89,239,.05));
    animation:bqfPreviewIn .16s ease;
}
@keyframes bqfPreviewIn{ from{ opacity:0; transform:translateY(-3px);} to{ opacity:1; transform:none;} }

/* En desktop, además de tocar "i", el hover ya adelanta la vista previa —
   en touch (celular, sin hover real) el botón "i" sigue siendo el camino
   principal, por eso NUNCA es la única forma de verla. */
@media (hover:hover){
    .bqf-picker-card-btn:hover ~ .bqf-picker-card-info{ color:#fff; background:var(--bqf-accent, var(--bq-primary,#3A59EF)); border-color:transparent; }
}

/* ---- Mock de la vista previa (sólo visual, sin datos reales) ---- */
.bqf-picker-preview-mock{ pointer-events:none; }
.bqf-mock-label{ display:block; font-size:11.5px; font-weight:700; color:var(--bq-text, #0f172a); margin-bottom:5px; }
.bqf-mock-input{
    height:30px; border-radius:8px; background:var(--bq-bg-input, #fff);
    border:1.5px solid var(--bq-border, #e5e7eb);
}
.bqf-mock-textarea{ height:46px; }
.bqf-mock-select{
    height:30px; border-radius:8px; background:var(--bq-bg-input, #fff);
    border:1.5px solid var(--bq-border, #e5e7eb);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 9px; font-size:11.5px; color:var(--bq-text-muted, #9aa4b2);
}
.bqf-mock-select svg{ width:11px; height:11px; }
.bqf-mock-choice{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--bq-text,#0f172a); padding:3px 0; }
.bqf-mock-choice svg{ width:14px; height:14px; color:var(--bqf-accent, var(--bq-primary,#3A59EF)); }
.bqf-mock-radio, .bqf-mock-checkbox{
    width:13px; height:13px; flex:0 0 auto; border:1.5px solid var(--bq-border-strong, #cbd5e1);
}
.bqf-mock-radio{ border-radius:50%; }
.bqf-mock-checkbox{ border-radius:4px; }
.bqf-mock-toggles{ display:flex; gap:5px; }
.bqf-mock-toggle{
    padding:4px 9px; border-radius:999px; font-size:11px; font-weight:700;
    border:1.5px solid var(--bq-border, #e5e7eb); color:var(--bq-text-secondary,#64748b);
}
.bqf-mock-toggle:first-child{ border-color:var(--bqf-accent, var(--bq-primary,#3A59EF)); color:var(--bqf-accent, var(--bq-primary,#3A59EF)); background:var(--bq-primary-light, rgba(58,89,239,.08)); }
.bqf-mock-scale{ display:flex; align-items:center; gap:4px; }
.bqf-mock-scale-n{
    width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center;
    font-size:10.5px; font-weight:700; border:1.5px solid var(--bq-border, #e5e7eb); color:var(--bq-text-secondary,#64748b);
}
.bqf-mock-scale-more{ font-size:12px; color:var(--bq-text-muted, #9aa4b2); }
.bqf-mock-rating{ display:flex; gap:3px; }
.bqf-mock-rating svg{ width:15px; height:15px; color:var(--bqf-accent, var(--bq-primary,#3A59EF)); }
.bqf-mock-video{
    aspect-ratio:16/9; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--bq-primary-light, rgba(58,89,239,.14)), transparent);
    border:1.5px dashed var(--bq-primary-soft, rgba(58,89,239,.4));
}
.bqf-mock-video-play{
    width:32px; height:32px; border-radius:50%; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:var(--bqf-accent, var(--bq-primary,#3A59EF)); color:#fff;
}
.bqf-mock-video-play svg{ width:15px; height:15px; }

/* Entrega */
.bqf-deliv{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.bqf-deliv-opt{
    cursor:pointer; padding:13px; border-radius:13px; text-align:center;
    border:1.5px solid var(--bq-border, #e5e7eb); background:var(--bq-bg-surface, var(--bq-bg-card,#fff));
    transition:all .15s ease; position:relative;
}
.bqf-deliv-opt svg{ width:22px; height:22px; margin-bottom:5px; }
.bqf-deliv-opt span{ display:block; font-size:13px; font-weight:700; color:var(--bq-text,#0f172a); }
.bqf-deliv-opt small{ display:block; font-size:11px; color:var(--bq-text-secondary,#64748b); margin-top:1px; }
.bqf-deliv-opt.is-on{ border-color:var(--bqf-accent, var(--bq-primary,#3A59EF)); background:var(--bq-primary-light, rgba(58,89,239,.08)); }
.bqf-deliv-opt.is-on::after{
    content:''; position:absolute; top:8px; right:8px; width:9px; height:9px; border-radius:50%;
    background:var(--bqf-accent, var(--bq-primary,#3A59EF));
}

/* Botones */
.bqf-btn{
    flex:1; padding:13px 16px; border-radius:12px; cursor:pointer;
    font-size:14px; font-weight:700; border:1px solid var(--bq-border, #e5e7eb);
    transition:filter .15s ease, transform .1s ease, background .15s ease;
}
.bqf-btn:active{ transform:scale(.985); }
.bqf-btn--ghost{ background:var(--bq-bg-secondary, #f1f5f9); color:var(--bq-text, #0f172a); }
.bqf-btn--ghost:hover{ background:var(--bq-border-light, rgba(0,0,0,.07)); }
.bqf-btn--primary{
    background:var(--bqf-accent, var(--bq-primary, #3A59EF)); color:#fff;
    border-color:transparent; flex:1.4;
}
.bqf-btn--primary:hover{ filter:brightness(1.06); }
.bqf-btn--primary[disabled]{ opacity:.6; cursor:default; }

/* ---- Visor público ---- */
.bqf-view-head{ margin-bottom:16px; }
.bqf-view-desc{ font-size:13.5px; color:var(--bq-text-secondary, #64748b); line-height:1.45; margin:4px 0 0; }
.bqf-vf{ margin-bottom:15px; }
.bqf-choice{ display:flex; align-items:center; gap:9px; padding:8px 0; cursor:pointer; font-size:14px; color:var(--bq-text,#0f172a); }
.bqf-choice input{ width:18px; height:18px; accent-color:var(--bqf-accent, var(--bq-primary,#3A59EF)); flex:0 0 auto; }
.bqf-success{ text-align:center; padding:26px 12px; }
.bqf-success-ic{
    width:64px; height:64px; border-radius:50%; margin:0 auto 14px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(34,197,94,.14); color:#16a34a;
    animation:bqfPop .35s cubic-bezier(.22,1.4,.4,1);
}
.bqf-success-ic svg{ width:30px; height:30px; }
.bqf-success h4{ margin:0 0 6px; font-size:18px; font-weight:800; color:var(--bq-text,#0f172a); }
.bqf-success p{ margin:0; font-size:13.5px; color:var(--bq-text-secondary,#64748b); }

/* ---- [Catálogo v2] Widgets interactivos nuevos del visor público ---- */
.bqf-toggle-group{ display:flex; flex-wrap:wrap; gap:8px; }
.bqf-toggle-btn{
    padding:9px 15px; border-radius:999px; cursor:pointer; font-size:13px; font-weight:700;
    border:1.5px solid var(--bq-border, #e5e7eb); background:var(--bq-bg-surface, var(--bq-bg-card,#fff));
    color:var(--bq-text, #0f172a); transition:all .14s ease;
}
.bqf-toggle-btn:hover{ border-color:var(--bqf-accent, var(--bq-primary,#3A59EF)); }
.bqf-toggle-btn.is-on{
    border-color:var(--bqf-accent, var(--bq-primary,#3A59EF));
    background:var(--bqf-accent, var(--bq-primary,#3A59EF)); color:#fff;
}

.bqf-scale{ display:flex; flex-wrap:wrap; gap:6px; }
.bqf-scale-btn{
    width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:13px; font-weight:700;
    border:1.5px solid var(--bq-border, #e5e7eb); background:var(--bq-bg-surface, var(--bq-bg-card,#fff));
    color:var(--bq-text, #0f172a); transition:all .14s ease;
}
.bqf-scale-btn:hover{ border-color:var(--bqf-accent, var(--bq-primary,#3A59EF)); transform:translateY(-1px); }
.bqf-scale-btn.is-on{
    border-color:var(--bqf-accent, var(--bq-primary,#3A59EF));
    background:var(--bqf-accent, var(--bq-primary,#3A59EF)); color:#fff;
}

.bqf-rating{ display:flex; gap:5px; }
.bqf-rating-star{
    background:none; border:none; cursor:pointer; padding:2px; color:var(--bq-border-strong, #cbd5e1);
    transition:transform .12s cubic-bezier(.34,1.56,.64,1), color .12s ease;
}
.bqf-rating-star svg{ width:28px; height:28px; display:block; }
.bqf-rating-star:hover{ transform:scale(1.12); }
.bqf-rating-star.is-on{ color:var(--bqf-accent, var(--bq-primary,#3A59EF)); }

.bqf-combo{ position:relative; }
.bqf-combo-list{
    position:absolute; z-index:5; top:calc(100% + 4px); left:0; right:0; max-height:200px; overflow-y:auto;
    background:var(--bq-bg-card, #fff); border:1.5px solid var(--bq-border, #e5e7eb); border-radius:11px;
     padding:4px;
}
.bqf-combo-opt{ padding:9px 11px; border-radius:8px; cursor:pointer; font-size:13.5px; color:var(--bq-text,#0f172a); }
.bqf-combo-opt[hidden]{ display:none; }
.bqf-combo-opt:hover, .bqf-combo-opt.is-active{ background:var(--bq-primary-light, rgba(58,89,239,.10)); color:var(--bqf-accent, var(--bq-primary,#3A59EF)); }

/* ---- [Catálogo v2] Componentes visuales — sin respuesta del visitante ---- */
.bqf-view-heading{ font-size:20px; font-weight:800; letter-spacing:-.01em; color:var(--bq-text,#0f172a); margin:4px 0 2px; }
.bqf-view-subheading{ font-size:15px; font-weight:700; color:var(--bq-text-secondary,#64748b); margin:0 0 2px; }
.bqf-view-info{ display:flex; gap:9px; padding:11px 13px; border-radius:11px; background:var(--bq-bg-secondary, #f1f5f9); }
.bqf-view-info svg{ width:17px; height:17px; flex:0 0 auto; margin-top:1px; color:var(--bqf-accent, var(--bq-primary,#3A59EF)); }
.bqf-view-info p{ margin:0; font-size:13.5px; line-height:1.5; color:var(--bq-text-secondary,#64748b); }
.bqf-view-alert{ display:flex; gap:9px; padding:12px 14px; border-radius:12px; border:1.5px solid transparent; }
.bqf-view-alert svg{ width:18px; height:18px; flex:0 0 auto; margin-top:1px; }
.bqf-view-alert p{ margin:0; font-size:13.5px; line-height:1.5; font-weight:600; }
.bqf-view-alert--info{ background:rgba(58,89,239,.08); border-color:rgba(58,89,239,.25); color:#2b3fb8; }
.bqf-view-alert--success{ background:rgba(22,163,74,.08); border-color:rgba(22,163,74,.25); color:#15803d; }
.bqf-view-alert--warning{ background:rgba(245,158,11,.10); border-color:rgba(245,158,11,.3); color:#b45309; }
.bqf-view-divider{ height:1px; margin:6px 0; background:var(--bq-border, #e5e7eb); }
.bqf-view-tag{
    display:inline-flex; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:700;
    background:var(--bq-primary-light, rgba(58,89,239,.12)); color:var(--bqf-accent, var(--bq-primary,#3A59EF));
}
.bqf-view-iconblock{ display:flex; justify-content:center; padding:6px 0; color:var(--bqf-accent, var(--bq-primary,#3A59EF)); }
.bqf-view-iconblock svg{ width:34px; height:34px; }
.bqf-view-card{
    display:flex; gap:11px; align-items:flex-start; padding:14px; border-radius:14px;
    border:1px solid var(--bq-border, #e5e7eb); background:var(--bq-bg-surface, var(--bq-bg-card,#fff));
}
.bqf-view-card-ic{
    width:36px; height:36px; border-radius:10px; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:var(--bq-primary-light, rgba(58,89,239,.12)); color:var(--bqf-accent, var(--bq-primary,#3A59EF));
}
.bqf-view-card-ic svg{ width:19px; height:19px; }
.bqf-view-card-txt b{ display:block; font-size:14.5px; font-weight:800; color:var(--bq-text,#0f172a); }
.bqf-view-card-txt p{ margin:3px 0 0; font-size:13px; line-height:1.45; color:var(--bq-text-secondary,#64748b); }
.bqf-view-progress{ height:9px; border-radius:999px; background:var(--bq-bg-secondary, #f1f5f9); overflow:hidden; }
.bqf-view-progress-fill{
    height:100%; width:0%; border-radius:999px;
    background:linear-gradient(90deg, var(--bqf-accent, var(--bq-primary,#3A59EF)), var(--bqf-accent, var(--bq-primary,#3A59EF)));
    transition:width .3s cubic-bezier(.22,1,.36,1);
}
/* [Video de YouTube] Marco responsive 16:9 — se reusa igual en el visor
   público y en la vista previa en vivo del editor. */
.bqf-view-video{ margin:4px 0; }
.bqf-view-video-frame{
    position:relative; width:100%; aspect-ratio:16/9; border-radius:12px;
    overflow:hidden; background:#000; 
}
.bqf-view-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.bqf-view-video-caption{ margin:8px 4px 0; font-size:12.5px; color:var(--bq-text-secondary,#64748b); text-align:center; line-height:1.4; }
.bqf-video-preview-box .bqf-view-video-frame{ max-width:320px; margin:0 auto; }

/* [Video de YouTube] Editor: cuando ya hay un enlace guardado, el video
   grande queda AL FRENTE (.bqf-video-compact) y los inputs de
   enlace/descripción (.bqf-video-fields) quedan plegados detrás de
   "Editar enlace" — antes siempre se veían los inputs primero, tapando el
   video. */
.bqf-video-compact .bqf-view-video-frame{ max-width:100%; }
.bqf-video-change-link{
    display:block; width:100%; margin-top:8px; padding:9px; border-radius:9px;
    border:1px dashed var(--bq-border, #e5e7eb); background:none; cursor:pointer;
    color:var(--bqf-accent, var(--bq-primary,#3A59EF)); font-size:12.5px; font-weight:700;
    transition:background .14s ease;
}
.bqf-video-change-link:hover{ background:var(--bq-primary-light, rgba(58,89,239,.08)); }
.bqf-video-fields{ margin-top:2px; }

/* [Imagen informativa] Marco de la imagen — mismo criterio que el video:
   grande cuando ya hay una subida, con "Cambiar imagen" (reusa
   .bqf-video-change-link) debajo. */
.bqf-view-image{ margin:4px 0; }
.bqf-view-image-frame{ border-radius:12px; overflow:hidden; }
.bqf-view-image-frame img{ display:block; width:100%; height:auto; }
.bqf-view-image-caption{ margin:8px 4px 0; font-size:12.5px; color:var(--bq-text-secondary,#64748b); text-align:center; line-height:1.4; }
.bqf-image-preview-box .bqf-view-image-frame{ max-width:320px; margin:0 auto; }
.bqf-image-upload-btn{
    display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer;
    padding:26px 14px; border-radius:12px; border:1.5px dashed var(--bq-primary-soft, rgba(58,89,239,.4));
    background:var(--bq-primary-light, rgba(58,89,239,.04));
    color:var(--bqf-accent, var(--bq-primary,#3A59EF)); font-size:13px; font-weight:700;
    transition:background .14s ease;
}
.bqf-image-upload-btn:hover{ background:var(--bq-primary-light, rgba(58,89,239,.10)); }
.bqf-image-upload-btn svg{ width:22px; height:22px; }
.bqf-image-preview-box .bqf-deco-hint{ text-align:center; margin-top:6px; }

/* ---- [Adjuntar archivo] Botón de subida en el visor público ---- */
.bqf-file-btn{
    position:relative; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
    padding:10px 16px; border-radius:10px; border:1.5px dashed var(--bq-primary-soft, rgba(58,89,239,.4));
    background:var(--bq-primary-light, rgba(58,89,239,.04));
    color:var(--bqf-accent, var(--bq-primary,#3A59EF)); font-size:13.5px; font-weight:700;
    transition:background .14s ease;
}
.bqf-file-btn:hover{ background:var(--bq-primary-light, rgba(58,89,239,.10)); }
.bqf-file-btn svg{ width:18px; height:18px; flex:0 0 auto; }
.bqf-file-btn input[type="file"]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.bqf-file-name{ margin:8px 0 0; font-size:13px; font-weight:600; color:var(--bq-text,#0f172a); word-break:break-all; }

/* ---- [Catálogo v2] Editor: campo decorativo (look distinto al de una
   pregunta) + animación de "encaje" al agregar cualquier campo ---- */
.bqf-field--deco{
    border-style:dashed;
    background:var(--bq-primary-light, rgba(58,89,239,.04));
}
.bqf-deco-hint{ margin:2px 0 0; font-size:12px; font-style:italic; color:var(--bq-text-muted, #94a3b8); }
.bqf-field--new{ animation:bqfFieldIn .42s cubic-bezier(.22,1.4,.4,1); }
@keyframes bqfFieldIn{
    0%{ transform:scale(.94) translateY(6px); opacity:0;  }
    55%{ transform:scale(1.015) translateY(0); opacity:1; }
    100%{ transform:none;  }
}
/* [Interactividad] Cada tarjeta de campo reacciona un poco al pasar el
   cursor — antes quedaban completamente estáticas hasta tocar un botón. */
.bqf-field{ transition:border-color .15s ease, box-shadow .15s ease; }
.bqf-field:hover{ border-color:var(--bq-primary-soft, rgba(58,89,239,.35));  }
.bqf-field--deco:hover{ border-color:var(--bqf-accent, var(--bq-primary,#3A59EF)); }

/* ── [Secciones/pasos] Constructor: cantidad de secciones + títulos ──────── */
.bqf-steps-hint{ margin:-4px 0 12px; font-size:12px; color:var(--bq-text-secondary, #64748b); line-height:1.45; }
.bqf-steps-count-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-size:13px; font-weight:700; color:var(--bq-text, #0f172a);
}
.bqf-stepper{
    display:inline-flex; align-items:center; gap:0;
    border:1.5px solid var(--bq-border, #e5e7eb); border-radius:999px; overflow:hidden;
}
.bqf-stepper-btn{
    width:32px; height:32px; border:none; background:var(--bq-bg-surface, var(--bq-bg-card,#fff));
    color:var(--bqf-accent, var(--bq-primary,#3A59EF)); cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:background .12s ease;
}
.bqf-stepper-btn svg{ width:13px; height:13px; }
.bqf-stepper-btn:hover{ background:var(--bq-primary-light, rgba(58,89,239,.10)); }
.bqf-stepper-btn:active{ transform:scale(.92); }
.bqf-stepper-btn[disabled]{ opacity:.35; cursor:default; }
.bqf-stepper-btn[disabled]:hover{ background:var(--bq-bg-surface, var(--bq-bg-card,#fff)); }
.bqf-stepper-val{
    min-width:26px; text-align:center; font-size:14px; font-weight:800; color:var(--bq-text, #0f172a);
    border-left:1.5px solid var(--bq-border, #e5e7eb); border-right:1.5px solid var(--bq-border, #e5e7eb);
    padding:0 4px; line-height:32px;
}
#bqf-steps-titles{ display:flex; flex-direction:column; gap:8px; margin-top:12px; animation:bqfIn .18s ease; }
.bqf-step-title-row{ display:flex; align-items:center; gap:9px; }
.bqf-step-title-badge{
    width:26px; height:26px; border-radius:50%; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:var(--bq-primary-light, rgba(58,89,239,.12)); color:var(--bqf-accent, var(--bq-primary,#3A59EF));
    font-size:11.5px; font-weight:800;
}
.bqf-step-title-row .bqf-input{ padding:9px 12px; font-size:13.5px; }

/* ── [Secciones/pasos] Selector de sección dentro de cada tarjeta de campo ── */
.bqf-field-step-row{
    display:flex; align-items:center; gap:8px; margin:2px 0 10px;
    padding:6px 8px; border-radius:9px; background:var(--bq-primary-light, rgba(58,89,239,.06));
}
.bqf-field-step-label{ font-size:11.5px; font-weight:700; color:var(--bqf-accent, var(--bq-primary,#3A59EF)); flex:0 0 auto; }
.bqf-field-step-row .bqf-select{ padding:5px 9px; font-size:12.5px; }

/* ── [Secciones/pasos] Visor público: indicador + navegación entre pasos ── */
.bqf-step-indicator{ margin-bottom:16px; }
.bqf-step-dots{ display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.bqf-step-dot{
    height:6px; flex:1; border-radius:999px; border:none; padding:0; cursor:default;
    background:var(--bq-border, #e5e7eb); transition:background .25s ease, transform .2s ease;
}
.bqf-step-dot[disabled]{ opacity:1; }
.bqf-step-dot.is-done{ background:var(--bqf-accent, var(--bq-primary,#3A59EF)); opacity:.55; }
.bqf-step-dot.is-active{ background:var(--bqf-accent, var(--bq-primary,#3A59EF)); }
.bqf-step-current-title{ font-size:13px; font-weight:700; color:var(--bq-text-secondary, #64748b); }
/* Todas las secciones se pintan al DOM de una — sólo la activa se muestra —
   así el envío final puede seguir leyendo cualquier campo sin importar en
   qué paso quedó (mismo criterio que ya usaba el formulario "clásico"). */
.bqf-step{ display:none; }
.bqf-step.is-active{ display:block; animation:bqfStepIn .28s cubic-bezier(.22,1,.36,1); }
@keyframes bqfStepIn{ from{ opacity:0; transform:translateX(10px);} to{ opacity:1; transform:none;} }

@keyframes bqfIn{ from{ opacity:0; transform:translateY(-4px);} to{ opacity:1; transform:none;} }
@keyframes bqfPop{ from{ transform:scale(.4); opacity:0;} to{ transform:scale(1); opacity:1;} }

/* Toast propio (fallback) */
.bqf-toast{
    position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
    z-index:100001; background:#0f172a; color:#fff; font-size:13.5px; font-weight:600;
    padding:11px 18px; border-radius:999px; 
    opacity:0; transition:opacity .2s ease, transform .2s ease; pointer-events:none;
    display:flex; align-items:center; gap:8px; max-width:88vw;
}
.bqf-toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }
.bqf-toast--ok{ background:#16a34a; }
.bqf-toast--err{ background:#dc2626; }

@media (max-width:560px){
    .bqf-mgr-head{ flex-wrap:wrap; }
    .bqf-create-btn{ width:100%; justify-content:center; order:3; }
    .bqf-overlay{ align-items:flex-end; }
    .bqf-modal{ max-width:none; max-height:94vh; border-radius:22px 22px 0 0; }
    .bqf-deliv{ grid-template-columns:1fr; }
}