/* =========================================================================
   VOLUMEN MATH — styles.css
   Paleta violeta/índigo (cuerpos, cubos, profundidad), para distinguirla a
   simple vista de LONGIMATH (azul) y SUPERFICIE MATH (verde). CSS Grid +
   Flexbox + Media Queries. Sin medidas fijas de layout.

   Las tres caras del cubo usan tres tonos del mismo violeta (--cubo-top el
   más claro arriba, --cubo-left el más oscuro): es lo que da la sensación de
   volumen sin necesidad de sombras ni degradados.
   ========================================================================= */

:root {
  --color-primary: #6d28d9;       /* violeta */
  --color-primary-dark: #4c1d95;
  --color-primary-light: #a78bfa; /* lavanda */
  --color-bg: #f6f4fd;            /* gris violáceo claro */
  --color-surface: #ffffff;
  --color-border: #e2dbf5;
  --ink: #241f33;
  --ink-soft: #635b78;
  --ok: #16a34a;
  --error: #dc2626;
  --accent: #f4a300;
  --cubo-top: #c4b5fd;
  --cubo-right: #8b5cf6;
  --cubo-left: #5b21b6;
  --cubo-arista: #3b1580;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 8px 24px rgba(109, 40, 217, 0.14);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
  --font-main: 'Nunito Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'Baloo 2', var(--font-main);
}

[data-theme="dark"] {
  --color-primary: #a78bfa;
  --color-primary-dark: #8b5cf6;
  --color-primary-light: #c4b5fd;
  --color-bg: #14101f;
  --color-surface: #221b33;
  --color-border: #3b3054;
  --ink: #f1eefb;
  --ink-soft: #a99dc4;
  --cubo-top: #a78bfa;
  --cubo-right: #7c3aed;
  --cubo-left: #4c1d95;
  --cubo-arista: #cbb8ff;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-anim="off"] *, [data-anim="off"] *::before, [data-anim="off"] *::after {
  animation-duration: 0.001s !important;
  transition-duration: 0.001s !important;
}

* { box-sizing: border-box; }

/* El atributo hidden lo pisaba cualquier regla con display propio: por eso la
   barra superior (display:flex) seguía viéndose después de "Salir", con el
   nombre del estudiante anterior. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--color-bg);
  color: var(--ink);
  font-family: var(--font-main);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

body { min-height: 100vh; }

h1, h2, h3 { font-family: var(--font-display); margin: 0 0 0.4em; }

button, input, select { font-family: inherit; }

.app-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(12px, 3vw, 28px);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- pantallas ---------------------------------------------------- */

.screen { display: none; flex: 1; flex-direction: column; animation: fadeIn 0.25s ease; position: relative; }
.screen.active { display: flex; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ---- barra de navegación superior ---------------------------------- */

.topnav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 10px 16px;
  margin-bottom: 18px;
}
.topnav-user { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.topnav-user .stars { color: var(--accent); }
.topnav-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.topnav-actions button { font-size: 0.85rem; padding: 8px 10px; }

/* ---- pantalla principal -------------------------------------------- */

.hero { text-align: center; padding: clamp(16px, 6vw, 48px) 0 8px; }
.hero-title {
  font-size: clamp(2.2rem, 7.5vw, 3.6rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 1px;
}
.hero-subtitle { color: var(--ink-soft); font-size: clamp(1rem, 3vw, 1.25rem); margin-bottom: 1.5em; }
.hero-ruler { font-size: 2.4rem; margin-bottom: 0.2em; }

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

/* ---- botones --------------------------------------------------------- */

.btn {
  border: none; border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  min-height: 44px;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow); }
.btn-secondary { background: var(--color-primary-light); color: #2e1065; }
.btn-ghost { background: transparent; color: var(--color-primary); border: 2px solid var(--color-border); }
.btn-ghost:hover { border-color: var(--color-primary); }
.btn-big { padding: 18px 20px; font-size: 1.05rem; width: 100%; }
.btn-danger { background: var(--error); color: #fff; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-option { background: var(--color-surface); border: 2px solid var(--color-border); color: var(--ink); }
.btn-option.selected { border-color: var(--color-primary); background: rgba(109,40,217,0.1); }

.row-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ---- tarjetas / paneles ------------------------------------------------ */

.card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(16px, 4vw, 26px);
}

.form-card { max-width: 420px; margin: 0 auto; width: 100%; }
.form-card label { display: block; font-weight: 700; margin: 14px 0 6px; }
.form-card input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 2px solid var(--color-border); background: var(--color-bg); color: var(--ink);
  font-size: 1rem;
}
.form-card input:focus { outline: none; border-color: var(--color-primary); }
.form-card select {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 2px solid var(--color-border); background: var(--color-bg); color: var(--ink);
  font-size: 1rem;
}
.form-card select:focus { outline: none; border-color: var(--color-primary); }
.error-box { color: var(--error); background: rgba(220,38,38,0.08); border-radius: var(--radius-sm); padding: 10px 12px; margin-top: 10px; font-weight: 600; }
.muted { color: var(--ink-soft); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.chip { border: 2px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-weight: 600; }
.chip-score { color: var(--accent); font-weight: 700; }
.chip-grado {
  display: inline-block; margin-left: 4px; padding: 1px 7px;
  border-radius: 999px; background: rgba(109,40,217,0.12); color: var(--color-primary);
  font-size: 0.78rem; font-weight: 800;
}

/* Listados de estudiantes: con el servidor conectado pueden llegar dos cursos
   enteros, así que la caja no crece sin fin — se ven 5 y el resto con scroll. */
.lista-scroll {
  flex-direction: column; flex-wrap: nowrap;
  max-height: calc(5 * 47px + 4 * 8px);
  overflow-y: auto; padding-right: 4px;
}
.lista-scroll .chip { flex: 0 0 auto; text-align: left; }

.tabla-scroll { max-height: calc(40px + 8 * 42px); overflow-y: auto; margin-top: 12px; }
.tabla-scroll .ranking-table { margin-top: 0; }
.tabla-scroll thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--color-surface); box-shadow: inset 0 -1px 0 var(--color-border);
}

