/* ============================================================
   ESTILOS: LobbyFans
   ============================================================ */
:root {
  --fondo: #eef2f7;
  --superficie: #ffffff;
  --texto: #1d2733;
  --suave: #5f6f82;
  --borde: #d7dfe9;
  --primario: #1e7cc8;
  --primario-oscuro: #0f5a98;
  --barra: #0e3a5f;
  --amarillo: #f7c948;
  --verde: #2fa84f;
  --rojo: #d64545;
  --radio: 10px;

  /* Fondos y textos de detalle (el modo oscuro los cambia todos aquí abajo) */
  --campo: #ffffff;
  --boton-claro: #e3ecf6;
  --boton-claro-texto: #0f5a98;
  --cielo: linear-gradient(#bfe0f7, #e7f3fc 70%, #cfe6c2 70%); /* detrás de los avatares */
  --cielo-suave: linear-gradient(#e7f3fc, #f6f9fc);
  --gris: #e3e9f0;
  --gris-punto: #9aa5b1;
  --verde-fondo: #e8f6ec;
  --verde-texto: #1c6b33;
  --aviso-fondo: #fff6dc;
  --aviso-texto: #6b5200;
  --alerta-fondo: #fdecec;
  --alerta-texto: #8a1f1f;
  --hueco: #d9e3ee;   /* donde falta una imagen (salas sin foto) */
  --elegido: #e3effa;
  --tablero-1: #e9eef4; /* cuadros detrás del avatar en el generador */
  --tablero-2: #f6f9fc;
  --sombra: rgba(0, 0, 0, .08);
  color-scheme: light;
}

/* ---------- Modo oscuro ----------
   Sigue al sistema, salvo que se elija a mano con el botón (data-tema en <html>, lo pone tema.js).
   Los mismos valores van dos veces: una para "según el sistema" y otra para "elegido a mano". */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #0f1722;
    --superficie: #18222f;
    --texto: #e3e9f0;
    --suave: #94a3b5;
    --borde: #2a3747;
    --primario: #4da3e8;
    --primario-oscuro: #8cc4f0;
    --barra: #0a2238;
    --verde: #3fbf63;
    --rojo: #ef6b6b;
    --campo: #101924;
    --boton-claro: #22324a;
    --boton-claro-texto: #9fcdf5;
    --cielo: linear-gradient(#1d3a57, #24425f 70%, #2c4430 70%);
    --cielo-suave: linear-gradient(#1b2b3d, #18222f);
    --gris: #253242;
    --gris-punto: #6b7a8c;
    --verde-fondo: #16301f;
    --verde-texto: #7fd99a;
    --aviso-fondo: #33290f;
    --aviso-texto: #f0d27a;
    --alerta-fondo: #3a1a1a;
    --alerta-texto: #f4a3a3;
    --hueco: #233142;
    --elegido: #17324d;
    --tablero-1: #1c2735;
    --tablero-2: #222f3f;
    --sombra: rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-tema="oscuro"] {
  --fondo: #0f1722;
  --superficie: #18222f;
  --texto: #e3e9f0;
  --suave: #94a3b5;
  --borde: #2a3747;
  --primario: #4da3e8;
  --primario-oscuro: #8cc4f0;
  --barra: #0a2238;
  --verde: #3fbf63;
  --rojo: #ef6b6b;
  --campo: #101924;
  --boton-claro: #22324a;
  --boton-claro-texto: #9fcdf5;
  --cielo: linear-gradient(#1d3a57, #24425f 70%, #2c4430 70%);
  --cielo-suave: linear-gradient(#1b2b3d, #18222f);
  --gris: #253242;
  --gris-punto: #6b7a8c;
  --verde-fondo: #16301f;
  --verde-texto: #7fd99a;
  --aviso-fondo: #33290f;
  --aviso-texto: #f0d27a;
  --alerta-fondo: #3a1a1a;
  --alerta-texto: #f4a3a3;
  --hueco: #233142;
  --elegido: #17324d;
  --tablero-1: #1c2735;
  --tablero-2: #222f3f;
  --sombra: rgba(0, 0, 0, .4);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Que el atributo hidden siempre oculte, aunque el elemento tenga display: flex/grid */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: 'Ubuntu', system-ui, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.5;
}

a { color: var(--primario); }
h1, h2 { line-height: 1.2; }
h1 small { font-size: .5em; color: var(--suave); font-weight: 500; }

.contenedor { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.pixel { image-rendering: pixelated; }

/* ---------- Barra superior ---------- */
.barra { background: var(--barra); color: #fff; }
/* La barra mide siempre como en el vestidor (página ancha): así menú, buscador y botones caben
   en un solo renglón en todas las páginas, aunque el contenido de abajo sea más estrecho */
.barra .contenedor { max-width: 1500px; }
.barra__fila { display: flex; align-items: center; gap: 20px; min-height: 64px; flex-wrap: wrap; padding-block: 10px; }
.logo { color: #fff; font-weight: 700; font-size: 1.4rem; text-decoration: none; }
.logo span { color: var(--amarillo); }
.menu { display: flex; gap: 6px 14px; flex-wrap: wrap; }
/* El buscador de la barra un poco más estrecho que los demás, para que todo quepa en un renglón desde ~1240 px */
.barra .buscador input { width: 165px; }
.menu a { color: #cfe3f5; text-decoration: none; font-weight: 500; }
.menu a:hover { color: #fff; }

/* Botón de modo claro / oscuro */
.tema {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
}
.tema:hover { background: rgba(255, 255, 255, .18); color: var(--amarillo); }
/* Lado derecho de la barra: buscador + tema + salir, pegados a la derecha (también en /login, sin buscador) */
.barra__derecha { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.barra__derecha .buscador { margin-left: 0; }
.barra__acciones { display: flex; gap: 6px; }
.salir { margin: 0; }

/* ---------- Login ---------- */
.login { max-width: 380px; margin: 56px auto 0; }
.login h1 { margin: 0 0 4px; }
.login > p { margin: 0 0 20px; color: var(--suave); }
.login form { display: flex; flex-direction: column; gap: 14px; }
.login label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.login input {
  font: inherit;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--campo);
  color: var(--texto);
}
.login input:focus { outline: 2px solid var(--primario); outline-offset: 1px; }
.login .boton { padding: 10px 16px; margin-top: 4px; }
.login .alerta { display: block; margin: 0; }

/* ---------- Página de login (/login) ----------
   Tarjeta centrada en la pantalla: a la izquierda qué es la web (con un muñeco saludando),
   a la derecha el formulario. En el celular las dos partes se apilan. */
.acceso { min-height: calc(100vh - 190px); display: grid; place-items: center; padding: 32px 0; }
.acceso__tarjeta {
  width: min(880px, 100%);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 50px var(--sombra);
}

.acceso__intro {
  position: relative;
  padding: 36px 150px 36px 36px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 90%, rgba(247, 201, 72, .25), transparent 45%),
    linear-gradient(150deg, #0e3a5f, #1e7cc8);
}
.acceso__marca { margin: 0; font-size: 2rem; font-weight: 700; line-height: 1; }
.acceso__marca span { color: var(--amarillo); }
.acceso__lema { margin: 6px 0 18px; font-weight: 500; color: #cfe3f5; }
.acceso__texto { margin: 0 0 20px; line-height: 1.6; color: #e6f0fa; }
.acceso__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.acceso__lista li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.acceso__lista svg { flex: none; padding: 6px; box-sizing: content-box; border-radius: 8px; background: rgba(255, 255, 255, .14); color: var(--amarillo); }
.acceso__muneco { position: absolute; right: 14px; bottom: 6px; width: 128px; height: 220px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3)); }

.acceso__formulario { padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; }
.acceso__formulario h1 { margin: 0 0 6px; font-size: 1.8rem; }
.acceso__ayuda { margin: 0 0 24px; color: var(--suave); }
.acceso__formulario form { display: flex; flex-direction: column; }
.acceso__formulario label { font-weight: 500; font-size: .9rem; margin: 0 0 6px; }
.acceso__formulario .alerta { display: block; margin: 0 0 16px; }

/* Campo con icono a la izquierda (y el ojo a la derecha en la contraseña) */
.campo { position: relative; display: flex; align-items: center; margin-bottom: 16px; }
.campo > svg { position: absolute; left: 12px; color: var(--suave); pointer-events: none; }
.campo input {
  width: 100%;
  font: inherit;
  padding: 11px 42px 11px 40px;
  border-radius: 10px;
  border: 1px solid var(--borde);
  background: var(--campo);
  color: var(--texto);
}
.campo input:focus { outline: 2px solid var(--primario); outline-offset: 1px; border-color: transparent; }
.campo:focus-within > svg { color: var(--primario); }
.campo__ojo {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--suave);
  cursor: pointer;
}
.campo__ojo:hover { color: var(--texto); background: var(--gris); }

.acceso__entrar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; margin-top: 6px; font-weight: 700; font-size: 1rem; }
.acceso__entrar svg { transition: transform .15s; }
.acceso__entrar:hover svg { transform: translateX(3px); }

/* ---------- Login, diseño B (/login?diseno=b) ----------
   Fondo de "sala de Habbo": suelo a cuadros en perspectiva que ocupa todo el ancho de la
   pantalla, y una tarjeta semitransparente con la cabeza de un Habbo asomando por arriba. */
.sala-login {
  --suelo-1: color-mix(in srgb, var(--primario) 22%, var(--fondo));
  --suelo-2: color-mix(in srgb, var(--primario) 9%, var(--fondo));
  position: relative;
  min-height: calc(100vh - 150px);
  /* de borde a borde: la página se pinta sin el contenedor centrado (anchoCompleto en la cabecera) */
  padding: 90px 16px 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--primario) 25%, transparent), transparent 60%);
}
/* El suelo: cuadros normales inclinados hacia el fondo, que se desvanecen hacia arriba */
.sala-login::before {
  content: '';
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 65%;
  background: repeating-conic-gradient(var(--suelo-1) 0 25%, var(--suelo-2) 0 50%) 50% 0 / 72px 72px;
  transform: perspective(520px) rotateX(58deg);
  transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent);
  mask-image: linear-gradient(to top, #000 35%, transparent);
}
.sala-login__tarjeta {
  position: relative;
  z-index: 1;
  width: min(400px, 100%);
  padding: 70px 32px 26px;
  border-radius: 22px;
  border: 1px solid var(--borde);
  background: color-mix(in srgb, var(--superficie) 90%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 24px 60px var(--sombra);
}
/* La cabeza del Habbo, dentro de un círculo que sobresale por arriba de la tarjeta */
.sala-login__cabeza {
  position: absolute;
  top: -58px;
  left: 50%;
  width: 112px;
  height: 112px;
  transform: translateX(-50%);
  object-fit: none;
  object-position: 50% 30%;
  border-radius: 50%;
  border: 4px solid var(--amarillo);
  background: radial-gradient(circle at 50% 35%, #bfe0f7, #1e7cc8);
  box-shadow: 0 8px 20px var(--sombra);
}
.sala-login h1 { margin: 0 0 6px; text-align: center; font-size: 1.9rem; }
.sala-login__texto { margin: 0 0 22px; text-align: center; color: var(--suave); line-height: 1.55; }
.sala-login__texto strong { color: var(--texto); }
.sala-login__texto span { color: var(--amarillo); }
.sala-login form { display: flex; flex-direction: column; }
.sala-login label { font-weight: 500; font-size: .9rem; margin: 0 0 6px; }
.sala-login .alerta { display: block; margin: 0 0 16px; }
.sala-login__chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.sala-login__chips li {
  font-size: .78rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 99px;
  color: var(--primario);
  background: color-mix(in srgb, var(--primario) 14%, transparent);
}

/* ---------- Login, diseño C (/login) ----------
   Pantalla partida de borde a borde: a la izquierda una "aurora" de colores con cubos
   isométricos flotando y qué es la web; a la derecha el formulario, sin tarjeta. */
.portal {
  /* de borde a borde: la página se pinta sin el contenedor centrado (anchoCompleto en la cabecera) */
  min-height: calc(100vh - 64px);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
}

.portal__escena {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 56px clamp(28px, 5vw, 72px);
  color: #fff;
  background: #10162f;
  isolation: isolate;
}
/* La aurora: dos manchas de color difuminadas que se mueven despacio */
.portal__escena::before,
.portal__escena::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .75;
}
.portal__escena::before { top: -15%; left: -10%; background: #6a3df0; animation: aurora 14s ease-in-out infinite alternate; }
.portal__escena::after { bottom: -20%; right: -15%; background: #1e9be8; animation: aurora 18s ease-in-out infinite alternate-reverse; }
@keyframes aurora {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(18%, 12%) scale(1.15); }
}
.portal__defs { position: absolute; }

/* Cubos isométricos flotando (cada uno con sus colores, tamaño y ritmo) */
.portal__cubos { position: absolute; inset: 0; z-index: -1; }
.cubo { position: absolute; width: 90px; height: 90px; filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .35)); animation: flotar 6s ease-in-out infinite; }
.cubo--1 { --arriba: #ffe27a; --izq: #f7c948; --der: #c99a1c; top: 12%; left: 14%; width: 110px; height: 110px; }
.cubo--2 { --arriba: #8fd3ff; --izq: #3fa9f5; --der: #1f6fb3; top: 22%; right: 16%; animation-delay: -2s; animation-duration: 7s; }
.cubo--3 { --arriba: #ffb3d1; --izq: #ff6fa8; --der: #c4407a; top: 46%; left: 40%; width: 64px; height: 64px; animation-delay: -4s; }
.cubo--4 { --arriba: #b9a6ff; --izq: #8b6cf5; --der: #5a3fc4; top: 8%; left: 52%; width: 48px; height: 48px; animation-delay: -1s; animation-duration: 8s; }
.cubo--5 { --arriba: #9af0c8; --izq: #3fd396; --der: #23996a; top: 40%; right: 6%; width: 56px; height: 56px; animation-delay: -3s; }
@keyframes flotar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(2deg); }
}

.portal__texto { position: relative; max-width: 460px; }
.portal__marca { margin: 0 0 14px; font-weight: 700; letter-spacing: .18em; font-size: .85rem; color: #c9d4ff; }
.portal__marca span { color: var(--amarillo); }
.portal__texto h2 { margin: 0 0 12px; font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.1; }
.portal__texto > p { margin: 0 0 26px; color: #d4dcf5; line-height: 1.6; }
.portal__datos { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; flex-wrap: wrap; }
.portal__datos li {
  display: flex;
  flex-direction: column;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.portal__datos strong { font-size: 1.3rem; }
.portal__datos span { font-size: .8rem; color: #c9d4ff; }

.portal__formulario { display: grid; place-items: center; padding: 48px 24px; background: var(--fondo); }
.portal__caja { width: min(360px, 100%); }
.portal__caja h1 { margin: 0 0 6px; font-size: 2rem; }
.portal__ayuda { margin: 0 0 28px; color: var(--suave); }
.portal__caja form { display: flex; flex-direction: column; }
.portal__caja label { font-weight: 500; font-size: .9rem; margin: 0 0 6px; }
.portal__caja .alerta { display: block; margin: 0 0 16px; }
.portal__privado { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font-size: .82rem; color: var(--suave); }
.portal__privado svg { flex: none; color: var(--verde); }

/* ---------- Login, diseño D (/login) ----------
   Retro píxel: cielo de noche con estrellas que parpadean, una ciudad pixelada abajo y una
   "ventana de programa" retro (bordes gruesos, sombra dura) con el formulario. Los colores son
   fijos (es una escena), así que se ve igual en modo claro y oscuro. */
.retro {
  --tinta: #1b1b3a;
  --papel: #f6efdc;
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 64px);
  display: grid;
  place-items: center;
  padding: 48px 16px 150px;
  background:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff 50%, transparent 51%) 0 0 / 140px 120px,
    radial-gradient(1px 1px at 90px 80px, #cfd8ff 50%, transparent 51%) 0 0 / 180px 160px,
    radial-gradient(2px 2px at 60px 20px, #ffe9a8 50%, transparent 51%) 0 0 / 260px 220px,
    linear-gradient(#0a0f2c, #26215a 60%, #4b2c6e);
}
/* Estrellas extra que se encienden y apagan */
.retro::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 2px at 40px 60px, #fff 50%, transparent 51%) 0 0 / 210px 190px,
    radial-gradient(1.5px 1.5px at 130px 30px, #fff 50%, transparent 51%) 0 0 / 300px 240px;
  animation: titilar 3s steps(2) infinite;
}
@keyframes titilar { 50% { opacity: .2; } }
.retro__ciudad { position: absolute; left: 0; bottom: 0; width: 100%; height: 240px; }

.retro__ventana {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  background: var(--papel);
  color: var(--tinta);
  border: 4px solid var(--tinta);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .55); /* sombra dura, sin difuminar */
}
.retro__barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: #3b5bdb;
  color: #fff;
  border-bottom: 4px solid var(--tinta);
  font-family: 'Press Start 2P', monospace;
  font-size: .62rem;
}
.retro__botones { display: flex; gap: 6px; }
.retro__botones i { width: 12px; height: 12px; background: var(--papel); border: 2px solid var(--tinta); }
.retro__botones i:last-child { background: #ff6b6b; }

.retro__contenido { padding: 26px 26px 22px; }
.retro h1 { margin: 0 0 14px; font-family: 'Press Start 2P', monospace; font-size: 1.15rem; line-height: 1.5; font-weight: 400; }
.retro__texto { margin: 0 0 20px; line-height: 1.55; font-size: .95rem; }
.retro form { display: flex; flex-direction: column; }
.retro label { font-family: 'Press Start 2P', monospace; font-size: .58rem; margin: 0 0 8px; }
.retro__campo {
  width: 100%;
  font: inherit;
  padding: 10px 12px;
  margin-bottom: 16px;
  background: #fff;
  color: var(--tinta);
  border: 3px solid var(--tinta);
  border-radius: 0;
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .08);
}
.retro__campo:focus { outline: none; background: #fffbe8; box-shadow: 4px 4px 0 #3b5bdb; }
.retro__clave { position: relative; }
.retro__clave .retro__campo { padding-right: 44px; }
.retro__clave .campo__ojo { top: 5px; color: var(--tinta); }
.retro__clave .campo__ojo:hover { background: rgba(0, 0, 0, .08); color: var(--tinta); }
.retro__error { margin: 0 0 16px; padding: 8px 10px; background: #ffe0e0; color: #9b1c1c; border: 3px solid #9b1c1c; font-size: .9rem; }

/* Botón de máquina recreativa: sombra dura que desaparece al pulsar (se "hunde") */
.retro__entrar {
  margin-top: 4px;
  padding: 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: .8rem;
  color: var(--tinta);
  background: var(--amarillo);
  border: 3px solid var(--tinta);
  box-shadow: 0 6px 0 var(--tinta);
  cursor: pointer;
  transition: transform .06s, box-shadow .06s;
}
.retro__entrar:hover { filter: brightness(1.05); }
.retro__entrar:active { transform: translateY(6px); box-shadow: 0 0 0 var(--tinta); }

.retro__parpadeo { margin: 22px 0 0; text-align: center; font-family: 'Press Start 2P', monospace; font-size: .6rem; color: #3b5bdb; animation: titilar 1.2s steps(2) infinite; }

@media (max-width: 760px) {
  .retro { min-height: 0; padding: 32px 16px 120px; }
  .retro__ciudad { height: 160px; }
  .retro__contenido { padding: 22px 18px 18px; }
}

/* Si el sistema pide menos movimiento, todo quieto */
@media (prefers-reduced-motion: reduce) {
  .portal__escena::before, .portal__escena::after, .cubo, .retro::before, .retro__parpadeo { animation: none; }
}

@media (max-width: 860px) {
  .portal { grid-template-columns: 1fr; min-height: 0; }
  /* Espacio arriba para los cubos, que en el celular van pequeños en la esquina y no tapan el texto */
  .portal__escena { min-height: 0; padding: 110px 24px 32px; }
  .cubo--3, .cubo--5 { display: none; }
  .cubo--1 { top: 22px; left: auto; right: 24px; width: 64px; height: 64px; }
  .cubo--2 { top: 48px; right: 104px; width: 44px; height: 44px; }
  .cubo--4 { top: 18px; left: auto; right: 160px; width: 32px; height: 32px; }
  .portal__formulario { padding: 36px 24px 48px; }
}

@media (max-width: 760px) {
  .sala-login { min-height: 0; padding: 80px 16px 32px; }
  .sala-login__tarjeta { padding: 66px 22px 22px; }
  .acceso { min-height: 0; padding: 16px 0; }
  .acceso__tarjeta { grid-template-columns: 1fr; }
  .acceso__intro { padding: 26px 24px; }
  /* En el celular, menos cosas arriba para que el formulario se vea sin bajar tanto */
  .acceso__muneco, .acceso__lista { display: none; }
  .acceso__texto { margin: 0; }
  .acceso__formulario { padding: 28px 24px; }
}
/* Luna en modo claro (pasa a oscuro), sol en modo oscuro (pasa a claro).
   Lo decide el CSS, no tema.js, para que no parpadee al cargar. */
.tema__sol { display: none; }
:root[data-tema="oscuro"] .tema__luna { display: none; }
:root[data-tema="oscuro"] .tema__sol { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .tema__luna { display: none; }
  :root:not([data-tema="claro"]) .tema__sol { display: block; }
}

.buscador { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.buscador input, .buscador select, .buscador button,
.generador input[type=text], .generador select, .poses select, .filtros input {
  font: inherit;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--campo);
  color: var(--texto);
}
.buscador input { width: 180px; }
.buscador button, .boton {
  font: inherit;
  font-weight: 500;
  background: var(--amarillo);
  color: #2b2200;
  border: 0;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.buscador button:hover, .boton:hover { filter: brightness(.95); }
.boton--claro { background: var(--boton-claro); color: var(--boton-claro-texto); }

/* ---------- Portada ---------- */
.portada { text-align: center; padding: 48px 0 24px; }
.portada h1 { font-size: 2.2rem; margin-bottom: 8px; }
.portada > p { color: var(--suave); }
.buscador--grande { justify-content: center; margin: 24px auto; max-width: 620px; }
.buscador--grande input { flex: 1; min-width: 200px; padding: 12px 16px; font-size: 1.05rem; }
.tarjetas-inicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 40px; text-align: left; }

.tarjeta, .perfil, .bloque {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
}
.tarjeta h2 { font-size: 1.1rem; margin: 0 0 6px; }
.tarjeta p { margin: 0; color: var(--suave); }
.tarjeta--enlace { text-decoration: none; color: inherit; }
.tarjeta--enlace:hover { border-color: var(--primario); }

/* ---------- Perfil ---------- */
.perfil { display: flex; gap: 32px; margin-top: 24px; flex-wrap: wrap; }
.perfil__avatar {
  width: 180px;
  min-height: 240px;
  display: grid;
  place-items: center;
  border-radius: var(--radio);
  background: var(--cielo);
}
.perfil__datos { flex: 1; min-width: 260px; }
.perfil__titulo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.perfil__titulo h1 { margin: 0; }
.mision { font-style: italic; color: var(--suave); margin: 6px 0 18px; }

.estado { font-size: .85rem; padding: 3px 10px; border-radius: 99px; background: var(--gris); color: var(--suave); }
.estado::before { content: '●'; margin-right: 5px; color: var(--gris-punto); }
.estado--on { background: var(--verde-fondo); color: var(--verde-texto); }
.estado--on::before { color: var(--verde); }
.estado--oculto { background: var(--gris); color: var(--suave); cursor: help; }
.estado--oculto::before { content: '?'; font-weight: 700; color: var(--suave); }

.nivel { max-width: 420px; }
.nivel__fila { display: flex; justify-content: space-between; font-size: .9rem; }
.barra-progreso { height: 10px; background: var(--gris); border-radius: 99px; overflow: hidden; margin-top: 4px; }
.barra-progreso div { height: 100%; background: var(--verde); }

.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 20px 0; }
.datos div { background: var(--fondo); border-radius: 8px; padding: 10px 12px; }
.datos dt { font-size: .8rem; color: var(--suave); }
.datos dd { margin: 0; font-weight: 700; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; }

.bloque { margin-top: 24px; }
.bloque h1 { margin-top: 0; }
.bloque h2 { margin-top: 0; font-size: 1.2rem; }
.migas { margin: 0 0 8px; }
.migas a { text-decoration: none; }

/* ---------- Placas ---------- */
.placas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.placa {
  background: var(--fondo);
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: .85rem;
  position: relative;
}
.placa img { width: 40px; height: 40px; object-fit: none; }
.sin-imagen::before {
  content: '?';
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 2px dashed var(--borde);
  border-radius: 6px;
  color: var(--suave);
}
.placa:has(.enlace-tarjeta):hover { outline: 2px solid var(--primario); }
.placa--actual { outline: 2px solid var(--amarillo); }
.placa--grande { background: none; padding: 0; }
.placa--grande img { width: 80px; height: 80px; object-fit: contain; }
/* En la cabecera de la ficha, los <div> se estiran (flex: 1); la placa grande no */
.cabecera-ficha > .placa--grande { flex: 0 0 auto; min-width: 0; }

/* Enlace que cubre toda la tarjeta (la tarjeta necesita position: relative) */
.enlace-tarjeta { color: inherit; text-decoration: none; }
.enlace-tarjeta::after { content: ''; position: absolute; inset: 0; }
.enlace-tarjeta:hover strong { color: var(--primario); }
/* El marco de foco solo cuando se navega con teclado, no al hacer clic con el mouse */
.enlace-tarjeta:focus:not(:focus-visible) { outline: none; }
.placa strong { font-weight: 500; overflow-wrap: anywhere; }
.placa code { font-size: .75rem; color: var(--suave); overflow-wrap: anywhere; }
.placas--elegidas { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.filtros { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.filtros input { width: 100%; max-width: 480px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font: inherit;
  font-size: .9rem;
  border: 1px solid var(--borde);
  background: var(--campo);
  border-radius: 99px;
  padding: 5px 12px;
  cursor: pointer;
  color: var(--texto);
}
.chip span { color: var(--suave); margin-left: 4px; }
.chip--activo { background: var(--primario); border-color: var(--primario); color: #fff; }
.chip--activo span { color: rgba(255, 255, 255, .8); }
.contador { color: var(--suave); font-size: .9rem; }

/* ---------- Pestañas del perfil ---------- */
.pestanas { display: flex; gap: 4px; border-bottom: 2px solid var(--borde); margin-bottom: 16px; overflow-x: auto; }
.pestana {
  font: inherit;
  font-weight: 500;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--suave);
  white-space: nowrap;
}
.pestana span { font-size: .8rem; background: var(--fondo); border-radius: 99px; padding: 1px 8px; margin-left: 4px; }
.pestana:hover { color: var(--texto); }
.pestana--activa { color: var(--primario); border-bottom-color: var(--primario); }

.filtros--fila { flex-direction: row; align-items: center; flex-wrap: wrap; }
.filtros--fila input { flex: 1; min-width: 200px; }
.filtros .check { display: flex; align-items: center; gap: 6px; color: var(--suave); font-size: .9rem; }

/* Amigos */
.amigos {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.amigos a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 8px;
  background: var(--fondo);
  color: inherit;
  text-decoration: none;
  font-size: .85rem;
  text-align: center;
}
.amigos a:hover { outline: 2px solid var(--primario); }
.amigos strong { font-weight: 500; overflow-wrap: anywhere; }
.amigos .estado { font-size: .72rem; padding: 1px 8px; }
.ver-mas { display: block; margin: 0 auto; }

/* Grupos y salas */
.fichas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ficha { position: relative; display: flex; gap: 12px; align-items: flex-start; background: var(--fondo); border-radius: 8px; padding: 12px; }
.ficha > div:last-child { min-width: 0; }
.ficha strong { overflow-wrap: anywhere; }
.ficha p { margin: 4px 0; font-size: .9rem; color: var(--suave); overflow-wrap: anywhere; }
.ficha small { color: var(--suave); font-size: .8rem; }
.ficha__icono { flex-shrink: 0; width: 39px; height: 39px; }
.ficha__miniatura {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--hueco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239aa9ba'%3E%3Cpath d='M3 10 12 4l9 6v10H3z'/%3E%3C/svg%3E") center / 36px no-repeat;
}
.ficha__miniatura img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.etiqueta { font-size: .7rem; background: var(--amarillo); color: #2b2200; border-radius: 4px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }

.ficha:has(.enlace-tarjeta):hover { outline: 2px solid var(--primario); }
.etiqueta--gris { background: var(--gris); color: var(--suave); }

/* ---------- Grupo y placa (cabecera con imagen) ---------- */
.cabecera-ficha { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-top: 24px; }
.cabecera-ficha > div { flex: 1; min-width: 220px; }
.cabecera-ficha h1 { margin: 0 0 6px; overflow-wrap: anywhere; }
.cabecera-ficha p { margin: 0 0 10px; color: var(--suave); }
.cabecera-ficha__imagen { width: 78px; height: 78px; object-fit: contain; }
.datos-linea { display: flex; gap: 8px; flex-wrap: wrap; }
.datos-linea span { background: var(--fondo); border-radius: 99px; padding: 3px 12px; font-size: .85rem; }
.contador-grande { flex: 0 0 auto !important; min-width: 0 !important; text-align: center; background: var(--fondo); border-radius: var(--radio); padding: 14px 22px; }
.contador-grande strong { display: block; font-size: 2rem; color: var(--primario); }
.contador-grande span { font-size: .85rem; color: var(--suave); }
.nota { color: var(--suave); font-size: .85rem; text-align: center; }
.como-conseguir h2 { margin: 0 0 8px; font-size: 1.1rem; }
.como-conseguir__texto { margin: 0 0 6px; font-size: 1.05rem; }
.como-conseguir small { color: var(--suave); }

/* ---------- Sala ---------- */
.sala { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.sala__foto {
  flex: 0 0 320px;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--hueco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239aa9ba'%3E%3Cpath d='M3 10 12 4l9 6v10H3z'/%3E%3C/svg%3E") center / 64px no-repeat;
}
.sala__foto img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; display: block; }
.sala__datos { flex: 1; min-width: 260px; }
.sala__datos h1 { margin: 0 0 4px; overflow-wrap: anywhere; }
.chip--fijo { cursor: default; }

/* ---------- Logros ---------- */
/* Cabecera de "Logros de X": avatar a la izquierda */
.logros-usuario { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.logros-usuario__avatar {
  flex-shrink: 0;
  width: 150px;
  height: 220px;
  display: grid;
  place-items: center;
  border-radius: var(--radio);
  background: var(--cielo);
}
.logros-usuario__datos { flex: 1; min-width: 240px; }
.logros-usuario__datos h1 { margin: 0 0 12px; }
/* "Ver las placas / los logros de otro Habbo" debajo del resumen (ancho para que se lea el texto entero) */
.buscar-otro { margin-top: 16px; max-width: 480px; }
.buscar-otro input { flex: 1; width: auto; min-width: min(280px, 100%); }
/* "No encontramos a X": aviso rojo en forma de etiqueta, bajo el buscador */
.aviso-error {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: .85rem;
  font-weight: 500;
  background: var(--alerta-fondo);
  color: var(--alerta-texto);
  border: 1px solid var(--rojo);
}
.aviso-error svg { flex: none; }
.aviso-error__cerrar {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin: 0 -6px 0 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.aviso-error__cerrar:hover { background: rgba(0, 0, 0, .15); }

.resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 480px; }
.resumen div { background: var(--fondo); border-radius: 8px; padding: 10px; text-align: center; }
.resumen strong { display: block; font-size: 1.6rem; }
.resumen span { font-size: .85rem; color: var(--suave); }
.buscador--izquierda { margin-left: 0; }

.logros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.logro { display: flex; gap: 12px; align-items: center; background: var(--fondo); border-radius: 8px; padding: 10px 12px; }
.logro img { width: 40px; height: 40px; object-fit: none; flex-shrink: 0; }
.logro__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.logro__info strong { font-weight: 500; overflow-wrap: anywhere; }
.logro__info .etiqueta { align-self: flex-start; margin: 0; }
.logro__info small, .logro__nivel { font-size: .8rem; color: var(--suave); }
.logro .barra-progreso { height: 6px; }
/* Cómo conseguir el siguiente nivel */
.logro__como { font-size: .8rem; color: var(--texto); background: var(--superficie); border-radius: 6px; padding: 4px 8px; margin-top: 4px; }
.logro__como--listo { color: var(--verde-texto); background: var(--verde-fondo); font-weight: 500; }
/* La tarjeta del logro entera es un enlace a su página */
.logro { position: relative; }
.logro:hover { outline: 2px solid var(--primario); }

/* Página de un logro */
.barra-progreso--grande { height: 14px; max-width: 520px; }
.tabla-desplazable { overflow-x: auto; }
.tabla-niveles { border-collapse: collapse; width: 100%; font-size: .9rem; }
.tabla-niveles th, .tabla-niveles td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla-niveles th { color: var(--suave); font-weight: 500; font-size: .82rem; }
.tabla-niveles img { display: block; object-fit: none; }
.nivel--conseguido { background: var(--verde-fondo); }
.nivel--siguiente { background: var(--aviso-fondo); }
.nivel--pendiente img { opacity: .55; }
.nivel__marca { white-space: nowrap; font-weight: 500; font-size: .82rem; }
.logro--sin-empezar:not(.logro--catalogo) img { filter: grayscale(1); opacity: .45; }
.logro--completo { background: var(--verde-fondo); }
.logro--completo .barra-progreso div { background: var(--amarillo); }

/* ---------- Looks ---------- */
.looks { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.looks li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 8px; background: var(--cielo-suave); }
.boton--chico { padding: 4px 12px; font-size: .85rem; }

/* ---------- Catálogo de placas ---------- */
.chips--catalogo { margin-top: 14px; }
.chips--catalogo .chip { text-decoration: none; }
.chips__titulo { font-size: .85rem; color: var(--suave); align-self: center; margin-right: 2px; }

/* ---------- Tienda de Habbo ---------- */
.muebles--tienda { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.muebles--tienda .mueble { cursor: pointer; }
.mueble__boton { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.mueble__boton strong { font-weight: 500; }
.vitrina__nota { color: var(--suave); font-size: .9rem; margin: 8px 0; }
.vitrina__enlaces { margin: 12px 0 0; font-size: .9rem; }
.paginacion { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; color: var(--suave); font-size: .9rem; }

/* ---------- Moneda de créditos ---------- */
/* Monedita dorada con una H, dibujada en SVG (va junto a cada precio) */
.moneda {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-left: .25em;
  vertical-align: -0.24em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23c98a00'/%3E%3Ccircle cx='16' cy='15' r='14' fill='%23f7c21a'/%3E%3Ccircle cx='16' cy='15' r='10.5' fill='%23ffd84d' stroke='%23e0a400' stroke-width='1.5'/%3E%3Cpath d='M11 9h3.4v4.6h3.2V9H21v12h-3.4v-4.6h-3.2V21H11z' fill='%23b37400'/%3E%3Cpath d='M9 8.5a9 9 0 0 1 6-3' stroke='%23fff6c4' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Mercado ---------- */
.buscador--mercado input { width: 320px; max-width: 100%; }
.nota--izquierda { text-align: left; }
.muebles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.mueble {
  position: relative;
  background: var(--fondo);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: .9rem;
}
.mueble:hover { outline: 2px solid var(--primario); }
.mueble strong { font-weight: 500; overflow-wrap: anywhere; }
.mueble small { color: var(--suave); }
.mueble--sin-datos { opacity: .7; }
.mueble__icono { width: 52px; height: 52px; display: grid; place-items: center; }
.mueble__icono img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.mueble__icono--grande { width: 96px; height: 96px; background: var(--fondo); border-radius: var(--radio); }
/* En la cabecera de la ficha, los <div> se estiran (flex: 1); el icono no */
.cabecera-ficha > .mueble__icono--grande { flex: 0 0 96px; min-width: 0; }
.mueble__icono--grande img { transform: scale(1.6); }
.mueble__precios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0; width: 100%; }
.mueble__precios div { background: var(--superficie); border-radius: 6px; padding: 4px 2px; }
.mueble__precios dt { font-size: .68rem; color: var(--suave); }
.mueble__precios dd { margin: 0; font-weight: 700; font-size: .85rem; }

.resumen--4 { grid-template-columns: repeat(4, 1fr); max-width: 640px; }

/* Mercadillo: panel de arriba (como en el juego) */
.vitrina { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--borde); }
.vitrina__vista { width: 220px; display: flex; flex-direction: column; gap: 10px; }
.lienzo--vitrina { height: 240px; }
.lienzo--cargando img { opacity: .4; }
.vitrina__icono { transform: scale(2); }
.vitrina__quien { margin: 0; text-align: center; font-size: .85rem; color: var(--suave); }
.vitrina__datos { flex: 1; min-width: 260px; }
.vitrina__datos h2 { margin: 0 0 6px; }
.vitrina__datos .etiqueta { margin: 0; }
.vitrina__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 14px 0; max-width: 560px; }
.vitrina__stats div { background: var(--fondo); border-radius: 8px; padding: 8px 10px; }
.vitrina__stats dt { font-size: .78rem; color: var(--suave); }
.vitrina__stats dd { margin: 0; font-weight: 700; }
.vitrina__precio { background: var(--verde-fondo) !important; }
.vitrina__ficha { display: block; width: fit-content; margin-top: 10px; font-size: .9rem; }
.vitrina__vestidor { margin-top: 12px; }

/* "Probar en el vestidor": amarillo como los demás botones, con el icono de camiseta delante */
.boton--vestidor { display: inline-flex; align-items: center; gap: 8px; }
.boton--vestidor svg { flex: none; }
/* "Nombre de Habbo para probárselo": ancho para que se lea el texto entero */
.buscador--probar { max-width: 440px; }
.buscador--probar input { flex: 1; min-width: min(300px, 100%); }
.mueble--elegido { outline: 3px solid var(--amarillo) !important; }
.mueble .etiqueta { margin: 0; }

/* Mercadillo: filtros */
.filtros-mercadillo { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 4px; }
.filtros-mercadillo label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--suave); }
.filtros-mercadillo label.check { flex-direction: row; align-items: center; padding-bottom: 8px; }
.filtros-mercadillo select, .filtros-mercadillo input[type=number] {
  font: inherit;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--campo);
  color: var(--texto);
}
.filtros-mercadillo input[type=number] { width: 100px; }
.rango { display: flex; align-items: center; gap: 6px; }

/* Probador en la ficha de una prenda */
.probador { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.probador__vista { width: 220px; display: flex; flex-direction: column; gap: 10px; }
.lienzo--probador { height: 260px; }
.probador__datos { flex: 1; min-width: 260px; }
.probador__datos h2 { margin: 0 0 8px; }
.probador__datos p { color: var(--suave); }
.probador__extra { font-size: .9rem; }

/* Gráfica de precios */
.grafica__titulo { font-size: 1rem; margin: 24px 0 8px; }
.grafica { position: relative; max-width: 760px; }
.grafica__svg { width: 100%; height: auto; display: block; }
.grafica__guia { stroke: var(--gris); stroke-width: 1; }
.grafica__eje { fill: var(--suave); font-size: 11px; font-family: inherit; }
.grafica__barra { fill: var(--primario); }
.grafica__zona { fill: transparent; cursor: default; }
.grafica__zona--activa { fill: rgba(30, 124, 200, .08); }
.grafica__tooltip {
  position: absolute;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: .82rem;
  box-shadow: 0 4px 14px var(--sombra);
  pointer-events: none;
  white-space: nowrap;
}
.tabla-datos { margin-top: 12px; }
.tabla-datos summary { cursor: pointer; color: var(--primario); font-size: .9rem; }
.tabla-datos table { border-collapse: collapse; margin-top: 8px; font-size: .88rem; }
.tabla-datos th, .tabla-datos td { padding: 5px 14px 5px 0; text-align: left; border-bottom: 1px solid var(--borde); }
.tabla-datos th { color: var(--suave); font-weight: 500; }

/* Recuadro de precio en el vestidor */
.mercado-prenda { margin-top: 12px; background: var(--fondo); border-radius: 8px; padding: 10px 12px; font-size: .88rem; }
.mercado-prenda strong { font-weight: 500; }
.mercado-prenda__fila { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; color: var(--suave); }
.mercado-prenda__fila b { color: var(--texto); }

@media (max-width: 640px) {
  .resumen--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Páginas anchas (el vestidor) ---------- */
.pagina-ancha .contenedor { max-width: 1500px; }

/* ---------- Vestidor ---------- */
/* "¿Quieres empezar con el look de alguien?" */
.cargar-look { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; max-width: 520px; }
.cargar-look label { font-weight: 500; }
.cargar-look label span { color: var(--suave); font-weight: 400; font-size: .9rem; }
.cargar-look .buscador { margin: 0; }
.cargar-look input { flex: 1; min-width: 200px; }
.cargar-look small { color: var(--suave); font-size: .85rem; }
.etiqueta--hc { background: #f2b705; color: #3b2a00; font-weight: 700; margin-left: 0; }
.etiqueta--especial { background: #6d4bc3; color: #fff; font-weight: 500; margin-left: 0; }
/* En el vestidor las pestañas de partes bajan de línea en vez de desplazarse */
.vestidor .pestanas { flex-wrap: wrap; overflow: visible; }
.vestidor { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.vestidor__vista {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 16px;
}
.vestidor__vista .boton { text-align: center; }
.vestidor__ropa { flex: 1; min-width: 280px; }
.giro--centrado, .chips--centrado { justify-content: center; }
.historial { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.historial .boton { padding: 7px 6px; font-size: .9rem; }
.historial__ancho { grid-column: 1 / -1; }
.poses { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.poses label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--suave); min-width: 0; }
.poses select { width: 100%; }
.boton:disabled { opacity: .45; cursor: default; filter: none; }
.resumen-hc { margin: 0; text-align: center; font-size: .9rem; color: var(--suave); }
.codigo-figura { font-size: .72rem; color: var(--suave); overflow-wrap: anywhere; background: var(--fondo); padding: 8px; border-radius: 6px; }

.prendas { list-style: none; margin: 12px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.prenda {
  position: relative;
  width: 100%;
  min-height: 76px;
  display: grid;
  place-items: center;
  background: var(--fondo);
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  padding: 4px;
  font: inherit;
  color: var(--suave);
}
.prenda:hover { border-color: var(--borde); }
.prenda--activa, .prenda--activa:hover { border-color: var(--primario); background: var(--elegido); }
.prenda img { max-width: 100%; }
.prenda .etiqueta { position: absolute; top: 3px; right: 3px; font-size: .6rem; padding: 0 4px; max-width: calc(100% - 6px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vestidor .lienzo { height: 340px; }
.prenda__nombre {
  font-size: .68rem;
  line-height: 1.2;
  color: var(--texto);
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
}

.colores { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.colores__lista { display: flex; flex-wrap: wrap; gap: 5px; }
.color {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, .15);
  cursor: pointer;
  padding: 0;
}
.color--activo { outline: 3px solid var(--primario); outline-offset: 1px; }
/* Puntito amarillo en los colores de HC */
.color--hc::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f2b705;
  border: 1px solid #fff;
}

/* ---------- Vestidor en el celular ----------
   En pantallas estrechas las dos columnas se apilan. El muñeco se queda fijo arriba
   (con fondo propio, por encima de la ropa) para ver cómo queda mientras eliges.
   display: contents "deshace" la columna del muñeco: así sus partes se pueden reordenar
   y el muñeco puede quedarse fijo durante toda la sección, no solo dentro de su columna. */
@media (max-width: 700px) {
  /* nowrap: con wrap, en columna cada parte mide lo que pide su contenido (las pestañas en fila
     ensanchaban todo a ~1500 px); sin wrap, todas miden lo que mide la pantalla */
  .vestidor { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
  .vestidor__vista { display: contents; }
  .vestidor__ropa { min-width: 0; }

  .vestidor .lienzo {
    position: sticky;
    top: 0;
    z-index: 5;
    height: 260px; /* la imagen de Habbo mide 220 px: así le sobran ~20 px arriba y abajo (los pies no tocan el borde) */
    box-shadow: 0 6px 16px var(--sombra);
  }
  .vestidor .lienzo img { max-height: 100%; }

  /* Orden: muñeco → girar → gesto y acción → ropa y colores → deshacer → chico/chica → botones */
  .vestidor .lienzo { order: 0; }
  .vestidor .giro, .vestidor .poses { order: 1; }
  .vestidor__ropa { order: 2; }
  .vestidor .historial { order: 3; }
  .vestidor #generos { order: 4; }
  .vestidor .resumen-hc { order: 5; }
  .vestidor__vista > .boton { order: 6; }
  .vestidor .codigo-figura { order: 7; }

  /* Las pestañas (Cara y piel, Pelo, Sombrero…) en una fila que se desliza con el dedo */
  .vestidor .pestanas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }

  /* Colores y prendas más grandes, para tocarlos bien con el dedo */
  .colores__lista { gap: 7px; }
  .color { width: 34px; height: 34px; }
  .prendas { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .filtros--fila input { min-width: 0; width: 100%; }
}

/* ---------- Generador ---------- */
.generador { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 16px; }
.generador__controles { flex: 1; min-width: 260px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; align-content: start; }
.generador__controles label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--suave); }
.generador__controles .check { flex-direction: row; align-items: center; gap: 8px; }
.giro { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--suave); }
.giro span { min-width: 56px; }
.giro button {
  font-size: 1.2rem;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--borde);
  background: var(--campo);
  color: var(--texto);
  cursor: pointer;
}
.giro button:hover { border-color: var(--primario); }
.generador__vista { width: 260px; display: flex; flex-direction: column; gap: 10px; }
.lienzo {
  height: 280px;
  display: grid;
  place-items: center;
  border-radius: var(--radio);
  background: repeating-conic-gradient(var(--tablero-1) 0 25%, var(--tablero-2) 0 50%) 0 0 / 20px 20px;
  border: 1px solid var(--borde);
}
.lienzo--vacio { color: var(--suave); text-align: center; padding: 20px; }
/* ---------- Mensajes y errores ---------- */
.alerta { background: var(--alerta-fondo); color: var(--alerta-texto); border-radius: 8px; padding: 10px 14px; display: inline-block; }
.aviso { background: var(--aviso-fondo); color: var(--aviso-texto); border-radius: 8px; padding: 10px 14px; }
.vacio { color: var(--suave); }
.error { text-align: center; padding: 60px 0; }

.pie { color: var(--suave); font-size: .8rem; text-align: center; padding: 40px 16px; }

@media (max-width: 640px) {
  .buscador { margin-left: 0; width: 100%; }
  /* Solo ocupa toda la fila si tiene el buscador (en /login solo está el botón de tema) */
  .barra__derecha:has(.buscador) { width: 100%; }
  .buscador input { flex: 1; width: auto; }
  .perfil { flex-direction: column; align-items: center; }
  .generador__vista { width: 100%; }
}