/*
 * Laboratorio de Física 3D - Interfaz
 *
 * Lenguaje visual propio: instrumento de laboratorio nocturno. Superficies
 * oscuras y opacas, un ámbar de señalización para lo que el estudiante
 * debe accionar, un cian de instrumento para lo que se mide y un verde
 * solo para lo que ya quedó resuelto. Nada decorativo compite con la
 * escena 3D, que es el contenido real de la página.
 */

:root {
  --fondo: #0a0e14;
  --superficie: #121822;
  --superficie-alta: #1a2230;
  --borde: #263041;
  --borde-suave: #1d2534;
  --texto: #e8eef7;
  --texto-medio: #9fb0c8;
  --texto-tenue: #6b7b93;

  --ambar: #ffb347;
  --cian: #4fd6e3;
  --verde: #7ee787;
  --rojo: #ff6b6b;
  --violeta: #b08cff;

  --mono: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: "Space Grotesk", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --radio: 10px;
  --sombra: 0 18px 48px rgba(0, 0, 0, 0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

#lienzo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

body.en-primera-persona #lienzo { cursor: none; }

.oculto { display: none !important; }

/* ------------------------------------------------------------------ *
 * Botones
 * ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie-alta);
  color: var(--texto);
  font: 600 13.5px/1 var(--sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.btn:hover { background: #212b3b; border-color: #38455c; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: wait; }

.btn.principal {
  background: var(--ambar);
  border-color: var(--ambar);
  color: #1a1206;
}
.btn.principal:hover { background: #ffc266; border-color: #ffc266; }

.btn.mini { padding: 7px 12px; font-size: 12px; }

.ic { flex-shrink: 0; }

/* ------------------------------------------------------------------ *
 * Portada
 * ------------------------------------------------------------------ */

#portada {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(1100px 620px at 50% 12%, rgba(79, 214, 227, 0.09), transparent 70%),
    radial-gradient(900px 520px at 82% 88%, rgba(255, 179, 71, 0.07), transparent 70%),
    rgba(6, 9, 13, 0.94);
  overflow-y: auto;
  animation: aparecer 0.5s ease both;
}

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.portada-caja {
  width: min(780px, 100%);
  background: rgba(18, 24, 34, 0.9);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 38px 40px 32px;
  box-shadow: var(--sombra);
}

.portada-marca {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--cian);
  font: 600 11.5px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.portada-caja h1 {
  margin: 0 0 10px;
  font-size: clamp(30px, 5.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.portada-caja h1 em {
  font-style: normal;
  color: var(--ambar);
}

.portada-caja .entrada {
  margin: 0 0 26px;
  color: var(--texto-medio);
  font-size: 15.5px;
  line-height: 1.62;
  max-width: 62ch;
}

.rejilla-estaciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 9px;
  margin-bottom: 26px;
}

.chip-estacion {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 10px 12px;
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-left: 3px solid var(--acento, var(--cian));
  border-radius: 7px;
  font-size: 13px;
}

.chip-estacion b {
  font: 600 11px/1 var(--mono);
  color: var(--texto-tenue);
}

.campos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.campo {
  flex: 1 1 190px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.campo label {
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.campo input {
  padding: 10px 13px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  font: 400 14px var(--sans);
}

.campo input:focus {
  outline: none;
  border-color: var(--cian);
  box-shadow: 0 0 0 3px rgba(79, 214, 227, 0.14);
}

.portada-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  align-items: center;
}

.teclas-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--borde-suave);
  color: var(--texto-tenue);
  font-size: 12.5px;
}

.teclas-fila span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

kbd {
  display: inline-block;
  min-width: 22px;
  padding: 3px 7px;
  background: var(--superficie-alta);
  border: 1px solid var(--borde);
  border-bottom-width: 2px;
  border-radius: 5px;
  font: 600 11px/1.25 var(--mono);
  color: var(--texto);
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * HUD
 * ------------------------------------------------------------------ */

#mira {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  z-index: 20;
  pointer-events: none;
}

#mira::before, #mira::after {
  content: "";
  position: absolute;
  background: rgba(232, 238, 247, 0.75);
}
#mira::before { left: 8px; top: 0; width: 2px; height: 18px; }
#mira::after { top: 8px; left: 0; height: 2px; width: 18px; }

#hud {
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
}

#hud > * { pointer-events: auto; }

/* Barra superior con el progreso */
.barra-superior {
  position: absolute;
  top: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 16px;
  background: rgba(18, 24, 34, 0.88);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  backdrop-filter: blur(8px);
}

