/* Estilos compartidos por el editor de notebooks y su visor. */

:root {
  /* Ancho del documento: el MISMO en el editor y en el visor, para que una
     imagen o una gráfica ajustada al ancho de la celda se vea entera también
     en la página de lectura. Es el ancho exterior; dentro, el borde (1px) y
     el relleno (1rem) son también los mismos en los dos sitios. */
  --elder-doc-width: 980px;
  --elder-rail-width: 17rem;
  --elder-bg: #f5f6f8;
  --elder-cell-border: #dde1e6;
  /* El código estático (vista de lectura) va en tono claro, a juego con el
     resto de la página; el coloreado lo pone highlight.js (atom-one-light). */
  --elder-code-bg: #f7f8fa;
  --elder-code-fg: #383a42;
  --elder-accent: #6f42c1;
  --elder-accent-soft: #f1ecfb;
  --elder-out-border: #e3e6ea;
  --elder-error-bg: #fdecea;
  --elder-error-fg: #7a1f1f;
}

html, body {
  background: var(--elder-bg);
  min-height: 100%;
}

body {
  padding-top: 4.25rem;
}

/* El visor es una página pública: lleva la barra del sitio, que va en el
   flujo (sticky) y no necesita el hueco de la barra fija del editor. En
   columna, además, el pie queda abajo aunque el notebook sea muy corto. */
body.elder-public-page {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body.elder-public-page .elder-viewer-layout {
  flex: 1 0 auto;
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.navbar-brand .bi {
  color: var(--elder-accent);
}

/* ---------- Toolbar ---------- */
.elder-toolbar .btn {
  white-space: nowrap;
}

#kernel-status {
  font-size: 0.8rem;
}

#kernel-status .spinner-border {
  width: 0.85rem;
  height: 0.85rem;
  border-width: 0.15em;
}

/* ---------- Notebook title ---------- */
.elder-title-input {
  font-size: 1.75rem;
  font-weight: 700;
  border: 1px solid transparent;
  background: transparent;
  width: 100%;
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
}
.elder-title-input:hover {
  border-color: var(--elder-cell-border);
}
.elder-title-input:focus {
  outline: none;
  border-color: var(--elder-accent);
  background: #fff;
}

/* ---------- Cells (editor) ---------- */
.elder-cell {
  background: #fff;
  border: 1px solid var(--elder-cell-border);
  border-radius: 0.6rem;
  margin-bottom: 1rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  overflow: hidden;
}
.elder-cell:hover,
.elder-cell.is-active {
  box-shadow: 0 0.15rem 0.75rem rgba(20, 20, 40, 0.08);
  border-color: #c9bef0;
}

.elder-cell-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.6rem;
  background: #fafafd;
  border-bottom: 1px solid var(--elder-cell-border);
  flex-wrap: wrap;
}

.elder-cell-badge {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.55rem;
  border-radius: 1rem;
}
.elder-cell-badge.type-code {
  background: #e7f1ff;
  color: #0b5ed7;
}
.elder-cell-badge.type-markdown {
  background: var(--elder-accent-soft);
  color: var(--elder-accent);
}
.elder-cell-badge.type-image {
  background: #e6f7ec;
  color: #1a7f4b;
}
.elder-cell-badge.type-link {
  background: #e7f5fb;
  color: #0b7285;
}
.elder-cell-badge.type-pdf {
  background: #fdecec;
  color: #b02a2a;
}

.elder-cell-actions .btn {
  padding: 0.15rem 0.45rem;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Celda de código marcada como "plegada en la vista de lectura". */
.elder-hidden-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 1rem;
  background: #eef0f3;
  color: #6c757d;
}
.elder-cell.code-hidden .elder-cell-header {
  background: #f4f5f8;
}
.elder-cell.code-hidden .elder-code-editor {
  opacity: 0.72;
}
.elder-cell.code-hidden .elder-code-editor:focus-within {
  opacity: 1;
}

.elder-cell-body {
  padding: 0;
}

.elder-cell textarea.elder-md-source {
  width: 100%;
  border: 0;
  resize: vertical;
  min-height: 260px;
  padding: 0.75rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
}
.elder-cell textarea.elder-md-source:focus {
  outline: none;
}

.elder-md-preview {
  padding: 1rem 1.25rem;
  min-height: 120px;
}
.elder-md-preview:empty::before {
  content: "Vista previa vacía — escribe Markdown y pulsa ▶";
  color: #9aa0a6;
  font-style: italic;
}

.elder-code-editor {
  /* Flex items default to min-width:auto, which lets them grow to fit their
     content (a long code line) instead of respecting the row's width. That
     silently clipped long lines against .elder-cell's overflow:hidden with
     no way to reach the rest of the line. min-width:0 forces this item to
     stay within the row so CodeMirror's own horizontal scrollbar takes over. */
  min-width: 0;
}
.elder-code-editor .CodeMirror {
  height: auto;
  min-height: 60px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.45;
}
.elder-code-editor .CodeMirror-activeline-background {
  background: var(--elder-accent-soft);
}

.elder-exec-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #6c757d;
  font-size: 0.78rem;
  min-width: 3.5rem;
  text-align: right;
}

.elder-output-area {
  border-top: 1px dashed var(--elder-out-border);
  background: #fbfbfc;
  padding: 0.5rem 1rem;
}
.elder-output-area:empty {
  display: none;
  padding: 0;
  border-top: 0;
}

.elder-insert-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.35rem 0 1.1rem;
  opacity: 0.55;
  transition: opacity 0.15s ease;
}
.elder-insert-row:hover,
.elder-insert-row:focus-within {
  opacity: 1;
}
.elder-insert-row .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
@media (max-width: 575.98px) {
  /* En pantallas pequeñas los cinco botones no caben con texto: se dejan
     solo los iconos (el title sigue explicando cada uno). */
  .elder-insert-label {
    display: none;
  }
}

/* ================================================================
   Celdas de imagen, enlace y PDF (editor + viewer)
   ================================================================ */

/* ---------- Panel de edición común a las tres ---------- */
.elder-media-preview {
  padding: 0.75rem 1rem;
}
.elder-media-preview:empty {
  display: none;
}

.elder-media-controls {
  border-top: 1px dashed var(--elder-out-border);
  background: #fbfbfc;
  padding: 0.85rem 1rem 1rem;
}

.elder-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.6rem;
}
.elder-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6c757d;
}
.elder-field-hint {
  font-size: 0.75rem;
  color: #8a93a0;
  line-height: 1.35;
}
/* auto-fit: una sola columna en móvil, dos o más según quepan. */
.elder-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 0.15rem 1.25rem;
}

