/* Design system extraído de docs/DESIGN.md — tokens y componentes base. */

:root {
  --color-primary: #0a0a0a;
  --color-on-primary: #ffffff;
  --color-brand-coral: #ff5530;
  --color-brand-blue: #1456f0;
  --color-brand-blue-deep: #1d4ed8;
  --color-brand-blue-200: #bfdbfe;
  --color-on-dark: #ffffff;
  --color-canvas: #ffffff;
  --color-surface: #f7f8fa;
  --color-surface-soft: #f2f3f5;
  --color-hairline: #e5e7eb;
  --color-hairline-soft: #eaecf0;
  --color-ink: #0a0a0a;
  --color-charcoal: #222222;
  --color-slate: #45515e;
  --color-steel: #5f5f5f;
  --color-stone: #8e8e93;
  --color-muted: #a8aab2;
  --color-success-bg: #e8ffea;
  --color-success-text: #1ba673;
  --color-warning-bg: #fff8db;
  --color-warning-text: #8a6d00;
  --color-error: #d45656;

  --font-family: "DM Sans", Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-xxl: 20px;
  --radius-hero: 32px;
  --radius-full: 9999px;

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;
  --space-section: 64px;
}

:root[data-theme="dark"] {
  --color-canvas: #16181d;
  --color-surface: #1c1f26;
  --color-surface-soft: #20232b;
  --color-hairline: #2e323b;
  --color-hairline-soft: #292d35;
  --color-ink: #f2f3f5;
  --color-charcoal: #e5e7eb;
  --color-slate: #b7c0cb;
  --color-steel: #9aa3ad;
  --color-stone: #7d838c;
  --color-muted: #5f656d;
  --color-primary: #f2f3f5;
  --color-on-primary: #0a0a0a;
  --color-warning-bg: #3a2f0d;
  --color-warning-text: #f3d75c;
}
:root[data-theme="dark"] body { background: #101217; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--color-ink);
  background: var(--color-surface);
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.5px; margin: 0 0 var(--space-md); }
h1 { font-size: 40px; line-height: 1.2; letter-spacing: -1px; }
h2 { font-size: 32px; line-height: 1.25; }
h3 { font-size: 24px; line-height: 1.3; letter-spacing: 0; }
p { margin: 0 0 var(--space-md); }

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xxl) var(--space-md);
}

/* Buttons */
.button-primary, .button-secondary, .button-tertiary {
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: var(--radius-full);
  padding: 11px 24px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}
.button-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
.button-primary:active { background: var(--color-charcoal, #222); }
.button-primary:disabled, .button-secondary:disabled, .button-tertiary:disabled {
  background: var(--color-hairline);
  color: var(--color-muted);
  border-color: var(--color-hairline);
  cursor: not-allowed;
}
.button-secondary {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}
.button-tertiary {
  background: var(--color-canvas);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
}
.icon-button {
  background: var(--color-canvas);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.icon-button:active { background: var(--color-hairline); }

/* Badge de versión de la app, inyectado por shared/version.js en todas las
   páginas. Fijo para no desplazar layout ni scrollear con el contenido. */
.app-version-badge {
  position: fixed;
  left: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 1000;
  font-size: 11px;
  color: var(--color-muted);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  pointer-events: none;
  user-select: none;
}

/* Cards */
.card-base {
  background: var(--color-canvas);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  border: 1px solid var(--color-hairline);
}
.card-feature {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-xxl);
}

/* Inputs */
.text-input, select.text-input, textarea.text-input {
  background: var(--color-canvas);
  color: var(--color-ink);
  font-family: var(--font-family);
  font-size: 16px;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-hairline);
  height: 40px;
  width: 100%;
}
textarea.text-input { height: auto; min-height: 96px; padding: var(--space-md); }

.text-input:focus {
  outline: none;
  border: 2px solid var(--color-brand-blue-deep);
  padding: 9px 15px;
}
.text-input.error { border: 1px solid var(--color-error); }

/* Input de código de examen (código de evaluación + clave de estudiante):
   el código de evaluación no tiene largo fijo garantizado en el sistema,
   así que el ancho deja margen de sobra en vez de calzar un largo exacto. */
.code-input {
  width: 22ch;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase;
}
.field-error {
  color: var(--color-error);
  font-size: 14px;
  margin-top: var(--space-xxs);
}
.warning-banner {
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  font-size: 14px;
  font-weight: 500;
}
label.field-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--space-xxs);
  color: var(--color-charcoal);
}