/* ---- bienvenida ---------------------------------------------------- */

.welcome-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 18px 0; }
.welcome-stat { background: var(--color-bg); border-radius: var(--radius-sm); padding: 14px; text-align: center; }
.welcome-stat .big { font-size: 1.6rem; font-weight: 800; color: var(--color-primary); display: block; }
.medal { font-size: 1.5rem; margin-right: 4px; }

/* ---- niveles --------------------------------------------------------- */

.niveles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.nivel-card {
  text-align: left;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.nivel-card:not([disabled]):hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--color-primary-light); }
.nivel-card[disabled] { opacity: 0.55; cursor: not-allowed; }
.nivel-num { font-size: 0.8rem; color: var(--ink-soft); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.nivel-nombre { font-size: 1.15rem; font-weight: 800; }
.nivel-estado-badge { font-size: 0.85rem; }
.estado-completado { border-color: var(--ok); }
.estado-disponible { border-color: var(--color-primary-light); }

.mini-bar { display: block; height: 6px; background: var(--color-border); border-radius: 4px; overflow: hidden; }
.mini-bar-fill { display: block; height: 100%; background: var(--color-primary); }

#nivel-detalle { margin-top: 16px; }
.nivel-detalle-stats { color: var(--ink-soft); font-weight: 600; }

/* ---- ejercicio ------------------------------------------------------- */

.practica-banner {
  background: linear-gradient(135deg, var(--accent), #ffd166);
  color: #4a3200;
  font-weight: 800;
  text-align: center;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
}

.ejercicio-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  justify-content: space-between; margin-bottom: 14px;
}
.ejercicio-header h2 { font-size: 1.2rem; }
.ejercicio-meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--ink-soft); font-weight: 700; }
.ejercicio-meta .puntos { color: var(--accent); }

.progress-track { background: var(--color-border); border-radius: 999px; height: 10px; overflow: hidden; }
.progress-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)); width: 0%; transition: width 0.4s ease; }

.ejercicio-area { display: flex; justify-content: center; align-items: center; margin: 16px 0; overflow-x: auto; }
.exercise-svg { width: 100%; max-width: 560px; height: auto; touch-action: none; user-select: none; }
.exercise-svg.small { max-width: 440px; }
/* Las figuras cuadriculadas comparten lienzo (ver FIG_W/FIG_H en ui.js); este
   tope evita que en pantallas grandes el cuadrado unidad salga gigante. */
.exercise-svg.figura { max-width: 470px; }

/* ---- cuerpos en isometría ---------------------------------------------- */

/* Las tres caras del cubo unidad. La arista fina entre cubos es lo que deja
   contarlos de un vistazo cuando hay varios pegados. */
.cubo-top { fill: var(--cubo-top); stroke: var(--cubo-arista); stroke-width: 1; }
.cubo-right { fill: var(--cubo-right); stroke: var(--cubo-arista); stroke-width: 1; }
.cubo-left { fill: var(--cubo-left); stroke: var(--cubo-arista); stroke-width: 1; }

/* Cuerpo macizo (niveles 3, 4, 5 y 8): las divisiones marcan el cubo unidad
   sin tener que dibujar los cientos de cubos que lo forman. */
.cubo-division { stroke: var(--cubo-arista); stroke-width: 0.8; opacity: 0.5; }
.cuerpo-contorno { fill: none; stroke: var(--cubo-arista); stroke-width: 2.5; stroke-linejoin: round; }