.elder-size-control {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.elder-size-control .form-range {
  flex: 1 1 auto;
  min-width: 0;
}
.elder-size-number {
  flex: 0 0 5.5rem;
}

.elder-file-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.elder-file-name {
  font-size: 0.8rem;
  color: #6c757d;
  word-break: break-all;
  min-width: 0;
}

.elder-progress {
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
  margin: -0.4rem 0 0.85rem;
}
.elder-progress-bar {
  height: 100%;
  width: 0;
  background: var(--elder-accent);
  transition: width 0.15s ease;
}

.elder-cell-placeholder {
  padding: 1.75rem 1rem;
  text-align: center;
  color: #9aa0a6;
  font-size: 0.9rem;
  border: 1px dashed var(--elder-cell-border);
  border-radius: 0.5rem;
}
.elder-cell-placeholder .bi {
  font-size: 1.35rem;
  display: block;
  margin-bottom: 0.35rem;
}

/* ---------- Figuras ---------- */
.elder-figure {
  margin: 1rem 0;
  /* En pantalla ancha se respeta exactamente el ancho elegido (en %). */
  max-width: 100%;
  scroll-margin-top: 5rem;
}
@media (max-width: 575.98px) {
  /* En un móvil un 25% serían unos 90 px ilegibles: se garantiza un mínimo
     visible sin pasarse nunca del ancho de la pantalla. */
  .elder-figure {
    min-width: min(100%, 280px);
  }
}
.elder-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid var(--elder-cell-border);
  background: #fff;
}
.elder-figure figcaption {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: #5c6470;
  text-align: center;
  line-height: 1.45;
}
.elder-align-left {
  margin-right: auto;
  margin-left: 0;
}
.elder-align-center {
  margin-left: auto;
  margin-right: auto;
}
.elder-align-right {
  margin-left: auto;
  margin-right: 0;
}

.elder-caption-tag {
  font-weight: 700;
  color: var(--elder-accent);
}

/* Citas dentro del contenido del notebook (Bootstrap las deja sin marcar). */
.elder-md-preview blockquote,
.elder-view-article blockquote {
  border-left: 3px solid var(--elder-accent-soft);
  background: #fbfaff;
  border-radius: 0 0.4rem 0.4rem 0;
  padding: 0.6rem 1rem;
  margin: 1rem 0;
  color: #55606d;
}
.elder-md-preview blockquote > :last-child,
.elder-view-article blockquote > :last-child {
  margin-bottom: 0;
}

/* ---------- Tarjeta de enlace ---------- */
.elder-link-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--elder-cell-border);
  border-radius: 0.6rem;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.elder-link-card:hover {
  border-color: var(--elder-accent);
  box-shadow: 0 0.25rem 0.75rem rgba(20, 20, 40, 0.08);
  transform: translateY(-1px);
  color: inherit;
}
.elder-link-icon {
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: var(--elder-accent-soft);
  color: var(--elder-accent);
  font-size: 1.3rem;
}
.elder-link-body {
  flex: 1 1 auto;
  min-width: 0;
}
.elder-link-title {
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
}
.elder-link-desc {
  font-size: 0.86rem;
  color: #5c6470;
  margin-top: 0.15rem;
  word-break: break-word;
}
.elder-link-url {
  font-size: 0.76rem;
  color: #9aa0a6;
  margin-top: 0.2rem;
  word-break: break-all;
}
.elder-link-arrow {
  flex: 0 0 auto;
  color: #adb5bd;
}

/* ---------- Visor de PDF ---------- */
.elder-pdf-cell {
  border: 1px solid var(--elder-cell-border);
  border-radius: 0.6rem;
  overflow: hidden;
  background: #fff;
}
.elder-pdf-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: #fafafd;
  border-bottom: 1px solid var(--elder-cell-border);
}
.elder-pdf-title {
  font-weight: 600;
  font-size: 0.92rem;
  word-break: break-word;
  min-width: 0;
}
.elder-pdf-open {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--elder-accent);
  text-decoration: none;
  white-space: nowrap;
}
.elder-pdf-open:hover {
  text-decoration: underline;
}
.elder-pdf-frame {
  display: block;
  width: 100%;
  border: 0;
  background: #f1f3f5;
}
@media (max-width: 575.98px) {
  /* Un visor de 900 px de alto no cabe en un móvil: se limita a la
     pantalla (el botón "Abrir en pestaña nueva" sigue disponible). */
  .elder-pdf-frame {
    height: 70vh !important;
  }
}

/* ================================================================
   Entornos LaTeX (\begin{proof}…), referencias y captions
   ================================================================ */

