/* Constructor de assessments: tarjetas de lista, plantillas y editor de tres columnas (esquema · pregunta · vista previa) */
:root{--iac:#5b5bd6;--l1:#c9463d;--l2:#d9921f;--l3:#3c78c9;--l4:#2f8f5b}
@media (prefers-color-scheme:dark){:root{--iac:#9c9cf5;--l1:#e0685f;--l2:#e2b666;--l3:#6ea2e6;--l4:#6fc68b}}

/* ---- Lista ---- */
.bx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.bx-card{padding:20px 20px 16px;display:flex;flex-direction:column;gap:12px;cursor:pointer;position:relative;overflow:hidden;transition:transform .22s var(--ease),box-shadow .22s,border-color .22s}
.bx-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--accent-2),var(--iac));opacity:0;transition:opacity .2s}
.bx-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--accent-2) 30%,var(--line))}
.bx-card:hover::before,.bx-card.is-default::before{opacity:1}
.bx-card.ghost{cursor:default;min-height:220px}
.bx-card.is-archived{cursor:default;opacity:.85}
.bx-card-top{display:flex;align-items:center;gap:10px}
.bx-card-ic{width:40px;height:40px;flex-shrink:0}.bx-card-ic svg{width:100%;height:100%}
.bx-badges{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.bx-card h3{font-family:var(--f-display);font-weight:400;font-size:25px;letter-spacing:-.01em;line-height:1.1}
.bx-card-desc{font-size:13.5px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.bx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.bx-stats div{background:var(--surface-2);padding:9px 6px;text-align:center;display:flex;flex-direction:column;gap:1px}
.bx-stats b{font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1}
.bx-stats span{font-size:11px;color:var(--ink-3)}
.bx-secs{display:flex;gap:5px;flex-wrap:wrap}
.bx-secs span{font-size:11.5px;padding:2px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent-2);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line-2);padding-top:12px;font-size:12.5px}

/* ---- Plantillas ---- */
.bx-tpls{display:flex;flex-direction:column;gap:8px}
.bx-tpl{display:grid;grid-template-columns:36px 1fr 20px;gap:12px;align-items:center;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;transition:border-color .15s,background-color .15s}
.bx-tpl:hover{border-color:var(--ink-3)}
.bx-tpl[aria-checked="true"]{border-color:var(--accent-2);background:var(--accent-soft)}
.bx-tpl-ic{width:34px;height:34px}.bx-tpl-ic svg{width:100%;height:100%}
.bx-tpl b{display:block;font-weight:500;font-size:14.5px}.bx-tpl small{font-size:12.5px;color:var(--ink-3)}
.bx-tpl i{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;color:transparent}
.bx-tpl[aria-checked="true"] i{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-ink)}

/* ---- Editor: barra ---- */
.bx-editor{min-height:calc(100vh - 60px)}
.bx-bar{position:sticky;top:60px;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bx-bar-in{max-width:1560px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bx-title{flex:1;min-width:220px;display:flex;flex-direction:column}
.bx-title input{font-family:var(--f-display);font-size:26px;border:0;background:transparent;color:var(--ink);padding:0;outline:none;letter-spacing:-.01em;width:100%}
.bx-title input:focus{box-shadow:inset 0 -2px 0 var(--accent-2)}
.bx-sub{font-size:12px;color:var(--ink-3)}
.bx-tabs button{display:inline-flex;align-items:center;gap:6px}
.bx-bar-act{display:flex;align-items:center;gap:6px}
.bx-state{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:5px 10px;border-radius:99px;white-space:nowrap;transition:background-color .2s,color .2s}
.bx-state.ok{color:var(--good);background:var(--good-soft)}.bx-state.run{color:var(--accent-2);background:var(--accent-soft)}
.bx-state.dirty{color:var(--ink-2);background:var(--surface-2)}.bx-state.err{color:var(--crit);background:var(--crit-soft);cursor:pointer}
.bx-state .spin{width:11px;height:11px;border-width:2px}

/* ---- Editor: columnas ---- */
.bx-body{max-width:1560px;margin:0 auto;padding:18px 24px 60px}
.bx-cols{display:grid;grid-template-columns:320px minmax(0,1fr) 330px;gap:16px;align-items:start}
.bx-cols>*{min-width:0}
.bx-outline{position:sticky;top:138px;max-height:calc(100vh - 158px);display:flex;flex-direction:column;overflow:hidden}
.bx-out-h{padding:10px;border-bottom:1px solid var(--line-2)}
.search.sm{min-width:0;flex:1}.search.sm input{height:34px;font-size:13.5px}.search.sm svg{top:9px}
.bx-list{list-style:none;margin:0;padding:6px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:1px}
.bx-out-f{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line-2)}
.bx-sec{display:flex;align-items:center;gap:2px;padding:10px 4px 4px;border-radius:8px}
.bx-sec.drop-in{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent-2)}
.bx-sec-t{flex:1;display:flex;align-items:center;gap:6px;border:0;background:none;cursor:pointer;padding:4px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:left;min-width:0}
.bx-sec-t svg{transition:transform .2s;transform:rotate(90deg);flex-shrink:0}
.bx-sec.col .bx-sec-t svg{transform:none}
.bx-sec-t span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-sec-t small{font-size:10.5px;background:var(--surface-2);border-radius:99px;padding:0 6px;color:var(--ink-3)}
.bx-sec .btn{opacity:0;transition:opacity .15s;width:26px;height:26px}
.bx-sec:hover .btn,.bx-sec .btn:focus-visible{opacity:1}
.bx-sec-in{font:inherit;text-transform:none;letter-spacing:0;font-family:var(--f-body);font-size:13px;width:100%;height:30px;border:1px solid var(--accent-2);border-radius:5px;padding:2px 6px;background:var(--surface);color:var(--ink)}
.bx-item{display:grid;grid-template-columns:12px 20px 1fr auto;gap:8px;align-items:center;padding:8px 8px;border-radius:9px;cursor:pointer;font-size:13.5px;border:1px solid transparent;transition:background-color .15s,border-color .15s}
.bx-item:hover{background:var(--surface-2)}
.bx-item.on{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent-2) 35%,transparent)}
.bx-item.has-issue{box-shadow:inset 3px 0 0 var(--crit)}
.bx-item.dragging{opacity:.35}
.bx-item.drop-before{box-shadow:inset 0 2px 0 var(--accent-2)}.bx-item.drop-after{box-shadow:inset 0 -2px 0 var(--accent-2)}
.bx-drag{color:var(--ink-3);cursor:grab;display:grid;place-items:center;opacity:.55}
.bx-item:hover .bx-drag{opacity:1}
.bx-type{width:18px;height:18px;color:var(--ink-3)}.bx-type svg{width:100%;height:100%}
.bx-item.on .bx-type{color:var(--accent-2)}
.bx-t{line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bx-t small{color:var(--ink-3);font-size:10.5px;margin-right:6px}
.bx-tags{display:flex;gap:3px}
.bx-tags i{font-style:normal;font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--surface-2);color:var(--ink-2)}
.bx-tags i.g{background:var(--crit-soft);color:var(--crit)}.bx-tags i.ia{background:color-mix(in srgb,var(--iac) 14%,var(--surface));color:var(--iac)}
.bx-empty{padding:18px;text-align:center;font-size:13px}

