/* Estilos propios de /insertar/. La base común está en assets/kalculia-ui.css. */

/* Configurador y vista previa: una columna en móvil, dos a partir de 960px */
.ins-builder { display: grid; grid-template-columns: 1fr; gap: var(--s-5); align-items: start; margin-top: var(--s-4); }
@media (min-width: 960px) { .ins-builder { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

.ins-panel { background: var(--surface); border-radius: var(--radius-xl); padding: var(--s-5) var(--s-4); box-shadow: var(--shadow-card); }
@media (min-width: 720px) { .ins-panel { padding: var(--s-6); } }
.ins-panel h2, .ins-preview h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: var(--s-4); }
.ins-group { border: 0; padding: 0; margin: 0 0 var(--s-4); }
.ins-group legend { padding: 0; margin-bottom: var(--s-2); font-size: .84rem; font-weight: 600; color: var(--text-muted); }
.ins-choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ins-choices .radio-pill { min-height: 44px; }
.ins-group .field-hint { display: block; margin-top: var(--s-2); }
.ins-check { margin-bottom: var(--s-2); }

.ins-code-title { margin-top: var(--s-6); }
.ins-code { display: block; min-height: 9.5rem; resize: vertical; font-family: var(--mono); font-size: .8rem; font-weight: 500; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.ins-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.ins-copy-status { font-size: .88rem; font-weight: 600; color: var(--accent); }

.ins-preview-note { margin-top: calc(-1 * var(--s-3)); margin-bottom: var(--s-3); font-size: .9rem; color: var(--text-muted); }
.ins-preview-box { padding: var(--s-4); border-radius: var(--radius-xl); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--rule); }
.ins-preview-box .kalculia-widget > p { margin-top: var(--s-2); font-size: .88rem; color: var(--text-muted); }
.ins-preview-box .kalculia-widget a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ins-preview-box iframe { margin-inline: auto; }

/* Artículo */
.ins-article { padding-block: var(--s-7) var(--s-4); max-width: 760px; margin-inline: auto; }
.ins-article > section { margin-bottom: var(--s-7); }
.ins-article h2 { font-size: clamp(1.4rem, 3.4vw, 1.9rem); margin-bottom: var(--s-4); font-weight: 800; letter-spacing: -0.025em; }
.ins-article p { margin-bottom: var(--s-3); max-width: 68ch; }
.ins-article > section > p a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ins-list { display: flex; flex-direction: column; gap: var(--s-2); max-width: 68ch; }
.ins-list li { padding-left: 1.4em; position: relative; }
.ins-list li::before { content: "—"; position: absolute; left: 0; color: var(--text-muted); }
.ins-list a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ins-article code { font-family: var(--mono); font-size: .86em; padding: .1em .35em; border-radius: 6px; background: var(--surface-2); overflow-wrap: anywhere; }