.elder-env {
  --env-color: var(--elder-accent);
  --env-bg: var(--elder-accent-soft);
  border-left: 4px solid var(--env-color);
  background: var(--env-bg);
  border-radius: 0.5rem;
  padding: 0.85rem 1.1rem;
  margin: 1rem 0;
  scroll-margin-top: 5rem;
}
.elder-env-head {
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.elder-env-title {
  color: var(--env-color);
}
.elder-env-note {
  font-weight: 500;
  color: #6c757d;
}
.elder-env-body > :last-child {
  margin-bottom: 0;
}
.elder-env-qed {
  text-align: right;
  font-size: 1.05rem;
  line-height: 1;
  margin-top: 0.35rem;
}

.elder-env-proof {
  --env-color: #6c757d;
  --env-bg: #f6f7f9;
}
.elder-env-theorem {
  --env-color: #6f42c1;
  --env-bg: #f4f0fc;
}
.elder-env-definition {
  --env-color: #0b6bcb;
  --env-bg: #eef5fd;
}
.elder-env-example {
  --env-color: #1a7f4b;
  --env-bg: #edf9f2;
}
.elder-env-remark {
  --env-color: #b8860b;
  --env-bg: #fdf7e7;
}
.elder-env-exercise {
  --env-color: #0b7285;
  --env-bg: #e9f7fa;
}
.elder-env-solution {
  --env-color: #495057;
  --env-bg: #f6f7f9;
}
.elder-env-custom {
  --env-color: #6f42c1;
  --env-bg: #f7f5fd;
}

.elder-ref {
  color: var(--elder-accent);
  font-weight: 600;
  text-decoration: none;
}
.elder-ref:hover {
  text-decoration: underline;
}
.elder-ref-missing {
  color: #b02a2a;
  background: #fdecec;
  border-radius: 0.25rem;
  padding: 0 0.3rem;
  font-weight: 700;
  cursor: help;
}
/* Ancla invisible para que \ref{} salte a la ecuación sin que el ancla
   ocupe espacio ni rompa el párrafo que la contiene. */
.elder-math-anchor {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
  scroll-margin-top: 5rem;
}

.elder-table-caption {
  font-size: 0.88rem;
  color: #5c6470;
  text-align: center;
  margin: -0.35rem 0 1rem;
  scroll-margin-top: 5rem;
}

.elder-output-markdown .katex-display {
  margin: 0.4rem 0;
}

/* ================================================================
   Modal de configuración del notebook (preámbulo LaTeX)
   ================================================================ */

.elder-settings-modal {
  border: 0;
  border-radius: 0.9rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem rgba(20, 20, 40, 0.22);
}
.elder-settings-modal .modal-header {
  background: linear-gradient(135deg, var(--elder-accent-soft) 0%, #fff 75%);
  border-bottom: 1px solid var(--elder-cell-border);
  padding: 1rem 1.25rem;
}
.elder-settings-modal .modal-title {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.elder-settings-modal .modal-title .bi {
  color: var(--elder-accent);
}
.elder-settings-modal .modal-body {
  padding: 1.25rem;
}
.elder-settings-modal .modal-footer {
  background: #fafafd;
  border-top: 1px solid var(--elder-cell-border);
}

.elder-preamble-wrap {
  border: 1px solid var(--elder-cell-border);
  border-radius: 0.6rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0.1rem 0.4rem rgba(20, 20, 40, 0.05);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* El foco se marca en el marco entero (el textarea no tiene borde propio). */
.elder-preamble-wrap:focus-within {
  border-color: var(--elder-accent);
  box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.15);
}
.elder-preamble-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  background: #fafafd;
  border-bottom: 1px solid var(--elder-cell-border);
  font-size: 0.82rem;
  font-weight: 600;
  color: #5c6470;
}
.elder-preamble-badge {
  background: var(--elder-accent-soft);
  color: var(--elder-accent);
  border-radius: 1rem;
  padding: 0.1rem 0.65rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.elder-preamble-input {
  display: block;
  width: 100%;
  border: 0;
  padding: 0.9rem 1.1rem;
  min-height: 230px;
  resize: vertical;
  background: #fcfcfe;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  color: #2f3337;
  tab-size: 2;
}
.elder-preamble-input:focus {
  /* El anillo de foco lo dibuja .elder-preamble-wrap:focus-within. */
  outline: none;
  background: #fff;
}
.elder-preamble-input::placeholder {
  color: #b3b8c2;
}
.elder-preamble-summary {
  font-size: 0.85rem;
  margin-top: 0.6rem;
  line-height: 1.45;
}
.elder-preamble-summary.ok {
  color: #1a7f4b;
}
/* ================================================================
   Banco de pruebas del visor (modal con editor + salidas)
   ================================================================ */

.elder-sandbox-modal {
  border: 0;
  border-radius: 0.9rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem rgba(20, 20, 40, 0.22);
}
.elder-sandbox-modal .modal-header {
  background: linear-gradient(135deg, var(--elder-accent-soft) 0%, #fff 75%);
  border-bottom: 1px solid var(--elder-cell-border);
  align-items: flex-start;
}
.elder-sandbox-modal .modal-title {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.elder-sandbox-modal .modal-title .bi {
  color: var(--elder-accent);
}
/* Al quedarse el pie con un solo botón, "space-between" lo dejaba pegado a la
   izquierda; va donde se espera un botón de cerrar. */
.elder-sandbox-modal .modal-footer {
  background: #fafafd;
  border-top: 1px solid var(--elder-cell-border);
  justify-content: flex-end;
  gap: 0.75rem;
}

.elder-sandbox-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
/* El icono ocupa su propio hueco fijo y el texto va aparte: así el mensaje no
   se mueve al cambiar de estado ni hereda el giro del spinner. */
.elder-sandbox-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.25;
  color: #6c757d;
  margin-left: auto;
  min-width: 0;
  max-width: 100%;
}
.elder-sandbox-status > .spinner-border,
.elder-sandbox-status > .bi {
  flex: 0 0 auto;
}
.elder-sandbox-status .spinner-border {
  width: 0.85rem;
  height: 0.85rem;
  border-width: 0.15em;
}
.elder-sandbox-status-text {
  min-width: 0;
  text-align: left;
}
.elder-sandbox-status.is-ready {
  color: #1a7f4b;
}
.elder-sandbox-status.is-error {
  color: #b02a2a;
}

/* Barra de la primera carga: Python y sus librerías son ~40 MB y sin esto
   parece que la ventana se ha quedado colgada. */
.elder-sandbox-progress {
  width: 100%;
  height: 5px;
  border-radius: 999px;
  background: #e9ecef;
  overflow: hidden;
  margin: -0.2rem 0 0.7rem;
}
.elder-sandbox-progress.d-none {
  display: none;
}
.elder-sandbox-progress span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #0d6efd, #4d94ff);
  transition: width 0.35s ease;
}

.elder-sandbox-editor,
.elder-sandbox-fallback {
  border: 1px solid var(--elder-cell-border);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #fff;
}
/* Altura fija a propósito. Con height:auto CodeMirror da por hecho que crece
   con el contenido y desactiva su propio scroll; el max-height del contenedor
   se limitaba entonces a cortar el código largo, sin barras ni forma de
   llegar al resto. Con una altura definida vuelven las dos barras, la
   vertical y la horizontal de las líneas largas. */
.elder-sandbox-editor .CodeMirror {
  height: 40vh;
  min-height: 190px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}
.elder-sandbox-editor .CodeMirror-activeline-background {
  background: var(--elder-accent-soft);
}
.elder-sandbox-fallback {
  display: block;
  width: 100%;
  min-height: 190px;
  padding: 0.75rem 1rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
}

.elder-sandbox-outlabel {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6c757d;
  margin: 1rem 0 0.35rem;
}
.elder-sandbox-output {
  border: 1px solid var(--elder-out-border);
  border-radius: 0.5rem;
  background: #fbfbfc;
  padding: 0.6rem 0.9rem;
  min-height: 3rem;
  max-height: 45vh;
  overflow: auto;
}
.elder-sandbox-output:empty {
  padding: 0;
  min-height: 0;
  border: 0;
}
.elder-sandbox-empty {
  font-size: 0.85rem;
  color: #9aa0a6;
  padding: 0.9rem;
  border: 1px dashed var(--elder-cell-border);
  border-radius: 0.5rem;
  text-align: center;
  margin-top: -0.1rem;
}

/* ---------- Modal de ayuda ---------- */
.elder-help-body .elder-help-title {
  font-weight: 700;
  font-size: 0.98rem;
  margin: 1.4rem 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--elder-accent-soft);
}
.elder-help-body .elder-help-title:first-child {
  margin-top: 0;
}
.elder-help-list {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  font-size: 0.9rem;
}
.elder-help-list li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--elder-out-border);
  line-height: 1.5;
}
.elder-help-list li:last-child {
  border-bottom: 0;
}
.elder-help-list .elder-cell-badge {
  margin-right: 0.4rem;
}
.elder-help-envs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 0.6rem;
}
.elder-help-envs .elder-env {
  margin: 0;
  font-size: 0.85rem;
}
.elder-help-envs .elder-env-body code {
  white-space: nowrap;
}
.elder-help-code {
  background: #f6f6f9;
  border: 1px solid var(--elder-out-border);
  border-radius: 0.4rem;
  padding: 0.7rem 0.85rem;
  font-size: 0.78rem;
  line-height: 1.6;
  overflow-x: auto;
  margin-bottom: 0.75rem;
}