/* ---- Editor: pregunta ---- */
.bx-q{padding:22px 24px;display:flex;flex-direction:column;gap:18px;animation:rise .35s var(--ease) both}
.bx-q-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bx-q-h>div:first-child{display:flex;align-items:center;gap:10px;font-size:12.5px}
.pill.sm{height:20px;font-size:11px;padding:0 8px}.pill.sm::before{width:5px;height:5px}
.iapill{background:color-mix(in srgb,var(--iac) 12%,var(--surface));color:var(--iac)}
.bx-q-tools{display:flex;gap:2px}
.bx-probs{display:flex;gap:10px;align-items:flex-start;background:var(--crit-soft);color:var(--crit);border-radius:10px;padding:10px 14px;font-size:13px}
.bx-probs svg{margin-top:2px;flex-shrink:0}
.bx-types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bx-typecard{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;transition:border-color .15s,background-color .15s,transform .15s var(--ease)}
.bx-typecard:hover{border-color:var(--ink-3)}
.bx-typecard .ic{grid-row:1/3;width:26px;height:26px;color:var(--ink-3)}.bx-typecard .ic svg{width:100%;height:100%}
.bx-typecard b{font-size:14px;font-weight:500}.bx-typecard small{font-size:12px;color:var(--ink-3)}
.bx-typecard[aria-checked="true"]{border-color:var(--accent-2);background:var(--accent-soft)}
.bx-typecard[aria-checked="true"] .ic{color:var(--accent-2)}
.bx-qtext{font-family:var(--f-display);font-size:22px;line-height:1.25;min-height:70px;resize:vertical}
.bx-row{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
.bx-block{display:flex;flex-direction:column;gap:10px}
.bx-block-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.bx-block-h b{font-size:14px;font-weight:600}.bx-block-h .faint{font-size:12.5px}
.bx-dims{display:flex;gap:6px;flex-wrap:wrap}
.chipbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:7px 14px;font-size:13px;cursor:pointer;transition:all .15s}
.chipbtn:hover{border-color:var(--ink-3)}
.chipbtn[aria-pressed="true"]{background:var(--accent-2);border-color:var(--accent-2);color:var(--accent-ink)}
.bx-switches{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line-2);border-radius:12px;padding:4px}
.sw{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:10px 12px;border-radius:9px;cursor:pointer}
.sw:hover{background:var(--surface-2)}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw-ui{width:36px;height:21px;border-radius:99px;background:var(--sunk);position:relative;transition:background-color .2s}
.sw-ui::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .2s var(--ease)}
.sw input:checked+.sw-ui{background:var(--accent-2)}
.sw input:checked+.sw-ui::after{transform:translateX(15px)}
.sw input:focus-visible+.sw-ui{box-shadow:0 0 0 3px var(--ring)}
.sw input:disabled+.sw-ui{opacity:.6}
.sw b{display:block;font-weight:500;font-size:14px}.sw small{font-size:12.5px;color:var(--ink-3)}
.bx-gate{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:end;padding:14px;border-radius:12px;background:var(--crit-soft);animation:rise .3s var(--ease) both}
.bx-lvls{display:inline-flex;background:var(--sunk);border-radius:8px;padding:2px;gap:2px}
.bx-lvls .lv{border:0;background:transparent;min-width:30px;height:30px;padding:0 8px;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background-color .15s,color .15s}
.bx-lvls .lv:hover{background:var(--surface)}
.bx-lvls .lv[aria-checked="true"]{color:#fff}
.bx-lvls .lvn[aria-checked="true"]{background:var(--ink-3)}
.bx-lvls .lv1[aria-checked="true"]{background:var(--l1)}.bx-lvls .lv2[aria-checked="true"]{background:var(--l2)}
.bx-lvls .lv3[aria-checked="true"]{background:var(--l3)}.bx-lvls .lv4[aria-checked="true"]{background:var(--l4)}
.bx-lvls.big .lv{height:38px;padding:0 12px;display:inline-flex;align-items:center;gap:6px}
.bx-lvls.big small{font-weight:400;font-size:11.5px;opacity:.85}
.bx-open{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:12px;background:color-mix(in srgb,var(--iac) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--iac) 22%,var(--line))}
.bx-open svg{width:22px;height:22px;color:var(--iac);flex-shrink:0;margin-top:2px}
.bx-open b{font-weight:600}.bx-open p{font-size:13.5px;color:var(--ink-2)}
.bx-choices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bx-ch{display:grid;grid-template-columns:14px 22px 1fr auto auto auto;gap:8px;align-items:center;padding:4px;border-radius:10px;transition:background-color .15s}
.bx-ch:hover{background:var(--surface-2)}
.bx-ch .input{height:38px}
.bx-ch.other{grid-template-columns:14px 22px 1fr;font-size:13.5px;font-style:italic;padding:8px 4px}
.bx-ch.dragging{opacity:.35}.bx-ch.drop-before{box-shadow:0 -2px 0 var(--accent-2)}
.bx-key{font-size:12px;color:var(--ink-3);text-align:center}
.bx-excl{border:1px solid var(--line);background:var(--surface);border-radius:7px;font-size:12px;padding:6px 9px;cursor:pointer;color:var(--ink-3);white-space:nowrap}
.bx-excl[aria-pressed="true"]{border-color:var(--accent-2);color:var(--accent-2);background:var(--accent-soft)}
.bx-addch{align-self:flex-start}

