* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #f4f1ea;
  color: #1d1b18;
}

/* ---------- Índice del recorrido ---------- */

.recorrido {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.5rem 1rem;
}

.recorrido h1 { margin: 0 0 .25rem; font-size: 2rem; }
.bajada { margin: 0 0 1.5rem; color: #5b574f; }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; counter-reset: estacion; }
.lista li { counter-increment: estacion; }

.tarjeta {
  display: block;
  padding: 1rem 1rem 1rem 3.25rem;
  position: relative;
  border-radius: 14px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / .08);
}
.tarjeta::before {
  content: counter(estacion);
  position: absolute; left: 1rem; top: 1rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: #1d1b18; color: #fff; font-size: .85rem; font-weight: 600;
}
.tarjeta:active { transform: scale(.99); }
.tarjeta strong { font-size: 1.1rem; }
.tarjeta .tipo { margin-left: .5rem; font-size: .75rem; color: #7a756b; text-transform: uppercase; letter-spacing: .04em; }
.tarjeta p { margin: .35rem 0 0; color: #5b574f; font-size: .95rem; }

/* ---------- Visor ---------- */

.visor { position: fixed; inset: 0; }
.visor model-viewer, .visor canvas { width: 100%; height: 100%; display: block; }

.boton-ar {
  position: fixed;
  top: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem 1.2rem;
  border: 0; border-radius: 18px;
  background: #fff; color: #000;
  font: inherit; font-size: 1rem; white-space: nowrap;
  box-shadow: 0 2px 8px rgb(0 0 0 / .2);
  cursor: pointer;
  z-index: 10;
}
.boton-ar[hidden] { display: none; }

.volver {
  position: fixed; left: 1rem; bottom: 1rem;
  padding: .45rem .9rem; border-radius: 999px;
  background: rgb(255 255 255 / .85); color: #000;
  text-decoration: none; font-size: .9rem;
  z-index: 10;
}

.aviso {
  position: fixed; left: 50%; bottom: 4rem; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 2rem);
  padding: .6rem 1rem; border-radius: 12px;
  background: rgb(0 0 0 / .7); color: #fff; font-size: .9rem; text-align: center;
  white-space: pre-line; line-height: 1.35;
  z-index: 10;
}
body.con-joystick .aviso { bottom: 10.5rem; } /* para que no quede debajo del mando */
.aviso:empty { display: none; }

/* ---------- Modo recorrer (primera persona) ---------- */

.visor canvas { touch-action: none; }

.joystick {
  position: fixed; right: 1.5rem; bottom: 1.5rem;
  width: 7.5rem; height: 7.5rem; border-radius: 50%;
  background: rgb(0 0 0 / .3);
  border: 2px solid rgb(255 255 255 / .7);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .25);
  touch-action: none;
  z-index: 10;
}
.joystick[hidden] { display: none; }
.joystick .palanca {
  position: absolute; left: 50%; top: 50%;
  width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; border-radius: 50%;
  background: rgb(255 255 255 / .9);
  box-shadow: 0 1px 4px rgb(0 0 0 / .4);
  pointer-events: none;
}

/* Flechitas grises dentro del círculo blanco, sobre los ejes X e Y que salen del centro */
.joystick .flecha {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  border: .35rem solid transparent;
  --separacion: .85rem;
  --gris: #9b9b9b;
}
.joystick .flecha.arriba {
  border-bottom-color: var(--gris); border-top-width: 0;
  transform: translate(-50%, -50%) translateY(calc(-1 * var(--separacion)));
}
.joystick .flecha.abajo {
  border-top-color: var(--gris); border-bottom-width: 0;
  transform: translate(-50%, -50%) translateY(var(--separacion));
}
.joystick .flecha.izquierda {
  border-right-color: var(--gris); border-left-width: 0;
  transform: translate(-50%, -50%) translateX(calc(-1 * var(--separacion)));
}
.joystick .flecha.derecha {
  border-left-color: var(--gris); border-right-width: 0;
  transform: translate(-50%, -50%) translateX(var(--separacion));
}

/* Zócalo de controles que solo aparece durante el AR (abajo a la izquierda, junto al joystick) */
.ajustes-ar {
  position: fixed; left: 1rem; bottom: 1.5rem;
  display: none; flex-wrap: wrap; align-items: center; gap: .4rem;
  max-width: calc(100% - 11rem);
  z-index: 10;
}
body.en-ar .ajustes-ar { display: flex; }
body.en-ar .volver { display: none; }
.ajustes-ar button {
  min-width: 2.6rem; height: 2.6rem; padding: 0 .5rem;
  border: 0; border-radius: 14px;
  background: rgb(255 255 255 / .85); color: #000;
  font: inherit; font-size: 1rem; line-height: 1;
  box-shadow: 0 2px 8px rgb(0 0 0 / .2);
}
.ajustes-ar button.ancho { font-size: .85rem; padding: 0 .8rem; }
.ajustes-ar button[aria-pressed="true"] { background: #1d1b18; color: #fff; }
.ajustes-ar .escala {
  padding: .35rem .5rem; border-radius: 10px;
  background: rgb(0 0 0 / .5); color: #fff; font-size: .8rem;
}


/* Controles del visor (arriba a la derecha): color de fondo y posiciones */
.controles {
  position: fixed; right: 1rem; top: 1rem;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
  z-index: 11;
}
.fondos, .posiciones {
  display: flex; align-items: center; gap: .45rem;
  padding: .3rem .45rem .3rem .75rem; border-radius: 999px;
  background: rgb(0 0 0 / .5); color: #fff; font-size: .8rem;
}
.fondos span, .posiciones span { margin-right: .15rem; }
.fondos button {
  width: 1.5rem; height: 1.5rem; padding: 0; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / .9); cursor: pointer;
}
.fondos [data-fondo="blanco"] { background: #fff; }
.fondos [data-fondo="negro"] { background: #000; }
.fondos button[aria-pressed="true"] { box-shadow: 0 0 0 2px rgb(0 0 0 / .5), 0 0 0 4px #fff; }
.posiciones button {
  min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; border: 0; border-radius: 999px;
  background: rgb(255 255 255 / .2); color: #fff; font: inherit; font-size: .8rem; cursor: pointer;
}
.posiciones button[aria-pressed="true"] { background: #fff; color: #000; }
body.en-ar .controles { display: none; }
.volver[hidden] { display: none; }

/* El botón de AR queda arriba al centro; en pantallas angostas lo bajamos para no pisar el selector */
@media (max-width: 34rem) {
  .boton-ar { top: 1rem; left: 1rem; transform: none; min-width: 0; padding: .55rem .9rem; font-size: .9rem; }
}

.fondos button[hidden] { display: none; }