/* Badges */
.badge-success, .badge-new, .badge-beta {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-full);
  padding: 4px 10px;
}
.badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-new { background: var(--color-brand-coral); color: #fff; }
.badge-beta { background: var(--color-brand-blue-200); color: var(--color-brand-blue-deep); }

/* Envoltorio responsive: tablas con muchas columnas (listas docente,
   resultados) no cabuecen en pantallas angostas. En vez de encogerlas
   (ilegible) o dejar que desborden la página completa (scroll horizontal
   del body, se ve roto), el scroll horizontal queda contenido dentro de
   este wrapper — el resto de la página no se mueve. */
.table-scroll { overflow-x: auto; }

/* Data table */
table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-canvas);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-hairline);
  font-size: 14px;
}
table.data-table th {
  background: var(--color-surface);
  color: var(--color-steel);
  font-weight: 600;
  font-size: 13px;
  text-align: left;
  padding: var(--space-sm) var(--space-md);
}
table.data-table td {
  padding: var(--space-md);
  border-top: 1px solid var(--color-hairline-soft);
}
/* Celdas de "Puntos totales" y "Calificación" en la tabla de resultados:
   mismo fondo que el botón "Guardar cambios" tal como lo ve el docente la
   mayor parte del tiempo — deshabilitado, porque normalmente no hay cambios
   sin guardar al mirar resultados (`.button-primary:disabled`, variable
   --color-hairline), no su color habilitado. Se adapta solo entre modo claro
   y oscuro igual que el botón. Texto blanco fijo (no --color-muted ni otra
   variable, no depende del tema) para el valor. Solo las celdas de datos
   (`td`); la cabecera (`th`) queda igual que las demás columnas. */
table.data-table td.col-puntos-totales,
table.data-table td.col-calificacion {
  background: var(--color-hairline);
  color: #ffffff;
}

/* Quiz-code blocks (contenido de ejemplo, ver docs/FORMATO_EVALUACIONES.md) */
pre.quiz-code {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* Bloque de contenido fijo (Markdown de la evaluación, ver quiz_parser.py).
   El docente escribe este contenido libremente y puede incluir una tabla
   ancha (ver docs/FORMATO_EVALUACIONES.md) o un diagrama mermaid grande;
   overflow-x acá evita que ese contenido arbitrario rompa el ancho de la
   página completa en pantallas angostas — se aplica al contenedor en vez
   de a cada tabla/diagrama individualmente porque el HTML ya viene
   renderizado desde el backend (ver quiz_parser._render_markdown), sin un
   wrapper propio por elemento. */
.content-block { overflow-x: auto; }

code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--color-surface); border-radius: var(--radius-xs); padding: 1px 4px; }
pre.quiz-code code { background: none; padding: 0; }

/* Timer flotante (siempre visible, arriba a la derecha) */
.timer-layer {
  position: fixed;
  top: calc(var(--topbar-height) + var(--space-md));
  right: var(--space-lg);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-full);
  padding: var(--space-sm) var(--space-lg);
  font-weight: 600;
  font-size: 18px;
  box-shadow: rgba(0,0,0,0.15) 0px 4px 12px 0px;
  z-index: 1200;
}
.timer-layer.warning { background: var(--color-brand-coral); }

/* Popup de advertencia por cambio de pestaña/foco: sticky (no fixed) para que
   acompañe el scroll de la página, pero quede siempre visible una vez que la
   página se desplaza hasta su altura. Colores fijos (no siguen el tema
   claro/oscuro) para máxima visibilidad. */
