/* Configurador del widget (/widget.html): formulario, vista previa y código para copiar. Usa las variables de sitio.css. */
.wcfg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 40px;align-items:start}
.wcfg form{display:grid;gap:16px}
.wcfg label,.wcfg legend{font-weight:600;color:var(--s-ink)}
.wcfg fieldset{border:1px solid var(--s-line);border-radius:12px;padding:12px 16px 14px;margin:0;background:var(--s-card)}
.wcfg fieldset label{font-weight:400;margin-right:16px;white-space:nowrap}
.wcfg input[type=text],.wcfg input[type=search],.wcfg select,.wcfg textarea{font:inherit;font-size:16px;color:var(--s-ink);background:var(--s-card);border:1.5px solid var(--s-line);border-radius:10px;padding:9px 12px;width:100%}
.wcfg textarea{font:13px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;min-height:96px;resize:vertical}
.wcfg .fila{display:flex;gap:8px;margin-top:6px}
.wcfg .fila input{flex:1}
.wcfg button{font:inherit;cursor:pointer}
.wcfg .btn{padding:9px 18px;font-size:15px}
.wcfg .ayuda{font-size:14px;color:var(--s-muted);margin:6px 0 0}
.wcfg .resultados{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:4px}
.wcfg .resultados button,.wcfg .chip{background:var(--s-card);border:1px solid var(--s-line);border-radius:999px;padding:6px 12px;color:var(--s-ink);text-align:left}
.wcfg .resultados button:hover,.wcfg .chip:hover{border-color:var(--s-accent)}
.wcfg .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.wcfg .previa{position:sticky;top:84px;display:grid;gap:12px}
.wcfg .marco{background:var(--s-bg2);border:1px dashed var(--s-line);border-radius:14px;padding:18px;resize:horizontal;overflow:auto;min-width:240px;max-width:100%}
.wcfg .codigo{display:grid;gap:6px}
.wcfg .codigo .cab{display:flex;justify-content:space-between;align-items:center;gap:10px}
.wcfg h3{margin:0;font-size:20px}
@media (max-width:860px){.wcfg{grid-template-columns:1fr}.wcfg .previa{position:static}}
@media (max-width:600px){.wcfg fieldset label{white-space:normal;display:block}}