/* =============================================================================
   Utiliobox — estilos propios del editor de Markdown.
   Solo tokens de utiliobox.css. Reutiliza tabs, notice, textarea, btn, check y
   btn-row del sistema compartido; aquí vive únicamente lo de esta herramienta:
   la barra de formato, el editor dividido y el estilo de la vista previa.
   ============================================================================= */

/* --- Cabecera --- */
.mk-head {
  display: flex; align-items: center; gap: var(--s-3) var(--s-4); flex-wrap: wrap;
  padding: 0 var(--s-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.mk-tabs { border-bottom: 0; flex: 1 1 auto; min-width: 0; }
.mk-priv {
  display: inline-flex; align-items: center; gap: var(--s-2); flex: none;
  padding: var(--s-2) 0;
  font-size: var(--fs-2xs); font-weight: var(--fw-medium); color: var(--ok);
}
.mk-priv svg { width: 15px; height: 15px; flex: none; }

/* --- Barra de formato --- */
.mk-toolbar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.mk-b {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 32px; padding: 0 var(--s-2);
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: none; color: var(--ink-soft);
  font-family: var(--sans); font-size: var(--fs-xs); font-weight: var(--fw-semi);
  line-height: 1; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mk-b:hover { background: var(--surface-sunken); color: var(--ink); }
.mk-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mk-b svg { width: 16px; height: 16px; }
.mk-b--bold   { font-weight: var(--fw-bold); }
.mk-b--italic { font-style: italic; font-family: Georgia, serif; }
.mk-b--strike { text-decoration: line-through; }
.mk-sep { width: 1px; height: 20px; margin: 0 var(--s-2); background: var(--border); flex: none; }
.mk-tbend { margin-left: auto; display: flex; gap: var(--s-2); }

/* --- El editor dividido --- */
.mk-split {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--border);
  gap: 1px;
}
.mk-side { display: flex; flex-direction: column; min-width: 0; background: var(--surface); }

.mk-src {
  flex: 1 1 auto; width: 100%; min-height: 420px; resize: vertical;
  padding: var(--s-4);
  border: 0; border-radius: 0; background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.7; tab-size: 2;
}
.mk-src:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.mk-src::placeholder { color: var(--ink-mute); font-family: var(--sans); }

.mk-preview {
  flex: 1 1 auto; min-height: 420px; height: 420px;
  overflow-y: auto; overflow-x: auto; overscroll-behavior: contain;
  padding: var(--s-4) var(--s-5);
  background: var(--surface); color: var(--ink);
  font-size: var(--fs-sm); line-height: var(--lh-base);
}

/* --- Barra inferior --- */
.mk-bar {
  display: flex; align-items: center; gap: var(--s-3) var(--s-4); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--border); background: var(--surface-alt);
}
.mk-count {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-mute);
}

/* --- Paneles de salida --- */
.mk-outbar {
  display: flex; align-items: center; gap: var(--s-3) var(--s-4); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border); background: var(--surface);
}
.mk-outhint { margin: 0; flex: 1 1 260px; min-width: 0; font-size: var(--fs-xs); color: var(--ink-soft); }
.mk-outbar .btn-row { flex: none; align-items: center; }
.mk-out {
  width: 100%; min-height: 420px; resize: vertical;
  padding: var(--s-4);
  border: 0; border-radius: 0; background: var(--surface); color: var(--ink);
  font-family: var(--mono); font-size: var(--fs-2xs); line-height: 1.65; tab-size: 2;
  white-space: pre; overflow-wrap: normal;
}
.mk-out:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.mk-intro { margin: 0; padding: var(--s-3) var(--s-4) 0; font-size: var(--fs-xs); color: var(--ink-soft); }
#mk-warn-html:not(:empty), #mk-rev-note:not(:empty) { padding: var(--s-3) var(--s-4) 0; }
.mk-split--rev .mk-src { min-height: 380px; }
.mk-split--rev #mk-rev-out { white-space: pre-wrap; overflow-wrap: anywhere; }

/* =============================================================================
   La vista previa. Es Markdown renderizado, así que necesita el juego completo
   de estilos tipográficos; se acota a .mk-preview para no tocar nada del sitio.
   ============================================================================= */
.mk-preview > :first-child { margin-top: 0; }
.mk-preview > :last-child { margin-bottom: 0; }
.mk-preview h1, .mk-preview h2, .mk-preview h3,
.mk-preview h4, .mk-preview h5, .mk-preview h6 {
  margin: 1.5em 0 .5em; line-height: var(--lh-tight);
  font-weight: var(--fw-bold); color: var(--ink); overflow-wrap: anywhere;
}
.mk-preview h1 { font-size: var(--fs-xl); padding-bottom: .25em; border-bottom: 1px solid var(--border); }
.mk-preview h2 { font-size: var(--fs-lg); padding-bottom: .25em; border-bottom: 1px solid var(--border); }
.mk-preview h3 { font-size: var(--fs-md); }
.mk-preview h4, .mk-preview h5, .mk-preview h6 { font-size: var(--fs-sm); }
.mk-preview p { margin: 0 0 1em; overflow-wrap: anywhere; }
.mk-preview a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.mk-preview strong { font-weight: var(--fw-bold); color: var(--ink); }
.mk-preview em { font-style: italic; }
.mk-preview del, .mk-preview s { color: var(--ink-mute); }
.mk-preview ul, .mk-preview ol { margin: 0 0 1em; padding-left: 1.6em; }
.mk-preview li { margin: .25em 0; }
.mk-preview li > ul, .mk-preview li > ol { margin: .25em 0; }
.mk-preview li > p { margin: 0 0 .5em; }
/* Listas de tareas: la casilla sustituye a la viñeta. Las clases las pone el
   propio analizador, que envuelve la casilla y el texto en una etiqueta. */
