/* Carrera SENA — identidad visual
   Paleta anclada en las superficies reales del campus: turquesa/negro
   institucional (polo/sudadera) para la interfaz, y el color real de
   cada escenario (cancha, caucho de gimnasio, pista) para distinguir
   las estaciones de un vistazo. Tipografía: pila del sistema, sin
   fuente web externa — el juego se prueba en wifi de salón o hotspot
   de celular, sin garantía de internet estable.
   Legible antes que bonito: el jugador está contra reloj. */

:root {
  --turquesa: #0e8a88;
  --turquesa-oscuro: #075f5d;
  --negro: #14181b;
  --fondo: #f3f6f6;
  --blanco: #ffffff;
  --exito: #1f9d55;
  --peligro: #c0392b;
  --texto: #14181b;
  --texto-suave: #566069;

  /* Piso y acento de cada área: el material real del espacio (cancha
     lisa, caucho de gimnasio, piso de aula), no una paleta arbitraria. */
  --coliseo-piso-a: #cbb98d;
  --coliseo-piso-b: #b39b68;
  --coliseo-acento: #0e8a88;

  --gimnasio-piso-a: #2a2e32;
  --gimnasio-piso-b: #34383c;
  --gimnasio-acento: #c0392b;

  --salon-piso-a: #f2eee1;
  --salon-piso-b: #e7e1cf;
  --salon-acento: #14181b;

  --fuente: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  font-family: var(--fuente);
  color: var(--texto);
  background: var(--fondo);
  margin: 0;
  padding-bottom: 2rem;
  overscroll-behavior-y: contain;
}

main {
  max-width: 480px;
  margin-inline: auto;
  padding: 0 1rem;
}

h1, h2, h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0.6em 0 0.4em;
}

h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; color: var(--texto-suave); }

p {
  line-height: 1.45;
  color: var(--texto-suave);
}

/* Barra de marca: negro institucional, wordmark turquesa */
#marca {
  background: var(--negro);
  color: var(--blanco);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

#marca-logo {
  font-weight: 900;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--turquesa);
  border: 2px solid var(--turquesa);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
}

#marca-texto {
  font-weight: 800;
  font-size: 1.05rem;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-suave);
}

input, button {
  min-height: 44px;
  font-size: 1rem;
  font-family: inherit;
}

input {
  border: 2px solid #cfd8d8;
  border-radius: 6px;
  padding: 0 0.75rem;
}

input:focus-visible, button:focus-visible, .opcion:focus-visible {
  outline: 3px solid var(--turquesa-oscuro);
  outline-offset: 2px;
}

button {
  cursor: pointer;
  border: none;
  background: var(--turquesa);
  color: var(--blanco);
  font-weight: 700;
  border-radius: 6px;
  transition: transform 0.1s ease;
}

button:active {
  transform: scale(0.98);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.boton-secundario {
  background: transparent;
  color: var(--negro);
  border: 2px solid #cfd8d8;
  margin-top: 0.5rem;
  width: 100%;
}

/* Marcador: cronómetro + progreso de áreas, fijo mientras se juega */
#marcador {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--negro);
  color: var(--blanco);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block: 0.75rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

#bloque-cronometro {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.fila-cronometro {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

#etiqueta-cronometro {
  font-size: 0.7rem;
  color: #9fb3b3;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#cronometro {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--turquesa);
}

/* Postes del recorrido: un área es una secuencia real (se completan
   en orden), así que numerarla con marcadores sí aporta información. */
#progreso-areas {
  display: flex;
  gap: 0.3rem;
}

.pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3a4245;
  border: 2px solid #3a4245;
}

.pip--hecha {
  background: var(--turquesa);
  border-color: var(--turquesa);
}

.pip--actual {
  background: transparent;
  border-color: var(--turquesa);
}

/* Vitrina de las 3 áreas en el inicio: reutiliza el mismo piso que se ve
   dentro del laberinto, para que el jugador ya reconozca el terreno la
   primera vez que lo pisa. Es una secuencia real (se recorren en orden),
   por eso se numera. */
#preview-areas {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
}

.mini-area {
  flex: 1;
  min-width: 0;
}

.mini-area__muestra {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  height: 52px;
  border: 2px solid var(--negro);
  border-radius: 3px;
  padding: 3px 5px;
}

.mini-area__orden {
  background: var(--negro);
  color: var(--blanco);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 2px;
}

.mini-area__nombre {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--texto);
  line-height: 1.25;
}

/* Referencia del mejor tiempo guardado: un número estático, sin fantasma
   ni tiempo real. Vive dentro del marcador oscuro, junto al cronómetro,
   para no gastar una línea aparte en pantallas de celular bajas. */
#mejor-tiempo {
  margin: 0;
  font-size: 0.68rem;
  color: #9fb3b3;
}

/* Cada área tiene una barra de color propia junto a su nombre y junto al
   enunciado de la pregunta: es el mismo hilo de color desde que se entra
   al mapa hasta que se responde, la marca de "en qué terreno estás". */
.acento-area {
  padding-left: 0.6rem;
  border-left: 6px solid var(--turquesa);
}

