/* ==========================================================================
   PLEXIA — sistema de diseño
   ==========================================================================
   Este archivo ES la hoja de estilos del sitio. `news.css` y `style.css`
   quedaron vacios a proposito: existian porque la cabecera original cargaba
   tres archivos, y se conservan solo para que no rompa nada que aun los pida.

   El marcado de la cascara (cabecera, navegacion, pie) se reescribio de cero
   en `layout/overall/plexia-shell.php`. Las 221 paginas de contenido NO se
   tocaron: siguen emitiendo .Box, .BoxContent, .BorderTitleText y tablas, y
   aqui se les da forma. Por eso hay dos familias de selectores:

     - los nuevos    .px-*        marcado propio, limpio
     - los heredados .Box, .BoxContent, ...  lo que emiten las paginas viejas

   Sigue habiendo !important en la parte heredada: esas paginas llevan las
   rutas de imagen en atributos style="" en linea, y un atributo en linea
   gana a cualquier hoja. No es descuido.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Superficies: casi negro con un punto calido, no gris azulado */
  --px-fondo:      #0c0b0a;
  --px-superficie: #141312;
  --px-elevado:    #1c1a18;
  --px-borde:      #2a2724;
  --px-borde-sutil:#201e1c;

  /* Texto */
  --px-texto:      #f2ede4;
  --px-suave:      #a49a8c;
  --px-tenue:      #6f675d;

  /* Acentos */
  --px-oro:        #e0a92e;
  --px-oro-claro:  #f5c455;
  --px-oro-oscuro: #8a6716;
  --px-verde:      #4ea766;
  --px-rojo:       #c65a4c;
  --px-azul:       #5b8bc4;

  /* Tipografia */
  --px-display: "Cinzel", Georgia, "Times New Roman", serif;
  --px-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --px-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Escala de espaciado */
  --px-1: 4px;  --px-2: 8px;  --px-3: 12px; --px-4: 16px;
  --px-5: 24px; --px-6: 32px; --px-7: 48px; --px-8: 64px;

  --px-radio: 10px;
  --px-radio-sm: 6px;
  --px-ancho: 1200px;
  --px-cabecera: 64px;

  --px-sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --px-transicion: 160ms cubic-bezier(.4,0,.2,1);
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--px-cabecera) + var(--px-4));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--px-fondo);
  color: var(--px-texto);
  font: 400 15px/1.65 var(--px-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; vertical-align: middle; border: 0; }
table { border-collapse: collapse; border-spacing: 0; }

h1, h2, h3, h4, h5 { margin: 0 0 var(--px-3); line-height: 1.2; font-weight: 600; }
h1 { font-family: var(--px-display); font-size: clamp(28px, 4vw, 40px); font-weight: 700; letter-spacing: -.01em; }
h2 { font-family: var(--px-display); font-size: clamp(21px, 2.6vw, 27px); font-weight: 600; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
p  { margin: 0 0 var(--px-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--px-oro); text-decoration: none; transition: color var(--px-transicion); }
a:hover { color: var(--px-oro-claro); }

hr { border: 0; border-top: 1px solid var(--px-borde); margin: var(--px-5) 0; }
small { font-size: 12.5px; color: var(--px-suave); }
code, kbd { font-family: var(--px-mono); font-size: .92em; }

::selection { background: var(--px-oro-oscuro); color: #fff; }

:focus-visible {
  outline: 2px solid var(--px-oro);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Saltar al contenido: para quien navega con teclado o lector de pantalla */
.px-saltar {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--px-oro); color: #17130a; font-weight: 600;
  padding: var(--px-3) var(--px-4); border-radius: 0 0 var(--px-radio-sm) 0;
}
.px-saltar:focus { left: 0; }

/* ---------------------------------------------------------------- utiles */
.px-contenedor {
  width: 100%;
  max-width: var(--px-ancho);
  margin-inline: auto;
  padding-inline: var(--px-4);
}
.px-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- cabecera */
.px-cabecera {
  position: sticky; top: 0; z-index: 100;
  height: var(--px-cabecera);
  background: rgba(12,11,10,.82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--px-borde-sutil);
}
.px-cabecera__int {
  height: 100%;
  display: flex; align-items: center; gap: var(--px-5);
}

.px-marca {
  display: inline-flex; align-items: baseline; gap: var(--px-2);
  font-family: var(--px-display); font-weight: 700; font-size: 23px;
  letter-spacing: .04em; color: var(--px-texto); white-space: nowrap;
}
.px-marca:hover { color: var(--px-texto); }
.px-marca b { color: var(--px-oro); font-weight: 700; }
.px-marca span {
  font-family: var(--px-sans); font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--px-tenue);
}

/* ---------------------------------------------------------------- nav */
.px-nav { display: flex; align-items: center; gap: var(--px-1); margin-right: auto; }
.px-nav__grupo { position: relative; }

.px-nav__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  font: 500 14px/1 var(--px-sans); color: var(--px-suave);
  padding: 10px var(--px-3); border-radius: var(--px-radio-sm);
  transition: color var(--px-transicion), background var(--px-transicion);
}
.px-nav__btn:hover, .px-nav__grupo:hover .px-nav__btn { color: var(--px-texto); background: rgba(255,255,255,.05); }
.px-nav__btn[aria-current="page"] { color: var(--px-oro); }
.px-nav__btn svg { width: 10px; height: 10px; opacity: .55; transition: transform var(--px-transicion); }
.px-nav__grupo:hover .px-nav__btn svg { transform: rotate(180deg); }

.px-nav__menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 210px;
  background: var(--px-elevado);
  border: 1px solid var(--px-borde);
  border-radius: var(--px-radio);
  box-shadow: var(--px-sombra);
  padding: var(--px-2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--px-transicion), transform var(--px-transicion), visibility var(--px-transicion);
}
.px-nav__grupo:hover .px-nav__menu,
.px-nav__grupo:focus-within .px-nav__menu { opacity: 1; visibility: visible; transform: none; }

.px-nav__menu a {
  display: block; padding: 9px var(--px-3); border-radius: var(--px-radio-sm);
  font-size: 14px; color: var(--px-suave); transition: none;
}
.px-nav__menu a:hover { background: rgba(224,169,46,.1); color: var(--px-texto); }
.px-nav__menu a[aria-current="page"] { color: var(--px-oro); background: rgba(224,169,46,.07); }

.px-acciones { display: flex; align-items: center; gap: var(--px-2); }

/* Boton de menu en movil */
.px-hamburguesa {
  display: none;
  background: none; border: 1px solid var(--px-borde); border-radius: var(--px-radio-sm);
  width: 38px; height: 38px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.px-hamburguesa span {
  display: block; width: 17px; height: 1.5px; background: var(--px-texto);
  position: relative; transition: background var(--px-transicion);
}
.px-hamburguesa span::before, .px-hamburguesa span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px;
  background: var(--px-texto); transition: transform var(--px-transicion), top var(--px-transicion);
}
.px-hamburguesa span::before { top: -5.5px; }
.px-hamburguesa span::after  { top:  5.5px; }
.px-hamburguesa[aria-expanded="true"] span { background: transparent; }
.px-hamburguesa[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.px-hamburguesa[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

/* ---------------------------------------------------------------- botones */
.px-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--px-2);
  font: 600 14px/1 var(--px-sans); white-space: nowrap;
  padding: 11px var(--px-4); border-radius: var(--px-radio-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--px-transicion), border-color var(--px-transicion), color var(--px-transicion), transform var(--px-transicion);
}
.px-boton:active { transform: translateY(1px); }

.px-boton--oro {
  background: linear-gradient(180deg, var(--px-oro-claro), var(--px-oro));
  color: #1b1408; border-color: var(--px-oro);
}
.px-boton--oro:hover { background: var(--px-oro-claro); color: #1b1408; }

.px-boton--linea { background: transparent; color: var(--px-texto); border-color: var(--px-borde); }
.px-boton--linea:hover { border-color: var(--px-oro); color: var(--px-oro-claro); background: rgba(224,169,46,.06); }

.px-boton--fantasma { background: transparent; color: var(--px-suave); }
.px-boton--fantasma:hover { color: var(--px-texto); background: rgba(255,255,255,.05); }

.px-boton--grande { padding: 14px var(--px-6); font-size: 15px; }

/* ---------------------------------------------------------------- hero */
.px-hero {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--px-borde-sutil);
  padding: var(--px-8) 0 var(--px-7);
}
.px-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 80% at 50% -10%, rgba(224,169,46,.13), transparent 70%),
    radial-gradient(40% 60% at 85% 20%, rgba(91,139,196,.07), transparent 70%);
}
/* Rejilla tenue, dibujada con CSS: sin imagenes que descargar */
.px-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 30%, #000, transparent);
}
.px-hero__int { position: relative; z-index: 1; text-align: center; }