.marca-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cian);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding-right: 16px;
  border-right: 1px solid var(--borde);
}

.progreso {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
}

.progreso-cabecera {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font: 600 11px/1 var(--mono);
}

#nivel-nombre { color: var(--ambar); }
#progreso-texto { color: var(--texto-tenue); }

.progreso-riel {
  height: 4px;
  background: var(--borde-suave);
  border-radius: 3px;
  overflow: hidden;
}

#progreso-barra {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--cian), var(--verde));
  border-radius: 3px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.acciones-hud {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  gap: 9px;
}

/* Selector de idioma: vive fuera de #portada y #hud para verse en ambos */
#lang-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 70;
}

/* Mapa del salón */
.mapa-caja {
  position: absolute;
  bottom: 14px;
  right: 14px;
  padding: 10px;
  background: rgba(18, 24, 34, 0.88);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  backdrop-filter: blur(8px);
}

.mapa-caja h2 {
  margin: 0 0 8px;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

#mapa {
  display: block;
  border-radius: 6px;
  cursor: pointer;
}

.mapa-pie {
  margin: 7px 0 0;
  font-size: 10.5px;
  color: var(--texto-tenue);
  max-width: 220px;
  line-height: 1.4;
}

/* Aviso de estación cercana */
#aviso-estacion {
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 18px;
  background: rgba(18, 24, 34, 0.94);
  border: 1px solid var(--ambar);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  animation: subir 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes subir {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.aviso-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--ambar);
  color: #1a1206;
  border-radius: 8px;
  font: 700 15px/1 var(--mono);
}

.aviso-txt { display: flex; flex-direction: column; gap: 3px; }
.aviso-txt b { font-size: 14.5px; }
.aviso-txt small { font-size: 11.5px; color: var(--texto-tenue); }

/* ------------------------------------------------------------------ *
 * Panel de estacion
 * ------------------------------------------------------------------ */

#panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 40;
  width: min(470px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: rgba(13, 18, 26, 0.97);
  border-left: 1px solid var(--borde);
  box-shadow: -22px 0 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(14px);
  animation: entrar-panel 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes entrar-panel {
  from { transform: translateX(26px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.panel-cabecera {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--borde-suave);
}

.panel-cabecera h2 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.panel-num {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  background: var(--ambar);
  color: #1a1206;
  border-radius: 7px;
  font: 700 14px/1 var(--mono);
}

.panel-cabecera p {
  margin: 0;
  font-size: 12.5px;
  color: var(--texto-tenue);
}

.panel-cabecera .btn {
  margin-left: auto;
  padding: 8px;
}

#pestanas {
  display: flex;
  gap: 3px;
  padding: 0 14px;
  border-bottom: 1px solid var(--borde-suave);
}

.pestana {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--texto-tenue);
  font: 600 12.5px/1 var(--sans);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.pestana:hover { color: var(--texto-medio); }
.pestana.activa { color: var(--ambar); border-bottom-color: var(--ambar); }

.insignia {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--ambar);
  color: #1a1206;
  border-radius: 8px;
  font: 700 10px/1 var(--mono);
}

.insignia.gris { background: var(--borde); color: var(--texto-medio); }

#panel-cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--borde) transparent;
}

#panel-cuerpo::-webkit-scrollbar { width: 9px; }
#panel-cuerpo::-webkit-scrollbar-thumb {
  background: var(--borde);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.descripcion {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--texto-medio);
}

.formulario {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.ecuacion {
  padding: 5px 10px;
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: 6px;
  font: 400 11.5px/1.4 var(--mono);
  color: var(--cian);
}

/* Controles deslizantes */
.controles { display: flex; flex-direction: column; gap: 15px; }

.control { display: flex; flex-direction: column; gap: 7px; }

.control label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 12.5px;
  color: var(--texto-medio);
}

.control output {
  font: 600 13px/1 var(--mono);
  color: var(--ambar);
}

.control select {
  padding: 9px 12px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  font: 400 13px var(--sans);
  cursor: pointer;
}

.control select:focus { outline: none; border-color: var(--cian); }

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--borde-suave);
  border-radius: 3px;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  background: var(--ambar);
  border: 3px solid var(--fondo);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 0 0 1px var(--ambar);
}

input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--ambar);
  border: 3px solid var(--fondo);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 0 0 1px var(--ambar);
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
}

.mover-sonda {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--borde-suave);
}