/* Nivel 1: la caja se ve vacía (piso y paredes del fondo), sin marcar los
   huecos — cuántos cubos caben es justamente lo que hay que averiguar. */
.caja-piso { fill: #ece7fb; stroke: var(--color-border); stroke-width: 1; }
.caja-pared { fill: #f6f3fe; stroke: var(--color-border); stroke-width: 1; }
[data-theme="dark"] .caja-piso { fill: #2a2140; }
[data-theme="dark"] .caja-pared { fill: #201936; }
.caja-contorno { fill: none; stroke: var(--color-primary); stroke-width: 3; stroke-linejoin: round; }
.unit-token { cursor: grab; touch-action: none; }

/* Niveles 3 y 4: líneas de cota (las medidas van fuera del cuerpo). */
.cota-linea { stroke: var(--ink-soft); stroke-width: 1.4; }
.cota-guia { stroke: var(--ink-soft); stroke-width: 0.9; opacity: 0.55; }
.cota-texto { font-size: 15px; }

/* Nivel 2: el control para separar las capas y poder contarlas. Va debajo del
   dibujo (no en el panel de abajo) porque ese panel lo reescribe la casilla de
   respuesta. */
.capas-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.capas-control { display: flex; align-items: center; gap: 12px; width: min(100%, 340px); }
.capas-control label { font-weight: 700; font-size: 0.9rem; color: var(--ink-soft); white-space: nowrap; }
.capas-control input[type="range"] {
  flex: 1; height: 30px; accent-color: var(--color-primary); cursor: pointer;
}

/* Nivel 8: el anclaje de 1 dm³ = 1 L. */
.cap-botella { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 2; }
.cap-tapa { fill: var(--color-primary); }
.cap-liquido { fill: var(--color-primary-light); opacity: 0.85; }

/* Las tres equivalencias, cada una en su recuadro: se leen como tres reglas
   distintas y no como un renglón corrido. En el celular bajan de línea. */
.capacidad-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.equivalencias { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.equiv {
  border: 2px solid var(--color-primary); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--ink);
  padding: 8px 14px; font-weight: 800; font-size: 0.95rem; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}

.svg-caption { font-size: 12px; fill: var(--ink-soft); }
.svg-question { font-size: 16px; fill: var(--ink); font-weight: 700; }

.word-problem-text { font-size: 1.05rem; line-height: 1.4; text-align: center; }

/* Nivel 7: el ejercicio a un lado y la escalera de volumen al otro.
   En pantallas angostas se apilan. Cada escalón vale 1000 (no 10 como en
   LONGIMATH ni 100 como en SUPERFICIE MATH), porque el volumen lleva tres
   dimensiones. */
.convert-wrap { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }
.convert-pregunta { flex: 1 1 260px; min-width: 220px; display: flex; justify-content: center; }
.convert-pregunta .exercise-svg { max-width: 300px; }

.escalera {
  flex: 0 0 auto; width: 100%; max-width: 340px;
  background: var(--color-surface); border: 2px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 8px 10px 10px;
}
.escalera:focus { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.escalera-svg { display: block; width: 100%; height: auto; user-select: none; }
.escalera-info { font-size: 0.85rem; line-height: 1.35; margin: 6px 0 0; text-align: center; font-weight: 700; color: var(--ink); }
.escalera-info.baja { color: #b45309; }
.escalera-info.sube { color: #1d4ed8; }
[data-theme="dark"] .escalera-info.baja { color: #fbbf24; }
[data-theme="dark"] .escalera-info.sube { color: #93c5fd; }
.escalera-ayuda { font-size: 0.72rem; color: var(--ink-soft); text-align: center; margin: 4px 0 0; }
.btn-verificar { display: block; margin: 8px auto 0; padding: 8px 16px; font-size: 0.9rem; }
/* alto reservado: el aviso aparece y desaparece, y sin esto el panel daría
   un salto cada vez que se comprueba la escalera */
.escalera-aviso { font-size: 0.8rem; font-weight: 700; text-align: center; margin: 6px 0 0; min-height: 2.2em; }
.escalera-aviso.ok { color: var(--ok); }
.escalera-aviso.mal { color: var(--error); }
.escalera.verificada { border-color: var(--ok); }

.esc-linea { fill: none; stroke: #2563eb; stroke-width: 2.6; stroke-linejoin: round; }
.esc-unidad { font-size: 12.5px; font-weight: 800; fill: #dc2626; }
.esc-unidad.actual { fill: #ffffff; }
.esc-unidad.inicio { fill: #7f1d1d; text-decoration: underline; }
.esc-marca { fill: #2563eb; }
.esc-hit { cursor: pointer; }
.esc-flecha { fill: none; stroke: var(--ink-soft); stroke-width: 2.4; stroke-linecap: round; }
.esc-punta { fill: var(--ink-soft); }
.esc-op { font-size: 12px; font-weight: 800; fill: var(--ink-soft); }
.esc-paso { font-size: 9.5px; font-weight: 800; }
.esc-paso.baja { fill: #b45309; }
.esc-paso.sube { fill: #1d4ed8; }
[data-theme="dark"] .esc-unidad { fill: #f87171; }
[data-theme="dark"] .esc-unidad.inicio { fill: #fca5a5; }
[data-theme="dark"] .esc-paso.baja { fill: #fbbf24; }
[data-theme="dark"] .esc-paso.sube { fill: #93c5fd; }

.ejercicio-panel { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; }
.control-question { font-weight: 700; margin: 0 0 8px; }
.answer-row { display: flex; gap: 10px; }
.input-numero { flex: 1; padding: 12px 14px; border-radius: var(--radius-sm); border: 2px solid var(--color-border); background: var(--color-bg); color: var(--ink); font-size: 1.1rem; }
.input-numero:focus { outline: none; border-color: var(--color-primary); }

.option-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.feedback { min-height: 1.4em; margin: 10px 0; font-weight: 700; }
.feedback.ok { color: var(--ok); }
.feedback.error { color: var(--error); }
.explicacion { background: rgba(109,40,217,0.08); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; }

.final-panel { text-align: center; }
.final-panel h2 { font-size: 1.8rem; }

/* ---- estudiantes ------------------------------------------------------- */

.estudiante-card { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.estudiante-card-score { font-weight: 800; color: var(--accent); font-size: 1.1rem; }

/* ---- ranking / progreso ------------------------------------------------ */

.ranking-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.ranking-table th, .ranking-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--color-border); }
.ranking-table th { color: var(--ink-soft); font-size: 0.85rem; text-transform: uppercase; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 16px 0; }
.stat-card { background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); padding: 14px; text-align: center; }
.stat-icon { font-size: 1.6rem; display: block; }
.stat-value { font-size: 1.3rem; font-weight: 800; color: var(--color-primary); display: block; margin: 4px 0 2px; }
.stat-label { font-size: 0.8rem; color: var(--ink-soft); }

.progress-chart { width: 100%; max-width: 620px; display: block; margin: 10px auto; }
.chart-axis { stroke: var(--color-border); stroke-width: 1.5; }
.chart-label { font-size: 11px; fill: var(--ink-soft); }

/* ---- configuración --------------------------------------------------- */

.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--color-border);
}
.switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; background: var(--color-border); border-radius: 999px; cursor: pointer; transition: background 0.2s;
}
.switch .slider::before {
  content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform 0.2s; box-shadow: var(--shadow-sm);
}
.switch input:checked + .slider { background: var(--color-primary); }
.switch input:checked + .slider::before { transform: translateX(22px); }

.confirm-box { background: rgba(220,38,38,0.08); border-radius: var(--radius-sm); padding: 14px; margin-top: 10px; }
.confirm-box label { display: block; font-weight: 700; margin-bottom: 4px; }
.confirm-box input[type="password"] {
  width: 100%; max-width: 180px; padding: 10px 12px; font-size: 1rem;
  border: 2px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--ink); margin-bottom: 8px;
  letter-spacing: 0.3em;
}
.confirm-box input[type="password"]:focus { outline: none; border-color: var(--color-primary); }

/* ---- toasts / celebraciones ------------------------------------------- */

#toast-host { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; width: min(92vw, 420px); }
.toast {
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow); opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; font-weight: 700; text-align: center;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.ok { background: var(--ok); }

.points-popup {
  position: fixed; z-index: 100; color: var(--accent); font-weight: 800; font-size: 1.2rem;
  animation: floatUp 1.1s ease forwards; pointer-events: none;
}
@keyframes floatUp { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px); } }

.confetti-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece { position: absolute; top: -10px; width: 8px; height: 14px; opacity: 0.9; animation-name: confettiFall; animation-timing-function: ease-in; }
@keyframes confettiFall { to { transform: translateY(320px) rotate(360deg); opacity: 0; } }

.anim-pulse { animation: pulseKf 0.4s ease; }
@keyframes pulseKf { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

.anim-shake { animation: shakeKf 0.4s ease; }
@keyframes shakeKf { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---- footer / acerca --------------------------------------------------- */

.about-text { line-height: 1.6; }
.about-text ul { padding-left: 1.2em; }

/* ---- responsive -------------------------------------------------------- */

@media (max-width: 480px) {
  .btn { padding: 12px 14px; font-size: 0.95rem; }
  .ejercicio-header { flex-direction: column; align-items: flex-start; }
  .answer-row { flex-direction: column; }
}

@media (pointer: coarse) {
  .btn, .nivel-card, .chip { min-height: 46px; }
  /* el control de capas se arrastra con el dedo: necesita alto de sobra */
  .capas-control input[type="range"] { height: 46px; }
}