/* ==========================================================================
   Pantallas — composiciones concretas
   ========================================================================== */

/* ==========================================================================
   Bienvenida / Acceso
   ========================================================================== */

.acceso {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-7);
  padding-block: var(--e-8) var(--e-7);
}

.acceso__marca {
  display: grid;
  place-items: center;
  gap: var(--e-4);
  text-align: center;
}

.logo {
  --tam: 104px;
  width: var(--tam);
  height: var(--tam);
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background-image: linear-gradient(145deg, var(--relleno-desde) 0%, var(--relleno-hasta) 52%, var(--verde-950) 100%);
  box-shadow:
    0 18px 44px rgb(var(--verde-300-rgb) / 0.30),
    inset 0 2px 0 rgb(255 255 255 / 0.42),
    inset 0 -6px 18px rgb(var(--verde-950-rgb) / 0.22);
  position: relative;
}
.logo svg { width: 54%; height: 54%; color: var(--relleno-texto); }
.logo--pequeno { --tam: 42px; }
.logo--medio { --tam: 62px; }

.acceso__nombre {
  font-family: var(--f-display);
  font-size: var(--t-h1);
  font-weight: var(--peso-display);
  line-height: 1.02;
  letter-spacing: var(--track-display);
}

.acceso__lema {
  color: var(--texto-suave);
  font-size: var(--t-pequeno);
  max-width: 27ch;
  margin-inline: auto;
}

.acceso__formulario {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.acceso__pie {
  text-align: center;
  font-size: var(--t-pequeno);
  color: var(--texto-suave);
}
.acceso__pie button {
  color: var(--acento);
  font-weight: var(--peso-texto-fuerte);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

.legal {
  font-size: var(--t-etiqueta);
  color: var(--texto-tenue);
  text-align: center;
  line-height: 1.6;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--peso-texto-medio);
  max-width: 32ch;
  margin-inline: auto;
}

.proveedores {
  display: grid;
  gap: var(--e-3);
}

.btn-proveedor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  min-height: 54px;
  border-radius: var(--r-full);
  background: var(--cristal-fondo-alto);
  border: 1px solid var(--cristal-borde-alto);
  backdrop-filter: blur(var(--cristal-blur-sutil));
  -webkit-backdrop-filter: blur(var(--cristal-blur-sutil));
  font-weight: var(--peso-texto-fuerte);
  font-size: var(--t-pequeno);
  transition: transform var(--d-rapida) var(--ease-suave), background var(--d-rapida) var(--ease-suave);
}
.btn-proveedor:active { transform: scale(0.97); background: var(--acento-tenue); }
.btn-proveedor svg { width: 20px; height: 20px; flex: 0 0 auto; }

/* ==========================================================================
   Bienvenida guiada (onboarding)
   ========================================================================== */

.guia {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--e-6);
  padding-block: var(--e-6) var(--e-6);
}

.guia__paso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: var(--e-5);
}

.guia__ilustracion {
  width: min(72vw, 260px);
  aspect-ratio: 1;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background: var(--cristal-fondo);
  border: 1px solid var(--cristal-borde);
  backdrop-filter: blur(var(--cristal-blur));
  -webkit-backdrop-filter: blur(var(--cristal-blur));
  color: var(--acento);
  position: relative;
}
.guia__ilustracion svg { width: 44%; height: 44%; }

.guia__titulo {
  font-family: var(--f-display);
  font-size: var(--t-h1);
  font-weight: var(--peso-display);
  letter-spacing: var(--track-display);
  line-height: 1.08;
  max-width: 15ch;
}

.guia__texto {
  color: var(--texto-suave);
  max-width: 30ch;
}

.puntos-guia {
  display: flex;
  gap: var(--e-2);
  justify-content: center;
  margin-bottom: var(--e-5);
}
.puntos-guia span {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: rgb(var(--verde-100-rgb) / 0.20);
  transition: width var(--d-media) var(--ease-elastico), background var(--d-media) var(--ease-suave);
}
.puntos-guia span[data-activo="si"] {
  width: 26px;
  background: var(--acento);
}

/* ==========================================================================
   Inicio
   ========================================================================== */

.saludo {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
}

.saludo__texto { flex: 1; min-width: 0; }

.saludo__hola {
  font-size: var(--t-micro);
  color: var(--texto-tenue);
  font-weight: var(--peso-texto-fuerte);
  line-height: 1.3;
}

.saludo__nombre {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: var(--peso-display-medio);
  letter-spacing: var(--track-titulo);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Tarjeta del reto diario ------------------------------------------- */

.reto {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-2xl);
  padding: var(--e-6);
  display: grid;
  gap: var(--e-5);
}

.reto::before { border-radius: inherit; }

.reto__brillo {
  position: absolute;
  top: -46%;
  right: -26%;
  width: 74%;
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background: radial-gradient(circle, rgb(var(--verde-300-rgb) / 0.30), transparent 68%);
  filter: blur(22px);
  pointer-events: none;
  animation: latir 6s var(--ease-respiro) infinite;
}

.reto__superior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}

.reto__cuerpo { display: grid; gap: var(--e-2); z-index: 1; }

.reto__nombre {
  font-family: var(--f-display);
  font-size: var(--t-h1);
  font-weight: var(--peso-display);
  letter-spacing: var(--track-display);
  line-height: 1.04;
}

.reto__desc {
  color: var(--texto-suave);
  font-size: var(--t-pequeno);
  max-width: 30ch;
}

.reto__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  z-index: 1;
}

.reto--hecho .reto__nombre { font-size: var(--t-h2); }

/* ---- Racha ------------------------------------------------------------- */

.racha {
  display: grid;
  gap: var(--e-4);
  border-radius: var(--r-xl);
  padding: var(--e-5);
}

.racha__cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.racha__llama {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background-image: linear-gradient(140deg, var(--relleno-desde), var(--relleno-hasta));
  color: var(--relleno-texto);
}
.racha__llama svg { width: 21px; height: 21px; }

.racha__dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--e-2);
}

.dia {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.dia__letra {
  font-size: 10px;
  font-weight: var(--peso-texto-fuerte);
  color: var(--texto-tenue);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dia__marca {
  width: 100%;
  aspect-ratio: 1;
  max-width: 36px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background: rgb(var(--verde-100-rgb) / 0.06);
  border: 1px solid transparent;
  transition: transform var(--d-media) var(--ease-elastico);
}
.dia__marca svg { width: 55%; height: 55%; }

.dia[data-estado="hecho"] .dia__marca {
  background-image: linear-gradient(140deg, var(--relleno-desde), var(--relleno-hasta));
  color: var(--relleno-texto);
  box-shadow: 0 3px 12px rgb(var(--verde-300-rgb) / 0.28);
}

.dia[data-estado="hoy"] .dia__marca {
  border-color: var(--acento);
  color: var(--acento);
  animation: latir 3s var(--ease-respiro) infinite;
}

.dia[data-estado="futuro"] .dia__marca { opacity: 0.42; }

/* ---- Frase motivadora --------------------------------------------------- */

.frase {
  display: flex;
  gap: var(--e-4);
  align-items: flex-start;
  border-radius: var(--r-xl);
  padding: var(--e-5);
}

.frase__icono {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--acento-tenue);
  color: var(--acento);
}
.frase__icono svg { width: 17px; height: 17px; }

.frase__texto {
  font-size: var(--t-pequeno);
  line-height: 1.6;
  color: var(--texto-suave);
}
.frase__texto strong { color: var(--texto); font-weight: var(--peso-texto-fuerte); }

/* ==========================================================================
   Partida a medias
   ========================================================================== */

/*
 * Una fila, no una tarjeta grande: es un recordatorio, no una tarea nueva.
 * Va por delante del reto del día porque ya la habías empezado tú, pero pesa
 * menos visualmente para que el reto siga siendo lo que destaca.
 */
.en-curso {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  border-radius: var(--r-xl);
  padding: var(--e-4) var(--e-5);
}

.en-curso__icono {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--acento-tenue);
  color: var(--acento);
}
.en-curso__icono svg { width: 21px; height: 21px; }

.en-curso__nombre {
  font-size: var(--t-cuerpo);
  line-height: 1.2;
  margin-block: 2px;
  /* Nombres largos se recortan antes que romper la fila en dos alturas */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.en-curso__boton {
  flex: 0 0 auto;
  padding-inline: var(--e-4);
  min-height: 42px;
  font-size: var(--t-pequeno);
}
.en-curso__boton svg { width: 16px; height: 16px; }

/* En lo más estrecho el botón se queda solo con el icono */
@media (max-width: 360px) {
  .en-curso { gap: var(--e-3); padding-inline: var(--e-4); }
  .en-curso__boton { padding-inline: var(--e-3); }
  .en-curso__boton span { display: none; }
}

/* ==========================================================================
   Catálogo de juegos
   ========================================================================== */

.filtros {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  padding-inline: var(--margen);
  margin-inline: calc(var(--margen) * -1);
  padding-block: var(--e-1) var(--e-4);
  scrollbar-width: none;
}
.filtros::-webkit-scrollbar { display: none; }

.filtro {
  flex: 0 0 auto;
  padding: 0 18px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-full);
  font-size: var(--t-micro);
  font-weight: var(--peso-texto-fuerte);
  color: var(--texto-suave);
  background: var(--cristal-fondo);
  border: 1px solid var(--cristal-borde);
  transition:
    background var(--d-media) var(--ease-suave),
    color var(--d-media) var(--ease-suave),
    transform var(--d-rapida) var(--ease-suave);
  white-space: nowrap;
}
.filtro:active { transform: scale(0.95); }
.filtro[aria-pressed="true"] {
  background-image: linear-gradient(135deg, var(--relleno-desde), var(--relleno-hasta));
  color: var(--relleno-texto);
  border-color: transparent;
  box-shadow: 0 4px 14px rgb(var(--verde-300-rgb) / 0.22);
}

.rejilla-juegos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e-3);
}

@media (min-width: 430px) {
  .rejilla-juegos { gap: var(--e-4); }
}

.juego-tarjeta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: var(--e-4);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--e-3);
  min-height: 168px;
  text-align: start;
}

.juego-tarjeta__icono {
  width: 46px;
  height: 46px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background-image: linear-gradient(140deg, var(--relleno-hondo-desde), var(--relleno-hondo-hasta));
  color: var(--relleno-texto);
  box-shadow: var(--sombra-1), inset 0 1px 0 rgb(255 255 255 / 0.28);
  transition: transform var(--d-media) var(--ease-elastico);
}
.juego-tarjeta__icono svg { width: 23px; height: 23px; }
.juego-tarjeta:active .juego-tarjeta__icono { transform: scale(0.92) rotate(-4deg); }

.juego-tarjeta__nombre {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: var(--peso-display-medio);
  letter-spacing: var(--track-titulo);
  line-height: 1.14;
}

.juego-tarjeta__desc {
  font-size: var(--t-etiqueta);
  color: var(--texto-tenue);
  line-height: 1.45;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--peso-texto-medio);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.juego-tarjeta__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
}

.juego-tarjeta__mejor {
  font-size: var(--t-etiqueta);
  font-weight: var(--peso-texto-fuerte);
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

/* Sello del reto del día: distingue de un vistazo cuál toca hoy */
.juego-tarjeta__sello {
  position: absolute;
  top: var(--e-3);
  right: var(--e-3);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background-image: linear-gradient(135deg, var(--relleno-desde), var(--relleno-hasta));
  color: var(--relleno-texto);
  box-shadow: 0 3px 10px rgb(var(--verde-300-rgb) / 0.28);
}
.juego-tarjeta__sello svg { width: 14px; height: 14px; }

/* Tarjeta ancha para el carrusel de inicio */
.juego-tarjeta--carrusel {
  width: 168px;
  min-height: 178px;
}

/* ==========================================================================
   Partida
   ========================================================================== */

.partida {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--e-4);
  /* La vista de partida va sin márgenes para que ciertos tableros lleguen
     de borde a borde; el aire se lo damos aquí, y quien lo necesite lo
     recupera con margen negativo. */
  padding-inline: var(--margen);
  padding-bottom: calc(var(--seguro-abajo) + var(--e-5));
}

.marcador {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-full);
}

.marcador__bloque {
  display: grid;
  gap: 1px;
  text-align: center;
  flex: 1;
  min-width: 0;
}

.marcador__cifra {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: var(--peso-display-medio);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color var(--d-media) var(--ease-suave);
}

.marcador__nombre {
  font-size: 9.5px;
  font-weight: var(--peso-texto-fuerte);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.marcador__sep {
  width: 1px;
  height: 26px;
  background: rgb(var(--verde-100-rgb) / 0.12);
  flex: 0 0 auto;
}

/* Barra de tiempo bajo el marcador */
.tiempo-barra {
  height: 4px;
  border-radius: var(--r-full);
  background: rgb(var(--verde-100-rgb) / 0.08);
  overflow: hidden;
  margin-top: var(--e-2);
}
.tiempo-barra__relleno {
  height: 100%;
  width: 100%;
  border-radius: var(--r-full);
  transform-origin: left center;
  background-image: linear-gradient(90deg, var(--verde-300), var(--verde-100));
  transition: transform 120ms linear, background-image var(--d-lenta) var(--ease-suave);
}
.tiempo-barra__relleno[data-poco="si"] {
  background-image: linear-gradient(90deg, var(--atencion), var(--verde-100));
}

/*
 * El tablero es la fila elástica de la partida y, además, su propia zona de
 * scroll. Sin esto, un tablero más alto que la pantalla se recortaría sin
 * remedio: .partida ocupa exactamente el alto disponible, así que la vista
 * de arriba no ve nada que desplazar y los controles del juego quedarían
 * fuera de alcance. Así el marcador y las acciones se quedan fijos y solo se
 * desplaza lo de dentro.
 *
 * `safe center` en lugar de `center`: cuando el contenido no cabe, centrarlo
 * lo empuja hacia arriba y recorta el principio. `safe` lo alinea al inicio
 * en ese caso, que es lo que hace falta para poder desplazarse hasta arriba.
 */
.tablero {
  display: grid;
  place-items: center;
  align-content: safe center;
  gap: var(--e-5);
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.tablero::-webkit-scrollbar { display: none; }

.tablero__consigna {
  text-align: center;
  color: var(--texto-suave);
  font-size: var(--t-pequeno);
  font-weight: var(--peso-texto-fuerte);
  min-height: 1.6em;
  max-width: 30ch;
}

.tablero__foco {
  font-family: var(--f-display);
  font-size: var(--t-display);
  font-weight: var(--peso-display);
  letter-spacing: var(--track-display);
  line-height: 1;
  text-align: center;
}

.acciones-partida {
  display: grid;
  gap: var(--e-3);
}

/* Cuenta atrás previa */
.preparados {
  position: absolute;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  background: rgb(var(--verde-950-rgb) / 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: inherit;
}
[data-tema="claro"] .preparados { background: rgb(var(--verde-100-rgb) / 0.85); }

.preparados__cifra {
  font-family: var(--f-display);
  font-size: clamp(5rem, 30vw, 8rem);
  font-weight: var(--peso-display);
  line-height: 1;
  animation: brotar var(--d-lenta) var(--ease-elastico);
}

.preparados__texto {
  text-align: center;
  color: var(--texto-suave);
  font-weight: var(--peso-texto-fuerte);
  margin-top: var(--e-3);
}

/* ==========================================================================
   Resultado
   ========================================================================== */

.resultado {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-6);
  padding-block: var(--e-7);
  text-align: center;
}

.resultado__corona {
  display: grid;
  place-items: center;
  gap: var(--e-4);
}

.resultado__titulo {
  font-family: var(--f-display);
  font-size: var(--t-h1);
  font-weight: var(--peso-display);
  letter-spacing: var(--track-display);
  line-height: 1.06;
}

.resultado__mensaje {
  color: var(--texto-suave);
  max-width: 30ch;
  margin-inline: auto;
  font-size: var(--t-pequeno);
}

.resultado__puntos {
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 17vw, 5rem);
  font-weight: var(--peso-display);
  line-height: 1;
  letter-spacing: var(--track-display);
  font-variant-numeric: tabular-nums;
  animation: contar-arriba var(--d-lenta) var(--ease-entrada) both;
}

.resultado__detalle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--e-2);
  border-radius: var(--r-xl);
  padding: var(--e-5) var(--e-4);
}

.resultado__detalle .stat { align-items: center; text-align: center; }
.resultado__detalle .stat__cifra { font-size: var(--t-h3); }

.xp-ganada {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  padding: 9px 18px;
  border-radius: var(--r-full);
  background-image: linear-gradient(135deg, var(--relleno-desde), var(--relleno-hasta));
  color: var(--relleno-texto);
  font-weight: var(--peso-texto-fuerte);
  font-size: var(--t-pequeno);
  box-shadow: 0 8px 22px rgb(var(--verde-300-rgb) / 0.26);
  animation: brotar var(--d-lenta) var(--ease-elastico) both;
  animation-delay: 260ms;
}

/* ==========================================================================
   Perfil
   ========================================================================== */

.perfil-cabecera {
  display: grid;
  place-items: center;
  gap: var(--e-4);
  text-align: center;
  padding-block: var(--e-5) var(--e-6);
}

.perfil-cabecera__nombre {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: var(--peso-display);
  letter-spacing: var(--track-titulo);
  line-height: 1.1;
}

.perfil-cabecera__correo {
  font-size: var(--t-micro);
  color: var(--texto-tenue);
}

.nivel-caja {
  display: grid;
  gap: var(--e-3);
  border-radius: var(--r-xl);
  padding: var(--e-5);
}

.nivel-caja__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
}

.nivel-caja__titulo {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: var(--peso-display-medio);
  letter-spacing: var(--track-titulo);
}

.nivel-caja__xp {
  font-size: var(--t-micro);
  font-weight: var(--peso-texto-fuerte);
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}

/* ---- Dominios cognitivos ------------------------------------------------ */

.dominios { display: grid; gap: var(--e-4); }

.dominio {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: var(--e-3);
}

.dominio__icono {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background: var(--acento-tenue);
  color: var(--acento);
}
.dominio__icono svg { width: 18px; height: 18px; }

.dominio__cuerpo { display: grid; gap: 6px; min-width: 0; }

.dominio__nombre {
  font-size: var(--t-micro);
  font-weight: var(--peso-texto-fuerte);
  line-height: 1.2;
}

.dominio__cifra {
  font-family: var(--f-display);
  font-size: var(--t-pequeno);
  font-weight: var(--peso-display-medio);
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

/* ---- Logros ------------------------------------------------------------- */

.rejilla-logros {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--e-3);
}

.logro {
  display: grid;
  justify-items: center;
  gap: var(--e-2);
  text-align: center;
  padding: var(--e-4) var(--e-2);
  border-radius: var(--r-lg);
  background: var(--cristal-fondo);
  border: 1px solid var(--cristal-borde);
  transition: transform var(--d-rapida) var(--ease-suave);
}
.logro:active { transform: scale(0.95); }

.logro__medalla {
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background: rgb(var(--verde-100-rgb) / 0.06);
  color: var(--texto-tenue);
  transition: all var(--d-media) var(--ease-suave);
}
.logro__medalla svg { width: 24px; height: 24px; }

.logro[data-conseguido="si"] .logro__medalla {
  background-image: linear-gradient(140deg, var(--relleno-desde), var(--relleno-hasta));
  color: var(--relleno-texto);
  box-shadow: 0 6px 18px rgb(var(--verde-300-rgb) / 0.30);
}

.logro[data-conseguido="no"] { opacity: 0.55; }

.logro__nombre {
  font-size: 10.5px;
  font-weight: var(--peso-texto-fuerte);
  line-height: 1.25;
  color: var(--texto-suave);
}

/* ---- Historial ---------------------------------------------------------- */

.historial { display: grid; gap: var(--e-2); }

.historial__fila {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-radius: var(--r-lg);
  background: var(--cristal-fondo);
  border: 1px solid var(--cristal-borde);
}

.historial__icono {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background-image: linear-gradient(140deg, var(--relleno-hondo-desde), var(--relleno-hondo-hasta));
  color: var(--relleno-texto);
}
.historial__icono svg { width: 19px; height: 19px; }

.historial__cuerpo { min-width: 0; display: grid; gap: 1px; }

.historial__nombre {
  font-size: var(--t-pequeno);
  font-weight: var(--peso-texto-fuerte);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.historial__fecha {
  font-size: var(--t-etiqueta);
  color: var(--texto-tenue);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--peso-texto-medio);
}

.historial__puntos {
  font-family: var(--f-display);
  font-weight: var(--peso-display-medio);
  font-size: var(--t-pequeno);
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Ajustes
   ========================================================================== */

.lista-ajustes {
  display: grid;
  gap: 2px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--cristal-fondo);
  border: 1px solid var(--cristal-borde);
}

.ajuste {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-4) var(--e-5);
  text-align: start;
  background: transparent;
  border-radius: 0;
  transition: background var(--d-rapida) var(--ease-suave);
  min-height: 64px;
}
.ajuste:active { background: var(--acento-tenue); }

.ajuste__icono {
  width: 38px;
  height: 38px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background: var(--acento-tenue);
  color: var(--acento);
}
.ajuste__icono svg { width: 18px; height: 18px; }

.ajuste__cuerpo { display: grid; gap: 1px; min-width: 0; }

.ajuste__nombre { font-size: var(--t-pequeno); font-weight: var(--peso-texto-fuerte); }

.ajuste__desc {
  font-size: var(--t-etiqueta);
  color: var(--texto-tenue);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--peso-texto-medio);
  line-height: 1.4;
}

.ajuste__flecha { color: var(--texto-tenue); }
.ajuste__flecha svg { width: 17px; height: 17px; }

/* ==========================================================================
   Ajustes finos por altura de pantalla
   ========================================================================== */

/* iPhone SE y similares: apretamos el ritmo vertical */
@media (max-height: 700px) {
  :root {
    --e-7: 26px;
    --e-8: 32px;
    --e-9: 40px;
    --nav-relleno: 6px;
    --nav-item: 48px;
    --alto-nav: 62px;
  }
  .logo { --tam: 84px; }
  .guia__ilustracion { width: min(58vw, 200px); }
  .acceso { gap: var(--e-6); padding-block: var(--e-6); }
}

/* Pantallas muy estrechas (≤ 340px) */
@media (max-width: 340px) {
  .rejilla-stats { gap: var(--e-2); }
  .juego-tarjeta { min-height: 154px; padding: var(--e-3); }
  .nav__texto { font-size: 9.5px; }
}