/* ============================================================
   Memorie Legends — pantallas de la aplicación:
   dashboard, ranking y tienda.
   Comparte el lenguaje visual de la mesa: oscuro, oro y fieltro.
   ============================================================ */

:root {
  --noche-1: #0a0a0a;
  --noche-2: #101010;
  --panel: rgba(18, 18, 22, 0.86);
  --panel-alto: rgba(26, 26, 32, 0.9);
  --borde: rgba(212, 168, 67, 0.18);
  --borde-suave: rgba(255, 255, 255, 0.08);

  --oro: #d4a843;
  --oro-claro: #f0d060;
  --oro-hondo: #8a6d2a;

  --rojo: #c0392b;
  --verde: #3d8b6b;
  --ambar: #f0d060;
  --azul: #4a7fb5;

  --texto: #ffffff;
  --texto-tenue: #c0c0c0;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Inter", "Inter respaldo", "Segoe UI", Tahoma, sans-serif;
  color: var(--texto);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(212, 168, 67, 0.08), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 60%, rgba(26, 71, 42, 0.14), transparent 72%),
    linear-gradient(165deg, var(--noche-2) 0%, var(--noche-1) 65%, #050505 100%);
  background-attachment: fixed;
}

/* ================================================== barra superior */

.barra {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--borde);
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(10px);
}

.barra-contenido {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.barra .marca {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

/* El logo de la barra.

   Esta regla le gana a `.logo-img` por especificidad, así que es la que manda:
   cambiar sólo aquélla no movía nada acá, que fue lo primero que probé.

   Se le quitaron el borde dorado y las esquinas redondeadas. Eran un marco
   para el logo cuadrado anterior; alrededor de uno transparente encierran aire
   y le recortan las puntas del laurel. El logo nuevo ya trae su propio
   contorno. */
.barra .marca img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

@media (min-width: 768px) {
  .barra .marca img {
    width: 50px;
    height: 50px;
  }
}

.barra .marca span {
  font-family: "Playfair Display", "Playfair respaldo", Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.barra nav {
  display: flex;
  gap: 18px;
  margin-left: 8px;
  flex-wrap: wrap;
}

.barra nav a {
  color: var(--texto-tenue);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.barra nav a:hover,
.barra nav a[aria-current="page"] {
  color: var(--oro);
  border-bottom-color: var(--oro);
}

.barra .derecha {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* El grupo de la derecha es uno solo: Leyendas, foto y menú, pegados.
 *
 * El hamburguesa traía su propio `margin-left: auto`, y con dos márgenes
 * automáticos en la misma fila el hueco sobrante se reparte entre los dos: el
 * saldo quedaba flotando en el medio y el botón contra el borde, como si no
 * tuvieran nada que ver. Son la misma cosa —quién soy, cuánto tengo, qué puedo
 * hacer— y se leen juntos. */
.barra .derecha ~ .hamburguesa { margin-left: 0; }

/* Saldo de Leyendas */
.saldo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(212, 168, 67, 0.1);
  border: 1px solid rgba(212, 168, 67, 0.35);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.saldo b {
  color: var(--oro-claro);
  font-size: 1.05rem;
}

.saldo small {
  color: var(--texto-tenue);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.saldo.subiendo b {
  animation: destelloSaldo 0.9s ease-out;
}

@keyframes destelloSaldo {
  0% { transform: scale(1); color: var(--oro-claro); }
  35% { transform: scale(1.35); color: #fff; text-shadow: 0 0 18px var(--oro); }
  100% { transform: scale(1); color: var(--oro-claro); }
}

/* La foto de la cuenta. Con filo de oro, como todo lo que importa acá: es la
   que dice de quién es la sesión, al lado de las Leyendas que se van a
   gastar. */
.avatar {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  border: 2px solid rgba(212, 168, 67, 0.55);
  object-fit: cover;
  background: var(--panel-alto);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* El mismo círculo, cuando el avatar equipado es un glifo y no un archivo.
   Un emoji no entra en un `<img>`, así que ahí el nodo pasa a ser un `<span>`
   —lo cambia `avatar-cabecera.js`— y necesita centrar su contenido, que la
   imagen resolvía sola con `object-fit`. */
.avatar-glifo {
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  line-height: 1;
  background: radial-gradient(circle at 50% 40%, rgba(212, 168, 67, 0.22), var(--panel-alto));
  user-select: none;
}

/* La insignia equipada, al lado del nombre.

   Va en una ficha con filo de oro y no suelta sobre el fondo: el saludo es
   un título con degradado dorado en el texto, y un emoji pegado ahí se lee
   como parte del nombre. Con marco se entiende que es otra cosa. */
.insignia-equipada {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  width: 1.5em;
  height: 1.5em;
  margin-left: 0.35em;
  border-radius: 50%;
  font-size: 0.62em;
  line-height: 1;
  border: 1px solid rgba(212, 168, 67, 0.5);
  background: radial-gradient(circle at 50% 40%, rgba(212, 168, 67, 0.2), var(--panel-alto));
  /* El título tiene el color recortado sobre el texto; sin esto la insignia
     heredaría el `-webkit-text-fill-color: transparent` y no se vería. */
  -webkit-text-fill-color: initial;
}

.insignia-equipada img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

/* ======================================================= contenido */

main {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 20px 40px;
}

.titulo-pagina {
  font-family: "Playfair Display", "Playfair respaldo", Georgia, serif;
  font-size: 2rem;
  margin-bottom: 6px;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitulo {
  color: var(--texto-tenue);
  margin-bottom: 26px;
  font-size: 0.95rem;
}

/* ------------------------------------------------ tarjetas de acceso */

.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

/* Los paneles de abajo son dos: media pantalla cada uno, sin hueco al lado.
   Con auto-fit el navegador armaba tres columnas y dejaba una vacía. */
.rejilla.dos-columnas {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .rejilla.dos-columnas {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tarjeta-accion {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(165deg, var(--panel-alto), rgba(12, 12, 14, 0.92));
  border: 1px solid var(--borde-suave);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

.tarjeta-accion:hover {
  transform: translateY(-5px);
  border-color: var(--acento-tarjeta, var(--oro));
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.55),
    0 0 30px -12px var(--acento-tarjeta, var(--oro));
}

/* Franja de color que identifica cada sección */
.tarjeta-accion::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--acento-tarjeta, var(--oro));
}

.tarjeta-accion .icono {
  font-size: 2.2rem;
  line-height: 1;
}

.tarjeta-accion h2 {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.tarjeta-accion p {
  color: var(--texto-tenue);
  font-size: 0.9rem;
  line-height: 1.55;
}

.tarjeta-accion .pie-tarjeta {
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--acento-tarjeta, var(--oro));
}

.tarjeta-accion.mesa { --acento-tarjeta: var(--verde); }
.tarjeta-accion.ranking { --acento-tarjeta: var(--oro); }
.tarjeta-accion.tienda { --acento-tarjeta: var(--azul); }
.tarjeta-accion.corte { --acento-tarjeta: var(--rojo); }
.tarjeta-accion.amigos { --acento-tarjeta: #b87333; }

/* --------------------------------------------- tarjeta ilustrada del Rey */

.tarjeta-accion.tarjeta-rey {
  --acento-tarjeta: var(--oro);
  flex-direction: row;
  align-items: center;
  gap: 18px;
  cursor: default;
  overflow: hidden;
}

/* No se levanta al pasar: no es un acceso, es decoración informativa. */
.tarjeta-accion.tarjeta-rey:hover {
  transform: none;
  border-color: var(--borde);
  box-shadow: var(--sombra-negra);
}

.figura-rey {
  width: 116px;
  height: 116px;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 45%, rgba(212, 168, 67, 0.22), transparent 68%);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6));
  animation: reyRespira 6s ease-in-out infinite;
}

@keyframes reyRespira {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.02); }
}

.rey-texto {
  min-width: 0;
}

.rey-texto h2 {
  color: var(--oro);
  margin-bottom: 6px;
}

.rey-dato {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--oro-claro);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .tarjeta-accion.tarjeta-rey {
    flex-direction: column;
    text-align: center;
  }
  .figura-rey { width: 96px; height: 96px; }
  .rey-dato { align-items: center; }
}

/* Etiqueta de estado dentro de una tarjeta */
.etiqueta {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
}

.etiqueta.lista {
  background: rgba(76, 175, 80, 0.16);
  border: 1px solid rgba(76, 175, 80, 0.5);
  color: #8fd4b4;
}

.etiqueta.espera {
  background: rgba(255, 176, 32, 0.14);
  border: 1px solid rgba(255, 176, 32, 0.45);
  color: var(--ambar);
}

/* ------------------------------------------------------- paneles */

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.panel h2 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 2.2px;
  color: var(--oro);
  margin-bottom: 14px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(212, 168, 67, 0.18);
}

.fila-dato {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.9rem;
}

.fila-dato:last-child { border-bottom: none; }
.fila-dato span { color: var(--texto-tenue); }
.fila-dato b { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- botones */

button.accion,
a.accion {
  display: inline-block;
  padding: 13px 24px;
  border: none;
  border-radius: 11px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  color: #1a1206;
  background: linear-gradient(180deg, var(--oro-claro) 0%, var(--oro) 46%, var(--oro-hondo) 100%);
  /* Cuatro sombras y cada una hace una cosa distinta:
       1. el canto de abajo, que es lo que da el volumen de ficha;
       2. la sombra que apoya la pieza sobre el fondo;
       3. un filo hondo por dentro, para que el borde no sea un corte plano;
       4. la luz de arriba, como el brillo de un metal pulido.
     Sin la tercera, el dorado se ve impreso; con ella, acuñado. */
  box-shadow: 0 5px 0 #6b530f, 0 12px 22px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(107, 83, 15, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  /* La letra hundida en el metal. Es lo que separa un botón de un rectángulo
     dorado con texto encima. */
  text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45);
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}

button.accion:hover:not(:disabled),
a.accion:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #6b530f, 0 18px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

button.accion:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #6b530f, 0 6px 12px rgba(0, 0, 0, 0.4);
}

button.accion:disabled {
  filter: grayscale(0.85) brightness(0.6);
  cursor: not-allowed;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}

/* El secundario: cuero y bronce, no plata.

   Era un degradado gris claro, y ese era el problema: un botón de aplicación
   moderna en una pantalla que quiere parecer una mesa de taberna. Al lado del
   dorado del logo se leía como algo de otro sitio.

   Ahora es oscuro con filo dorado. Sigue siendo claramente la opción de menor
   peso —el primario brilla, éste no— pero pertenece al mismo mundo. Y sobre
   fondo oscuro el filo se ve mejor que un bloque claro, que en un panel negro
   pega un salto de contraste que atrae más la vista que el botón principal. */
button.accion.sobria,
a.accion.sobria {
  color: var(--oro-claro);
  background: linear-gradient(180deg, #2a2119 0%, #17120c 100%);
  box-shadow: 0 5px 0 #0b0906, 0 12px 22px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(212, 168, 67, 0.45),
    inset 0 1px 0 rgba(240, 208, 96, 0.16);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

button.accion.sobria:hover:not(:disabled),
a.accion.sobria:hover {
  background: linear-gradient(180deg, #3a2e21 0%, #201810 100%);
  box-shadow: 0 8px 0 #0b0906, 0 18px 30px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(212, 168, 67, 0.75),
    inset 0 1px 0 rgba(240, 208, 96, 0.25);
}

button.accion.sobria:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #0b0906, 0 6px 12px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(212, 168, 67, 0.6);
}

/* ------------------------------------------------------- mensajes */

.aviso {
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 20px;
  background: rgba(255, 176, 32, 0.08);
  border: 1px solid rgba(255, 176, 32, 0.3);
  color: #ffd79a;
}

.aviso b { color: #fff; }

.vacio {
  text-align: center;
  padding: 46px 20px;
  color: var(--texto-tenue);
  font-size: 0.95rem;
}

.vacio .icono {
  font-size: 2.6rem;
  display: block;
  margin-bottom: 12px;
  opacity: 0.6;
}

/* ------------------------------------------------------------ pie */

footer {
  border-top: 1px solid var(--borde-suave);
  margin-top: auto;
}

/* --------------------------------------------------- responsive */

@media (max-width: 700px) {
  .barra-contenido {
    padding: 10px 14px;
    gap: 10px;
  }

  .barra .marca span { font-size: 1rem; }

  .barra nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 14px;
    justify-content: center;
  }

  .barra .derecha { margin-left: auto; }

  main { padding: 20px 14px 30px; }

  .titulo-pagina { font-size: 1.5rem; }

  .rejilla { grid-template-columns: 1fr; }

  .tarjeta-accion { padding: 18px; }
}

/* --- marca con logo propio --- */

/* El logo de la cabecera. La misma regla está en style.css, que cargan las
   pantallas de acceso: si se cambia una hay que cambiar las dos, o la mitad
   del sitio queda con el logo de otro tamaño.

   `contain` y no `cover`: el logo es transparente y tiene la corona pegada al
   borde de arriba; `cover` recorta lo que sobre para llenar la caja, y lo que
   sobra en un logo así son las puntas. Sin `border-radius` por lo mismo. */
.logo-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .logo-img {
    width: 50px;
    height: 50px;
  }
}

.logo-img.grande {
  width: 84px;
  height: 84px;
  border-radius: 18px;
}

.logo-text {
  font-family: "Playfair Display", "Playfair respaldo", Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.marca-titulo {
  display: flex;
  justify-content: center;
}

.marca-titulo a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

/* ------------------------------------------------------- el paño del sitio

   Un degradado cálido sobre negro, como fieltro con una luz encima. Con CSS y
   no con una imagen: el sitio se abre desde teléfonos con datos móviles, y una
   textura de 200 KB por pantalla se nota más que el brillo que agrega.

   `fixed` para que la luz no se desplace al hacer scroll: si se moviera, en
   una página larga se vería que es un degradado y no una superficie. */

body {
  background: var(--fieltro);
  background-attachment: fixed;
}


/* =====================================================================
   EL MENÚ PLEGABLE
   =====================================================================

   Hasta 768px —una tableta en vertical— los enlaces y el bloque de la
   derecha se mudan a un cajón que entra desde el costado. Por encima de
   ese ancho vuelven a la barra y todo esto queda apagado.

   Quien muda los nodos es `js/menu.js`, y son los MISMOS elementos: no se
   copian. Ahí está explicado por qué importa.

   Como el `<nav>` deja de estar dentro de `.barra` cuando está en el
   cajón, las reglas `.barra nav a` dejan de alcanzarlo. Por eso acá se
   escribe su aspecto entero en vez de retocar el de la barra. */

/* --------------------------------------------------------- el botón */

.hamburguesa {
  /* En TODOS los tamaños. El menú plegable dejó de ser cosa del teléfono: la
     barra queda con el logo, el saldo y el botón, y los enlaces viven en el
     cajón. Una barra con siete enlaces y un saldo compite consigo misma; con
     tres cosas se lee de un vistazo. */
  display: inline-flex;
  margin-left: auto;
  padding: 10px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  /* El objetivo táctil entero, no sólo las rayas: 44px es el mínimo que
     se puede tocar sin apuntar. */
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}

.hamburguesa:hover {
  border-color: var(--oro);
  background: rgba(212, 168, 67, 0.08);
}

.hamburguesa .rayas {
  position: relative;
  display: block;
  width: 22px;
  height: 16px;
}

.hamburguesa i {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--oro);
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.hamburguesa i:nth-child(1) { top: 0; }
.hamburguesa i:nth-child(2) { top: 7px; }
.hamburguesa i:nth-child(3) { top: 14px; }

/* Abierto: las tres rayas se vuelven una X.

   Se cuelga de `aria-expanded` y no de una clase aparte. Así el dibujo no
   puede decir una cosa mientras el atributo dice otra — que es lo que un
   lector de pantalla anuncia—: son el mismo dato. */
.hamburguesa[aria-expanded="true"] i:nth-child(1) {
  top: 7px;
  transform: rotate(45deg);
}
.hamburguesa[aria-expanded="true"] i:nth-child(2) {
  opacity: 0;
}
.hamburguesa[aria-expanded="true"] i:nth-child(3) {
  top: 7px;
  transform: rotate(-45deg);
}

/* ---------------------------------------------------------- el velo */

.fondo-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--cajon-velo);
  opacity: 0;
  visibility: hidden;
  /* La visibilidad cambia SIN transición, pero recién al final: si se
     apagara de entrada, el desvanecido no se vería. */
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.fondo-menu.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

/* --------------------------------------------------------- el cajón */

.cajon-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  width: var(--cajon-ancho);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;

  /* Un fondo con algo adentro, no un rectángulo gris.
     Dos luces tenues —oro arriba, bronce abajo— sobre el negro de la casa, y
     un filo dorado en el canto: es la misma familia que el paño de la mesa y
     que las tarjetas del tablero. Plano quedaba como una pieza de otro sitio. */
  background:
    radial-gradient(ellipse 120% 40% at 100% 0%, rgba(212, 168, 67, 0.10), transparent 70%),
    radial-gradient(ellipse 100% 40% at 0% 100%, rgba(184, 115, 51, 0.08), transparent 70%),
    var(--cajon-fondo);
  border-left: 1px solid rgba(212, 168, 67, 0.28);
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.6), inset 1px 0 0 rgba(255, 255, 255, 0.03);

  /* Entra desde la derecha porque de ese lado está el botón: el panel sale
     de donde se lo tocó, y en un teléfono ese lado es el que alcanza el
     pulgar. */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.cajon-menu.abierto {
  transform: none;
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s;
}

.cabecera-cajon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--borde-suave);
}

.titulo-cajon {
  margin: 0;
  font-family: "Playfair Display", "Playfair respaldo", Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
  color: var(--oro);
  letter-spacing: 0.5px;
}

.cerrar-menu {
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: transparent;
  color: var(--oro);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.cerrar-menu:hover {
  border-color: var(--oro);
  background: rgba(212, 168, 67, 0.08);
  color: var(--oro-claro);
}

/* ------------------------------------------- los enlaces, ya adentro */

.cajon-menu nav {
  display: flex;
  flex-direction: column;

  /* La lista toma el alto que sobra y se centra en él.
     Pegada arriba dejaba media pantalla de negro debajo —siete enlaces en un
     teléfono de 844 px— y el cajón parecía a medio hacer. Centrada, el hueco
     se reparte y de paso los enlaces caen donde llega el pulgar. */
  flex: 1 1 auto;
  justify-content: center;
  gap: 4px;
  margin: 0;
}

.cajon-menu nav a {
  position: relative;
  font-family: "Inter", "Inter respaldo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--texto-tenue);
  text-decoration: none;
  /* Alto de dedo, y el área de toque ocupa todo el ancho del cajón: no hay
     que apuntarle a la palabra. */
  padding: 13px 14px;
  border-radius: 10px;
  border-bottom: none;
  border: 1px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
}

.cajon-menu nav a:hover,
.cajon-menu nav a:focus-visible {
  color: var(--oro-claro);
  background: rgba(212, 168, 67, 0.09);
  border-color: rgba(212, 168, 67, 0.28);
  /* Se corre dos píxeles hacia la lista: el enlace contesta al puntero antes
     de que uno lo toque. */
  transform: translateX(2px);
}

/* La página en la que uno está: fondo, filo y una barra de oro al costado.

   El color solo no alcanza —hay quien no distingue el dorado del plata— y por
   eso van las tres cosas juntas: tono, borde y una marca de posición. */
.cajon-menu nav a[aria-current="page"] {
  color: var(--oro-claro);
  background: linear-gradient(90deg, rgba(212, 168, 67, 0.16), rgba(212, 168, 67, 0.04));
  border-color: rgba(212, 168, 67, 0.4);
  box-shadow: inset 3px 0 0 var(--oro);
}

/* ------------------------------------------------- el pie del cajón */

/* "Salir" vive acá, separado de los enlaces por una línea y por el hueco que
   deja `margin-top: auto`. Es la única acción del cajón que no lleva a una
   página, y no tiene que poder tocarse por error al querer ir a la Tienda. */
.pie-cajon {
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--borde-suave);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pie-cajon:empty { display: none; }

.pie-cajon > button {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* ------------------------------------- el saldo y el botón de salir */

.cajon-menu .derecha {
  /* `margin-top: auto` los manda al pie del cajón: son el cierre, no un
     enlace más de la lista. */
  margin: auto 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--borde-suave);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Saldo y avatar comparten renglón; los botones se llevan uno entero.
   En la portada, donde `.derecha` son "Iniciar sesión" y "Crear cuenta",
   esto los deja apilados y a todo el ancho, que es como se tocan bien. */
.cajon-menu .derecha > .accion,
.cajon-menu .derecha > button {
  flex: 1 0 100%;
  justify-content: center;
  text-align: center;
}

/* Cajón sin lista de enlaces —la portada—: los botones suben al principio,
   donde cae la vista, en vez de quedar al pie de una pantalla vacía. */
.cajon-menu.sin-enlaces .derecha {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Con el cajón abierto la página de atrás no se mueve. Sin esto, arrastrar
   sobre el velo scrollea lo de abajo y al cerrar uno aparece en otro lado. */
body.con-menu-abierto {
  overflow: hidden;
}

/* La barra en un teléfono: logo, Leyendas, foto y menú en UN renglón.
 *
 * Los cuatro suman más de 320 px con el aire de una pantalla grande, y la fila
 * se partía en dos: el logo arriba y todo lo demás abajo, con una cabecera de
 * 90 px comiéndose la pantalla. Se aprieta el aire, se achica la ficha del
 * saldo y, cuando ni así entra, cede primero la palabra "Leyendas" —el número
 * es el dato, la etiqueta es el adorno— y después el nombre de la marca, que
 * ya está dicho por el escudo que queda al lado. */
@media (max-width: 560px) {
  .barra-contenido { padding: 8px 12px; gap: 8px; }
  .barra .marca { gap: 8px; }
  .barra .marca span { font-size: 1rem; }
  .saldo { padding: 5px 11px; gap: 6px; }
  .saldo b { font-size: 0.98rem; }
  .saldo small { font-size: 0.62rem; letter-spacing: 0.6px; }
  .avatar { width: 34px; height: 34px; }
  .hamburguesa { padding: 8px; }
}

@media (max-width: 430px) {
  .saldo small { display: none; }
}

/* El nombre de la marca NO se esconde en pantallas angostas.
 *
 * Estuvo escondido a 360px o menos, que es el ancho declarado de casi todos
 * los Android: la mitad de los teléfonos veía el escudo sin el nombre al lado.
 * La regla existía por miedo a que no entrara, y medido no era cierto —
 * «Memorie Legends» ocupa 121px y en la cabecera más cargada, la que lleva el
 * saldo, quedan 166px libres a 360 y 126 a 320.
 *
 * A 320 el margen es de cinco píxeles, así que ahí sí se achica un punto la
 * letra: no para que entre, sino para que siga entrando el día que alguien
 * junte un saldo de seis cifras.
 */
@media (max-width: 360px) {
  .barra .marca span { font-size: 0.92rem; }
}

/* El último recurso, para que un saldo enorme no rompa la barra.
 *
 * Sin esto, un número más largo de lo previsto empuja el nombre fuera de la
 * pantalla y aparece la barra horizontal. Con esto, el nombre se recorta con
 * puntos suspensivos y la barra aguanta: perder la última letra del nombre es
 * mucho menos grave que una página que se mueve de costado. */
.barra .marca {
  min-width: 0;
}

.barra .marca span {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El hamburguesa de una barra SIN menú —la portada— sólo aparece cuando el
   contenido no entra. Lo marca `menu.js`, que es donde se sabe si hay enlaces
   que plegar. Sin esto, en una pantalla ancha habría un botón que esconde las
   dos llamadas principales y abre un cuarto vacío. */
@media (min-width: 769px) {
  .hamburguesa.solo-si-no-entra {
    display: none;
  }
}

/* Los enlaces viven en el cajón, en cualquier tamaño de pantalla.

   Se esconden ANTES del primer dibujado, no cuando `menu.js` los muda: si no,
   la barra se dibujaba con los siete adentro y se achicaba medio segundo
   después, empujando la página entera. Ver la nota de `.con-js` más abajo.

   `.barra-contenido > nav` y no `.barra nav`: cuando el menú está en el cajón
   ya no es descendiente de la barra, y esta regla tiene que dejar de
   alcanzarlo o se escondería también ahí. */
.con-js .barra-contenido > nav {
  display: none;
}

/* ------------------------------------------------- el punto de corte */

@media (max-width: 768px) {
  .hamburguesa {
    display: inline-flex;
  }

  /* El menú ya nace escondido, antes de que corra el JavaScript.

     Sin esto, la barra se dibujaba con los siete enlaces adentro —en dos
     líneas— y `menu.js` los mudaba al cajón medio segundo después. La
     cabecera se achicaba 42px de golpe y TODA la página saltaba hacia
     arriba. Medido: 0,124 de "cambio de diseño", que era prácticamente todo
     el que tenía la portada.

     Cuelga de `.con-js` a propósito. Ese nombre lo pone un script de una
     línea en el `<head>`, que corre antes de dibujar; si el JavaScript está
     apagado, la clase no aparece, los enlaces se ven como siempre y la
     página sigue siendo navegable. Esconderlos sin esa condición dejaría a
     esa persona sin menú y sin hamburguesa —el botón tampoco andaría—. */
  /* Se esconde sólo la `.derecha` que NO tiene sesión: la de la portada, que
     son "Iniciar sesión" y "Crear cuenta" y sí se mudan al cajón en el
     teléfono. Si se dibujaran y se fueran medio segundo después, la página
     saltaría igual que con los enlaces.

     La de una cuenta abierta —Leyendas y foto— se queda en la barra en todos
     los tamaños, así que no se esconde: no se muda a ningún lado y no puede
     mover nada. Antes se guardaba también, y eso era esconder justo lo que
     uno mira entre partida y partida. */
  .con-js .barra-contenido > .derecha:not(:has(#saldo)) {
    display: none;
  }

  /* Y se le reserva al hamburguesa su alto, antes de que exista.

     El botón lo crea `menu.js`, que corre después del primer dibujado. Mide
     44px —el mínimo que se puede tocar sin apuntar— y el logo mide 40: al
     aparecer, la barra crecía esos 4px y empujaba la página entera hacia
     abajo. Cuatro píxeles parecen nada, pero mueven TODO lo que hay debajo, y
     así se contaban 0,124 de "cambio de diseño".

     Con el alto puesto de antemano, el botón aparece dentro de un lugar que ya
     estaba guardado y no se mueve nada. Se comprobó bloqueando `menu.js`: sin
     él el desplazamiento era 0,0008, o sea que todo venía de acá. */
  /* El logo ocupa el alto del hamburguesa desde el principio.

     `min-height` sobre `.barra-contenido` no alcanzaba: con `box-sizing:
     border-box` ese mínimo incluye el relleno, así que la fila la seguía
     midiendo el hijo más alto — el logo, de 40px. Cuando `menu.js` agregaba el
     botón de 44, la barra crecía 4px y toda la página bajaba. Poniéndolo sobre
     el propio logo, la fila mide 44 haya botón o no. */
  .barra .marca {
    min-height: 44px;
  }

  .barra-contenido {
    min-height: 44px;

    /* Y el logo se queda a la izquierda desde el principio.

       Ésta era la causa de verdad, y no se veía a simple vista porque el
       salto era HORIZONTAL. Una regla de `max-width: 700px` centra la barra
       —tenía sentido cuando el menú ocupaba el ancho y se partía en dos
       líneas—. Con el menú escondido queda un solo hijo, el logo, y centrado
       se planta en el medio. Después aparece el hamburguesa, que se va a la
       derecha con `margin-left: auto`, y empuja el logo 107px hacia la
       izquierda: toda la página cuenta como desplazada.

       `space-between` deja al logo donde va a terminar, esté o no el botón. */
    justify-content: space-between;
  }
}

/* Con movimiento reducido el cajón aparece y desaparece, sin deslizarse.
   Sigue habiendo cajón: lo que se saca es el viaje, no la función. */
@media (prefers-reduced-motion: reduce) {
  .cajon-menu,
  .cajon-menu.abierto,
  .fondo-menu,
  .fondo-menu.visible {
    transition: none;
  }
  .hamburguesa i {
    transition: none;
  }
}