/* ==========================================================================
   APP.CSS · páginas internas del juego
   --------------------------------------------------------------------------
   Login, vídeo, sala de espera, mapa, retos y panel del anfitrión.
   Usa los colores de style.css (--acento, --alerta, --borde...).
   ========================================================================== */

/* ---------- Estructura general de página ---------- */
.pagina { min-height: 100vh; }
.centro { width: min(560px, 100% - 2rem); margin: 3rem auto; }               /* columna central (login, espera...) */
.centro h1 { font-size: clamp(2rem, 7vw, 3.2rem); margin-bottom: 1rem; }
.antetitulo { font-family: var(--font-title); color: var(--texto-suave); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Sala de espera ---------- */
.espera { text-align: center; }
.espera .cuenta { font-family: var(--font-title); font-size: 5rem; font-weight: 800; color: var(--acento); min-height: 1.2em; }   /* número 3, 2, 1 */
.puntos::after { content: ""; animation: puntos 1.4s steps(4) infinite; }                                                       /* "Esperando..." con puntos */
@keyframes puntos { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }

/* ---------- Pestañas del login (Participantes / Anfitrión) ---------- */
.tabs { display: flex; gap: .5rem; margin-bottom: 1.2rem; }
.tabs button { flex: 1; padding: .65rem; background: transparent; color: var(--texto-suave); border: 1px solid var(--borde);
  border-radius: var(--radio); font-family: var(--font-title); font-weight: 700; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }

/* ---------- Mapa: cronómetros y dígitos de la contraseña ---------- */
.barra { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; align-items: end; margin: 1.5rem 0; }
.barra .cronometro { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.digitos { display: grid; grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); gap: .5rem; list-style: none; padding: 0; margin: 1rem 0 2rem; }
.digito { display: flex; flex-direction: column; align-items: center; padding: .5rem 0; border: 1px dashed var(--borde);
  border-radius: var(--radio); background: var(--panel); }
.digito small { font-size: .7rem; color: var(--texto-suave); }
.digito b { font-family: var(--font-title); font-size: 1.7rem; color: var(--texto-suave); }
.digito--abierto { border: 1px solid var(--acento); }
.digito--abierto b { color: var(--acento); }

/* ---------- Mapa: camino de 12 puntos (SVG) ---------- */
.camino { width: 100%; height: auto; }
.camino .ruta { fill: none; stroke: var(--borde); stroke-width: 3; stroke-dasharray: 10 10; }
.nodo > circle { fill: var(--panel); stroke: var(--borde); stroke-width: 3; }
.nodo text { font-family: var(--font-title); font-weight: 800; font-size: 38px; fill: var(--texto-suave); text-anchor: middle; dominant-baseline: central; }
.nodo .etq { font-size: 18px; font-weight: 400; }
.nodo--hecho > circle { fill: var(--acento); stroke: var(--acento); }            /* prueba superada */
.nodo--hecho text { fill: var(--sobre-acento); }
.nodo--actual > circle { stroke: var(--acento); stroke-width: 5; }               /* prueba disponible */
.nodo--actual text { fill: var(--acento); }
.nodo--bloqueado { opacity: .45; }
a.nodo { cursor: pointer; }
a.nodo:hover > circle, a.nodo:focus-visible > circle { fill: color-mix(in srgb, var(--acento) 15%, var(--panel)); }

/* ---------- Retos ---------- */
.zona-reto { border: 1px dashed var(--borde); border-radius: var(--radio); padding: 3rem 1.5rem; text-align: center; color: var(--texto-suave); margin: 1.5rem 0; }
.letra { font-family: var(--font-title); font-size: 4rem; font-weight: 800; color: var(--acento); }
.btn--mini { padding: .25rem .6rem; font-size: .8rem; margin-top: .3rem; }
.btn--grande { padding: 1.3rem 3.5rem; font-size: 1.6rem; letter-spacing: .08em; }
.acciones-fila { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }

/* ---------- Panel del anfitrión: tabla y ranking ---------- */
.tabla-wrap table { font-size: .9rem; text-align: center; }
.tabla-wrap td.hecho { color: var(--acento); }
.tabla-wrap td.curso { color: var(--cinta, #f2c230); font-weight: 700; }
.tabla-wrap td.vacio, .vacio { color: var(--texto-suave); }
.tabla-wrap th small { font-weight: 400; color: var(--texto-suave); }
.ranking { font-family: var(--font-title); padding-left: 1.2rem; }


/* ---------- Panel del anfitrión: semáforo de cada equipo ---------- */
.equipos-estado { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.equipo-estado { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); }
.equipo-estado b { display: block; font-family: var(--font-title); overflow-wrap: anywhere; }
.equipo-estado small { color: var(--texto-suave); }
.equipo-estado .luz { flex: none; width: 18px; height: 18px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.equipo-estado--verde { color: #3ddc84; } .equipo-estado--amarillo { color: var(--cinta); } .equipo-estado--rojo { color: var(--alerta); }
.equipo-estado b { color: var(--texto); }
@media (prefers-reduced-motion: no-preference) { .equipo-estado--amarillo .luz { animation: parpadeo 1s steps(2) infinite; } }
.leyenda-semaforo { font-size: .85rem; color: var(--texto-suave); margin: 0 0 2rem; }
.leyenda-semaforo .verde { color: #3ddc84; } .leyenda-semaforo .amarillo { color: var(--cinta); } .leyenda-semaforo .rojo { color: var(--alerta); }
.equipo-estado--acabado, .leyenda-semaforo .acabado, .txt-acabado { color: #4da3ff; }
.equipo-estado--no-acabado, .leyenda-semaforo .no-acabado, .txt-no-acabado { color: #b388ff; }
.equipo-estado--acabado { border-color: #4da3ff88; } .equipo-estado--no-acabado { border-color: #b388ff88; }
.equipo-estado--acabado small, .equipo-estado--no-acabado small { color: currentColor; font-weight: 700; }
.txt-acabado, .txt-no-acabado { font-weight: 700; letter-spacing: .04em; }
.registro-equipo { font-family: var(--font-title); font-weight: 700; margin: -.3rem 0 .8rem; overflow-wrap: anywhere; }

/* ---------- Login: texto de ayuda junto a una etiqueta ---------- */
.ayuda { color: var(--texto-suave); font-weight: 400; }

/* ---------- Más movimiento en las páginas internas (respeta "reducir movimiento") ---------- */
@keyframes sube-suave { from { opacity: 0; transform: translateY(18px); } }
@keyframes start-late { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--acento) 25%, transparent), 0 0 30px var(--acento); } }
@keyframes nodo-hecho { from { transform: scale(.6); } }
@keyframes digito-abre { from { transform: rotateX(90deg); } }
@keyframes celda-hecha { from { background: color-mix(in srgb, var(--acento) 35%, transparent); } }
@media (prefers-reduced-motion: no-preference) {
  .centro > .panel, .contenedor > .panel, .tabla-wrap, .equipos-estado { animation: sube-suave .6s .1s cubic-bezier(.2, .9, .3, 1) both; }
  .centro > .antetitulo, .contenedor > .antetitulo { animation: sube-suave .5s both; }
  .btn { transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .2s ease; }
  .btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px var(--acento); }
  .btn:not(:disabled):active { transform: translateY(1px) scale(.98); }
  .btn--grande:not(:disabled) { animation: start-late 1.6s ease-in-out infinite; }
  a.nodo > circle:not(.pulso) { transition: transform .2s; transform-box: fill-box; transform-origin: center; }
  a.nodo:hover > circle:not(.pulso) { transform: scale(1.08); }
  .nodo--hecho > circle { animation: nodo-hecho .6s cubic-bezier(.2, 1.6, .4, 1); transform-box: fill-box; transform-origin: center; }
  .digito--abierto { animation: digito-abre .6s cubic-bezier(.2, 1.6, .4, 1); }
  .equipo-estado { transition: transform .2s, border-color .3s; }
  .equipo-estado:hover { transform: translateY(-3px); }
  .tabla-wrap td.hecho { animation: celda-hecha .8s; }
  input[type="text"], input[type="password"] { transition: border-color .2s, box-shadow .2s; }
  input[type="text"]:focus, input[type="password"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent); }
}