.exit-warning-popup {
  position: sticky;
  top: var(--topbar-height);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-md);
  background: #ff9800;
  color: #000;
  padding: var(--space-sm) 160px var(--space-sm) var(--space-lg);
  font-size: 14px;
  font-weight: 500;
  box-shadow: rgba(0,0,0,0.15) 0px 4px 12px 0px;
}
.exit-warning-popup .exit-warning-close {
  flex-shrink: 0;
  margin-left: auto;
  background: none;
  border: none;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* Choice list */
.choice-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
  cursor: pointer;
}
.choice-option:has(input:checked) { border-color: var(--color-brand-blue-deep); background: var(--color-surface); }
.choice-option input { margin-top: 3px; }
/* Marca explícita de "esto eligió el estudiante" en la revisión docente
   (ver renderDetalleIntento en docente/app.js): no depende de :has() ni de
   que se note un cambio sutil de color de borde, a diferencia de la regla
   de arriba — un docente escaneando rápido varias entregas la tiene que ver
   sin dudar. */
.choice-option-student { box-shadow: inset 0 0 0 2px var(--color-brand-blue-deep); }
.choice-option-student-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-brand-blue-deep);
  white-space: nowrap;
}

.question-card {
  background: var(--color-canvas);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  border: 1px solid var(--color-hairline);
  margin-bottom: var(--space-xl);
}
.question-points {
  font-size: 13px;
  color: var(--color-steel);
  font-weight: 600;
}
.question-explanation {
  margin-top: var(--space-md);
  background: var(--color-success-bg);
  color: var(--color-charcoal);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-size: 14px;
}
.question-correct { border-left: 4px solid var(--color-success-text); }
.question-incorrect { border-left: 4px solid var(--color-error); }

/* Pregunta type="file-upload" (ver renderQuestionHTML en shared/api.js). */
.file-upload-field { display: flex; flex-direction: column; gap: var(--space-xs); }
.file-upload-status { font-size: 14px; }

/* --color-success-bg no se redefine en modo oscuro (queda verde claro a
   propósito, para diferenciar el tip de éxito del resto de la tarjeta), así
   que el texto de adentro debe fijarse a negro en vez de heredar
   --color-charcoal, que en modo oscuro es gris claro y queda casi invisible
   sobre ese fondo. */
:root[data-theme="dark"] .question-explanation { color: #111111; }

/* El <code> inline hereda el fondo de --color-surface (oscuro en este tema)
   y el color recién fijado arriba (#111111), lo que da letras negras sobre
   fondo oscuro — invisible. Se fija un fondo gris claro propio para que el
   texto negro heredado quede legible. */
:root[data-theme="dark"] .question-explanation code { background: #d9dbe0; }

.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}

a { color: var(--color-brand-blue-deep); }

.stat-row { display: flex; gap: var(--space-xl); flex-wrap: wrap; margin-bottom: var(--space-xl); }
.stat-cell { text-align: left; }
.stat-cell .value { font-size: 32px; font-weight: 600; }
.stat-cell .label { font-size: 14px; color: var(--color-steel); display: flex; align-items: center; }

/* Vista "Progreso" (docente/app.js::renderProgresoContenido): KPI tiles
   cliqueables + barra apilada + leyenda, las tres son formas distintas de
   disparar el mismo filtro (toggleFiltroProgreso) sobre la tabla de abajo. */
.stat-cell-clicable { cursor: pointer; border-radius: var(--radius-md); padding: var(--space-xs) var(--space-sm); margin: calc(var(--space-xs) * -1) calc(var(--space-sm) * -1); }
.stat-cell-clicable:hover { background: var(--color-surface); }
.stat-cell-clicable:focus-visible { outline: 2px solid var(--color-brand-blue-deep); outline-offset: 2px; }
.stat-cell-activo { background: var(--color-surface-soft); }

.progreso-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; margin-right: 6px; }