[data-area="coliseo-microfutbol"] .acento-area { border-left-color: var(--coliseo-acento); }
[data-area="gimnasio"] .acento-area { border-left-color: var(--gimnasio-acento); }
[data-area="salon-formacion"] .acento-area { border-left-color: var(--salon-acento); }

/* Instrucciones y leyenda: nada en el mapa se explica solo. La frase
   completa solo se ve en la primera área (juego.js la oculta después);
   la leyenda de colores se queda siempre, es la referencia rápida. */
#descripcion-area {
  margin: 0 0 0.35rem;
}

/* La misión sí se repite en cada área (lo que hace falta cambia de una a
   otra), así que se pinta como una franja que no se puede pasar por alto,
   con el color propio del área para reforzar en qué terreno estás. */
.mision-area {
  margin: 0 0 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  color: #fff;
  background: var(--turquesa);
}

[data-area="coliseo-microfutbol"] .mision-area { background: var(--coliseo-acento); }
[data-area="gimnasio"] .mision-area { background: var(--gimnasio-acento); }
[data-area="salon-formacion"] .mision-area { background: var(--salon-acento); }

.instrucciones-area {
  font-size: 0.85rem;
  margin: 0 0 0.4rem;
}

#leyenda-mapa {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--texto-suave);
  margin-bottom: 0.35rem;
}

#leyenda-mapa span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.leyenda__muestra {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.leyenda__muestra--prenda { background: var(--turquesa); }
.leyenda__muestra--salida { background: var(--exito); }

#mapa {
  display: grid;
  gap: 0;
  width: 100%;
  /* En celulares bajos (SE, mini) el alto de pantalla manda: el mapa se
     achica antes de que el D-pad quede fuera de la vista. */
  max-width: min(360px, 46vh);
  margin: 0.5rem auto;
  touch-action: none;
  border: 3px solid var(--negro);
}

.celda {
  aspect-ratio: 1;
  background: #e2e8e8;
}

.celda--muro { background: var(--negro); }
.celda--salida { background: var(--exito); }
.celda--prenda {
  background: var(--turquesa);
  position: relative;
}
/* Ícono por prenda concreta, no por slot: dos prendas del mismo slot (la
   sudadera y la pantaloneta, ambas "piernas") necesitan verse distintas,
   si no la casilla no dice qué es, solo a qué categoría pertenece. */
.celda--prenda::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
}
.celda--prenda[data-prenda="tenis-suela-lisa"]::after { content: "👟"; }
.celda--prenda[data-prenda="pantaloneta"]::after { content: "🩳"; }
.celda--prenda[data-prenda="botella-de-agua"]::after { content: "💧"; }
.celda--prenda[data-prenda="tenis-elegantes"]::after { content: "👞"; }
.celda--prenda[data-prenda="morral"]::after { content: "🎒"; }

/* Artículo incorrecto: se ve exactamente igual que una prenda correcta
   (mismo fondo, mismo estilo de ícono). Si se marcara distinto (rojo,
   borde, lo que sea) el jugador sabría qué evitar sin pensar, y eso
   arruina la idea central: hay que saber la norma, no memorizar colores. */
.celda--obstaculo {
  background: var(--turquesa);
  position: relative;
}
.celda--obstaculo::after {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
}
.celda--obstaculo[data-obstaculo="guayos"]::after { content: "🥾"; }
.celda--obstaculo[data-obstaculo="jean"]::after { content: "👖"; }
.celda--obstaculo[data-obstaculo="sandalias"]::after { content: "🩴"; }
.celda--obstaculo[data-obstaculo="sudadera-institucional"]::after { content: "🎽"; }
.celda--obstaculo[data-obstaculo="gorra"]::after { content: "🧢"; }
/* Especificidad por ID a propósito: debe ganarle siempre al piso de área
   de abajo (celda--libre pintada por área), sin importar el orden. */
#mapa .celda--jugador { background: var(--turquesa-oscuro); }

/* Identidad por área: cambia el material del piso y del muro (el
   terreno real de cada espacio). Las celdas que importan para jugar
   -prenda, obstáculo, salida, jugador- se quedan iguales en las tres
   áreas: reconocerlas no puede depender de en qué área estás. */
.area-coliseo-microfutbol .celda--libre {
  background: repeating-linear-gradient(
    45deg,
    var(--coliseo-piso-a) 0px,
    var(--coliseo-piso-a) 26px,
    var(--coliseo-piso-b) 26px,
    var(--coliseo-piso-b) 28px
  );
}
.area-coliseo-microfutbol .celda--muro {
  background: repeating-linear-gradient(
    0deg,
    var(--negro) 0px,
    var(--negro) 7px,
    #2c3033 7px,
    #2c3033 14px
  );
}

.area-gimnasio .celda--libre {
  background: repeating-linear-gradient(
    45deg,
    var(--gimnasio-piso-a) 0px,
    var(--gimnasio-piso-a) 14px,
    var(--gimnasio-piso-b) 14px,
    var(--gimnasio-piso-b) 28px
  );
}
.area-gimnasio .celda--muro {
  background: #17191b;
  box-shadow: inset 0 0 0 2px var(--gimnasio-acento);
}

