/* ═══ LED-M ═════════════════════════════════════════════════════════════════ */
.screen--digital-maze {
  width: 100%; max-width: none; height: calc(100vh - 42px); margin: 0;
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
}
/* Pantalla previa a "mostrar la lámina" (título + botón, sin laberinto todavía): lleva también
   .screen--center, pero .screen--digital-maze pone su propio display:flex sin centrar, así que
   el contenido quedaba pegado arriba. Al combinar ambas clases se centra verticalmente todo el
   bloque; una vez revelada la lámina, esa clase se quita y el layout vuelve al de siempre
   (progreso arriba, laberinto centrado en su propio espacio, acciones abajo). */
.screen--digital-maze.screen--center { justify-content: center; align-items: center; }
.digital-maze-progress {
  margin: 0; text-align: center; font-size: 0.8rem; font-variant-numeric: tabular-nums;
}
.digital-maze-instruction {
  max-width: 920px; margin: 0 auto 2px; text-align: center;
  font-size: 0.85rem; line-height: 1.25;
}
.digital-maze-wrap {
  display: flex; flex: 1 1 auto; justify-content: center; align-items: center;
  min-width: 0; min-height: 0; width: 100%;
}
.digital-maze {
  display: block; aspect-ratio: 5 / 3;
  width: min(calc(100vw - 24px), (100vh - 155px) * 5 / 3); height: auto; margin: auto;
  background: #fff; border: 2px solid #29343b;
  box-shadow: 0 2px 8px rgb(18 31 37 / 15%); cursor: crosshair; touch-action: none; user-select: none;
}
/* Sin stroke propio: el marco lo da el border de .digital-maze (en px de pantalla, constante
   sea cual sea la escala del viewBox de este nivel). Un stroke aquí escalaría con esa escala y
   se vería como un segundo marco, más grueso en niveles chicos y casi invisible en los grandes. */
.digital-maze__walls { fill: #fff; }
.digital-maze__corridor {
  fill: none; stroke: #29343b; stroke-width: var(--maze-corridor);
  stroke-linecap: square; stroke-linejoin: miter; pointer-events: none;
}
.digital-maze__start { fill: #2f9e8f; stroke: #174f48; stroke-width: 4; pointer-events: none; }
.digital-maze__exit { fill: #e0a43b; stroke: #805c20; stroke-width: 4; pointer-events: none; }
.digital-maze__trace {
  fill: none; stroke: #c0453b; stroke-width: 6; stroke-linecap: round;
  stroke-linejoin: round; pointer-events: none;
}
.digital-maze__resume { fill: #c0453b; stroke: #fff; stroke-width: 3; pointer-events: none; }
.digital-maze-actions { display: flex; justify-content: center; margin-top: 1px; }
.digital-maze-status { min-height: 1.2em; margin: 0; text-align: center; font-size: 0.78rem; }
.digital-maze-parking {
  min-width: min(520px, 90vw); min-height: 54px; margin: 12px auto;
  border: 2px dashed #718087; border-radius: 8px; background: #eef2f3; color: var(--ink);
  font: inherit; cursor: pointer;
}
.digital-maze-parking:hover, .digital-maze-parking:focus-visible {
  border-color: var(--accent); outline: none; box-shadow: var(--focus);
}
.maze-device-check {
  display: flex; align-items: flex-start; gap: 9px; margin: 12px 0;
  padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #f7f9f9;
}
.maze-device-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.maze-calibration {
  margin: 14px 0; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #fafbfb; overflow-x: auto;
}
.maze-calibration p { margin: 0 0 8px; font-size: 0.85rem; }
.maze-card-measure {
  height: 13px; max-width: 100%; margin: 7px auto;
  background: var(--accent); border-radius: 3px;
}
.maze-calibration input { width: min(320px, 80%); vertical-align: middle; }
.maze-calibration output {
  display: inline-block; min-width: 48px; margin-left: 8px; font-variant-numeric: tabular-nums;
}
.maze-practice {
  display: block; width: min(650px, 88vw); height: auto; margin: 16px auto;
  background: #fff; cursor: crosshair; touch-action: none;
}

@media (max-height: 700px) {
  .screen--digital-maze { height: calc(100vh - 22px); }
  .digital-maze { width: min(calc(100vw - 24px), (100vh - 130px) * 5 / 3); }
  .digital-maze-instruction { font-size: 0.76rem; }
}