/* ---------- Outputs (shared by editor + viewer) ---------- */
.elder-output {
  margin: 0.4rem 0;
}
.elder-output pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 0;
}
.elder-out-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  padding-top: 0.15rem;
}
.elder-media-error {
  background: var(--elder-error-bg);
  color: var(--elder-error-fg);
  border: 1px solid #f2c2be;
  border-radius: 0.4rem;
  padding: 0.6rem 0.75rem;
}
.elder-media-img {
  max-width: 100%;
  display: block;
  margin-top: 0.25rem;
}
.elder-media-plot {
  width: 100%;
  min-height: 320px;
}
.elder-media-frame {
  width: 100%;
  border: 1px solid var(--elder-out-border);
  border-radius: 0.4rem;
  background: #fff;
}
.elder-output table {
  font-size: 0.88rem;
}

/* ---------- Static code block (viewer) ---------- */
.elder-code-static {
  margin: 0;
  padding: 0.9rem 1.1rem;
  background: var(--elder-code-bg);
  color: var(--elder-code-fg);
  border: 1px solid var(--elder-cell-border);
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.88rem;
}
/* El tema de highlight.js pinta su propio fondo en .hljs: se anula para que
   mande el del bloque y el borde no quede partido. */
.elder-code-static code.hljs {
  background: transparent;
  padding: 0;
}

/* ================================================================
   Bloques ```lenguaje de las celdas Markdown
   ================================================================

   Código escrito para leerse (Python, FreeFEM…), no para ejecutarse: el
   notebook nunca lo corre. Se presenta como una ventanita de editor —barra
   con el nombre del lenguaje, numeración de líneas y coloreado— para que se
   distinga de un vistazo de las celdas de Código, que sí se ejecutan.
   Lo monta enhanceCodeBlocks() en assets/js/render-utils.js. */

.elder-codeblock {
  margin: 1.1rem 0;
  border: 1px solid var(--elder-cell-border);
  border-radius: 0.6rem;
  overflow: hidden;
  background: #fbfbfd;
  box-shadow: 0 0.15rem 0.6rem rgba(20, 20, 40, 0.05);
}
.elder-codeblock-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.7rem;
  background: #f2f3f7;
  border-bottom: 1px solid var(--elder-cell-border);
}
.elder-codeblock-dots {
  display: inline-flex;
  gap: 0.28rem;
}
.elder-codeblock-dots i {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: #d6d9e0;
}
.elder-codeblock-dots i:nth-child(1) { background: #f0a9a4; }
.elder-codeblock-dots i:nth-child(2) { background: #f3d08a; }
.elder-codeblock-dots i:nth-child(3) { background: #a8ceac; }
.elder-codeblock-lang {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6c757d;
}
.elder-codeblock-copy {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #8b93a1;
  font-size: 0.82rem;
  line-height: 1;
  padding: 0.2rem 0.3rem;
  border-radius: 0.3rem;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.elder-codeblock-copy:hover {
  background: #e4e6ec;
  color: var(--elder-accent);
}
.elder-codeblock-copy.is-done {
  color: #1a7f4b;
}

.elder-codeblock-body {
  display: flex;
  align-items: stretch;
  background: var(--elder-code-bg);
}
/* La numeración va fuera del <pre>: así se queda quieta cuando una línea
   larga obliga a desplazar el código a lo ancho. */
.elder-codeblock-gutter {
  flex: 0 0 auto;
  padding: 0.85rem 0.55rem 0.85rem 0.75rem;
  border-right: 1px solid var(--elder-out-border);
  background: #f2f3f7;
  color: #a9b0bd;
  text-align: right;
  user-select: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84rem;
  line-height: 1.55;
  white-space: pre;
}
.elder-codeblock-pre {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  background: transparent;
  color: var(--elder-code-fg);
  font-size: 0.84rem;
  line-height: 1.55;
}
.elder-codeblock-pre code,
.elder-codeblock-pre code.hljs {
  display: block;
  padding: 0;
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  white-space: pre;
}

@media (max-width: 575.98px) {
  /* En un móvil la numeración se come el ancho útil del código. */
  .elder-codeblock-gutter {
    display: none;
  }
}

/* ---------- Mostrar/ocultar y probar el código (vista de lectura) ------- */
.elder-code-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-bottom: 0.4rem;
}
.elder-code-controls .elder-code-toggle {
  margin: 0;
}
.elder-code-run {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  color: #7c8494;
  cursor: pointer;
  transition: color 0.15s ease;
}
.elder-code-run:hover,
.elder-code-run:focus-visible {
  color: var(--elder-accent);
  text-decoration: underline;
}
.elder-code-run .bi {
  font-size: 0.95em;
}

.elder-code-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.4rem;
  padding: 0.1rem 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  color: #7c8494;
  cursor: pointer;
  transition: color 0.15s ease;
}
.elder-code-toggle:hover,
.elder-code-toggle:focus-visible {
  color: var(--elder-accent);
  text-decoration: underline;
}
.elder-code-toggle-chevron {
  font-size: 0.85em;
  transition: transform 0.2s ease;
}
.elder-code-toggle.is-open .elder-code-toggle-chevron {
  transform: rotate(90deg);
}

.elder-code-collapse {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.22s ease;
}
.elder-code-collapse.is-open {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .elder-code-collapse,
  .elder-code-toggle-chevron {
    transition: none;
  }
}

/* ================================================================
   Visor del notebook
   ================================================================ */

/* El editor usa esta misma anchura para su columna de celdas. */
.elder-doc-container {
  max-width: var(--elder-doc-width);
}

/* Documento + raíl. El documento manda: mide siempre --elder-doc-width (o lo
   que quepa), y el raíl sólo aparece cuando sobra sitio a su lado; si no, sus
   paneles se van al cajón lateral (botón «Índice» de la barra). */
.elder-viewer-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--elder-doc-width)) var(--elder-rail-width);
  justify-content: center;
  align-items: start;
  gap: 1.75rem;
  padding: 1.5rem 0.75rem 3.5rem;
}
@media (max-width: 1319.98px) {
  .elder-viewer-layout {
    grid-template-columns: minmax(0, var(--elder-doc-width));
  }
}
/* 1.5rem = el relleno lateral del .container del editor. Restándolo, el
   artículo mide exactamente lo que mide una celda allí, así que una imagen al
   70% ocupa los mismos píxeles en los dos sitios. */