.area-salon-formacion .celda--libre {
  background: repeating-linear-gradient(
    0deg,
    var(--salon-piso-a) 0px,
    var(--salon-piso-a) 20px,
    var(--salon-piso-b) 20px,
    var(--salon-piso-b) 22px
  );
}
.area-salon-formacion .celda--muro {
  /* Negro institucional liso: una línea de acento por celda (probada antes)
     se repetía en cada muro y armaba un patrón de "escalera" en las
     paredes verticales, que se veía como un error de cuadrícula. */
  background: var(--negro);
}

#dpad {
  display: grid;
  grid-template-columns: repeat(3, 60px);
  grid-template-rows: repeat(3, 60px);
  gap: 4px;
  justify-content: center;
  margin: 1.25rem auto;
}

#dpad button {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.4rem;
  touch-action: manipulation;
}

#btn-arriba { grid-column: 2; grid-row: 1; }
#btn-izquierda { grid-column: 1; grid-row: 2; }
#btn-derecha { grid-column: 3; grid-row: 2; }
#btn-abajo { grid-column: 2; grid-row: 3; }

#mensaje-aviso {
  min-height: 1.3em;
  color: var(--peligro);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
}

/* Slots del uniforme: ya no se hace clic, solo muestran lo que el
   servidor confirmó que se recogió al pisar la celda. */
#slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.slot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.5rem 0.6rem;
  background: var(--blanco);
  border: 2px dashed #cfd8d8;
  border-radius: 6px;
}

.slot--ocupado {
  background: #e7f6ee;
  border: 2px solid var(--exito);
}

.slot__etiqueta {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
}

.slot__contenido {
  font-weight: 700;
  color: var(--texto);
}

#mensajes-validacion {
  margin-block: 0.5rem;
}

.mensaje-fallo {
  background: #fbeae7;
  border-left: 4px solid var(--peligro);
  padding: 0.5rem 0.6rem;
  border-radius: 4px;
  margin: 0.4rem 0;
  font-size: 0.9rem;
  color: var(--texto);
}

/* Pregunta: el enunciado ES el título de la pantalla (misma barra de
   color del área que se acaba de recorrer), sin una etiqueta genérica
   encima que no aporte nada nuevo. */
#enunciado-pregunta {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--texto);
  line-height: 1.35;
}

#opciones-pregunta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-block: 0.75rem;
}

.opcion {
  text-align: left;
  padding: 0.6rem 0.8rem;
  background: var(--blanco);
  color: var(--texto);
  border: 2px solid #cfd8d8;
}

.opcion:hover {
  border-color: var(--turquesa);
}

.mensaje-correcto {
  color: var(--exito);
  font-weight: 700;
}

.mensaje-incorrecto {
  color: var(--peligro);
  font-weight: 700;
}

/* Fin de partida */
.resultado-destacado {
  font-size: 1.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--turquesa-oscuro);
}

#resultado-fallos {
  list-style: none;
  padding: 0;
  margin: 0;
}

#resultado-fallos li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid #dfe7e7;
  font-size: 0.9rem;
}

/* El mismo color de piso de cada área, aquí como marca de identificación
   rápida en la lista de resultados. */
.chip {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 0.5rem;
  flex-shrink: 0;
}

.area-coliseo-microfutbol .chip { background: var(--coliseo-acento); }
.area-gimnasio .chip { background: var(--gimnasio-acento); }
.area-salon-formacion .chip { background: var(--salon-acento); }

#resultado-fallos li span:last-child {
  font-weight: 700;
  color: var(--texto-suave);
}

/* Ranking */
#tabla-ranking {
  width: 100%;
  border-collapse: collapse;
  margin-block: 0.5rem;
}

#tabla-ranking th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--texto-suave);
  padding: 0.4rem;
  border-bottom: 2px solid var(--negro);
}

#tabla-ranking td {
  text-align: left;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid #dfe7e7;
  font-size: 0.9rem;
}

#tabla-ranking td:first-child {
  font-weight: 800;
  color: var(--turquesa-oscuro);
}

/* Pantalla ancha (escritorio): más aire, mapa más grande */
@media (min-width: 700px) {
  main {
    max-width: 700px;
  }
  #mapa {
    max-width: 480px;
  }
}

/* Respeta a quien pidió menos movimiento */
@media (prefers-reduced-motion: reduce) {
  button {
    transition: none;
  }
}

/* Celulares bajos (SE, mini): el D-pad es lo único que no puede quedar
   fuera de la vista, así que todo lo demás cede espacio primero. */
@media (max-height: 700px) {
  #marcador {
    margin-block: 0.4rem;
    padding: 0.45rem 0.8rem;
  }
  #descripcion-area,
  #leyenda-mapa {
    margin-bottom: 0.25rem;
  }
  .instrucciones-area {
    margin-bottom: 0.25rem;
    font-size: 0.78rem;
    line-height: 1.3;
  }
  #mapa {
    max-width: min(360px, 30vh);
  }
  #dpad {
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(3, 44px);
    gap: 3px;
    margin: 0.4rem auto;
  }
}