.progreso-bar {
  display: flex;
  height: 24px;
  gap: 2px;
  margin-bottom: var(--space-md);
  background: var(--color-surface-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.progreso-segmento {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4px;
  cursor: pointer;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  transition: filter 0.1s ease;
}
.progreso-segmento:hover, .progreso-segmento:focus-visible { filter: brightness(1.1); }
.progreso-segmento:focus-visible { outline: 2px solid var(--color-brand-blue-deep); outline-offset: 2px; }
.progreso-segmento-activo { box-shadow: inset 0 0 0 2px var(--color-canvas), inset 0 0 0 4px var(--color-brand-blue-deep); }
.progreso-segmento-vacio { flex: 1; color: var(--color-steel); font-weight: 400; cursor: default; }

.progreso-legend { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.progreso-leyenda-item {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  color: var(--color-ink);
  background: none;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  cursor: pointer;
}
.progreso-leyenda-item:hover { background: var(--color-surface); }
.progreso-leyenda-activo { border-color: var(--color-brand-blue-deep); background: var(--color-surface-soft); }

/* Topbar (ver docs/DESIGN.md, componente "Top Navigation (Marketing)") */
:root { --topbar-height: 64px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-xl);
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-hairline-soft);
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
}
.topbar-icon { flex-shrink: 0; display: block; }
.topbar-name {
  font-family: var(--font-family);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--color-ink);
}
@media (max-width: 480px) {
  :root { --topbar-height: 56px; }
  .topbar { padding: 0 var(--space-md); }
}

/* Theme toggle button (ver shared/theme.js): botón circular dentro del topbar */
.theme-toggle {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-hairline);
  background: var(--color-canvas);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.2s, border-color 0.2s;
}
.theme-toggle:hover { background: var(--color-surface); }
@media (max-width: 480px) {
  .theme-toggle { width: 44px; height: 44px; font-size: 18px; }
}

/* Toast UI Editor (toastui-editor.min.css) hardcodea colores de texto claros
   (#222, tablas #555/#fff, etc.) pensados para fondo blanco: en tema oscuro
   quedan casi invisibles sobre el canvas oscuro. Se pisan acá en vez de tocar
   el vendor file, tanto para el contenido en modo lectura (viewer) como para
   el área de edición WYSIWYG, que comparten la clase .toastui-editor-contents. */
:root[data-theme="dark"] .toastui-editor-contents p,
:root[data-theme="dark"] .toastui-editor-contents h1,
:root[data-theme="dark"] .toastui-editor-contents h2,
:root[data-theme="dark"] .toastui-editor-contents h3,
:root[data-theme="dark"] .toastui-editor-contents h4,
:root[data-theme="dark"] .toastui-editor-contents h5,
:root[data-theme="dark"] .toastui-editor-contents h6,
:root[data-theme="dark"] .toastui-editor-contents dir,
:root[data-theme="dark"] .toastui-editor-contents menu,
:root[data-theme="dark"] .toastui-editor-contents ol,
:root[data-theme="dark"] .toastui-editor-contents ul,
:root[data-theme="dark"] .toastui-editor-contents table {
  color: var(--color-ink);
}
:root[data-theme="dark"] .toastui-editor-contents del,
:root[data-theme="dark"] .toastui-editor-contents blockquote,
:root[data-theme="dark"] .toastui-editor-contents blockquote ol,
:root[data-theme="dark"] .toastui-editor-contents blockquote p,
:root[data-theme="dark"] .toastui-editor-contents blockquote ul,
:root[data-theme="dark"] .toastui-editor-contents-placeholder:before {
  color: var(--color-steel);
}
:root[data-theme="dark"] .toastui-editor-contents blockquote {
  border-left-color: var(--color-hairline);
}
:root[data-theme="dark"] .toastui-editor-contents pre {
  background-color: var(--color-surface-soft);
}
:root[data-theme="dark"] .toastui-editor-contents code {
  background-color: var(--color-surface-soft);
  color: var(--color-brand-coral);
}
:root[data-theme="dark"] .toastui-editor-contents table {
  border-color: var(--color-hairline);
}
:root[data-theme="dark"] .toastui-editor-contents table th,
:root[data-theme="dark"] .toastui-editor-contents th p,
:root[data-theme="dark"] .toastui-editor-contents th.toastui-editor-md-preview-highlight {
  background-color: var(--color-surface-soft);
  color: var(--color-ink);
}
:root[data-theme="dark"] .toastui-editor-contents a {
  color: var(--color-brand-blue-200);
}
:root[data-theme="dark"] .toastui-editor-contents a:hover {
  color: #fff;
}
:root[data-theme="dark"] .toastui-editor-contents .toastui-editor-ww-code-block:after {
  background-color: var(--color-surface-soft);
  color: var(--color-ink);
}