.elder-viewer-doc {
  min-width: 0;
  max-width: calc(var(--elder-doc-width) - 1.5rem);
  width: 100%;
  justify-self: center;
}

.elder-doc-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #6c757d;
  margin-bottom: 0.35rem;
}
.elder-doc-breadcrumb a {
  color: var(--elder-accent);
  text-decoration: none;
}
.elder-doc-breadcrumb a:hover {
  text-decoration: underline;
}
.elder-doc-breadcrumb-sep {
  opacity: 0.6;
}
.elder-doc-title {
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  margin-bottom: 0.25rem;
}

/* Mismo interior que una celda del editor: 1px de borde y 1rem de relleno.
   Así lo que allí se ve entero, aquí también (véase --elder-doc-width). */
.elder-view-article {
  background: #fff;
  border: 1px solid var(--elder-cell-border);
  border-radius: 0.75rem;
  padding: 1.5rem 1rem;
}
@media (max-width: 575.98px) {
  .elder-view-article {
    padding: 1rem;
  }
}

.elder-view-cell + .elder-view-cell {
  margin-top: 1.25rem;
}
/* Algo más ancho que la celda —una fórmula en línea con \begin{cases}, una
   tabla grande, una línea de código larga— se desplaza DENTRO de su celda en
   vez de ensanchar la página entera (que era lo que en el móvil dejaba todo
   el texto corrido hacia un lado). */
.elder-view-cell {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.elder-code-cell-view .elder-io-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: #6c757d;
  margin-bottom: 0.25rem;
}

/* ---------- Paneles del raíl (índice y árbol del curso) ---------- */
.elder-viewer-rail {
  position: sticky;
  top: 4.75rem;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-right: 0.25rem;
}
.elder-panel[hidden] {
  display: none;
}
.elder-panel-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6c757d;
  margin-bottom: 0.5rem;
}
.elder-panel-title i {
  color: var(--elder-accent);
}
/* El nombre del curso puede ser largo: que baje de línea en vez de salirse. */
.elder-panel-title span {
  min-width: 0;
  overflow-wrap: break-word;
  text-transform: none;
  letter-spacing: 0;
}

.elder-toc-nav {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--elder-cell-border);
}
.elder-toc-link {
  padding: 0.22rem 0 0.22rem 0.7rem;
  margin-left: -2px;
  border-left: 2px solid transparent;
  color: #495057;
  font-size: 0.86rem;
  line-height: 1.35;
  text-decoration: none;
  /* Un título largo se parte por palabras, nunca a mitad de palabra. */
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.elder-toc-link.level-2 {
  padding-left: 1.45rem;
  font-size: 0.82rem;
}
.elder-toc-link.level-3 {
  padding-left: 2.2rem;
  font-size: 0.79rem;
  color: #6c757d;
}
.elder-toc-link:hover {
  color: var(--elder-accent);
  border-left-color: var(--elder-accent);
  background: var(--elder-accent-soft);
}

/* ---------- Árbol de notebooks del curso ---------- */
.elder-tree {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.elder-tree-folder > summary {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  list-style: none;
  cursor: pointer;
  padding: 0.35rem 0.35rem;
  border-radius: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #343a40;
}
.elder-tree-folder > summary::-webkit-details-marker {
  display: none;
}
.elder-tree-folder > summary:hover {
  background: var(--elder-accent-soft);
}
.elder-tree-chevron {
  font-size: 0.7rem;
  color: #adb5bd;
  margin-top: 0.25rem;
  transition: transform 0.15s ease;
}
.elder-tree-folder[open] > summary .elder-tree-chevron {
  transform: rotate(90deg);
}
.elder-tree-folder-icon {
  color: var(--elder-accent);
  margin-top: 0.1rem;
}
.elder-tree-folder-name {
  flex: 1 1 auto;
  min-width: 0;
  /* Los nombres largos bajan de línea POR PALABRAS: nunca se parte una
     palabra por la mitad (sólo si una sola palabra no cupiera de ancho).
     text-wrap:pretty reparte las líneas para no dejar una suelta al final. */
  overflow-wrap: break-word;
  text-wrap: pretty;
  line-height: 1.3;
}
.elder-tree-count {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6c757d;
  background: #f1f3f5;
  border-radius: 1rem;
  padding: 0 0.4rem;
  margin-top: 0.1rem;
}
.elder-tree-list {
  list-style: none;
  margin: 0.1rem 0 0.35rem;
  padding: 0 0 0 0.85rem;
  border-left: 2px solid var(--elder-cell-border);
}
.elder-tree-link {
  display: block;
  padding: 0.28rem 0.4rem;
  border-radius: 0.35rem;
  color: #495057;
  font-size: 0.82rem;
  line-height: 1.33;
  text-decoration: none;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.elder-tree-link:hover {
  background: var(--elder-accent-soft);
  color: var(--elder-accent);
}
.elder-tree-link.is-current {
  background: var(--elder-accent-soft);
  color: var(--elder-accent);
  font-weight: 600;
  box-shadow: inset 0.15rem 0 0 var(--elder-accent);
}
.elder-tree-draft {
  color: #b02a2a;
  margin-left: 0.3rem;
  font-size: 0.75rem;
}

/* El cajón lateral reutiliza los mismos paneles, con algo más de aire. */
.elder-viewer-offcanvas {
  width: min(22rem, 88vw);
}
.elder-viewer-offcanvas .offcanvas-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ---------- Anterior / Siguiente ---------- */
.elder-nb-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.elder-nb-nav.is-bottom {
  margin: 1.25rem 0 0;
}
.elder-nb-nav[hidden] {
  display: none;
}
.elder-nb-nav-btn {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1 1 40%;
  min-width: 0;
  max-width: 26rem;
  padding: 0.6rem 0.9rem;
  background: #fff;
  border: 1px solid var(--elder-cell-border);
  border-radius: 0.6rem;
  color: #343a40;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.elder-nb-nav-btn:hover {
  border-color: #c9bef0;
  box-shadow: 0 0.25rem 0.9rem rgba(20, 20, 40, 0.08);
  transform: translateY(-1px);
  color: var(--elder-accent);
}
.elder-nb-nav-btn.is-next {
  margin-left: auto;
  text-align: right;
}
.elder-nb-nav-dir {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--elder-accent);
}
.elder-nb-nav-folder {
  font-size: 0.75rem;
  color: #6c757d;
  overflow-wrap: break-word;
}
.elder-nb-nav-title {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
@media (max-width: 575.98px) {
  .elder-nb-nav-btn {
    flex: 1 1 100%;
    max-width: none;
  }
  .elder-nb-nav-btn.is-next {
    margin-left: 0;
  }
}

.elder-empty-state {
  text-align: center;
  padding: 4rem 1rem;
  color: #6c757d;
}

/* Drag & drop reordering */
.elder-cell.dragging {
  opacity: 0.4;
}
.elder-drag-handle {
  cursor: grab;
  color: #adb5bd;
}
.elder-drag-handle:active {
  cursor: grabbing;
}

/* KaTeX overflow on narrow screens */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
}

/* ================================================================
   Public site (home, publicaciones, teaching, admin) — misma familia
   visual que el editor/viewer: fondo --elder-bg, acento morado, cards
   blancas con borde suave.
   ================================================================ */

.site-hero-panel {
  background: linear-gradient(135deg, var(--elder-accent-soft) 0%, #fff 65%);
  border: 1px solid var(--elder-cell-border);
  border-radius: 1.25rem;
  padding: 2.5rem;
  box-shadow: 0 0.5rem 1.5rem rgba(20, 20, 40, 0.06);
}
@media (max-width: 575.98px) {
  .site-hero-panel {
    padding: 1.5rem;
  }
}

.site-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #fff;
  color: var(--elder-accent);
  border: 1px solid #c9bef0;
  border-radius: 2rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.site-hero-photo {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0.25rem 1rem rgba(20, 20, 40, 0.12);
}
.site-hero-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: var(--elder-accent-soft);
  color: var(--elder-accent);
  font-size: 4rem;
}

.profile-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: #343a40;
  border: 1px solid var(--elder-cell-border);
  border-radius: 2rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.profile-link-btn:hover {
  border-color: var(--elder-accent);
  color: var(--elder-accent);
  transform: translateY(-1px);
}
.profile-link-btn .bi {
  color: var(--elder-accent);
}

.site-section-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--elder-accent-soft);
}
.site-section-heading .bi {
  color: var(--elder-accent);
}