.mover-sonda > span {
  display: block;
  margin-bottom: 9px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.cruceta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.atajo, .nota {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 11.5px;
  color: var(--texto-tenue);
  line-height: 1.5;
}

/* Lecturas */
.lecturas { display: flex; flex-direction: column; gap: 2px; }

.lectura {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 11px 13px;
  background: var(--superficie);
  border-left: 2px solid var(--borde);
  border-radius: 0 7px 7px 0;
}

.lec-etiqueta { font-size: 12.5px; color: var(--texto-medio); }

.lec-valor {
  font: 600 15px/1 var(--mono);
  color: var(--texto);
  white-space: nowrap;
}

.lec-valor small {
  margin-left: 5px;
  font: 400 10.5px var(--mono);
  color: var(--texto-tenue);
}

.lectura.destacada {
  background: rgba(79, 214, 227, 0.07);
  border-left-color: var(--cian);
}
.lectura.destacada .lec-valor { color: var(--cian); }

.lectura.teorica { opacity: 0.72; }
.lectura.teorica .lec-valor { color: var(--texto-medio); font-weight: 400; }

/* Misiones */
.mision {
  margin-bottom: 11px;
  padding: 14px 15px;
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: 11px;
}

.mision.bloqueada { opacity: 0.5; }
.mision.abierta { border-color: var(--borde); }
.mision.resuelta {
  border-color: rgba(126, 231, 135, 0.35);
  background: rgba(126, 231, 135, 0.05);
}

.mision-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}

.mision-estado { display: grid; place-items: center; color: var(--texto-tenue); }
.mision.abierta .mision-estado { color: var(--ambar); }
.mision.resuelta .mision-estado { color: var(--verde); }

.mision-titulo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font: 600 13.5px/1.2 var(--sans);
}

.mision-titulo small {
  font: 400 10.5px/1 var(--mono);
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
}

.mision-puntos {
  margin-left: auto;
  padding: 3px 9px;
  background: rgba(126, 231, 135, 0.14);
  border-radius: 20px;
  font: 600 11px/1 var(--mono);
  color: var(--verde);
}

.mision-texto {
  margin: 0 0 11px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-medio);
}

.mision-entrada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.mision-entrada input {
  flex: 1 1 120px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  font: 600 14px var(--mono);
}

.mision-entrada input:focus {
  outline: none;
  border-color: var(--ambar);
  box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.13);
}

.mision-entrada .unidad {
  font: 400 12px var(--mono);
  color: var(--texto-tenue);
}

.mision-intentos {
  margin: 9px 0 0;
  font: 400 11px var(--mono);
  color: var(--texto-tenue);
}

.mision-logro {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 12px;
  color: var(--verde);
}

.pista {
  margin-top: 11px;
  font-size: 12px;
  color: var(--texto-tenue);
}

.pista summary {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: var(--texto-medio);
  list-style: none;
}

.pista summary::-webkit-details-marker { display: none; }
.pista p { margin: 9px 0 0; line-height: 1.55; }

.mision-resultado:empty { display: none; }

.mision-resultado {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 11px;
  padding: 11px 13px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.55;
}

.mision-resultado.bien {
  background: rgba(126, 231, 135, 0.1);
  border: 1px solid rgba(126, 231, 135, 0.3);
  color: var(--verde);
}

.mision-resultado.mal {
  background: rgba(255, 179, 71, 0.08);
  border: 1px solid rgba(255, 179, 71, 0.26);
  color: var(--ambar);
}

/* Tabla de datos */
.tabla-envoltura {
  overflow-x: auto;
  border: 1px solid var(--borde-suave);
  border-radius: 9px;
}

.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  font: 400 11.5px var(--mono);
  white-space: nowrap;
}

.tabla-datos th {
  position: sticky;
  top: 0;
  padding: 9px 11px;
  background: var(--superficie-alta);
  border-bottom: 1px solid var(--borde);
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.tabla-datos td {
  padding: 8px 11px;
  border-bottom: 1px solid var(--borde-suave);
  color: var(--texto-medio);
}

.tabla-datos tbody tr:first-child td { color: var(--cian); }
.tabla-datos tbody tr:last-child td { border-bottom: 0; }

.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  padding: 46px 22px;
  color: var(--texto-tenue);
  text-align: center;
}

.vacio p { margin: 0; font-size: 13px; line-height: 1.6; max-width: 34ch; }

