/* ── Editor (CodeMirror) y vista de lectura ──────────────────── */
:root {
  --h1: 1.75em; --h2: 1.45em; --h3: 1.25em; --h4: 1.1em; --h5: 1em; --h6: .95em;
  --code-bg: color-mix(in srgb, var(--text) 6%, transparent);
  --tk-clave: #a626a4; --tk-cadena: #50a14f; --tk-numero: #c18401; --tk-comentario: #8e8e99;
  --tk-funcion: #4078f2; --tk-tipo: #c45f00; --tk-propiedad: #0184bc; --tk-etiqueta: #e45649;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tk-clave: #c678dd; --tk-cadena: #98c379; --tk-numero: #d19a66; --tk-comentario: #7f848e;
    --tk-funcion: #61afef; --tk-tipo: #e5c07b; --tk-propiedad: #56b6c2; --tk-etiqueta: #e06c75;
  }
}
:root[data-theme="dark"] {
  --tk-clave: #c678dd; --tk-cadena: #98c379; --tk-numero: #d19a66; --tk-comentario: #7f848e;
  --tk-funcion: #61afef; --tk-tipo: #e5c07b; --tk-propiedad: #56b6c2; --tk-etiqueta: #e06c75;
}

.vista-cuerpo .cm-editor { background: transparent; color: var(--text); font-size: 1em; }
.vista-cuerpo .cm-editor.cm-focused { outline: none; }
.vista-cuerpo .cm-scroller { font-family: var(--font-texto); line-height: 1.7; overflow: visible; }
.vista-cuerpo .cm-content { padding: 0 0 2em; caret-color: var(--accent); }
.vista-cuerpo .cm-line { padding: 0; }
.cm-editor .cm-cursor { border-left: 2px solid var(--accent); }
.cm-editor .cm-selectionBackground { background: color-mix(in srgb, var(--accent) 18%, transparent) !important; }
.cm-editor.cm-focused .cm-selectionBackground { background: color-mix(in srgb, var(--accent) 28%, transparent) !important; }
.cm-editor .cm-selectionMatch { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.cm-editor .cm-matchingBracket { background: color-mix(in srgb, var(--accent) 22%, transparent) !important; outline: none; }
.cm-editor .cm-placeholder { color: var(--muted); }

/* Resaltado de sintaxis */
.tk-titulo { font-weight: 700; color: var(--text); }
.tk-negrita { font-weight: 700; }
.tk-cursiva { font-style: italic; }
.tk-tachado { text-decoration: line-through; color: var(--muted); }
.tk-enlace { color: var(--accent-text); }
.tk-mono { font-family: var(--font-mono); font-size: .88em; }
.tk-marca { color: var(--muted); }
.tk-cita { color: var(--text-2); }
.tk-clave { color: var(--tk-clave); }
.tk-cadena { color: var(--tk-cadena); }
.tk-numero { color: var(--tk-numero); }
.tk-comentario { color: var(--tk-comentario); font-style: italic; }
.tk-funcion { color: var(--tk-funcion); }
.tk-tipo { color: var(--tk-tipo); }
.tk-propiedad { color: var(--tk-propiedad); }
.tk-etiqueta { color: var(--tk-etiqueta); }
.tk-meta { color: var(--muted); }

/* Vista en vivo */
.modo-vivo .cm-h { font-weight: 700; line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; }
.modo-vivo .cm-h1 { font-size: var(--h1); padding-top: .5em !important; }
.modo-vivo .cm-h2 { font-size: var(--h2); padding-top: .45em !important; }
.modo-vivo .cm-h3 { font-size: var(--h3); padding-top: .35em !important; }
.modo-vivo .cm-h4 { font-size: var(--h4); padding-top: .3em !important; }
.modo-vivo .cm-h5 { font-size: var(--h5); }
.modo-vivo .cm-h6 { font-size: var(--h6); color: var(--text-2); }
.modo-vivo .cm-h .tk-marca { font-weight: 400; }
.modo-vivo .cm-codigo-linea { font-family: var(--font-mono); font-size: .88em; background: var(--code-bg); border-radius: 4px; padding: .1em .3em; }
.modo-vivo .cm-bloque-codigo { font-family: var(--font-mono); font-size: .88em; background: var(--code-bg); padding: 0 1em !important; }
.modo-vivo .cm-bloque-inicio { border-radius: 6px 6px 0 0; padding-top: .3em !important; }
.modo-vivo .cm-bloque-fin { border-radius: 0 0 6px 6px; padding-bottom: .3em !important; }
.modo-vivo .cm-bloque-inicio .tk-marca, .modo-vivo .cm-bloque-fin .tk-marca { opacity: .6; }
.modo-vivo .cm-cita { border-left: 3px solid var(--accent); padding-left: 1em !important; color: var(--text-2); }
.modo-vivo .cm-enlace { color: var(--accent-text); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; cursor: pointer; }
.modo-vivo .cm-url:not(.cm-enlace) { color: var(--muted); }
.cm-vineta { display: inline-block; width: 1ch; color: var(--muted); text-align: center; transform: scale(1.3); }
.cm-casilla {
  appearance: none; width: 1.05em; height: 1.05em; margin: 0 .35em 0 0; vertical-align: -.17em;
  border: 1.5px solid var(--border-strong); border-radius: 4px; cursor: pointer;
  background: var(--bg); transition: background .1s, border-color .1s;
}
.cm-casilla:hover { border-color: var(--accent); }
.cm-casilla:checked {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 75% no-repeat;
  border-color: var(--accent);
}
.cm-tarea-hecha { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.cm-separador { display: inline-block; width: 100%; height: 1px; background: var(--border-strong); vertical-align: middle; }
.cm-imagen { display: block; max-width: 100%; max-height: 70vh; margin: .4em 0; border-radius: 6px; }

/* Buscar y reemplazar */
.cm-editor .cm-panels { background: var(--bg-side); color: var(--text); border-color: var(--border); position: sticky; }
.cm-editor .cm-panels.cm-panels-top { border-bottom: 1px solid var(--border); top: 0; }
.cm-panel.cm-search { padding: 8px 10px; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cm-panel.cm-search input[type=text], .cm-panel.cm-search .cm-textfield {
  height: 28px; padding: 0 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font-size: 13px;
}
.cm-panel.cm-search .cm-textfield:focus { outline: none; border-color: var(--accent); }
.cm-panel.cm-search .cm-button {
  height: 28px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-elev); background-image: none; color: var(--text); font-size: 12.5px;
}
.cm-panel.cm-search .cm-button:hover { background: var(--bg-hover); }
.cm-panel.cm-search label { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.cm-panel.cm-search [name=close] { margin-left: auto; border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.cm-editor .cm-searchMatch { background: color-mix(in srgb, #f59e0b 35%, transparent); border-radius: 2px; }
.cm-editor .cm-searchMatch-selected { background: color-mix(in srgb, #f59e0b 70%, transparent); }

/* ── Vista de lectura ─────────────────────────────────────── */
.markdown { line-height: 1.7; color: var(--text); overflow-wrap: break-word; }
.markdown > :first-child { margin-top: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown h6 { line-height: 1.3; letter-spacing: -.01em; margin: 1.4em 0 .5em; text-wrap: balance; }
.markdown h1, .markdown h2 { padding-bottom: .25em; border-bottom: 1px solid var(--border); }
.markdown h1 { font-size: var(--h1); }
.markdown h2 { font-size: var(--h2); }
.markdown h3 { font-size: var(--h3); }
.markdown h4 { font-size: var(--h4); }
.markdown h5 { font-size: var(--h5); }
.markdown h6 { font-size: var(--h6); color: var(--text-2); }
.markdown p, .markdown ul, .markdown ol, .markdown blockquote, .markdown pre, .markdown table { margin: 0 0 1em; }
.markdown ul, .markdown ol { padding-left: 1.6em; }
.markdown li > ul, .markdown li > ol { margin: 0; }
.markdown li.tarea { list-style: none; margin-left: -1.4em; }
.markdown li.tarea-hecha { color: var(--muted); text-decoration: line-through; }
.markdown .tarea-casilla { appearance: none; width: 1.05em; height: 1.05em; margin: 0 .35em 0 0; vertical-align: -.17em; border: 1.5px solid var(--border-strong); border-radius: 4px; cursor: pointer; background: var(--bg); }
.markdown .tarea-casilla:checked {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 75% no-repeat;
  border-color: var(--accent);
}
.markdown a { color: var(--accent-text); text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.markdown blockquote { margin-left: 0; padding: .1em 0 .1em 1em; border-left: 3px solid var(--accent); color: var(--text-2); }
.markdown blockquote > :last-child { margin-bottom: 0; }
.markdown code { font-family: var(--font-mono); font-size: .88em; background: var(--code-bg); border-radius: 4px; padding: .1em .3em; }
.markdown pre { background: var(--code-bg); border-radius: 6px; padding: .8em 1em; overflow-x: auto; }
.markdown pre code { background: none; padding: 0; font-size: .88em; }
.markdown hr { border: 0; height: 1px; background: var(--border-strong); margin: 2em 0; }
.markdown img { max-width: 100%; border-radius: 6px; }
.markdown table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; width: max-content; font-size: .94em; }
.markdown th, .markdown td { border-bottom: 1px solid var(--border); padding: .5em .9em; text-align: left; vertical-align: top; }
.markdown th { font-weight: 600; color: var(--text-2); border-bottom: 2px solid var(--border-strong); white-space: nowrap; }
.markdown tbody tr:nth-child(even) { background: color-mix(in srgb, var(--text) 3%, transparent); }
.markdown tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.markdown tbody tr:last-child td { border-bottom: 0; }
.markdown td[style*="right"] { font-variant-numeric: tabular-nums; }

/* ==resaltado== */
.markdown mark, .modo-vivo .cm-resaltado {
  background: color-mix(in srgb, #facc15 38%, transparent); color: inherit; border-radius: 3px; padding: 0 .1em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Notas al pie */
.markdown .footnote-ref { font-size: .75em; line-height: 0; }
.markdown .footnote-ref a { text-decoration: none; padding: 0 .15em; font-weight: 600; }
.markdown .footnotes-sep { margin: 2.5em 0 1em; }
.markdown .footnotes { font-size: .88em; color: var(--text-2); }
.markdown .footnotes-list { padding-left: 1.4em; }
.markdown .footnote-backref { text-decoration: none; margin-left: .2em; }
.modo-vivo .cm-nota-pie { font-size: .8em; vertical-align: super; line-height: 0; color: var(--accent-text); font-weight: 600; }

/* ── Callouts ─────────────────────────────────────────────── */
/* --callout: color del tipo en "r g b", para usarlo con distintas opacidades */
[data-callout] { --callout: 8 109 221; }
[data-callout="abstract"], [data-callout="tip"] { --callout: 0 168 166; }
[data-callout="success"] { --callout: 8 160 70; }
[data-callout="question"], [data-callout="warning"] { --callout: 224 112 0; }
[data-callout="failure"], [data-callout="danger"], [data-callout="bug"] { --callout: 224 49 71; }
[data-callout="example"] { --callout: 120 82 238; }
[data-callout="quote"] { --callout: 140 140 150; }

.markdown .callout {
  margin: 0 0 1em; padding: .7em 1em; border-radius: 0 8px 8px 0;
  background: rgb(var(--callout) / .09); border-left: 3px solid rgb(var(--callout) / .8);
}
.markdown .callout-titulo { display: flex; align-items: center; gap: .45em; font-weight: 600; color: color-mix(in srgb, rgb(var(--callout)) 85%, var(--text)); list-style: none; }
.markdown .callout-titulo::-webkit-details-marker { display: none; }
.markdown summary.callout-titulo { cursor: pointer; user-select: none; }
.markdown summary.callout-titulo > svg.icon { width: 1em; height: 1em; margin-left: .1em; opacity: .7; transition: transform .15s var(--ease); }
.markdown details.callout:not([open]) summary.callout-titulo > svg.icon { transform: rotate(-90deg); }
.markdown .callout-icono { display: inline-grid; place-items: center; }
.markdown .callout-icono svg.icon { width: 1.05em; height: 1.05em; }
.markdown .callout-texto { min-width: 0; }
.markdown .callout-cuerpo { margin-top: .4em; color: var(--text); }
.markdown .callout-cuerpo > :last-child { margin-bottom: 0; }
.markdown .callout-cuerpo:empty { display: none; }

/* En vivo: cada línea de la cita lleva el fondo; la primera y la última cierran la caja */
.modo-vivo .cm-callout {
  background: rgb(var(--callout) / .09); border-left: 3px solid rgb(var(--callout) / .8);
  padding: 0 1em !important; color: var(--text);
}
.modo-vivo .cm-callout-titulo { padding-top: .45em !important; border-top-right-radius: 8px; font-weight: 600; color: color-mix(in srgb, rgb(var(--callout)) 85%, var(--text)); }
.modo-vivo .cm-callout-fin { padding-bottom: .45em !important; border-bottom-right-radius: 8px; }
.cm-callout-cab { display: inline-flex; align-items: center; gap: .45em; margin-right: .45em; vertical-align: -.12em; color: rgb(var(--callout)); }
.cm-callout-cab svg.icon { width: 1.05em; height: 1.05em; }
.vista.en-lectura .titulo-inline { cursor: default; }

/* Callouts plegables en vivo: la flecha pliega o despliega sin tocar el texto */
.cm-callout-flecha { display: inline-grid; place-items: center; margin-left: .15em; opacity: .7; cursor: pointer; border-radius: 4px; }
.cm-callout-flecha:hover { opacity: 1; background: rgb(var(--callout) / .15); }
.cm-callout-flecha svg.icon { width: 1em; height: 1em; transition: transform .15s var(--ease); }
.cm-callout-flecha.is-plegado svg.icon { transform: rotate(-90deg); }

/* ── Fórmulas (KaTeX) ─────────────────────────────────────── */
.markdown .formula-bloque, .cm-formula-bloque { display: block; overflow-x: auto; overflow-y: hidden; text-align: center; }
.markdown .formula-bloque { margin: 0 0 1em; }
.cm-formula { cursor: text; }
/* Padding y no margin: el editor no cuenta el margin de un widget de bloque al medir las líneas */
.cm-formula-bloque { padding: .5em 0; border-radius: 6px; }
.cm-formula-bloque:hover { background: var(--code-bg); }
.modo-vivo .cm-formula-fuente { font-family: var(--font-mono); font-size: .88em; color: var(--tk-funcion); }
.katex { font-size: 1.1em; }
.katex-display { margin: 0; }

/* ^id de un bloque: atenuado en el editor, oculto en la lectura */
.cm-id-bloque { color: var(--muted); opacity: .6; font-size: .85em; }
.markdown .id-bloque, .markdown .solo-id-bloque { display: none; }

/* ── Plegar títulos y listas ──────────────────────────────── */
/* El margen de las flechas queda a la izquierda del texto, sin correrlo */
.vista-cuerpo .cm-gutters { background: transparent; border: 0; margin-left: -24px; position: relative !important; }
.cm-margen-pliegues { width: 24px; }
.cm-margen-pliegues .cm-gutterElement { display: flex; align-items: flex-start; justify-content: center; }
.cm-pliegue { display: grid; place-items: center; width: 20px; height: 1.7em; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .12s; }
.cm-pliegue svg.icon { width: 14px; height: 14px; }
.cm-editor:hover .cm-pliegue { opacity: .45; }
.cm-editor .cm-pliegue:hover { opacity: 1; color: var(--text); }
.cm-pliegue.is-plegado { opacity: .8 !important; }
/* En vivo los títulos son más altos y llevan espacio arriba: la flecha va a la altura del texto */
.modo-vivo .cm-pliegue[data-h="1"] { height: calc(var(--h1) * 1.3); margin-top: calc(var(--h1) * .5); }
.modo-vivo .cm-pliegue[data-h="2"] { height: calc(var(--h2) * 1.3); margin-top: calc(var(--h2) * .45); }
.modo-vivo .cm-pliegue[data-h="3"] { height: calc(var(--h3) * 1.3); margin-top: calc(var(--h3) * .35); }
.modo-vivo .cm-pliegue[data-h="4"] { height: calc(var(--h4) * 1.3); margin-top: calc(var(--h4) * .3); }
.modo-vivo .cm-pliegue[data-h="5"], .modo-vivo .cm-pliegue[data-h="6"] { height: 1.3em; }
.cm-pliegue-resto {
  display: inline-block; margin-left: .4em; padding: 0 .45em; border-radius: 4px; line-height: 1.4;
  background: var(--code-bg); color: var(--muted); font-size: .85em; cursor: pointer; vertical-align: .05em;
}
.cm-pliegue-resto:hover { color: var(--text); background: var(--bg-hover); }
.cm-editor .cm-foldPlaceholder { background: none; border: 0; padding: 0; }