/* Navegación y entrada (auditoría UX 2026-10-07: E2, E3, N2, N4, A2, A3, I1, EN1).
   Se carga en base.html después de sistema.css y estilos.css. Prefijo nv-.
   Índice: 1. Portada  2. Cabecera y pestañas  3. Modo concentrado en juegos  4. Presets de ensayo */

/* ---------- 1. Portada pública (/): Crear cuenta + Ya tengo cuenta ---------- */
.nv-portada { border-style: solid; }
.nv-portada__puntos {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-e3);
  text-align: left; max-width: 420px; color: var(--ui-texto);
}
.nv-portada__puntos li { display: flex; align-items: center; gap: var(--ui-e3); font-size: var(--ui-t-sm); font-weight: 600; }
.nv-portada__puntos span {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: var(--eje-suave, var(--ui-marca-50)); color: var(--eje-texto, var(--ui-marca-600));
}
.nv-portada__puntos svg { width: 20px; height: 20px; }
.nv-portada__acciones { display: grid; gap: var(--ui-e3); width: 100%; max-width: 360px; margin-top: var(--ui-e2); }
.nv-portada__acciones .ui-boton { width: 100%; }

/* ---------- 2. Cabecera y pestañas ----------
   Botón de tema: el ícono quedaba en 37 px de ancho en la barra; área táctil completa. */
.ui-tema-boton { min-width: var(--ui-tactil); min-height: var(--ui-tactil); flex: none; }
/* Cuenta pendiente: "Salir" con texto también en celular (la barra solo tiene tema y Salir) */
.nv-salir-texto { white-space: nowrap; }
/* Escritorio: "Mi cuenta" y las pestañas no se parten en dos líneas (N4) */
@media (min-width: 900px) {
  .ui-nav__item, .ui-nav__extra .ui-boton { white-space: nowrap; }
}

/* ---------- 3. Modo concentrado en juegos (static/js/modo-concentrado.js) ----------
   Durante la partida: sin barra de pestañas ni cabecera (como el ensayo), y la cabecera del
   juego queda solo para lectores de pantalla. En la pantalla final se oculta la cabecera del
   juego para que "Jugar de nuevo" quede a la vista; las pestañas vuelven. */
.ui-concentrado .ui-nav,
.ui-concentrado .ui-barra-app { display: none; }
.ui-concentrado.ui-con-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }
.ui-concentrado .ui-cabecera:has(> .ui-migas),
.ui-juego-final .ui-cabecera:has(> .ui-migas) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ui-concentrado #contenido { padding-top: var(--ui-e4); }
/* Pantalla final: "Jugar de nuevo" sube sobre la lista "Para repasar" (A3). La lista no tiene
   elementos enfocables, así que el orden de foco sigue al visual. */
.ui-juego-final [data-pantalla="final"]:not([hidden]) { display: flex; flex-direction: column; }
.ui-juego-final [data-pantalla="final"] > * { margin-top: 0; }
.ui-juego-final [data-pantalla="final"] > .act-acciones { order: 1; margin-bottom: var(--ui-e4); }
.ui-juego-final [data-pantalla="final"] > .act-repaso,
.ui-juego-final [data-pantalla="final"] > [data-final-perfecto] { order: 2; }

/* ---------- 4. Presets de ensayo (/ensayos?preset=...) ---------- */
.nv-preset {
  display: grid; gap: var(--ui-e3); margin-bottom: var(--ui-e6);
  border: 2px solid var(--ui-marca-600);
  background: linear-gradient(135deg, var(--ui-marca-50), var(--ui-superficie) 70%);
}
.nv-preset > * { margin: 0; }
.nv-preset__cifras { display: flex; flex-wrap: wrap; gap: var(--ui-e2) var(--ui-e4); font-weight: 700; }
.nv-preset__cifras span { display: inline-flex; align-items: center; gap: 6px; }
.nv-preset__cifras svg { width: 20px; height: 20px; color: var(--ui-marca-600); }
.nv-preset__boton { width: 100%; }
@media (min-width: 600px) { .nv-preset__boton { width: auto; justify-self: start; min-width: 240px; } }

.nv-presets { margin-bottom: var(--ui-e6); }
.nv-presets > h2 { margin: 0 0 var(--ui-e3); }
.nv-presets__lista {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ui-e3);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.nv-presets__tarjeta { --eje: var(--ui-marca-600); gap: var(--ui-e1); min-height: 76px; justify-content: center; }
.nv-presets__titulo { display: inline-flex; align-items: center; gap: var(--ui-e2); font-weight: 750; }
.ui-app .nv-presets__titulo { color: var(--ui-texto); }
.nv-presets__titulo svg { width: 22px; height: 22px; flex: none; color: var(--ui-marca-600); }

/* "Personalizar": el formulario completo, plegado cuando se llega con un preset */
.nv-personalizar { display: grid; }
.nv-personalizar__resumen {
  display: flex; align-items: center; gap: var(--ui-e2); min-height: var(--ui-tactil);
  font-weight: 750; cursor: pointer; list-style: none;
}
.nv-personalizar__resumen::-webkit-details-marker { display: none; }
.nv-personalizar__resumen::before {
  content: ""; width: 8px; height: 8px; flex: none; margin: 0 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--ui-transicion);
}
.nv-personalizar[open] > .nv-personalizar__resumen::before { transform: rotate(45deg); }
.nv-personalizar__resumen .ui-texto-2 { font-weight: 400; font-size: var(--ui-t-sm); }
.nv-personalizar__cuerpo { margin-top: var(--ui-e3); }