/* El área de edición WYSIWYG (.toastui-editor-ww-container) trae fondo
   blanco fijo en el CSS del vendor: sin esto, el texto claro de arriba
   quedaría blanco sobre blanco en vez de invisible-sobre-oscuro. */
:root[data-theme="dark"] .toastui-editor-ww-container {
  background-color: var(--color-surface-soft);
}
:root[data-theme="dark"] .toastui-editor-main-container {
  color: var(--color-ink);
}

/* Mermaid pinta las líneas/flechas de sus diagramas con un stroke oscuro fijo
   como estilo inline (pensado para fondo claro), así que en modo oscuro
   quedan casi invisibles sobre el fondo oscuro. Como es un style="" inline,
   hace falta !important para poder pisarlo desde acá. */
:root[data-theme="dark"] .mermaid .edgePath path,
:root[data-theme="dark"] .mermaid .flowchart-link,
:root[data-theme="dark"] .mermaid marker path {
  stroke: #e5e5e5 !important;
}
:root[data-theme="dark"] .mermaid marker path {
  fill: #e5e5e5 !important;
}

/* Panel de edición en modo Markdown puro (código, mermaid, contenido fijo
   con <quiz-code> embebido): el texto suelto y los tokens (comillas,
   enlaces, tablas, HTML crudo) también vienen con grises pensados para
   fondo blanco. */
:root[data-theme="dark"] .toastui-editor-md-block-quote,
:root[data-theme="dark"] .toastui-editor-md-delimiter,
:root[data-theme="dark"] .toastui-editor-md-link,
:root[data-theme="dark"] .toastui-editor-md-table,
:root[data-theme="dark"] .toastui-editor-md-thematic-break {
  color: var(--color-stone);
}
:root[data-theme="dark"] .toastui-editor-md-code.toastui-editor-md-delimiter {
  color: var(--color-steel);
}
:root[data-theme="dark"] .toastui-editor-md-html,
:root[data-theme="dark"] .toastui-editor-md-link.toastui-editor-md-link-url.toastui-editor-md-marked-text,
:root[data-theme="dark"] .toastui-editor-md-meta {
  color: var(--color-steel);
}
:root[data-theme="dark"] .toastui-editor-md-block-quote .toastui-editor-md-marked-text,
:root[data-theme="dark"] .toastui-editor-md-list-item .toastui-editor-md-meta {
  color: var(--color-ink);
}
:root[data-theme="dark"] .toastui-editor-md-table .toastui-editor-md-table-cell {
  color: var(--color-ink);
}
:root[data-theme="dark"] .toastui-editor-md-code {
  background-color: var(--color-surface-soft);
}
:root[data-theme="dark"] .toastui-editor-md-code-block-line-background {
  background-color: var(--color-surface-soft);
}
:root[data-theme="dark"] .toastui-editor-main .toastui-editor-md-splitter {
  background-color: var(--color-hairline);
}

/* Resaltado de la línea activa (sincroniza cursor de escritura con la vista
   previa): el amarillo del vendor queda demasiado brillante sobre fondo
   oscuro, se atenúa. */
:root[data-theme="dark"] .toastui-editor-md-preview-highlight:after,
:root[data-theme="dark"] .toastui-editor-md-preview-highlight,
:root[data-theme="dark"] .toastui-editor-contents td.toastui-editor-md-preview-highlight,
:root[data-theme="dark"] .toastui-editor-contents th.toastui-editor-md-preview-highlight {
  background-color: rgba(255, 245, 131, 0.15);
}
:root[data-theme="dark"] .toastui-editor-md-preview-highlight {
  color: var(--color-ink);
}

/* Pestañas Escribir/Vista previa (previewStyle: "tab", ver docente/app.js) */
:root[data-theme="dark"] .toastui-editor-md-tab-container .tab-item {
  background: var(--color-surface-soft);
  border-color: var(--color-hairline);
  color: var(--color-steel);
}
:root[data-theme="dark"] .toastui-editor-md-tab-container .tab-item.active {
  background-color: var(--color-canvas);
  border-bottom-color: var(--color-canvas);
  color: var(--color-ink);
}