.site-card {
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  border-color: var(--elder-cell-border);
}
.site-card:hover {
  box-shadow: 0 0.25rem 1rem rgba(20, 20, 40, 0.1);
  border-color: #c9bef0;
  transform: translateY(-2px);
}

.accordion-button:not(.collapsed) {
  color: var(--elder-accent);
  background-color: var(--elder-accent-soft);
}
.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(111, 66, 193, 0.15);
}

/* ================================================================
   Barra de formato de las celdas Markdown
   ================================================================ */

.elder-md-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding: 0.35rem 0.5rem;
  background: #fcfcfe;
  border-bottom: 1px solid var(--elder-cell-border);
}

.elder-md-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid transparent;
  background: transparent;
  color: #495057;
  border-radius: 0.35rem;
  padding: 0.2rem 0.4rem;
  font-size: 0.9rem;
  line-height: 1.1;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.elder-md-btn:hover {
  background: var(--elder-accent-soft);
  color: var(--elder-accent);
}
.elder-md-btn:focus-visible {
  outline: none;
  border-color: var(--elder-accent);
  box-shadow: 0 0 0 0.15rem rgba(111, 66, 193, 0.2);
}
.elder-md-btn.active {
  background: var(--elder-accent-soft);
  color: var(--elder-accent);
  border-color: #d8ccf5;
}
.elder-md-btn.is-wide {
  font-size: 0.8rem;
}
.elder-md-btn-text {
  font-weight: 600;
}
.elder-md-btn-caret {
  font-size: 0.55rem;
  opacity: 0.65;
}
.elder-md-sep {
  width: 1px;
  align-self: stretch;
  margin: 0.1rem 0.3rem;
  background: var(--elder-cell-border);
}

@media (max-width: 767.98px) {
  /* En pantallas estrechas los tres botones anchos se quedan sin rótulo para
     que la barra siga cabiendo en una o dos filas. */
  .elder-md-btn-text {
    display: none;
  }
}

/* Menús desplegables de la barra: van colgados de <body> (ver
   assets/js/markdown-toolbar.js), por eso están posicionados con fixed. */
.elder-md-menu {
  position: fixed;
  z-index: 1090;
  min-width: 15rem;
  max-width: min(22rem, calc(100vw - 1rem));
  max-height: min(24rem, calc(100vh - 2rem));
  overflow-y: auto;
  padding: 0.3rem;
  background: #fff;
  border: 1px solid var(--elder-cell-border);
  border-radius: 0.55rem;
  box-shadow: 0 0.75rem 2rem rgba(20, 20, 40, 0.18);
}
.elder-md-menu-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-radius: 0.35rem;
  cursor: pointer;
}
.elder-md-menu-item:hover,
.elder-md-menu-item:focus-visible {
  background: var(--elder-accent-soft);
  outline: none;
}
.elder-md-menu-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #212529;
  white-space: nowrap;
}
/* Los nombres largos (un teorema del catálogo) bajan de línea en vez de
   sacar una barra de desplazamiento horizontal en el menú. */