/* ------------------------------------------------------------------ *
 * Ventanas modales
 * ------------------------------------------------------------------ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 9, 13, 0.86);
  backdrop-filter: blur(5px);
  overflow-y: auto;
}

.modal-caja {
  width: min(620px, 100%);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 15px;
  box-shadow: var(--sombra);
  animation: entrar-modal 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes entrar-modal {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--borde-suave);
}

.modal-cabecera h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.modal-cabecera .btn { margin-left: auto; padding: 8px; }

.modal-cuerpo { padding: 20px 22px 24px; }

.lista-descargas { display: flex; flex-direction: column; gap: 9px; }

.descarga {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  width: 100%;
  padding: 14px 16px;
  background: var(--superficie-alta);
  border: 1px solid var(--borde-suave);
  border-radius: 11px;
  color: var(--texto);
  text-align: left;
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.descarga:hover { border-color: var(--cian); background: #212b3b; }
.descarga:disabled { opacity: 0.5; cursor: wait; }

.descarga .ic { margin-top: 2px; color: var(--cian); }

.descarga b {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 600;
}

.descarga small {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--texto-tenue);
}

.bloque-ayuda { margin-bottom: 20px; }

.bloque-ayuda h3 {
  margin: 0 0 9px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cian);
}

.bloque-ayuda p {
  margin: 0 0 9px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--texto-medio);
}

.tabla-teclas {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 15px;
  align-items: center;
  font-size: 13px;
  color: var(--texto-medio);
}

/* Avisos flotantes */
#toasts {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(400px, calc(100% - 32px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 15px;
  background: rgba(18, 24, 34, 0.97);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--cian);
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  animation: entrar-toast 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.toast .ic { margin-top: 1px; color: var(--cian); }
.toast-ok { border-left-color: var(--verde); }
.toast-ok .ic { color: var(--verde); }
.toast-error { border-left-color: var(--rojo); }
.toast-error .ic { color: var(--rojo); }
.toast.saliendo { animation: salir-toast 0.35s ease forwards; }

@keyframes entrar-toast {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes salir-toast {
  to { opacity: 0; transform: translateX(-14px); }
}

/* Error de carga */
#error-carga {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 28px;
  background: var(--fondo);
  text-align: center;
}

#error-carga h2 { margin: 0 0 10px; font-size: 22px; }
#error-carga p { margin: 0; color: var(--texto-medio); max-width: 46ch; line-height: 1.6; }

/* ------------------------------------------------------------------ *
 * Pantallas pequenas
 *
 * El laboratorio necesita teclado para caminar, asi que en pantallas
 * angostas el panel pasa a ocupar la parte baja y se avisa al estudiante.
 * ------------------------------------------------------------------ */

@media (max-width: 780px) {
  .portada-caja { padding: 28px 22px 24px; }

  #panel {
    top: auto;
    bottom: 0;
    width: 100%;
    height: min(72vh, 560px);
    border-left: 0;
    border-top: 1px solid var(--borde);
    border-radius: 16px 16px 0 0;
  }

  .mapa-caja { display: none; }

  /* Las cuatro pestañas no caben a lo ancho de un teléfono */
  #pestanas {
    overflow-x: auto;
    scrollbar-width: none;
  }
  #pestanas::-webkit-scrollbar { display: none; }
  .pestana { flex-shrink: 0; }

  .barra-superior { top: 10px; left: 10px; right: 10px; padding: 9px 12px; }
  .marca-hud span { display: none; }
  .acciones-hud { top: auto; bottom: 14px; right: 10px; }
  .acciones-hud .btn span { display: none; }
  #aviso-estacion { bottom: 74px; width: calc(100% - 24px); }
}

@media (max-height: 520px) {
  .portada-caja { padding: 20px; }
  .teclas-fila { display: none; }
}

/* Estaciones de la portada: son botones, funcionan también con el dedo */
button.chip-estacion {
  cursor: pointer;
  font-family: var(--sans);
  color: var(--texto);
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

button.chip-estacion:hover {
  background: var(--superficie-alta);
  border-color: var(--borde);
}

button.chip-estacion:active { transform: translateY(1px); }

.pie-rejilla {
  margin: -16px 0 22px;
  font-size: 11.5px;
  color: var(--texto-tenue);
}

/* Aviso para tablet y teléfono, donde no hay teclado para caminar */
.aviso-dispositivo {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0 0 22px;
  padding: 13px 15px;
  background: rgba(255, 179, 71, 0.07);
  border: 1px solid rgba(255, 179, 71, 0.28);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ambar);
}

.aviso-dispositivo svg { flex-shrink: 0; margin-top: 2px; }