.px-etiqueta {
  display: inline-flex; align-items: center; gap: var(--px-2);
  font: 600 11px/1 var(--px-sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--px-oro);
  background: rgba(224,169,46,.09);
  border: 1px solid rgba(224,169,46,.22);
  padding: 7px var(--px-3); border-radius: 100px;
  margin-bottom: var(--px-5);
}
.px-pulso {
  width: 7px; height: 7px; border-radius: 50%; background: var(--px-verde);
  box-shadow: 0 0 0 0 rgba(78,167,102,.65);
  animation: px-pulso 2.4s infinite;
}
@keyframes px-pulso {
  70%  { box-shadow: 0 0 0 7px rgba(78,167,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(78,167,102,0); }
}

.px-hero h1 {
  font-size: clamp(42px, 8vw, 76px); letter-spacing: .01em; margin-bottom: var(--px-3);
  background: linear-gradient(180deg, #fff 30%, #c9a94f);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.px-hero__lema {
  font-size: clamp(15px, 2vw, 18px); color: var(--px-suave);
  max-width: 560px; margin: 0 auto var(--px-6);
}
.px-hero__cta { display: flex; gap: var(--px-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--px-7); }

/* Datos de conexion */
.px-conexion {
  display: inline-flex; flex-wrap: wrap; gap: 0;
  background: var(--px-superficie);
  border: 1px solid var(--px-borde);
  border-radius: var(--px-radio);
  overflow: hidden;
}
.px-conexion__dato { padding: var(--px-3) var(--px-5); border-right: 1px solid var(--px-borde); text-align: left; }
.px-conexion__dato:last-child { border-right: 0; }
.px-conexion dt {
  font: 600 10px/1 var(--px-sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--px-tenue); margin-bottom: 6px;
}
.px-conexion dd { margin: 0; font-family: var(--px-mono); font-size: 14px; color: var(--px-texto); }

/* ---------------------------------------------------------------- rejilla y tarjetas */
/* padding-block, no la abreviada: `.px-contenedor` pone el margen lateral
   y la abreviada lo borraria. Con las dos clases en el mismo elemento
   —el patron de todas las paginas— el texto acababa tocando el borde
   de la pantalla en movil. */
.px-seccion { padding-block: var(--px-7); }
.px-seccion__cab { margin-bottom: var(--px-5); }
.px-seccion__cab p { color: var(--px-suave); margin: 0; }

.px-rejilla { display: grid; gap: var(--px-4); }
.px-rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.px-rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.px-tarjeta {
  background: var(--px-superficie);
  border: 1px solid var(--px-borde);
  border-radius: var(--px-radio);
  overflow: hidden;
}
.px-tarjeta__cab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--px-3);
  padding: var(--px-3) var(--px-5);
  background: var(--px-elevado);
  border-bottom: 1px solid var(--px-borde);
  font-family: var(--px-display); font-size: 15px; font-weight: 600;
  color: var(--px-texto);
}
.px-tarjeta__cuerpo { padding: var(--px-5); }

.px-func { padding: var(--px-5); background: var(--px-superficie); border: 1px solid var(--px-borde); border-radius: var(--px-radio); transition: border-color var(--px-transicion); }
.px-func:hover { border-color: #3a352f; }
.px-func h3 { font-size: 16px; margin-bottom: 6px; }
.px-func p { color: var(--px-suave); font-size: 14px; margin: 0; }
.px-func__icono {
  width: 34px; height: 34px; border-radius: 8px; margin-bottom: var(--px-3);
  display: grid; place-items: center;
  background: rgba(224,169,46,.1); border: 1px solid rgba(224,169,46,.2);
  color: var(--px-oro);
}
.px-func__icono svg { width: 17px; height: 17px; }

/* Cifras */
.px-cifra { text-align: center; padding: var(--px-5) var(--px-3); background: var(--px-superficie); border: 1px solid var(--px-borde); border-radius: var(--px-radio); }
.px-cifra dt { font: 600 10.5px/1 var(--px-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--px-tenue); margin-bottom: var(--px-2); }
.px-cifra dd { margin: 0; font-family: var(--px-display); font-size: 30px; font-weight: 700; color: var(--px-texto); line-height: 1; }

/* ---------------------------------------------------------------- pie */
.px-pie {
  border-top: 1px solid var(--px-borde-sutil);
  background: var(--px-superficie);
  padding: var(--px-7) 0 var(--px-5);
  margin-top: var(--px-8);
}
.px-pie__rejilla { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--px-6); margin-bottom: var(--px-6); }
.px-pie h4 { font: 600 11px/1 var(--px-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--px-tenue); margin-bottom: var(--px-3); }
.px-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--px-2); }
.px-pie a { color: var(--px-suave); font-size: 14px; }
.px-pie a:hover { color: var(--px-oro-claro); }
.px-pie__sobre { color: var(--px-suave); font-size: 14px; max-width: 320px; }
.px-pie__base {
  border-top: 1px solid var(--px-borde-sutil); padding-top: var(--px-4);
  display: flex; justify-content: space-between; gap: var(--px-4); flex-wrap: wrap;
  font-size: 13px; color: var(--px-tenue);
}

/* ==========================================================================
   EL CAMINO HASTA JUGAR
   Tres pantallas encadenadas: cuenta creada -> personaje creado -> a jugar.
   Antes cada una era una frase suelta en ingles y el jugador se quedaba sin
   saber que hacer. Aqui el siguiente paso es siempre lo mas grande que hay.
   ========================================================================== */

.px-exito {
  max-width: 560px;
  margin: var(--px-7) auto;
  padding: var(--px-6) var(--px-5) var(--px-5);
  text-align: center;
  background: var(--px-superficie);
  border: 1px solid var(--px-borde);
  border-radius: 10px;
}

/* La marca de verificacion, dibujada en el hueco de un circulo verde.
   OJO: box-sizing es border-box en toda la hoja, asi que el relleno se come
   el lienzo del svg. Con 30px y 11px de relleno quedaban 8px de dibujo y la
   marca salia a 2,7px: invisible. El ancho tiene que ser lienzo + relleno. */
.px-exito > svg {
  width: 46px; height: 46px;
  padding: 12px;
  margin-bottom: var(--px-4);
  color: var(--px-verde);
  border: 2px solid var(--px-verde);
  border-radius: 50%;
}

.px-exito h1 {
  margin: 0 0 var(--px-3);
  font-family: var(--px-display);
  font-size: 24px;
  color: var(--px-texto);
}

.px-exito > p { margin: 0 0 var(--px-5); color: var(--px-suave); }
.px-exito .px-boton { margin-top: var(--px-2); }

/* Los pasos van numerados y alineados a la izquierda aunque la tarjeta este
   centrada: una lista centrada es ilegible en cuanto pasa de una linea. */
.px-pasos {
  margin: 0 0 var(--px-5);
  padding: 0;
  list-style: none;
  counter-reset: paso;
  text-align: left;
}

.px-pasos li {
  position: relative;
  padding: 0 0 var(--px-4) var(--px-6);
  color: var(--px-suave);
  line-height: 1.55;
}

.px-pasos li:last-child { padding-bottom: 0; }

.px-pasos li::before {
  counter-increment: paso;
  content: counter(paso);
  position: absolute;
  left: 0; top: 1px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-family: var(--px-mono);
  font-size: 12px;
  color: var(--px-oro);
  background: rgba(224,169,46,.09);
  border: 1px solid var(--px-oro-oscuro);
  border-radius: 50%;
}

.px-pasos strong { color: var(--px-texto); font-weight: 600; }

.px-pasos code,
.px-exito code {
  padding: 1px 6px;
  font-family: var(--px-mono);
  font-size: 12.5px;
  color: var(--px-oro-claro);
  background: rgba(224,169,46,.08);
  border-radius: 4px;
}

/* En "Mi cuenta" cuando todavia no hay ningun personaje. Mismo lenguaje que
   la tarjeta de exito, pero en oro: aqui no se celebra nada, se empuja. */
.px-siguiente-paso {
  margin: var(--px-5) 0;
  padding: var(--px-5);
  text-align: center;
  background: linear-gradient(180deg, rgba(224,169,46,.07), transparent);
  border: 1px solid var(--px-oro-oscuro);
  border-radius: 10px;
}

.px-siguiente-paso h3 {
  margin: 0 0 var(--px-2);
  font-family: var(--px-display);
  font-size: 19px;
  color: var(--px-oro-claro);
}

.px-siguiente-paso p {
  max-width: 44ch;
  margin: 0 auto var(--px-4);
  color: var(--px-suave);
  line-height: 1.55;
}

@media (max-width: 600px) {
  .px-exito { margin: var(--px-5) var(--px-3); padding: var(--px-5) var(--px-4); }
}

/* ==========================================================================
   LOGROS
   Una tabla de 398 filas es inutilizable sin un buscador, asi que lleva uno
   que filtra en el navegador. La nota de cada logro son estrellas dibujadas
   con texto: la version original usaba GIFs alojados en imgur, y un tercero
   caido se lleva la pagina por delante.
   ========================================================================== */

.px-titulo {
  margin: 0 0 var(--px-3);
  font-family: var(--px-display);
  font-size: 30px;
  color: var(--px-texto);
}

.px-entradilla {
  max-width: 68ch;
  margin: 0 0 var(--px-5);
  color: var(--px-suave);
  line-height: 1.6;
}
.px-entradilla strong { color: var(--px-texto); }

/* La barra de filtro se apila en movil y queda en linea en pantalla ancha. */
.px-filtro {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--px-3);
  margin-bottom: var(--px-4);
  padding-bottom: var(--px-4);
  border-bottom: 1px solid var(--px-borde-sutil);
}

.px-campo {
  flex: 1 1 260px;
  min-width: 0;
  padding: 10px var(--px-4);
  font: 14px/1.4 var(--px-sans);
  color: var(--px-texto);
  background: var(--px-superficie);
  border: 1px solid var(--px-borde);
  border-radius: 8px;
}
.px-campo::placeholder { color: var(--px-tenue); }
.px-campo:focus {
  outline: none;
  border-color: var(--px-oro-oscuro);
  background: var(--px-elevado);
}

.px-check {
  display: inline-flex; align-items: center; gap: var(--px-2);
  color: var(--px-suave); font-size: 13.5px; cursor: pointer;
  user-select: none;
}
.px-check input { accent-color: var(--px-oro); cursor: pointer; }

.px-contador {
  margin-left: auto;
  font-family: var(--px-mono);
  font-size: 12.5px;
  color: var(--px-tenue);
  white-space: nowrap;
}

.px-tabla { width: 100%; }
.px-tabla thead th {
  text-align: left;
  padding: var(--px-2) var(--px-3);
  font: 600 11px/1 var(--px-sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--px-tenue);
  border-bottom: 1px solid var(--px-borde);
}
.px-tabla tbody td {
  padding: var(--px-3);
  border-bottom: 1px solid var(--px-borde-sutil);
  vertical-align: top;
  color: var(--px-suave);
  line-height: 1.5;
}
.px-tabla tbody tr:hover td { background: rgba(255,255,255,.018); }

.px-col-grado  { width: 74px; }
.px-col-nombre { width: 210px; }
.px-col-puntos { width: 64px; text-align: right; font-family: var(--px-mono); }

.px-tabla--logros .px-col-nombre strong { color: var(--px-texto); font-weight: 600; }
.px-logro__desc { font-size: 13.5px; }

.px-estrellas {
  color: var(--px-oro);
  font-size: 13px;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* El distintivo de secreto reusa .px-etiqueta pero en gris: no es un premio,
   es un aviso de que no se cuenta como se consigue. */
.px-etiqueta--secreto {
  margin-left: var(--px-2);
  padding: 3px 8px;
  font-size: 9.5px;
  color: var(--px-tenue);
  background: rgba(255,255,255,.04);
  border-color: var(--px-borde);
}

@media (max-width: 720px) {
  .px-contador { margin-left: 0; width: 100%; }

  /* La tabla deja de ser tabla: a este ancho, tres columnas dejan la
     descripcion en una tira de dos palabras por linea. Cada logro pasa a
     ser un bloque con el nombre y los puntos arriba y el texto debajo. */
  .px-tabla--logros thead { display: none; }
  .px-tabla--logros,
  .px-tabla--logros tbody,
  .px-tabla--logros tr,
  .px-tabla--logros td { display: block; width: auto; }

  .px-tabla--logros tr.px-logro {
    position: relative;
    padding: var(--px-4) 0;
    border-bottom: 1px solid var(--px-borde-sutil);
  }
  .px-tabla--logros tr.px-logro[hidden] { display: none; }

  /* Con `tbody` para igualar la especificidad de `.px-tabla tbody td`;
     sin el, esa regla gana y deja el borde y el relleno de escritorio. */
  .px-tabla--logros tbody td { border: 0; padding: 0; }
  /* La columna de grado tiene ancho fijo en escritorio: aqui sobra. */
  .px-tabla--logros tbody td.px-col-grado { width: auto; }

  /* El grado, delante del nombre en vez de en su propia columna. */
  .px-tabla--logros .px-col-grado {
    display: inline-block;
    margin-right: var(--px-2);
  }
  .px-tabla--logros .px-col-nombre { display: inline; }

  /* Los puntos, anclados arriba a la derecha del bloque. */
  .px-tabla--logros tbody td.px-col-puntos {
    position: absolute; top: var(--px-4); right: 0; width: auto;
    text-align: right;
    color: var(--px-oro);
    font-size: 13px;
  }
  .px-tabla--logros tbody td.px-col-puntos::after {
    content: " pts";
    color: var(--px-tenue);
    font-size: 11px;
  }

  .px-tabla--logros .px-logro__desc {
    margin-top: var(--px-2);
    padding-right: 0;
  }
  /* Sitio para los puntos, para que el nombre no se le meta debajo. */
  .px-tabla--logros tbody td.px-col-nombre { padding-right: 56px; }
}

/* Tareas de caza. Comparte el buscador y la tabla con la pagina de logros;
   aqui solo lo que es propio. */

.px-campo--corto { flex: 0 0 110px; width: 110px; }

.px-col-num { text-align: right; white-space: nowrap; font-family: var(--px-mono); font-size: 13px; }
.px-tabla--tareas thead th.px-col-num { text-align: right; }
.px-tabla--tareas tbody td strong { color: var(--px-texto); font-weight: 600; }

/* Cuando la tarea agrupa varias criaturas, se listan debajo en pequeno. */
.px-tarea__crias {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--px-tenue);
}

.px-tarea__premio { font-size: 13px; }

@media (max-width: 720px) {
  /* Misma idea que en logros: seis columnas no caben, se apila. */
  .px-tabla--tareas thead { display: none; }
  .px-tabla--tareas,
  .px-tabla--tareas tbody,
  .px-tabla--tareas tr,
  .px-tabla--tareas tbody td { display: block; width: auto; }

  .px-tabla--tareas tr.px-tarea {
    padding: var(--px-4) 0;
    border-bottom: 1px solid var(--px-borde-sutil);
  }
  .px-tabla--tareas tr.px-tarea[hidden] { display: none; }
  .px-tabla--tareas tbody td { border: 0; padding: 0; text-align: left; }

  /* Etiquetas delante del dato, que sin cabecera no se sabe que es que. */
  .px-tabla--tareas tbody td.px-col-num::before {
    color: var(--px-tenue);
    font-family: var(--px-sans);
    font-size: 11.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-right: var(--px-2);
  }
  .px-tabla--tareas tbody td:nth-child(2)::before { content: "Muertes"; }
  .px-tabla--tareas tbody td:nth-child(3)::before { content: "Nivel"; }
  .px-tabla--tareas tbody td:nth-child(4)::before { content: "Experiencia"; }
  .px-tabla--tareas tbody td:nth-child(6)::before { content: "Puntos"; }
  .px-tabla--tareas tbody td:nth-child(2),
  .px-tabla--tareas tbody td:nth-child(3),
  .px-tabla--tareas tbody td:nth-child(4),
  .px-tabla--tareas tbody td:nth-child(6) { margin-top: var(--px-1); }
  .px-tabla--tareas tbody td.px-tarea__premio { margin-top: var(--px-2); color: var(--px-oro); }
  .px-campo--corto { flex: 0 0 90px; width: 90px; }
}

/* ==========================================================================
   LA CACERIA DE LA SEMANA
   El unico bloque de la portada que le pide algo al visitante: los demas
   informan, este convoca. Por eso lleva el oro y va arriba.
   ========================================================================== */

.px-caceria {
  padding: var(--px-5);
  background: linear-gradient(180deg, rgba(224,169,46,.06), transparent 60%);
  border: 1px solid var(--px-oro-oscuro);
  border-radius: 12px;
}
.px-caceria.es-lograda {
  background: linear-gradient(180deg, rgba(78,167,102,.09), transparent 60%);
  border-color: rgba(78,167,102,.45);
}

.px-caceria__cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--px-4);
  margin-bottom: var(--px-4);
}

.px-caceria__etiq {
  display: block;
  font: 600 10.5px/1 var(--px-sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--px-oro);
  margin-bottom: var(--px-2);
}
.es-lograda .px-caceria__etiq { color: var(--px-verde); }

.px-caceria__cab h2 {
  margin: 0;
  font-family: var(--px-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--px-suave);
}
.px-caceria__cab h2 strong { color: var(--px-texto); font-weight: 700; }

.px-caceria__cifra { text-align: right; white-space: nowrap; }
.px-caceria__pct {
  display: block;
  font-family: var(--px-mono);
  font-size: 28px;
  line-height: 1;
  color: var(--px-oro);
}
.es-lograda .px-caceria__pct { color: var(--px-verde); }
.px-caceria__plazo {
  display: block;
  margin-top: var(--px-1);
  font-size: 12px;
  color: var(--px-tenue);
}

/* La barra. Con relleno minimo del 1% para que se vea que existe aunque
   nadie haya matado nada todavia. */
.px-barra {
  height: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--px-borde);
  border-radius: 100px;
  overflow: hidden;
}
.px-barra__relleno {
  height: 100%;
  background: linear-gradient(90deg, var(--px-oro-oscuro), var(--px-oro));
  border-radius: 100px;
  transition: width .6s ease;
}
.es-lograda .px-barra__relleno {
  background: linear-gradient(90deg, #2f6b42, var(--px-verde));
}

.px-caceria__pie {
  margin: var(--px-4) 0 0;
  max-width: 68ch;
  color: var(--px-suave);
  font-size: 13.5px;
  line-height: 1.6;
}
.px-caceria__pie strong { color: var(--px-texto); }

/* Los cinco que mas aportaron. Es la parte que hace que la gente vuelva a
   mirar: verse en la lista de un servidor pequeno se nota. */
.px-caceria__top {
  display: flex; flex-wrap: wrap; gap: var(--px-2) var(--px-4);
  margin: var(--px-4) 0 0; padding: var(--px-4) 0 0;
  list-style: none;
  border-top: 1px solid var(--px-borde-sutil);
}
.px-caceria__top li {
  display: inline-flex; align-items: center; gap: var(--px-2);
  font-size: 13px;
}
.px-caceria__top a { color: var(--px-texto); text-decoration: none; }
.px-caceria__top a:hover { color: var(--px-oro-claro); }

.px-caceria__pos {
  display: grid; place-items: center;
  width: 19px; height: 19px;
  font-family: var(--px-mono); font-size: 11px;
  color: var(--px-tenue);
  background: rgba(255,255,255,.04);
  border-radius: 50%;
}
.px-caceria__top li:first-child .px-caceria__pos {
  color: #1b1408; background: var(--px-oro);
}
.px-caceria__n { color: var(--px-tenue); font-family: var(--px-mono); font-size: 12px; }

@media (max-width: 600px) {
  .px-caceria__cab { flex-direction: column; gap: var(--px-3); }
  .px-caceria__cifra { text-align: left; }
  .px-caceria__cab h2 { font-size: 22px; }
}

/* ==========================================================================
   APOYAR EL SERVIDOR — un cafecito
   Deliberadamente sobrio. Una pagina de donacion que grita se lee como una
   tienda, y esto no vende nada.
   ========================================================================== */

.px-cafecito {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

/* La taza es el unico elemento con permiso para ser grande y tierno. */
.px-cafecito__taza {
  width: 140px; height: 140px;
  margin-bottom: var(--px-4);
  /* Un halo calido detras, para que el PNG transparente no flote sobre el
     fondo casi negro sin nada que lo sostenga. */
  filter: drop-shadow(0 8px 28px rgba(224,169,46,.18));
}

.px-cafecito h1 {
  margin: 0 0 var(--px-3);
  font-family: var(--px-display);
  font-size: 30px;
  color: var(--px-texto);
}

.px-cafecito__entrada {
  max-width: 44ch;
  margin: 0 auto var(--px-5);
  color: var(--px-suave);
  line-height: 1.6;
}

.px-cafecito__pie {
  margin: var(--px-4) 0 0;
  font-size: 12.5px;
  color: var(--px-tenue);
}
.px-cafecito__pie strong { color: var(--px-suave); }

/* El bloque honesto. Va con borde y alineado a la izquierda porque es texto
   para leer, no un eslogan: centrado seria ilegible. */
.px-cafecito__claro {
  margin-top: var(--px-7);
  padding: var(--px-5);
  text-align: left;
  background: var(--px-superficie);
  border: 1px solid var(--px-borde);
  border-radius: 10px;
}

.px-cafecito__claro h2 {
  margin: 0 0 var(--px-3);
  font-family: var(--px-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--px-tenue);
}

.px-cafecito__claro p {
  margin: 0 0 var(--px-3);
  color: var(--px-suave);
  font-size: 14px;
  line-height: 1.65;
}
.px-cafecito__claro p:last-child { margin-bottom: 0; }
.px-cafecito__claro strong { color: var(--px-texto); }

.px-cafecito__nota {
  margin: var(--px-5) 0 0;
  font-size: 13px;
  color: var(--px-tenue);
  line-height: 1.6;
}
.px-cafecito__nota a { color: var(--px-oro); }

@media (max-width: 600px) {
  .px-cafecito h1 { font-size: 25px; }
  .px-cafecito__taza { width: 110px; height: 110px; }
}

/* La taza en el pie. Pequena y sin insistir: una peticion de dinero que
   aparece en TODAS las paginas tiene que pedir poco. */
.px-pie-cafe {
  display: inline-flex; align-items: center; gap: var(--px-2);
  margin-bottom: var(--px-3);
  padding: 6px 12px 6px 6px;
  font-size: 13px;
  color: var(--px-suave);
  text-decoration: none;
  background: rgba(224,169,46,.05);
  border: 1px solid var(--px-borde);
  border-radius: 100px;
  transition: color .15s ease, border-color .15s ease;
}
.px-pie-cafe:hover { color: var(--px-oro-claro); border-color: var(--px-oro-oscuro); }
.px-pie-cafe img { width: 34px; height: 34px; display: block; }

/* ==========================================================================
   PANEL DE ENTREGAS
   Pensado para el movil primero: la idea es poder atender un deposito desde
   el telefono. Todo apilado, botones grandes, nada que necesite precision.
   ========================================================================== */

.px-admin { max-width: 780px; }

.px-flash {
  margin-bottom: var(--px-4);
  padding: var(--px-3) var(--px-4);
  border-radius: 8px;
  font-size: 14px;
}
.px-flash--ok  { color: #bfe6cb; background: rgba(78,167,102,.12); border: 1px solid rgba(78,167,102,.35); }
.px-flash--mal { color: #f0c0b8; background: rgba(198,90,76,.12);  border: 1px solid rgba(198,90,76,.35); }

.px-buscador { display: flex; gap: var(--px-2); margin-bottom: var(--px-4); }
.px-buscador .px-campo { flex: 1 1 auto; min-width: 0; }

.px-resultados { list-style: none; margin: 0 0 var(--px-5); padding: 0; display: grid; gap: var(--px-2); }
.px-resultados a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--px-3) var(--px-4);
  color: var(--px-suave); text-decoration: none;
  background: var(--px-superficie);
  border: 1px solid var(--px-borde); border-radius: 8px;
}
.px-resultados a:hover, .px-resultados a.es-activa {
  color: var(--px-texto); border-color: var(--px-oro-oscuro);
  background: var(--px-elevado);
}
.px-resultados span { font-family: var(--px-mono); font-size: 12px; color: var(--px-tenue); }

/* --- la ficha de la cuenta --- */
.px-ficha {
  padding: var(--px-5);
  background: var(--px-superficie);
  border: 1px solid var(--px-oro-oscuro);
  border-radius: 12px;
  margin-bottom: var(--px-5);
}
.px-ficha__cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--px-4); margin-bottom: var(--px-4);
  padding-bottom: var(--px-4); border-bottom: 1px solid var(--px-borde-sutil);
}
.px-ficha__cab h2 { margin: 0; font-family: var(--px-display); font-size: 24px; color: var(--px-texto); }
.px-ficha__puntos { text-align: right; white-space: nowrap; }
.px-ficha__n { display: block; font-family: var(--px-mono); font-size: 30px; line-height: 1; color: var(--px-oro); }

.px-etiq {
  display: block; font: 600 10px/1 var(--px-sans);
  letter-spacing: .16em; text-transform: uppercase; color: var(--px-tenue);
  margin-bottom: 3px;
}

.px-chars { list-style: none; margin: 0 0 var(--px-4); padding: 0; display: grid; gap: var(--px-2); }
.px-chars li { display: flex; align-items: center; gap: var(--px-2); font-size: 14px; color: var(--px-texto); }
.px-chars__meta { color: var(--px-tenue); font-size: 12.5px; }
.px-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--px-tenue); flex: 0 0 auto; }
.px-punto.es-online { background: var(--px-verde); box-shadow: 0 0 8px rgba(78,167,102,.6); }

/* --- pendientes --- */
.px-pendientes { margin: var(--px-4) 0; padding: var(--px-3) var(--px-4);
  background: rgba(224,169,46,.05); border: 1px solid var(--px-borde); border-radius: 8px; }
.px-pendientes h3 { margin: 0 0 var(--px-2); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--px-oro); font-weight: 600; }
.px-pend { display: flex; align-items: center; justify-content: space-between;
  gap: var(--px-3); font-size: 13.5px; color: var(--px-suave); padding: 4px 0; }
.px-pend__x { margin: 0; }
.px-pend__x button {
  background: none; border: 1px solid var(--px-borde); color: var(--px-tenue);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1;
}
.px-pend__x button:hover { color: var(--px-rojo); border-color: var(--px-rojo); }

/* --- dar cosas --- */
.px-dar { display: grid; gap: var(--px-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.px-dar__caja {
  margin: 0; padding: var(--px-4);
  background: var(--px-elevado); border: 1px solid var(--px-borde); border-radius: 10px;
}
.px-dar__caja--ancha { grid-column: 1 / -1; }
.px-dar__caja label {
  display: block; margin-bottom: var(--px-2);
  font: 600 12px/1 var(--px-sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--px-suave);
}
.px-dar__fila { display: flex; gap: var(--px-2); margin-bottom: var(--px-2); }
.px-dar__fila .px-campo { flex: 1 1 auto; min-width: 0; }
.px-campo--mini { flex: 0 0 74px; }
.px-dar__caja small { display: block; margin-top: var(--px-2); font-size: 11.5px; color: var(--px-tenue); }
.px-dar__caja .px-campo[name="nota"] { width: 100%; margin-top: var(--px-1); }

/* --- chuleta de precios --- */
.px-precios {
  margin: var(--px-5) 0;
  padding: var(--px-5);
  background: var(--px-superficie);
  border: 1px solid var(--px-borde); border-radius: 12px;
}
.px-precios h3 { margin: 0 0 var(--px-4); font-family: var(--px-display);
  font-size: 18px; color: var(--px-texto); }
.px-precios__cols { display: grid; gap: var(--px-5);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.px-precios h4 { margin: 0 0 var(--px-2); font: 600 11px/1.4 var(--px-sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--px-oro); }
.px-precios__ojo { color: var(--px-tenue); letter-spacing: 0; text-transform: none; font-weight: 400; }

.px-mini { width: 100%; font-size: 13px; }
.px-mini td { padding: 3px 0; color: var(--px-suave); border-bottom: 1px solid var(--px-borde-sutil); }
.px-mini td:not(:first-child) { text-align: right; font-family: var(--px-mono); white-space: nowrap; padding-left: var(--px-3); }
.px-mini strong { color: var(--px-texto); }

.px-precios__nota { margin: var(--px-2) 0 0; font-size: 12px; color: var(--px-tenue); line-height: 1.5; }
.px-precios__nota code { color: var(--px-oro); font-family: var(--px-mono); font-size: 11.5px; }
.px-precios__aviso {
  margin: var(--px-4) 0 0; padding-top: var(--px-4);
  border-top: 1px solid var(--px-borde-sutil);
  font-size: 12.5px; color: var(--px-tenue); line-height: 1.6;
}
.px-precios__aviso strong { color: var(--px-suave); }

/* --- historial --- */
.px-histo { margin-top: var(--px-5); }
.px-histo h3 { margin: 0 0 var(--px-3); font: 600 11px/1 var(--px-sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--px-tenue); }
.px-histo__fila { display: flex; gap: var(--px-3); padding: 6px 0;
  border-bottom: 1px solid var(--px-borde-sutil); font-size: 13px; color: var(--px-suave); }
.px-histo__cuando { font-family: var(--px-mono); font-size: 12px; color: var(--px-tenue); flex: 0 0 auto; }
.px-histo__que strong { color: var(--px-texto); }

@media (max-width: 600px) {
  .px-ficha { padding: var(--px-4); }
  .px-ficha__cab { flex-direction: row; }
  .px-ficha__n { font-size: 26px; }
  .px-dar { grid-template-columns: 1fr; }
  /* Botones grandes: esto se usa con el pulgar. */
  .px-dar__caja .px-boton, .px-buscador .px-boton { padding: 12px var(--px-4); }
  .px-precios__cols { grid-template-columns: 1fr; gap: var(--px-4); }
}

/* --- Casas: fila pinchable y ventana con las coordenadas --- */
.px-mini--casas .px-casa-fila { cursor: pointer; }
.px-mini--casas .px-casa-fila:hover td,
.px-mini--casas .px-casa-fila:focus-visible td { color: var(--px-texto); background: rgba(224,169,46,.06); }
.px-mini--casas .px-casa-fila:focus-visible { outline: 2px solid var(--px-oro-oscuro); outline-offset: -2px; }
.px-mini__m { color: var(--px-tenue); font-size: 11.5px; }

dialog.px-modal {
  width: min(560px, calc(100vw - 24px));
  max-height: min(78vh, 720px);
  padding: 0;
  color: var(--px-texto);
  background: var(--px-superficie);
  border: 1px solid var(--px-oro-oscuro);
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
dialog.px-modal::backdrop { background: rgba(0,0,0,.72); }
dialog.px-modal:not([open]) { display: none; }

.px-modal__cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--px-3);
  padding: var(--px-4) var(--px-4) var(--px-3);
  border-bottom: 1px solid var(--px-borde);
}
.px-modal__cab h3 { margin: 0; font-family: var(--px-display); font-size: 17px; }
.px-modal__x {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 19px; line-height: 1; cursor: pointer;
  color: var(--px-tenue); background: none; border: 1px solid var(--px-borde);
}
.px-modal__x:hover { color: var(--px-texto); border-color: var(--px-oro-oscuro); }

.px-modal__cuerpo { overflow-y: auto; padding: 0 var(--px-4); -webkit-overflow-scrolling: touch; }

.px-casas { width: 100%; font-size: 13px; }
.px-casas thead th {
  position: sticky; top: 0;               /* la cabecera no se va al bajar */
  background: var(--px-superficie);
  text-align: left; padding: var(--px-3) 0 var(--px-2);
  font: 600 10.5px/1 var(--px-sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--px-tenue);
  border-bottom: 1px solid var(--px-borde);
}
.px-casas td { padding: var(--px-2) 0; border-bottom: 1px solid var(--px-borde-sutil); vertical-align: top; }
.px-casas tr.es-ocupada td:first-child { opacity: .55; }
.px-casas__meta { display: block; font-size: 11.5px; color: var(--px-tenue); margin-top: 1px; }
.px-casas__sinpos { font-size: 11.5px; color: var(--px-tenue); }

.px-copiar {
  font-family: var(--px-mono); font-size: 11.5px; white-space: nowrap;
  color: var(--px-oro); cursor: pointer;
  background: rgba(224,169,46,.07);
  border: 1px solid var(--px-oro-oscuro); border-radius: 6px;
  padding: 4px 8px;
}
.px-copiar:hover { background: rgba(224,169,46,.14); }
.px-copiar.es-copiado { color: var(--px-verde); border-color: var(--px-verde); background: rgba(78,167,102,.1); }

.px-modal__pie {
  margin: 0; padding: var(--px-3) var(--px-4);
  font-size: 11.5px; color: var(--px-tenue);
  border-top: 1px solid var(--px-borde);
}
.px-modal__pie code { color: var(--px-oro); font-family: var(--px-mono); }

@media (max-width: 600px) {
  dialog.px-modal { width: calc(100vw - 16px); max-height: 86vh; }
  .px-casas td:last-child { padding-top: var(--px-1); }
  /* Botones de copiar mas grandes: esto se toca con el pulgar. */
  .px-copiar { padding: 7px 10px; font-size: 12px; }
}

/* Saldo de puntos en "Mi cuenta". Hasta ahora no se mostraba en ninguna
   parte del sitio: se podian tener puntos sin forma de verlos. */
.px-puntos { margin: var(--px-4) auto; text-align: center; }
.px-puntos a {
  display: inline-flex; align-items: baseline; gap: var(--px-2);
  padding: var(--px-3) var(--px-5);
  text-decoration: none;
  background: rgba(224,169,46,.06);
  border: 1px solid var(--px-oro-oscuro);
  border-radius: 100px;
  transition: background .15s ease;
}
.px-puntos a:hover { background: rgba(224,169,46,.13); }
.px-puntos__n { font-family: var(--px-mono); font-size: 22px; color: var(--px-oro); line-height: 1; }
.px-puntos__t { font-size: 12.5px; color: var(--px-suave); }

/* Cómo conseguir puntos: los tres pasos y el botón. */
.px-pasos-caja {
  max-width: 560px; margin: 0 0 var(--px-5);
  padding: var(--px-5);
  background: var(--px-superficie);
  border: 1px solid var(--px-oro-oscuro); border-radius: 12px;
}
.px-pasos-caja .px-pasos { margin-bottom: var(--px-4); }
.px-pasos-caja .px-boton { display: inline-block; }

/* Enlace suelto de la barra (sin desplegable). Mismo aspecto que un
   .px-nav__btn para que no desentone: la unica diferencia es que no lleva
   flecha ni despliega nada. */
.px-nav__solo {
  display: inline-flex; align-items: center;
  font: 500 14px/1 var(--px-sans); color: var(--px-suave);
  text-decoration: none;
  padding: 10px var(--px-3); border-radius: var(--px-radio-sm);
  transition: color var(--px-transicion), background var(--px-transicion);
}
.px-nav__solo:hover { color: var(--px-texto); background: rgba(255,255,255,.05); }
.px-nav__solo[aria-current="page"] { color: var(--px-oro); }

/* "Necesitas iniciar sesión". Es la pantalla que más gente ve cuando se
   pierde, así que va centrada, con una sola idea y dos botones grandes. */
.px-parado { max-width: 520px; margin: var(--px-7) auto; text-align: center; }
.px-parado__icono {
  width: 46px; height: 46px; padding: 11px;
  margin-bottom: var(--px-4);
  color: var(--px-oro);
  border: 1px solid var(--px-oro-oscuro); border-radius: 50%;
}
.px-parado h1 {
  margin: 0 0 var(--px-3);
  font-family: var(--px-display); font-size: 26px; color: var(--px-texto);
}
.px-parado > p { margin: 0 auto var(--px-5); max-width: 42ch; color: var(--px-suave); line-height: 1.6; }
.px-parado__botones { display: flex; flex-wrap: wrap; gap: var(--px-3); justify-content: center; }
.px-parado__nota { margin: var(--px-5) 0 0; font-size: 12.5px; color: var(--px-tenue); line-height: 1.6; }
.px-parado__nota strong { color: var(--px-suave); }
.px-parado__nota a { color: var(--px-oro); }

@media (max-width: 480px) {
  .px-parado__botones { flex-direction: column; }
  .px-parado__botones .px-boton { width: 100%; }
}

/* Los sprites de Tibia están dibujados para el fondo claro del juego, así
   que sobre el casi negro del sitio se pierden. Se les pone una celda
   propia con fondo tenue, que además alinea la columna. */
#cat_itemids img, #cat_premium img, #cat_misc img,
#cat_outfits img, #cat_mounts img {
  display: block;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--px-borde);
  border-radius: 6px;
  padding: 3px;
  image-rendering: pixelated;   /* sprites de 32px: sin suavizado se ven nítidos */
}

/* ==========================================================================
   MARCADO HEREDADO
   Lo que emiten las 221 paginas de contenido, que no se han tocado.
   ========================================================================== */

/* Envoltorios que solo existian para colocar imagenes de esquina y de borde */
.Corner-tl, .Corner-tr, .Corner-bl, .Corner-br,
.CornerWrapper-b, .CornerWrapper-t, .Border_1, .Bottom,
.Lights, [id$="_Lights"], .Extend, [id$="_Extend"],
.LeftChain, .RightChain, .Icon, [id$="_Icon"],
#MenuTop, #MenuBottom, #LoginTop, #LoginBottom,
#LeftArtwork, #RightArtwork, #TibiaLogoArtworkTop,
#Monster, #PedestalAndOnline, #DeactivationContainer,
.whatswidget-widget-wrapper, [id^="whatswidget"],
.zaptable, .zaptablee { display: none !important; }

.Border_2, .Border_3 {
  background-image: none !important; background: none !important;
  border: 0 !important; padding: 0 !important; margin: 0 !important;
}

.Box, #news.Box {
  background: var(--px-superficie);
  border: 1px solid var(--px-borde);
  border-radius: var(--px-radio);
  margin: 0 0 var(--px-5);
  overflow: hidden;
}

.BorderTitleText, .Title, #ContentBoxHeadline {
  background-image: none !important;
  background: var(--px-elevado) !important;
  border-bottom: 1px solid var(--px-borde);
  padding: var(--px-3) var(--px-5) !important;
  margin: 0 !important;
  font-family: var(--px-display); font-size: 15px; font-weight: 600;
  color: var(--px-texto); text-align: left;
  height: auto !important; line-height: 1.4;
}
.BorderTitleText:empty, .Title:empty { display: none !important; }

.BoxContent {
  background-image: none !important; background: none !important;
  padding: var(--px-5) !important; border: 0 !important;
  color: var(--px-texto);
}
.BoxContent > *:last-child { margin-bottom: 0; }
.BoxContent center { display: block; margin: var(--px-3) 0; }

/* Imagenes que el zip del datapack no traia */
img[src*="layout/images/global/"] { display: none !important; }

/* Colores escritos a mano en las paginas */
.yellow { color: var(--px-oro) !important; }
font[color="green"],  [color="green"]  { color: var(--px-verde) !important; }
font[color="red"],    [color="red"]    { color: var(--px-rojo)  !important; }
font[color="white"],  [color="white"]  { color: var(--px-texto) !important; }
font[color="yellow"], [color="yellow"] { color: var(--px-oro)   !important; }
a[style*="color: red"], a[style*="color:red"] { color: var(--px-oro) !important; }
[style*="background-color:#131b33"] { background-color: transparent !important; }

/* ---------------------------------------------------------------- tablas */
table.table, #highscoresTable, #changelogTable, .BoxContent table, .px-tarjeta__cuerpo table {
  width: 100%; font-size: 14px; background: none;
}
table.table th, #highscoresTable th, #changelogTable th, .BoxContent table th, .px-tarjeta__cuerpo table th {
  background: var(--px-elevado);
  border-bottom: 1px solid var(--px-borde);
  color: var(--px-suave);
  font: 600 11px/1.4 var(--px-sans); letter-spacing: .1em; text-transform: uppercase;
  text-align: left; padding: var(--px-3); white-space: nowrap;
}
table.table td, #highscoresTable td, #changelogTable td, .BoxContent table td, .px-tarjeta__cuerpo table td {
  border-bottom: 1px solid var(--px-borde-sutil);
  padding: var(--px-3); vertical-align: middle;
}
table tr:last-child td { border-bottom: 0; }
.table-striped tbody tr:nth-child(odd), #highscoresTable tbody tr:nth-child(odd) { background: rgba(255,255,255,.018); }
.table-hover tbody tr:hover, #highscoresTable tbody tr:hover { background: rgba(224,169,46,.055); }

/* Los formularios se maquetan con tablas: no deben heredar el borde */
form table td, form table th { border-bottom: 0 !important; background: none !important; padding: 6px !important; }

/* ---------------------------------------------------------------- formularios */
label { display: inline-block; margin-bottom: 5px; color: var(--px-suave); font-size: 13px; font-weight: 500; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="url"], input[type="date"], select, textarea {
  background: var(--px-fondo);
  color: var(--px-texto);
  border: 1px solid var(--px-borde);
  border-radius: var(--px-radio-sm);
  padding: 10px var(--px-3);
  font: 400 14px/1.4 var(--px-sans);
  max-width: 100%;
  transition: border-color var(--px-transicion), box-shadow var(--px-transicion);
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--px-oro);
  box-shadow: 0 0 0 3px rgba(224,169,46,.14);
}
input::placeholder, textarea::placeholder { color: var(--px-tenue); }
select { cursor: pointer; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--px-oro); margin-right: 6px; }

input[type="submit"], input[type="button"], input[type="reset"], button:not(.px-nav__btn):not(.px-hamburguesa), .btn {
  background: linear-gradient(180deg, var(--px-oro-claro), var(--px-oro));
  color: #1b1408; border: 1px solid var(--px-oro);
  border-radius: var(--px-radio-sm); padding: 11px var(--px-5);
  font: 600 14px/1 var(--px-sans); cursor: pointer;
  transition: background var(--px-transicion), transform var(--px-transicion);
}
input[type="submit"]:hover, input[type="button"]:hover, button:not(.px-nav__btn):not(.px-hamburguesa):hover, .btn:hover {
  background: var(--px-oro-claro);
}
input[type="submit"]:active, button:active { transform: translateY(1px); }
.btn-info { background: transparent; color: var(--px-azul); border-color: var(--px-azul); }
.btn-info:hover { background: rgba(91,139,196,.1); color: #86adda; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .px-pie__rejilla { grid-template-columns: 1fr 1fr; gap: var(--px-5); }
}

@media (max-width: 860px) {
  .px-hamburguesa { display: inline-flex; }
  .px-nav {
    position: fixed; inset: var(--px-cabecera) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--px-superficie);
    border-bottom: 1px solid var(--px-borde);
    padding: var(--px-3);
    max-height: calc(100dvh - var(--px-cabecera));
    overflow-y: auto;
    display: none;
  }
  .px-nav[data-abierto="true"] { display: flex; }
  /* El enlace suelto mide lo mismo que un boton de menu: si no, en movil
     queda mas pequeno y con menos area para el dedo. */
  .px-nav__btn, .px-nav__solo { width: 100%; justify-content: space-between; padding: 13px var(--px-3); font-size: 15px; }
  .px-nav__menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: 0; box-shadow: none; padding: 0 0 var(--px-2) var(--px-3);
    min-width: 0; display: none;
  }
  .px-nav__grupo[data-abierto="true"] .px-nav__menu { display: block; }
  .px-nav__grupo:hover .px-nav__menu { opacity: 1; visibility: visible; }
  .px-nav__grupo:not([data-abierto="true"]):hover .px-nav__menu { display: none; }
  .px-nav__grupo[data-abierto="true"] .px-nav__btn svg { transform: rotate(180deg); }
  .px-cabecera__int { gap: var(--px-3); }
  .px-acciones .px-boton--fantasma { display: none; }
  .px-hero { padding: var(--px-7) 0 var(--px-6); }
  .px-conexion { width: 100%; }
  .px-conexion__dato { flex: 1 1 33%; border-right: 0; border-bottom: 1px solid var(--px-borde); text-align: center; }
  .px-conexion__dato:last-child { border-bottom: 0; }
  .px-pie__rejilla { grid-template-columns: 1fr; }
  .px-pie__sobre { max-width: none; }
}

@media (max-width: 560px) {
  .px-marca { font-size: 20px; }
  .px-marca span { display: none; }
  .px-hero__cta { flex-direction: column; }
  .px-hero__cta .px-boton { width: 100%; }
  .px-seccion { padding-block: var(--px-6); }  /* ver la nota de arriba */
  /* Una tabla ancha se desplaza sola en vez de romper el ancho de la pagina */
  .BoxContent, .px-tarjeta__cuerpo { overflow-x: auto; }
  #highscoresTable, table.table { min-width: 460px; }
}

/* ---------------------------------------------------------------- noticias */
.px-noticias { display: grid; gap: var(--px-5); }
.px-noticia { padding-bottom: var(--px-5); border-bottom: 1px solid var(--px-borde-sutil); }
.px-noticia:last-child { padding-bottom: 0; border-bottom: 0; }
.px-noticia__titulo { font-family: var(--px-display); font-size: 19px; margin-bottom: 4px; }
.px-noticia__meta { font-size: 12.5px; color: var(--px-tenue); margin-bottom: var(--px-3); }
.px-noticia__texto { color: var(--px-suave); }
.px-noticia__texto a { color: var(--px-oro); }

/* Estado vacio. Antes, sin noticias en la base, el bloque quedaba en blanco
   y la portada parecia rota. */
.px-vacio { text-align: center; padding: var(--px-6) var(--px-4); }
.px-vacio svg { width: 34px; height: 34px; color: var(--px-tenue); margin-bottom: var(--px-3); }
.px-vacio h3 { font-family: var(--px-display); font-size: 17px; margin-bottom: 6px; }
.px-vacio p { color: var(--px-suave); max-width: 380px; margin: 0 auto var(--px-5); font-size: 14px; }

.px-video { position: relative; padding-top: 56.25%; border-radius: var(--px-radio); overflow: hidden; margin: var(--px-4) 0; }
.px-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------------------------------------------------------------- arreglo del logotipo
   .px-marca es un inline-flex con gap para separar el "Tibia 8.60", y ese
   gap se aplicaba TAMBIEN entre los trozos de texto del nombre: "Ple", la
   "x" en dorado y "ia" quedaban separadas y se leia "PLE X IA".
   El nombre pasa a ser un solo nodo y la separacion se hace con margen. */
.px-marca { gap: 0; }
.px-marca span { margin-left: var(--px-2); }

/* ---------------------------------------------------------------- estado y eventos */
.px-insignia {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--px-sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 6px var(--px-3); border-radius: 100px;
}
.px-insignia--si { color: var(--px-verde); background: rgba(78,167,102,.1); border: 1px solid rgba(78,167,102,.25); }
.px-insignia--no { color: var(--px-rojo);  background: rgba(198,90,76,.1);  border: 1px solid rgba(198,90,76,.25); }

.px-tasas { margin-top: var(--px-5); padding-top: var(--px-5); border-top: 1px solid var(--px-borde-sutil); }
.px-tasas h4 { font: 600 11px/1 var(--px-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--px-tenue); margin-bottom: var(--px-3); }
/* En tarjetitas, no en una fila estirada: con justify-content:space-between
   dentro de una celda ancha, la etiqueta y el valor quedaban en extremos
   opuestos y se leia "Experiencia ......... 1x  Skills ......... 10x". */
.px-tasas ul {
  list-style: none; margin: 0 0 var(--px-3); padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--px-2);
}
.px-tasas li {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--px-elevado); border: 1px solid var(--px-borde-sutil);
  border-radius: var(--px-radio-sm); padding: var(--px-3);
}
.px-tasas li span { font: 600 10px/1 var(--px-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--px-tenue); }
.px-tasas li b { font-family: var(--px-display); font-size: 20px; line-height: 1.1; color: var(--px-oro); }
.px-nota { font-size: 12.5px; color: var(--px-tenue); margin: 0; }

/* Avisos de lo que esta pasando ahora */
.px-avisos { display: grid; gap: var(--px-3); }
.px-aviso {
  display: flex; align-items: center; gap: var(--px-4);
  background: var(--px-superficie);
  border: 1px solid var(--px-borde);
  border-left: 3px solid var(--px-oro);
  border-radius: var(--px-radio);
  padding: var(--px-4) var(--px-5);
}
.px-aviso--raid  { border-left-color: var(--px-rojo); }
.px-aviso--aviso { border-left-color: var(--px-azul); }
.px-aviso__punto {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--px-oro);
  box-shadow: 0 0 0 0 rgba(224,169,46,.6);
  animation: px-pulso 2.4s infinite;
}
.px-aviso--raid  .px-aviso__punto { background: var(--px-rojo); }
.px-aviso--aviso .px-aviso__punto { background: var(--px-azul); }
.px-aviso__cuerpo { flex: 1 1 auto; min-width: 0; }
.px-aviso__cuerpo h3 { font-family: var(--px-display); font-size: 16px; margin: 0 0 2px; }
.px-aviso__cuerpo p { margin: 0; font-size: 13.5px; color: var(--px-suave); }
.px-aviso__tiempo { flex: none; font-size: 12px; color: var(--px-tenue); font-family: var(--px-mono); white-space: nowrap; }