/* ---- Vista previa ---- */
.bx-preview{position:sticky;top:138px;display:flex;flex-direction:column;gap:10px}
.bx-phone{border-radius:28px;padding:10px;background:linear-gradient(160deg,var(--ink) 0%,color-mix(in srgb,var(--ink) 70%,var(--accent)) 100%);box-shadow:var(--shadow-lg)}
.bx-phone-in{background:var(--bg);border-radius:20px;padding:22px 16px 16px;min-height:420px;display:flex;flex-direction:column;gap:10px}
.bx-pv-meta{display:flex;justify-content:space-between;gap:8px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.bx-pv-q{font-family:var(--f-display);font-weight:400;font-size:20px;line-height:1.2;margin-top:4px}
.bx-pv-d{font-size:12.5px;color:var(--ink-2)}
.bx-pv-help{font-size:11.5px;color:var(--accent-2)}
.bx-pv-opts{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.bx-pv-opt{display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:12.5px}
.bx-pv-opt span{width:20px;height:20px;border-radius:5px;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--f-mono);font-size:10px;color:var(--ink-3)}
.bx-pv-opt.other{font-style:italic}
.bx-pv-open{margin-top:6px;border:1px solid var(--line);border-radius:10px;background:var(--surface);min-height:110px;padding:10px;font-size:12px;color:var(--ink-3)}
.bx-pv-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:10px;font-size:12px;color:var(--ink-2)}
.bx-pv-foot b{background:var(--accent);color:var(--accent-ink);padding:7px 12px;border-radius:8px;font-weight:500}
.bx-pv-note{font-size:12px;padding:0 6px}

/* ---- Configuración ---- */
.bx-config{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:16px;align-items:start;max-width:1200px}
.bx-cfg-card{padding:22px;display:flex;flex-direction:column;gap:14px}
.bx-cfg-card h3{font-size:16px;font-weight:600}
.bx-cfg-card .sw{padding:10px 0}
.bx-sumgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.bx-sumgrid div{background:var(--surface-2);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:2px}
.bx-sumgrid b{font-family:var(--f-display);font-weight:400;font-size:26px;line-height:1}
.bx-sumgrid span{font-size:11.5px;color:var(--ink-3)}
.bx-how{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--ink-2)}
.danger-zone{border-color:color-mix(in srgb,var(--crit) 30%,var(--line))}
.danger-zone h3{color:var(--crit)}

@media (max-width:1320px){.bx-cols{grid-template-columns:300px minmax(0,1fr)}.bx-preview{display:none}}
@media (max-width:900px){
  .bx-cols{grid-template-columns:1fr}.bx-outline{position:static;max-height:420px}
  .bx-types{grid-template-columns:1fr}.bx-row{grid-template-columns:1fr}.bx-gate{grid-template-columns:1fr}
  .bx-ch{grid-template-columns:14px 22px 1fr auto;row-gap:6px}.bx-ch .bx-lvls{grid-column:3}
  .bx-bar{top:60px}.bx-title input{font-size:21px}.bx-bar-in{padding:10px 16px}.bx-body{padding:14px 16px 60px}
  .bx-sumgrid{grid-template-columns:repeat(2,1fr)}.bx-config{grid-template-columns:1fr}
}
@media (max-width:560px){.bx-bar-act .btn:not(.primary):not(.icon){display:none}.bx-stats b{font-size:19px}
  .bx-ch{grid-template-columns:14px 1fr auto;padding:8px 4px}.bx-ch .bx-key{display:none}.bx-ch .bx-lvls{grid-column:2/4}.bx-ch .bx-excl{grid-column:2}
  .bx-lvls .lv{min-width:26px;padding:0 6px}.bx-lvls.big{flex-wrap:wrap}.bx-q{padding:18px 16px}.bx-qtext{font-size:19px}
  .bx-grid{grid-template-columns:1fr}.bx-tabs{order:5;width:100%}.bx-tabs button{flex:1;justify-content:center}}