.mk-preview .contains-task-list { padding-left: .3em; }
.mk-preview .task-list-item { list-style: none; }
.mk-preview .task-list-item > label { display: inline; cursor: default; }
.mk-preview input[type="checkbox"] {
  width: 14px; height: 14px; margin-right: .45em; vertical-align: -1px;
  accent-color: var(--accent); pointer-events: none;
}
.mk-preview blockquote {
  margin: 0 0 1em; padding: var(--s-1) var(--s-4);
  border-left: 3px solid var(--border-strong); color: var(--ink-soft);
}
.mk-preview blockquote > :last-child { margin-bottom: 0; }
.mk-preview hr { margin: 1.75em 0; border: 0; border-top: 1px solid var(--border); }
.mk-preview img { max-width: 100%; height: auto; border-radius: var(--r-sm); }

.mk-preview code {
  font-family: var(--mono); font-size: .88em;
  background: var(--surface-sunken); padding: .15em .4em; border-radius: var(--r-xs);
  overflow-wrap: anywhere;
}
.mk-preview pre {
  margin: 0 0 1em; padding: var(--s-3) var(--s-4);
  background: var(--surface-sunken); border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow-x: auto;
}
.mk-preview pre code {
  background: none; padding: 0; border-radius: 0;
  font-size: var(--fs-2xs); line-height: 1.6; white-space: pre; overflow-wrap: normal;
}

/* Las tablas se desbordan a lo ancho dentro de su propia caja, nunca la página */
.mk-preview table {
  display: block; width: max-content; max-width: 100%;
  margin: 0 0 1em; border-collapse: collapse; overflow-x: auto;
  font-size: var(--fs-xs);
}
.mk-preview th, .mk-preview td {
  padding: var(--s-2) var(--s-3); border: 1px solid var(--border); text-align: left;
}
.mk-preview th { background: var(--surface-alt); font-weight: var(--fw-semi); }

/* Notas al pie */
.mk-preview .footnotes { margin-top: 2em; padding-top: var(--s-4); border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--ink-soft); }
.mk-preview .footnotes ol { padding-left: 1.4em; }
.mk-preview .footnote-backref { text-decoration: none; }
.mk-preview sup { font-size: .75em; }

/* -----------------------------------------------------------------------------
   Resaltado de código. Paleta propia con los tokens del sitio en vez del tema
   de la biblioteca: así respeta el modo claro y el oscuro sin cargar otro CSS.
   ----------------------------------------------------------------------------- */
.mk-preview .hljs-keyword, .mk-preview .hljs-selector-tag,
.mk-preview .hljs-literal, .mk-preview .hljs-doctag { color: #a626a4; }
.mk-preview .hljs-string, .mk-preview .hljs-regexp,
.mk-preview .hljs-addition { color: #166534; }
.mk-preview .hljs-number, .mk-preview .hljs-symbol,
.mk-preview .hljs-bullet { color: #8a3b00; }
/* El comentario no puede ir con --ink-mute: sobre el gris del bloque de
   codigo se queda en 3,99 de contraste. Medido, no supuesto. */
.mk-preview .hljs-comment, .mk-preview .hljs-quote { color: #4f5b6b; font-style: italic; }
[data-theme="dark"] .mk-preview .hljs-comment,
[data-theme="dark"] .mk-preview .hljs-quote { color: #9aa7b8; }
.mk-preview .hljs-title, .mk-preview .hljs-section,
.mk-preview .hljs-name, .mk-preview .hljs-selector-id { color: #1b4fa8; }
.mk-preview .hljs-attr, .mk-preview .hljs-attribute,
.mk-preview .hljs-variable, .mk-preview .hljs-template-variable { color: #6f4a00; }
.mk-preview .hljs-type, .mk-preview .hljs-built_in,
.mk-preview .hljs-class .hljs-title { color: #0b5a70; }
.mk-preview .hljs-deletion { color: var(--danger); }
.mk-preview .hljs-emphasis { font-style: italic; }
.mk-preview .hljs-strong { font-weight: var(--fw-bold); }

[data-theme="dark"] .mk-preview .hljs-keyword, [data-theme="dark"] .mk-preview .hljs-selector-tag,
[data-theme="dark"] .mk-preview .hljs-literal, [data-theme="dark"] .mk-preview .hljs-doctag { color: #d99ae0; }
[data-theme="dark"] .mk-preview .hljs-string, [data-theme="dark"] .mk-preview .hljs-regexp,
[data-theme="dark"] .mk-preview .hljs-addition { color: #86d99b; }
[data-theme="dark"] .mk-preview .hljs-number, [data-theme="dark"] .mk-preview .hljs-symbol,
[data-theme="dark"] .mk-preview .hljs-bullet { color: #f0a97a; }
[data-theme="dark"] .mk-preview .hljs-title, [data-theme="dark"] .mk-preview .hljs-section,
[data-theme="dark"] .mk-preview .hljs-name, [data-theme="dark"] .mk-preview .hljs-selector-id { color: #86b5f0; }
[data-theme="dark"] .mk-preview .hljs-attr, [data-theme="dark"] .mk-preview .hljs-attribute,
[data-theme="dark"] .mk-preview .hljs-variable, [data-theme="dark"] .mk-preview .hljs-template-variable { color: #e8c877; }
[data-theme="dark"] .mk-preview .hljs-type, [data-theme="dark"] .mk-preview .hljs-built_in,
[data-theme="dark"] .mk-preview .hljs-class .hljs-title { color: #7fd3e0; }

/* =============================================================================
   Tabla de sintaxis de la parte de contenido (indexable, sin JavaScript)
   ============================================================================= */
.mk-ref { overflow-x: auto; margin: var(--s-5) 0; }
.mk-ref table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-xs); }
.mk-ref th, .mk-ref td {
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border);
  text-align: left; vertical-align: top;
}
.mk-ref thead th { background: var(--surface-alt); font-weight: var(--fw-semi); color: var(--ink-soft); white-space: nowrap; }
.mk-ref tbody th { font-weight: var(--fw-medium); color: var(--ink); white-space: nowrap; }
.mk-ref code { font-family: var(--mono); font-size: .92em; overflow-wrap: anywhere; }
.mk-ref td:last-child { color: var(--ink-soft); }
.mk-ref tr:last-child th, .mk-ref tr:last-child td { border-bottom: 0; }

/* =============================================================================
   Impresión: al exportar el PDF solo se imprime la vista previa
   ============================================================================= */
@media print {
  /* Se imprime SOLO la vista previa. El contenedor de la herramienta lleva su
     propia clase en el HTML: deducirlo desde aqui era adivinar, y adivine mal
     —salia un PDF en blanco porque el selector no encajaba con nada—. */
  body.mk-printing > *:not(main) { display: none !important; }
  body.mk-printing main > *:not(.mk-print-root) { display: none !important; }
  body.mk-printing .mk-print-root > *:not(#mk-tool) { display: none !important; }
  body.mk-printing .mk-print-root { max-width: none; padding: 0; margin: 0; }
  body.mk-printing #mk-tool {
    border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; background: #fff !important; overflow: visible;
  }
  body.mk-printing .mk-head, body.mk-printing .mk-toolbar,
  body.mk-printing .mk-bar, body.mk-printing .mk-side:not(.mk-side--prev),
  body.mk-printing .mk-panel:not([data-panel="editor"]) { display: none !important; }
  body.mk-printing .mk-split { display: block; gap: 0; background: none; }
  body.mk-printing .mk-side--prev { display: block; }
  body.mk-printing .mk-preview {
    height: auto !important; min-height: 0; overflow: visible; padding: 0;
    font-size: 11pt; color: #000; background: #fff;
  }
  body.mk-printing .mk-preview pre { background: #f5f7f9; border-color: #ddd; white-space: pre-wrap; }
  body.mk-printing .mk-preview a { color: #000; }
  body.mk-printing .mk-preview h1, body.mk-printing .mk-preview h2,
  body.mk-printing .mk-preview h3 { break-after: avoid; }
  body.mk-printing .mk-preview pre, body.mk-printing .mk-preview table,
  body.mk-printing .mk-preview blockquote { break-inside: avoid; }
}

/* =============================================================================
   Móvil: el editor se apila y el desplazamiento sincronizado deja de tener
   sentido (no hay dos columnas que sincronizar), pero sigue siendo inofensivo.
   ============================================================================= */
@media (max-width: 860px) {
  .mk-split { grid-template-columns: 1fr; }
  .mk-src { min-height: 300px; }
  .mk-preview { min-height: 300px; height: 340px; }
  .mk-out { min-height: 300px; }
  .mk-head { padding: 0 var(--s-3); }
  .mk-toolbar { padding: var(--s-2); }
  .mk-tbend { margin-left: 0; }
}

/* Los subtítulos de la tabla de referencia (parte de contenido, sin JS) */
.mk-refhead {
  margin: var(--s-6) 0 var(--s-2);
  font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--ink);
}
.mk-refhead:first-of-type { margin-top: var(--s-4); }

/* Alto reservado de la tarjeta mientras el JavaScript la monta. Medido en el
   sitio, no estimado: sin esto la herramienta empuja al aparecer y eso es
   CLS en la primera pantalla. Si la herramienta cambia de tamaño, este
   número hay que volver a medirlo. */
#mk-tool { --alto-herramienta: 575px; }