.elder-md-menu-label.is-wrap {
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.3;
}
.elder-md-menu-hint {
  font-size: 0.76rem;
  color: #6c757d;
  margin-left: auto;
  text-align: right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.elder-md-menu-sep {
  height: 1px;
  margin: 0.3rem 0.25rem;
  background: var(--elder-cell-border);
}

/* Opciones que abren un submenú al lado (símbolos, integrales, matrices…). */
.elder-md-menu-item.has-sub .elder-md-menu-hint {
  margin-right: 0.15rem;
}
/* Sin muestra a la derecha, la punta de flecha es la que se va al borde. */
.elder-md-menu-item.no-hint .elder-md-menu-chevron {
  margin-left: auto;
}
.elder-md-menu-chevron {
  font-size: 0.6rem;
  opacity: 0.5;
  flex: 0 0 auto;
}
.elder-md-menu-item.has-sub.active {
  background: var(--elder-accent-soft);
}
.elder-md-menu-item.has-sub.active .elder-md-menu-chevron {
  opacity: 1;
  color: var(--elder-accent);
}

/* Rejilla de símbolos: cada casilla lleva el símbolo dibujado con KaTeX, así
   que se elige mirando la fórmula y no el comando. */
.elder-md-menu.is-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
  gap: 0.15rem;
  width: 22rem;
  max-width: calc(100vw - 1rem);
  padding: 0.35rem;
}
.elder-md-sym {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0.2rem 0.25rem;
  border: 1px solid transparent;
  border-radius: 0.35rem;
  background: transparent;
  color: #212529;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
}
.elder-md-sym:hover,
.elder-md-sym:focus-visible {
  background: var(--elder-accent-soft);
  border-color: #d8ccf5;
  outline: none;
}
.elder-md-sym .katex {
  font-size: 1em;
  max-width: 100%;
}
/* Si KaTeX no pudiera dibujarlo, se ve el comando tal cual. */
.elder-md-sym.is-raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  word-break: break-all;
}

/* ================================================================
   Autocompletado del editor de código (complemento show-hint)
   ================================================================ */

/* z-index alto: el banco de pruebas del visor vive dentro de un modal de
   Bootstrap (1055) y con el valor de fábrica del complemento (10) el panel
   quedaba escondido detrás. */
.CodeMirror-hints {
  z-index: 1090;
  padding: 0.25rem;
  border: 1px solid var(--elder-cell-border);
  border-radius: 0.5rem;
  box-shadow: 0 0.6rem 1.6rem rgba(20, 20, 40, 0.18);
  font-family: inherit;
  font-size: 0.85rem;
  max-height: 17rem;
  min-width: 18rem;
  max-width: min(34rem, calc(100vw - 1rem));
}
.CodeMirror-hint.elder-hint {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.22rem 0.45rem;
  border-radius: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
}
.elder-hint-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 600;
  color: #212529;
  flex: 0 0 auto;
}
.elder-hint-kind {
  font-size: 0.72rem;
  color: var(--elder-accent);
  background: var(--elder-accent-soft);
  border-radius: 1rem;
  padding: 0.02rem 0.4rem;
  flex: 0 0 auto;
}
.elder-hint-desc {
  font-size: 0.78rem;
  color: #6c757d;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
li.CodeMirror-hint-active.elder-hint {
  background: var(--elder-accent);
}
li.CodeMirror-hint-active.elder-hint .elder-hint-name,
li.CodeMirror-hint-active.elder-hint .elder-hint-desc {
  color: #fff;
}
li.CodeMirror-hint-active.elder-hint .elder-hint-kind {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* ================================================================
   Celdas mientras se ejecutan (editor)
   ================================================================

   Python corre en un Web Worker, así que la página nunca se queda tiesa: lo
   que hay que dejar claro es qué celda está trabajando y cuáles esperan. */

.elder-cell-state {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 1rem;
  background: #eef0f3;
  color: #6c757d;
  white-space: nowrap;
}
.elder-cell-state .spinner-border {
  width: 0.7rem;
  height: 0.7rem;
  border-width: 0.13em;
}

.elder-cell.is-running .elder-cell-state {
  background: var(--elder-accent-soft);
  color: var(--elder-accent);
}

/* La celda en marcha se resalta con un hilo de color que recorre su borde
   superior; las que esperan, sólo con el distintivo "En cola". */
.elder-cell.is-running {
  border-color: #c9bef0;
  box-shadow: 0 0.15rem 0.75rem rgba(111, 66, 193, 0.16);
}
.elder-cell.is-running .elder-cell-header {
  position: relative;
  overflow: hidden;
}
.elder-cell.is-running .elder-cell-header::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 35%;
  background: linear-gradient(90deg, transparent, var(--elder-accent), transparent);
  animation: elder-cell-run 1.4s ease-in-out infinite;
}
.elder-cell.is-queued {
  border-style: dashed;
}
.elder-cell.is-queued .elder-cell-body {
  opacity: 0.75;
}

@keyframes elder-cell-run {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
  .elder-cell.is-running .elder-cell-header::after {
    animation: none;
    width: 100%;
  }
}

/* Deshacer/rehacer: la celda que acaba de volver —o de moverse— se resalta un
   momento. Sin esto, deshacer el borrado de una celda que ha quedado fuera de
   la pantalla parece no haber hecho nada. */
.elder-cell.is-restored {
  animation: elder-cell-restored 1.6s ease-out;
}

@keyframes elder-cell-restored {
  0% {
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.45);
    border-color: #198754;
  }
  100% {
    box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0);
    border-color: var(--elder-cell-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  .elder-cell.is-restored {
    animation: none;
    border-color: #198754;
  }
}

/* ================================================================
   Panel de administración: los cuatro accesos del dashboard
   ================================================================ */

.elder-admin-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  height: 100%;
  min-height: 8.5rem;
  padding: 1.5rem 1rem;
  border: 1px solid var(--elder-cell-border);
  border-radius: 0.75rem;
  background: #fff;
  color: #212529;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.elder-admin-tile:hover,
.elder-admin-tile:focus-visible {
  border-color: var(--elder-accent);
  color: var(--elder-accent);
  box-shadow: 0 0.35rem 1rem rgba(20, 20, 40, 0.09);
  transform: translateY(-2px);
  outline: none;
}
.elder-admin-tile .bi {
  font-size: 1.85rem;
  line-height: 1;
  color: var(--elder-accent);
}
.elder-admin-tile span {
  font-size: 1rem;
  font-weight: 600;
}

/* La barra y el pie del visor son los del sitio público: viven en
   includes/site_nav.php e includes/site_foot.php, con sus estilos en
   assets/css/site-chrome.css. Lo único propio del visor es el botón
   «Índice» (clase .nav-btn como los demás), que abre el cajón lateral
   cuando la pantalla no da para el raíl; lo enseña y lo esconde viewer.js.
   Por eso aquí ya no hay ninguna regla de barra. */

/* ================================================================
   Vista rápida de una referencia (\ref / \eqref)
   ================================================================ */

.elder-ref-pop {
  position: fixed;
  z-index: 1085;
  max-width: min(34rem, calc(100vw - 1.25rem));
  max-height: min(22rem, 55vh);
  overflow: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--elder-cell-border);
  border-radius: 0.6rem;
  box-shadow: 0 0.75rem 2rem rgba(20, 20, 40, 0.18);
  padding: 0.6rem 0.75rem;
}
.elder-ref-pop[hidden] {
  display: none;
}
.elder-ref-pop-head {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--elder-accent);
  margin-bottom: 0.3rem;
}
.elder-ref-pop-body {
  font-size: 0.95rem;
}
/* Dentro de la ventanita todo va más recogido que en la página. */
.elder-ref-pop-body .katex-display {
  margin: 0.15rem 0;
}
/* El número de la ecuación va anclado al borde derecho del bloque; en una
   ventanita estrecha se montaba encima de la fórmula. Aquí sobra, porque la
   cabecera ya dice «Ecuación 1». */
