/* Paso de esquema editable (Ronda 6). Usa las variables del tema de la página. */
.sl-outline { margin: 8px 0 4px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.sl-ol-head h3 { margin: 0 0 4px; font-size: 17px; }
.sl-ol-head p { margin: 0; font-size: 13px; color: var(--muted); }
.sl-ol-title { font: 600 18px/1.3 var(--font); padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text); }
.sl-ol-list { margin: 0; padding-left: 1.6em; display: flex; flex-direction: column; gap: 10px; }
.sl-ol-list li { display: flex; gap: 10px; align-items: flex-start; }
.sl-ol-main { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sl-ol-main input, .sl-ol-main textarea { width: 100%; box-sizing: border-box; border: 1px solid transparent; border-radius: 8px; padding: 5px 8px; background: transparent; color: var(--text); font: 15px/1.4 var(--font); resize: vertical; }
.sl-ol-main input { font-weight: 600; }
.sl-ol-main textarea { color: var(--muted); font-size: 14px; }
.sl-ol-main input:hover, .sl-ol-main textarea:hover, .sl-ol-main input:focus, .sl-ol-main textarea:focus { border-color: var(--border); outline: none; }
.sl-ol-tools { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.sl-ol-tools select { width: 130px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; padding: 5px 6px; font: 13px var(--font); }
.sl-ol-tools .sl-btn { padding: 5px 9px; }
.sl-ol-foot { display: flex; justify-content: space-between; gap: 8px; }
@media (max-width: 560px) { .sl-ol-list li { flex-direction: column; } .sl-ol-tools { align-self: flex-end; } }
.sl-styles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }