/* La capa de pulido: lo que hace que todo el juego hable el mismo idioma.
   Va después de las hojas de cada sección (y antes de movil.css) para ganarles
   donde hace falta: cabeceras y paneles de cristal en todas las páginas, las
   superficies del navegador (selección, barras de desplazamiento, foco), la
   respuesta al tocar y las transiciones entre pantallas. */

/* ---------- Páginas: la misma cabecera de cristal y los mismos paneles ----------
   Rankings, Progreso y Bitácora usan la receta de la Central: cristal oscuro,
   un brillo del tema en la esquina y bordes redondos. */
.ranking__cabecera,
.progreso__cabecera,
.bitacora__cabecera {
  display: grid;
  justify-items: start;
  gap: var(--espacio-2);
  padding: var(--espacio-5) var(--espacio-6);
  border: 1px solid var(--linea-tenue);
  border-radius: 26px;
  background:
    radial-gradient(60% 90% at 100% 0%, rgb(var(--brillo-rgb) / 0.16), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--superficie-alta) 85%, transparent), color-mix(in srgb, var(--superficie) 85%, transparent));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), var(--sombra-panel);
}
.ranking__cabecera .titular,
.progreso__cabecera .titular,
.bitacora__cabecera .titular {
  margin: 0;
}
.progreso__panel,
.ranking__cuerpo,
.estadistica {
  border: 1px solid var(--linea-tenue);
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--superficie-alta) 70%, transparent), color-mix(in srgb, var(--superficie) 88%, transparent));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}
.ranking__cuerpo {
  padding: var(--espacio-4) var(--espacio-5) var(--espacio-5);
}
.ranking__encabezado .nota {
  max-width: 60ch;
  margin: 0;
}
.estadistica__valor {
  font-family: var(--fuente-rotulo);
  font-variant-numeric: tabular-nums;
}
.ranking__pestana[aria-selected="true"] {
  border-color: transparent;
  background: linear-gradient(180deg, var(--luz-intensa), var(--luz) 45%, var(--brillo));
  color: var(--texto-sobre-luz);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);
}
.ranking__fila--mia {
  border-color: rgb(var(--luz-rgb) / 0.55);
  background: rgb(var(--luz-rgb) / 0.1);
}
.ranking__valor strong {
  font-variant-numeric: tabular-nums;
}

/* Mientras carga el ranking: filas fantasma con un brillo que pasa. */
.esqueleto {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.esqueleto li {
  display: grid;
  grid-template-columns: 2rem 2.4rem minmax(0, 1fr) 4rem;
  align-items: center;
  gap: 0.75rem;
  height: 3.2rem;
  padding: 0 0.8rem;
  border-radius: 14px;
  background: rgb(var(--linea-rgb) / 0.06);
}
.esqueleto i {
  display: block;
  height: 0.8rem;
  border-radius: var(--radio-pildora);
  background: linear-gradient(90deg, rgb(var(--linea-rgb) / 0.12), rgb(var(--linea-rgb) / 0.28), rgb(var(--linea-rgb) / 0.12));
  background-size: 200% 100%;
  animation: esqueleto-brilla 1.4s ease-in-out infinite;
}
.esqueleto i:nth-child(2) {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
}
@keyframes esqueleto-brilla {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* El ranking vacío invita a jugar. */
.ranking__vacio {
  display: grid;
  justify-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-6) var(--espacio-4);
  text-align: center;
}
.ranking__vacio-icono {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, color-mix(in srgb, var(--luz) 30%, #fff), var(--luz) 40%, var(--brillo));
  color: var(--texto-sobre-luz);
  box-shadow: 0 0 24px -6px rgb(var(--luz-rgb) / 0.8);
}
@media (prefers-reduced-motion: reduce) {
  .esqueleto i {
    animation: none;
  }
}

/* ---------- Superficies del navegador con los colores del tema ---------- */
::selection {
  background: rgb(var(--luz-rgb) / 0.32);
  color: var(--papel);
}
:root {
  accent-color: var(--luz);
  scrollbar-color: rgb(var(--linea-rgb) / 0.35) transparent;
}
input,
textarea,
[contenteditable] {
  caret-color: var(--luz);
}
a {
  text-underline-offset: 0.2em;
}
:where(a, button, summary, select, input, textarea, [role="tab"], [role="radio"], [tabindex]):focus-visible {
  outline: 3px solid rgb(var(--luz-rgb) / 0.9);
  outline-offset: 2px;
}

/* ---------- Respuesta al tocar: todo se hunde un poco ---------- */
.boton {
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, translate 0.15s, filter 0.15s, scale 0.12s;
}
.boton:not(.boton--luz, .boton--anomalia, .boton--premio):active:not(:disabled) {
  scale: 0.97;
}
.menu a,
.barra-inferior > a,
.barra-inferior > button,
.filtros__opcion,
.ranking__pestana,
.solapas__boton,
.editor-pas__filtro,
.editor-pas__pestana,
.galaxia-otras__enlace {
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, translate 0.15s, scale 0.12s;
}
.menu a:active,
.barra-inferior > a:active,
.barra-inferior > button:active,
.filtros__opcion:active,
.ranking__pestana:active,
.solapas__boton:active,
.editor-pas__filtro:active,
.editor-pas__pestana:active,
.sello-ficha:active,
.editor-pas__ranura-boton:active,
.galaxia-otras__enlace:active,
.pantalla:active,
.sala-ficha:active,
.marco:active:not(.marco--cerrado) {
  scale: 0.97;
}
.pantalla {
  transition: translate 0.2s, box-shadow 0.2s, scale 0.12s;
}
.sala-ficha {
  transition: translate 0.2s, border-color 0.2s, scale 0.12s;
}

/* ---------- Viajes entre pantallas ----------
   La vista nueva aparece al instante y entra con opacidad y escala (main.js,
   animarEntrada): al entrar a algo más hondo se acerca, al volver se aleja.
   Sin capturas de pantalla de por medio, así nada se congela. */

/* ---------- Recompensas ---------- */
/* Sello nuevo: la estampa cae sobre la página, salpica tinta y brilla según
   su rareza (el brillo propio de cada rareza lo pone el visado). */
.celebra__sello {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  margin-top: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-4) var(--espacio-4);
  border: 1px solid rgb(var(--linea-rgb) / 0.2);
  border-radius: 20px;
  background: linear-gradient(180deg, #161c4f, #0f1438);
  color: #eef0ff;
}
.celebra__sello--oro {
  border-color: rgb(255 200 87 / 0.55);
  box-shadow: 0 0 30px -12px #ffc857;
}
.celebra__sello--holo {
  border-color: rgb(255 79 184 / 0.5);
  box-shadow: 0 0 30px -10px #9b6bff;
}
.celebra__sello .celebra__logro {
  color: #eef0ff;
}
.celebra__sello-rareza {
  margin: 0;
  color: #b9c0ee;
  font-size: var(--t-0);
}
.celebra__sello-arte {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0.4rem;
}
.celebra__sello-arte .visado {
  animation: sello-cae 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.celebra__tinta {
  position: absolute;
  inset: 12%;
  border: 3px solid rgb(var(--luz-rgb) / 0.55);
  border-radius: 50%;
  opacity: 0;
  animation: sello-tinta 0.7s 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.celebra__sello--oro .celebra__tinta { border-color: rgb(255 200 87 / 0.7); }
.celebra__sello--holo .celebra__tinta { border-color: rgb(255 79 184 / 0.65); }
@keyframes sello-cae {
  from { opacity: 0; scale: 2.3; rotate: -24deg; filter: blur(1.5px); }
  55% { opacity: 1; scale: 0.92; filter: blur(0); }
  to { opacity: 1; scale: 1; rotate: -6deg; }
}
@keyframes sello-tinta {
  from { opacity: 0.9; scale: 0.7; }
  to { opacity: 0; scale: 1.6; }
}

/* Nivel nuevo: el anillo con el número estalla en dos ondas de luz. */
.celebra__nivel-nuevo {
  position: relative;
  display: grid;
  place-items: center;
  height: 7rem;
  margin-top: var(--espacio-2);
}
.celebra__anillo-nivel {
  position: relative;
  display: grid;
  place-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, color-mix(in srgb, var(--luz) 30%, #fff), var(--luz) 40%, var(--brillo));
  color: var(--texto-sobre-luz);
  font: 800 2rem / 1 var(--fuente-rotulo);
  box-shadow: 0 0 0 4px rgb(var(--luz-rgb) / 0.35), 0 0 40px rgb(var(--luz-rgb) / 0.7);
  animation: nivel-aparece 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.celebra__onda {
  position: absolute;
  width: 5rem;
  height: 5rem;
  border: 3px solid var(--luz);
  border-radius: 50%;
  opacity: 0;
  animation: nivel-onda 1.1s 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.celebra__onda--2 {
  border-color: var(--oro);
  animation-delay: 0.45s;
}
@keyframes nivel-aparece {
  from { opacity: 0; scale: 0.3; }
  to { opacity: 1; scale: 1; }
}
@keyframes nivel-onda {
  from { opacity: 0.95; scale: 1; }
  to { opacity: 0; scale: 2.6; }
}
@media (prefers-reduced-motion: reduce) {
  .celebra__sello-arte .visado,
  .celebra__tinta,
  .celebra__anillo-nivel,
  .celebra__onda {
    animation: none;
  }
  .celebra__tinta,
  .celebra__onda {
    display: none;
  }
}

/* En el celular las pestañas del ranking van en una sola fila que se desliza,
   igual que los filtros de la colección. */
@media (max-width: 720px) {
  .ranking__pestanas {
    flex-wrap: nowrap;
    justify-self: stretch;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ranking__pestana {
    flex: none;
  }
  .ranking__cuerpo {
    padding: var(--espacio-3) var(--espacio-4) var(--espacio-4);
  }
}

/* Al saltar a una parte con un ancla, que no quede tapada por la barra de arriba. */
#secciones,
#privacidad,
#correo,
.perfil__grupo[id] {
  scroll-margin-top: 5.5rem;
}

/* ---------- Al pasar el mouse o tocar: siempre se nota ----------
   Antes, varios botones cambiaban a un gris o a un tono de superficie casi
   igual al panel de atrás y parecían desaparecer. Ahora todos usan la luz
   del tema (que contrasta en los 18 temas, claros y oscuros). */
.boton:not(.boton--luz, .boton--anomalia, .boton--premio, .boton--peligro):hover {
  border-color: var(--luz);
  background: rgb(var(--luz-rgb) / 0.12);
  color: var(--papel);
}
.boton:not(.boton--luz, .boton--anomalia, .boton--premio, .boton--peligro):active:not(:disabled) {
  background: rgb(var(--luz-rgb) / 0.22);
}
/* El borde marca el hover con la luz del tema; la letra pasa al color de
   mayor contraste para no perderse sobre el tinte. */
.boton--discreto:hover {
  color: var(--papel) !important;
}
.boton--peligro:hover {
  border-color: var(--error);
  background: color-mix(in srgb, var(--error) 16%, transparent);
  color: var(--error);
}
.boton--peligro:active:not(:disabled) {
  background: var(--error);
  color: #fff;
}
/* El tinte de fondo sube y la letra pasa al color de mayor contraste: si la
   letra siguiera en color luz, se perdería sobre su propio tinte. */
.boton-hud:not(.boton-hud--luz):hover {
  background: rgb(var(--luz-rgb) / 0.22);
  color: var(--papel);
}
.boton-hud:not(.boton-hud--luz):active {
  background: rgb(var(--luz-rgb) / 0.3);
  color: var(--papel);
}
/* El botón lleno conserva su color al pasar y al pulsar. */
.boton-hud--luz:hover {
  background: var(--luz-intensa);
  color: var(--texto-sobre-luz);
}
.boton-hud--luz:active {
  background: var(--luz);
  color: var(--texto-sobre-luz);
  filter: brightness(0.92);
}
.boton--discreto:active:not(:disabled) {
  color: var(--papel) !important;
}
.opcion label:hover {
  border-color: var(--luz);
  background: rgb(var(--luz-rgb) / 0.1);
}
.leccion__cerrar:hover,
.leccion__cerrar:focus-visible {
  background: rgb(var(--luz-rgb) / 0.16);
  color: var(--luz);
}
.menu a:hover,
.menu__mas:hover,
.desplegable--mas[open] .menu__mas,
.desplegable__opcion:hover,
.desplegable__opcion:focus-visible,
.mas__opcion:hover,
.arbol__archivo:hover,
.portal:hover,
.portal:focus-visible {
  background: rgb(var(--luz-rgb) / 0.12);
  color: var(--papel);
}
.solapas__boton:hover:not([aria-selected="true"]),
.ranking__pestana:hover:not([aria-selected="true"]),
.temas__pestana:hover:not([aria-selected="true"]),
.amigos-ranking__pestana:hover:not([aria-selected="true"]),
.ranking__alcance-opcion:hover:not([aria-checked="true"]),
.editor-pas__pestana:hover:not([aria-selected="true"]),
.editor-pas__filtro:hover:not([aria-checked="true"]) {
  background: rgb(var(--luz-rgb) / 0.12);
  color: var(--papel);
}
.tema-opcion:hover,
.interruptor:hover,
.privacidad__opcion:hover,
.destacada-opcion:hover,
.marco:hover:not(.marco--cerrado) {
  border-color: var(--luz);
}
.tema-opcion:active,
.interruptor:active,
.privacidad__opcion:active,
.destacada-opcion:active {
  background: rgb(var(--luz-rgb) / 0.14);
}

/* ---------- Rendimiento: lo que no se ve, no se anima ----------
   rendimiento.js marca lo que salió de la pantalla; al volver sigue igual. */
.fuera-de-vista:not(.letrero, .visado),
.fuera-de-vista *:not(.letrero, .letrero *, .visado),
.fuera-de-vista::before,
.fuera-de-vista::after,
.fuera-de-vista *:not(.letrero *)::before,
.fuera-de-vista *:not(.letrero *)::after {
  animation-play-state: paused !important;
}

/* Rendimiento: los rangos de un álbum que quedan fuera de la pantalla no se
   dibujan hasta que llegas. */
.col-rango {
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
}