.elder-ref-pop-body .katex-display .tag {
  display: none;
}
.elder-ref-pop-body .elder-env {
  margin: 0;
}
.elder-ref-pop-body figure,
.elder-ref-pop-body .elder-figure {
  width: 100% !important;
  margin: 0;
}
.elder-ref-pop-body img {
  max-width: 100%;
  height: auto;
}
.elder-ref-pop-body table {
  font-size: 0.85rem;
}
.elder-ref-pop-plain {
  font-weight: 600;
  color: #343a40;
}

/* ================================================================
   Resultados notables (\resultado{...})
   ================================================================ */

/* La marca dentro del texto: se ve que se puede pulsar sin gritar. */
.elder-result-ref {
  --result-color: #0b7285;
  color: var(--result-color);
  font-weight: 600;
  cursor: pointer;
  border-bottom: 1px dashed currentColor;
  padding-bottom: 0.02em;
  transition: background-color 0.12s ease;
}
.elder-result-ref::after {
  content: "\F431"; /* bi-info-circle-fill */
  font-family: "bootstrap-icons";
  font-size: 0.62em;
  vertical-align: super;
  margin-left: 0.15em;
  opacity: 0.75;
}
.elder-result-ref:hover,
.elder-result-ref:focus-visible {
  background: color-mix(in srgb, var(--result-color) 12%, transparent);
  border-radius: 0.25rem;
  outline: none;
}
.elder-result-ref.is-theorem { --result-color: #6f42c1; }
.elder-result-ref.is-definition { --result-color: #0b6bcb; }
.elder-result-ref.is-inequality { --result-color: #0b7285; }
.elder-result-ref.is-identity { --result-color: #1a7f4b; }
.elder-result-ref.is-principle { --result-color: #b8860b; }
.elder-result-ref.is-method { --result-color: #ad4a1e; }
.elder-result-ref.is-custom { --result-color: #6f42c1; }
.elder-result-ref.is-missing {
  --result-color: #b02a2a;
  border-bottom-style: dotted;
  cursor: help;
}

/* Etiqueta del tipo (Teorema, Desigualdad…) */
.elder-result-kind {
  --result-color: #6f42c1;
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--result-color);
  /* Reserva para navegadores sin color-mix: fondo neutro pero legible. */
  background: #f4f5f7;
  border: 1px solid #dee2e6;
  background: color-mix(in srgb, var(--result-color) 12%, #fff);
  border-color: color-mix(in srgb, var(--result-color) 30%, #fff);
  border-radius: 1rem;
  padding: 0.1rem 0.6rem;
}
.elder-result-kind.is-theorem { --result-color: #6f42c1; }
.elder-result-kind.is-definition { --result-color: #0b6bcb; }
.elder-result-kind.is-inequality { --result-color: #0b7285; }
.elder-result-kind.is-identity { --result-color: #1a7f4b; }
.elder-result-kind.is-principle { --result-color: #b8860b; }
.elder-result-kind.is-method { --result-color: #ad4a1e; }
.elder-result-kind.is-custom { --result-color: #6f42c1; }
.elder-result-kind.is-missing { --result-color: #b02a2a; }

/* La ventana del enunciado. No usa el modal de Bootstrap a propósito: se
   puede abrir desde dentro del banco de pruebas, que ya es un modal. */
.elder-result-overlay {
  position: fixed;
  inset: 0;
  z-index: 1095;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(20, 20, 40, 0.45);
}
.elder-result-overlay[hidden] {
  display: none;
}
body.elder-result-open {
  overflow: hidden;
}
.elder-result-dialog {
  display: flex;
  flex-direction: column;
  width: min(46rem, 100%);
  max-height: min(85vh, 52rem);
  background: #fff;
  border-radius: 0.85rem;
  box-shadow: 0 1.5rem 3rem rgba(20, 20, 40, 0.3);
  overflow: hidden;
}
.elder-result-dialog-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--elder-cell-border);
}
.elder-result-dialog-body {
  padding: 1.1rem 1.25rem 1.35rem;
  overflow-y: auto;
}
.elder-result-modal-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}
.elder-result-modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  overflow-wrap: break-word;
}
.elder-result-modal-body > :last-child {
  margin-bottom: 0;
}
/* En la vista previa del formulario, cabecera y enunciado van en la misma
   caja (en la ventana real los separa el borde de la cabecera). */
.elder-result-modal-head + .elder-result-modal-body {
  margin-top: 0.85rem;
}
.elder-result-modal-note {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--elder-out-border);
  font-size: 0.88rem;
  color: #6c757d;
}
.elder-result-modal-note > :last-child {
  margin-bottom: 0;
}
.elder-result-draft {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: #b02a2a;
}
.elder-result-missing-note {
  color: #6c757d;
  margin: 0;
}
.elder-result-close {
  flex: 0 0 auto;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #6c757d;
  font-size: 1rem;
  line-height: 1;
  padding: 0.35rem 0.45rem;
  border-radius: 0.35rem;
  cursor: pointer;
}
.elder-result-close:hover {
  background: #f1f3f5;
  color: #212529;
}

/* Formulario del catálogo (admin/result_form.php) */
.elder-result-editor .elder-md-toolbar {
  border: 1px solid #ced4da;
  border-bottom: 0;
  border-radius: 0.375rem 0.375rem 0 0;
  background: #fbfbfc;
}
.elder-result-editor .elder-md-toolbar + .elder-result-textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.elder-result-textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
}
.elder-result-preview-card {
  position: sticky;
  top: 5.5rem;
}