@media (max-width: 560px) {
  .px-aviso { flex-wrap: wrap; gap: var(--px-2) var(--px-3); }
  .px-aviso__tiempo { width: 100%; padding-left: 20px; }
}

/* ---------------------------------------------------------------- panel */
.px-panel__cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--px-4); flex-wrap: wrap; margin-bottom: var(--px-5);
}
.px-panel__cab h1 { margin-bottom: 2px; }
.px-panel__vivo {
  display: inline-flex; align-items: center; gap: var(--px-2);
  font-size: 12.5px; color: var(--px-tenue);
  background: var(--px-superficie); border: 1px solid var(--px-borde);
  border-radius: 100px; padding: 7px var(--px-3);
}
.px-panel__vivo b { color: var(--px-suave); font-weight: 500; }

/* Pares etiqueta/valor, en rejilla */
.px-datos { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--px-3); }
.px-datos > div { min-width: 0; }
.px-datos dt { font: 600 10px/1 var(--px-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--px-tenue); margin-bottom: 5px; }
.px-datos dd { margin: 0; font-family: var(--px-display); font-size: 22px; line-height: 1.1; color: var(--px-texto); }

/* Barras de CPU / RAM / disco */
.px-barra { display: flex; align-items: center; gap: var(--px-3); margin-bottom: var(--px-2); font-size: 13px; }
.px-barra > span { width: 44px; flex: none; color: var(--px-suave); }
.px-barra > b { width: 40px; flex: none; text-align: right; font-family: var(--px-mono); font-size: 12px; font-weight: 500; color: var(--px-suave); }
.px-barra__riel { flex: 1 1 auto; height: 6px; background: var(--px-fondo); border-radius: 100px; overflow: hidden; border: 1px solid var(--px-borde-sutil); }
.px-barra__riel i { display: block; height: 100%; background: var(--px-oro); border-radius: 100px; transition: width .4s ease; }
/* A partir del 80% el color avisa solo */
.px-barra__riel i[style*="8"], .px-barra__riel i[style*="9"], .px-barra__riel i[style*="100%"] { background: var(--px-rojo); }

.px-chip {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 4px;
  font: 600 10px/1.5 var(--px-sans); letter-spacing: .06em; text-transform: uppercase;
  background: rgba(224,169,46,.12); color: var(--px-oro); border: 1px solid rgba(224,169,46,.25);
  vertical-align: middle;
}
.px-chip--rojo { background: rgba(198,90,76,.12); color: var(--px-rojo); border-color: rgba(198,90,76,.25); }

.px-panel__cab + .px-rejilla .px-tarjeta__cuerpo { min-height: 120px; }

@media (max-width: 860px) {
  .px-rejilla[style*="1.4fr"], .px-rejilla[style*="1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* Tramos de experiencia: mas compactos que las tasas normales, porque son
   doce y no cuatro. */
.px-tasas__exp { grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)) !important; }
.px-tasas__exp li { padding: var(--px-2) !important; }
.px-tasas__exp li b { font-size: 15px !important; }
.px-tasas__exp li span { font-size: 9.5px !important; letter-spacing: .06em !important; }

/* ==================================================================== rankings
   Ranking del dia (powergamers.php) y Horas jugadas (toponline.php).

   OJO con la especificidad: `.px-tabla tbody td` es (0,1,2). Una regla
   `.px-tabla--rank td` es (0,1,1) y PIERDE. Por eso todo lo que ajusta
   celdas aqui lleva `tbody` en medio. Ya paso con --logros y con --tareas.

   Tampoco se reutiliza `.px-barra`: esa clase esta declarada dos veces en
   este archivo con reglas incompatibles (la de la caceria y la de CPU/RAM),
   y ademas su `i[style*="8"]` pinta de rojo cualquier ancho que contenga un
   8, o sea tambien el 18% y el 8%. Aqui la barra es propia. */

.px-rank__filtros { display: flex; flex-direction: column; gap: var(--px-2); margin-bottom: var(--px-5); }
.px-rank__grupo   { display: flex; flex-wrap: wrap; gap: var(--px-2); }

.px-rank__btn {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--px-borde);
  border-radius: 100px;
  background: var(--px-superficie);
  color: var(--px-suave);
  font: 500 12.5px/1.2 var(--px-sans);
  text-decoration: none;
  transition: var(--px-transicion);
}
.px-rank__btn:hover { border-color: var(--px-oro-oscuro); color: var(--px-texto); }
.px-rank__btn.es-activo {
  background: rgba(224,169,46,.12);
  border-color: rgba(224,169,46,.45);
  color: var(--px-oro-claro);
  font-weight: 600;
}

.px-col-pos { width: 42px; text-align: right; font-family: var(--px-mono); font-size: 13px; color: var(--px-tenue); }

/* La cabecera de .px-tabla alinea a la izquierda con (0,1,1); una columna
   numerica necesita el th en la regla para ganarle. */
.px-tabla--rank thead th.px-col-num { text-align: right; }
.px-tabla--rank thead th.px-col-pos { text-align: right; }
.px-tabla--rank thead th a { color: inherit; text-decoration: none; }
.px-tabla--rank thead th a:hover { color: var(--px-oro); }
.px-tabla--rank thead th.es-activo { color: var(--px-oro); }

.px-tabla--rank tbody td { vertical-align: middle; }
.px-tabla--rank tbody td.es-activo { color: var(--px-texto); }
.px-tabla--rank tbody .px-col-nombre a { color: var(--px-texto); font-weight: 600; text-decoration: none; }
.px-tabla--rank tbody .px-col-nombre a:hover { color: var(--px-oro); }

.px-rank__voc   { display: block; margin-top: 2px; font-size: 11.5px; color: var(--px-tenue); }
.px-rank__cero  { color: var(--px-tenue); }
.px-rank__flecha{ font-size: 10px; opacity: .8; }

.px-rank__celda { width: auto; }
.px-rank__barra {
  display: block;
  height: 8px;
  min-width: 60px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--px-borde-sutil);
  border-radius: 100px;
  overflow: hidden;
}
.px-rank__barra i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--px-oro-oscuro), var(--px-oro));
  border-radius: 100px;
}

/* Los tres primeros puestos. Solo el numero cambia de color: tenirle la fila
   entera convierte la tabla en un semaforo. */
.es-podio-1 .px-col-pos { color: var(--px-oro);   font-weight: 700; }
.es-podio-2 .px-col-pos { color: #c9c4ba;         font-weight: 700; }
.es-podio-3 .px-col-pos { color: #b0834a;         font-weight: 700; }
.es-podio-1 .px-rank__barra i { background: linear-gradient(90deg, var(--px-oro), var(--px-oro-claro)); }

@media (max-width: 600px) {
  /* Siete columnas no caben en un telefono. Se van los dos dias del medio y
     quedan #, personaje, hoy, ayer y total, que es lo que se mira. */
  .px-tabla--horas thead th:nth-child(5), .px-tabla--horas tbody td:nth-child(5),
  .px-tabla--horas thead th:nth-child(6), .px-tabla--horas tbody td:nth-child(6) { display: none; }
  .px-tabla--rank tbody td, .px-tabla--rank thead th { padding: var(--px-2) var(--px-2); }
  .px-col-nombre { width: auto; }
  .px-rank__btn { font-size: 12px; padding: 5px 10px; }
}

/* ============================================================ crear otro personaje
   Barra en Mi cuenta, justo bajo "Tus personajes". Antes el boton de crear
   solo existia cuando la cuenta tenia CERO personajes, asi que el segundo no
   se podia crear sin saberse la URL. Tiene que verse sin buscarla: por eso va
   antes de la tabla y con el boton dorado, no enterrada al final. */
.px-crear-otro {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--px-3);
  margin: 0 0 var(--px-4);
  padding: var(--px-3) var(--px-4);
  border: 1px solid rgba(224,169,46,.35);
  border-radius: var(--px-radio);
  background: rgba(224,169,46,.07);
}
.px-crear-otro p { margin: 0; color: var(--px-suave); line-height: 1.5; flex: 1 1 260px; }
.px-crear-otro p strong { color: var(--px-texto); }
.px-crear-otro .px-boton { flex: none; }