/* Estructura de la página: panel lateral + contenido */

main {
  max-width: 120rem;
  margin: 0.85rem auto;
  padding: 0 1.15rem;
}

/* ---------- Panel lateral ---------- */

.app {
  display: flex;
  min-height: 100vh;
}

.barra-lateral {
  flex: 0 0 13rem;
  position: sticky;
  top: 0;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--t-hundido);
  border-right: 1px solid rgba(var(--t-tinte), 0.08);
}

/* Del mismo color que el panel; solo una línea fina separa el título del menú */
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.8rem 1rem;
  background: var(--t-hundido);
  border-bottom: 1px solid rgba(var(--t-tinte), 0.06);
  font-size: 1.45rem;
}

/* Todo el logo es el enlace a Inicio */
.logo a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: inherit;
  text-decoration: none;
}

.logo a:hover {
  color: var(--t-texto-fuerte);
}

/* El cuaderno lleva aire arriba para que suban los marcapáginas: es más grande que la letra,
   pero el margen negativo hace que la fila no crezca (el menú tiene que caber sin scroll).
   Por ese aire, el dibujo queda por debajo del centro de su caja: se sube para que la tapa
   quede a la altura del texto. */
.logo svg {
  flex: none;
  position: relative;
  top: -0.2rem;
  width: 1.9rem;
  height: 1.9rem;
  margin-block: -0.12rem;
}

/* Al pasar el ratón asoma un marcapáginas, cada vez el otro (js/main.js) */
.logo .marca {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.logo .marca.fuera {
  transform: translateY(-44px);
}

@media (prefers-reduced-motion: reduce) {
  .logo .marca {
    transition: none;
  }
}

/* flex: 1 hace que el menú se coma el hueco libre, y así el buzón y la sesión se quedan
   pegados abajo sin tener que ponerle a cada uno un margin-top: auto (si los dos lo
   llevan, el navegador reparte el hueco entre ambos y el buzón se queda a media altura). */
.menu-lateral {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1 1 auto;
  padding: 0.85rem 0.7rem;
  overflow-y: auto;
}

/* El título de cada grupo del menú: letra pequeña y apagada y una rayita neutra que sale de él
   hasta el borde (como los apartados de Rutas, pero sin color). Fino, para que quepa el menú. */
.menu-titulo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.3rem 0 0.15rem 0.8rem;
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(var(--t-texto-rgb), 0.5);
}

.menu-titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(var(--t-tinte), 0.12);
}

.menu-lateral button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border: none;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--t-texto);
  font-weight: bold;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}

/* Cada botón con el color de su sección, pero solo en el icono: el texto en blanco y sin
   recuadro (así no queda un arcoíris). Al pasar el ratón, un tinte de su color; la sección
   abierta, el tinte más fuerte y una rayita de su color a la izquierda. */
.menu-lateral [data-vista],
.menu-lateral .grupo-menu {
  --color-boton: 231, 76, 60;
}

.menu-lateral [data-vista="lockes"]      { --color-boton: 214, 88, 76; }
.menu-lateral [data-vista="equipos"]     { --color-boton: 91, 141, 239; }
.menu-lateral [data-vista="rutas"]       { --color-boton: 82, 183, 136; }
.menu-lateral [data-vista="levelcaps"]   { --color-boton: 0, 184, 169; }
.menu-lateral [data-vista="pokedex"]     { --color-boton: 232, 82, 110; }
.menu-lateral [data-vista="calculadora"] { --color-boton: 155, 110, 230; }
.menu-lateral [data-vista="normas"]      { --color-boton: 205, 165, 100; }
.menu-lateral [data-vista="ruleta"]      { --color-boton: 240, 150, 60; }
.menu-lateral [data-vista="randomizer"]  { --color-boton: 160, 205, 80; }
.menu-lateral [data-vista="foro"]        { --color-boton: 196, 128, 214; }
.menu-lateral [data-vista="amigos"]      { --color-boton: 80, 190, 215; }
.menu-lateral [data-vista="logros"]      { --color-boton: 241, 196, 15; }
.menu-lateral [data-vista="juegos"]      { --color-boton: 76, 182, 92; }
.menu-lateral [data-vista="jugar"]       { --color-boton: 186, 62, 102; }
.menu-lateral [data-vista="lucha"]       { --color-boton: 222, 112, 52; }

.menu-lateral :is(button, summary) .icono {
  color: color-mix(in srgb, rgb(var(--color-boton, var(--t-texto-rgb))) var(--t-vivo), black);
}

.menu-lateral button:hover,
.grupo-menu summary:hover {
  background: rgba(var(--color-boton, 255, 255, 255), 0.12);
}

.menu-lateral button.activa {
  background: rgba(var(--color-boton), 0.22);
  box-shadow: inset 3px 0 0 rgb(var(--color-boton));
  color: var(--t-texto-fuerte);
}

/* Lockes: arriba del todo y destacado (es lo principal). Sin elegir, un recuadro de línea de
   puntos en su rojo y un fondo rojo suave: se ve y no se parece a ninguna otra sección.
   Elegido, relleno de rojo. */
.menu-lateral .boton-destacado {
  margin-bottom: 0.35rem;
  border: 1px dashed rgba(var(--color-boton), 0.85);
  background: rgba(var(--color-boton), 0.12);
  color: var(--t-texto);
}

.menu-lateral .boton-destacado:hover {
  background: rgba(var(--color-boton), 0.24);
}

.menu-lateral .boton-destacado.activa {
  border-color: rgb(var(--color-boton));
  background: rgb(var(--color-boton));
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.menu-lateral .boton-destacado.activa .icono {
  color: #fff;
}

/* El «Locke» del nombre de la web, en rojo */
.logo-locke {
  color: #e74c3c;
}

:root[data-tema="claro"] .logo-locke {
  color: #c0392b;
}

.menu-lateral .icono {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
}

/* Una sección que aún está en pruebas («Combates»): una plaquita pequeña a la derecha del nombre */
.menu-pruebas {
  margin-left: auto;
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  background: rgba(var(--color-boton), 0.18);
  color: rgb(var(--color-boton));
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- El menú cabe siempre, sin scroll ----------
   En el ordenador, los botones, los huecos y los títulos de grupo encogen con el alto de la ventana
   (vh), con su tamaño de siempre como máximo: en una pantalla alta se ve igual que antes y en una
   de portátil todo cabe sin bajar. Solo en ventanas muy bajitas (menos de unos 600 px) volvería a
   salir la barra de scroll, como respaldo. */
@media (min-width: 761px) {
  .logo {
    padding-block: clamp(0.45rem, 1.1vh, 0.8rem);
  }

  .menu-lateral {
    gap: clamp(0.06rem, 0.45vh, 0.35rem);
    padding-block: clamp(0.4rem, 1.2vh, 0.85rem);
  }

  /* Más alto de lo justo para la letra: el resaltado (al pasar el ratón, la sección abierta) no
     se queda pegado a las letras */
  .menu-lateral button {
    padding-block: clamp(0.22rem, 0.95vh, 0.6rem);
    font-size: clamp(0.8rem, 1.6vh, 0.95rem);
  }

  .menu-lateral .boton-destacado {
    margin-bottom: clamp(0.1rem, 0.35vh, 0.35rem);
  }

  .menu-titulo {
    margin-top: clamp(0.15rem, 0.6vh, 0.4rem);
    margin-bottom: clamp(0.05rem, 0.35vh, 0.25rem);
  }
}

/* Lo de dentro de «Equipos»: más pequeño, colgando del grupo con una rayita de su color */
.submenu button {
  padding: 0.45rem 0.7rem;
  font-size: 0.88rem;
  color: rgba(var(--t-texto-rgb), 0.85);
}

.submenu .icono {
  width: 0.9rem;
  height: 0.9rem;
}

/* ---------- Campana de invitaciones (a la derecha de tu nombre) ---------- */

/* margin-left: auto la empuja al borde derecho aunque el nombre sea corto */
.avisos-boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-left: auto;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: none;
  border-radius: 0.45rem;
  background: transparent;
  color: rgba(var(--t-tinte), 0.6);
  cursor: pointer;
}

.avisos-boton:hover {
  background: rgba(var(--t-tinte), 0.08);
  color: var(--t-texto);
}

.avisos-boton .icono {
  width: 1.15rem;
  height: 1.15rem;
}

/* Cuando hay algo pendiente, la campana se pone amarilla */
.avisos-boton.con-avisos {
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

/* El número, como un globito en la esquina de la campana */
.avisos-cuenta {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  box-sizing: border-box;
  border-radius: 1rem;
  background: var(--t-rojo-oscuro);
  color: #fff;
  font-size: 0.65rem;
  font-weight: bold;
  line-height: 1rem;
  text-align: center;
}

/* ---------- Lista del buzón ---------- */

.avisos-lista {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-height: 60vh;
  overflow-y: auto;
}

.aviso {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.45rem;
  background: var(--t-fondo-2);
}

.aviso-icono {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--t-panel-3);
}

.aviso-icono.amistad {
  color: #3498db;
}

/* «de-locke» y no «locke»: esa clase ya es la de las tarjetas de Versus y le pondría su borde */
.aviso-icono.de-locke {
  color: var(--color-locke, #3498db);
}

/* Respuestas a tus hilos del foro (js/avisos.js) */
.aviso-icono.foro {
  color: var(--t-bien);
}

/* Aviso del árbitro de normas (js/avisos.js): el mismo naranja que en la actividad del locke */
.aviso-icono.arbitro {
  color: #f39c12;
}

/* Retos y turnos de «Lucha»: el color de la sección */
.aviso-icono.lucha {
  color: rgb(222, 112, 52);
}

.aviso-ir {
  cursor: pointer;
}

.aviso-icono .icono {
  width: 1.1rem;
  height: 1.1rem;
}

.aviso-texto {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.35;
}

.aviso-texto small {
  display: block;
  font-size: 0.78rem;
  opacity: 0.65;
}

.aviso button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: none;
  border-radius: 0.35rem;
  background: var(--t-control);
  color: var(--t-texto);
  cursor: pointer;
}

.aviso button:disabled {
  opacity: 0.4;
  cursor: default;
}

.aviso .aviso-si {
  background: var(--t-bien-oscuro);
}

.aviso .aviso-si:hover:not(:disabled) {
  background: var(--t-bien);
}

.aviso .aviso-no:hover:not(:disabled) {
  background: var(--t-rojo-oscuro);
}

.aviso .icono {
  width: 1rem;
  height: 1rem;
}

.aviso-vacio {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.6;
}

#avisos-cerrar {
  background: var(--t-control);
  color: var(--t-texto);
}

/* ---------- Diálogos de entrar y de perfil ---------- */

.dialogo-sesion {
  width: min(26rem, 92vw);
}

.dialogo-sesion label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Casilla con su texto al lado, no encima */
.dialogo-sesion label.casilla-sesion {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  font-size: 0.9rem;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
}

.dialogo-sesion label.casilla-sesion input {
  margin: 0;
  accent-color: #c0392b;
}

.dialogo-sesion input {
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 0.45rem;
  font-family: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
}

.entrar-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.65rem;
  border: none;
  border-radius: 0.45rem;
  background: #f2f2f2;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  color: var(--t-tinta-2);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
}

.entrar-google:hover {
  background: #fff;
}

.logo-google {
  flex: none;
  width: 1.2rem;
  height: 1.2rem;
}

/* «o», con una raya a cada lado */
.entrar-separador {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 0.8rem;
  font-size: 0.8rem;
  opacity: 0.6;
}

.entrar-separador::before,
.entrar-separador::after {
  content: "";
  flex: 1;
  border-top: 1px solid rgba(var(--t-tinte), 0.25);
}

.sesion-error {
  display: block;
  min-height: 1.1em;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--t-rojo);
}

.sesion-ayuda {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  opacity: 0.7;
}

.dialogo-sesion .boton-verde {
  background: var(--t-bien-oscuro);
  color: #fff;
  font-family: inherit;
}

.dialogo-sesion .boton-gris {
  border: none;
  border-radius: 0.45rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
}

.dialogo-sesion .boton-gris:hover {
  background: var(--t-control-2);
}

/* Cancelar / Volver a la izquierda, lejos del botón de verdad */
.dialogo-sesion .boton-izquierda {
  margin-right: auto;
}

/* ---------- Varias cuentas ---------- */

.etiqueta-cuentas {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cuentas-lista,
.cuentas-recordadas {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cuentas-recordadas {
  margin-bottom: 0.4rem;
}

/* border-box: la abierta es un <div> y no un botón, y sin esto el relleno se sumaba al
   ancho y se salía de la ventana (salía una barra de scroll) */
.cuenta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  box-sizing: border-box;
  width: 100%;
  min-height: 2.6rem;
  padding: 0.45rem 0.6rem;
  line-height: 1.2;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-fondo-2);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

button.cuenta:hover {
  background: var(--t-panel-3);
}

/* La que está abierta: no es un botón, solo se marca */
.cuenta.activa {
  box-shadow: inset 0 0 0 1px rgba(241, 196, 15, 0.6);
  cursor: default;
}

.cuenta img,
.cuenta .cuenta-inicial {
  flex: none;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
}

.cuenta .cuenta-inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--t-control);
  font-weight: bold;
}

.cuenta-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cuenta small {
  opacity: 0.6;
}

/* ---------- Desplegable de tu nombre (abajo del panel, se abre hacia arriba) ---------- */

.sesion {
  position: relative;
}

.menu-cuentas {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: calc(100% - 0.4rem);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem;
  border-radius: 0.6rem;
  background: var(--t-panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
}

.menu-cuentas .cuenta {
  font-size: 0.82rem;
}

.menu-mi-perfil,
.menu-anadir,
.menu-salir {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  text-align: left;
  cursor: pointer;
}

.menu-mi-perfil:hover,
.menu-anadir:hover,
.menu-salir:hover {
  background: rgba(var(--t-tinte), 0.08);
}

/* «Cerrar sesión», lo último y apartado de lo demás */
.menu-salir {
  border-top: 1px solid rgba(var(--t-tinte), 0.08);
  border-radius: 0 0 0.45rem 0.45rem;
  color: rgba(var(--t-texto-rgb), 0.8);
}

.menu-mi-perfil {
  border-bottom: 1px solid rgba(var(--t-tinte), 0.08);
  border-radius: 0.45rem 0.45rem 0 0;
}

.menu-cuentas .icono {
  width: 1rem;
  height: 1rem;
}

/* ---------- Perfil ---------- */

/* Ventana de la foto: la muestra a la izquierda del buscador */
#dialogo-avatar {
  overflow: visible; /* que las sugerencias no se corten */
}

.avatar-fila {
  display: flex;
  align-items: flex-end;
  gap: 0.8rem;
}

.avatar-muestra {
  flex: none;
  width: 4rem;
  height: 4rem;
  overflow: hidden;
  border: 3px solid #c0392b;
  border-radius: 50%;
  background: var(--t-fondo-2);
}

.avatar-muestra img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

/* Es un botón: pulsándola, el Pokémon cambia de cara (js/perfil.js). Lo redondo va en la foto
   y no en el botón, para que el circulito de las flechas pueda asomar por la esquina */
button.avatar-muestra {
  position: relative;
  padding: 0;
  overflow: visible;
  color: var(--t-texto);
  font: inherit;
  cursor: pointer;
}

button.avatar-muestra:disabled {
  opacity: 1;
  cursor: default;
}

.avatar-muestra > :first-child {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.avatar-cara {
  position: absolute;
  right: -0.3rem;
  bottom: -0.3rem;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: #c0392b;
  color: #fff;
  box-shadow: 0 0 0 2px var(--t-panel);
  transition: transform 0.25s;
}

.avatar-cara .icono {
  width: 0.8rem;
  height: 0.8rem;
}

button.avatar-muestra:hover:not(:disabled) .avatar-cara {
  transform: rotate(90deg);
}

/* Mientras mira qué caras tiene (solo la primera vez, un momento) */
.avatar-muestra.cambiando-cara {
  cursor: progress;
}

.avatar-muestra.cambiando-cara > :first-child {
  opacity: 0.6;
}

/* Solo tiene una cara: se sacude (la animación es la de «Mis equipos», css/equipos.css) */
.avatar-muestra.sin-mas-caras {
  animation: sacudida 0.35s ease-in-out;
}

.avatar-campo {
  position: relative;
  flex: 1;
}

/* «o», con una raya a cada lado, y el botón de subir una foto tuya */
.avatar-o {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.8rem 0 0.6rem;
  font-size: 0.8rem;
  opacity: 0.6;
}

.avatar-o::before,
.avatar-o::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(var(--t-tinte), 0.2);
}

.avatar-subir {
  width: 100%;
  padding: 0.6rem;
  border: 2px dashed rgba(241, 196, 15, 0.45);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: bold;
  cursor: pointer;
}

.avatar-subir:hover {
  border-color: rgb(var(--color-vista));
  background: rgba(var(--color-vista), 0.08);
}

.avatar-google {
  margin-top: 0.5rem;
}

/* Las fotos subidas (data:) son fotos, no sprites: suavizadas, no pixeladas */
.avatar-muestra img[src^="data:"],
.perfil-foto[src^="data:"],
.jugador-foto img[src^="data:"],
.locke-cara img[src^="data:"],
.cementerio-cara img[src^="data:"],
.perfil-amigo img[src^="data:"],
.sesion-foto[src^="data:"],
.sesion img[src^="data:"] {
  image-rendering: auto;
}

.avatar-campo .sugerencias {
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}

/* ---------- Sesión (abajo del panel lateral) ---------- */

.sesion {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.85rem 0.7rem;
  border-top: 1px solid rgba(var(--t-tinte), 0.08);
}

.sesion-usuario {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.sesion-foto {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  flex: none;
}

/* Foto y nombre van en un botón: al pulsarlo se abre tu perfil */
.sesion-perfil {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1 1 auto;
  min-width: 0;
  margin: -0.2rem 0 -0.2rem -0.3rem;
  padding: 0.2rem 0.3rem;
  border: none;
  border-radius: 0.45rem;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.sesion-perfil:hover {
  background: rgba(var(--t-tinte), 0.08);
}

/* La foto lleva a tu perfil y el resto al desplegable: encima de la foto se resalta solo ella */
.sesion-foto {
  transition: transform 0.15s, filter 0.15s;
}

.sesion-perfil:has(.sesion-foto:hover) {
  background: transparent;
}

.sesion-foto:hover {
  transform: scale(1.12);
  filter: brightness(1.15) drop-shadow(0 0 4px rgba(var(--color-vista), 0.7));
}

/* min-width: 0 deja que un nombre largo se corte con «…» en vez de echar la campana fuera */
.sesion-nombre {
  min-width: 0;
  font-size: 0.85rem;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sesion-boton {
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-panel);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
}

.sesion-boton:hover {
  background: var(--t-control);
}

/* Vacío no ocupa sitio (si no, el hueco entre los botones de la sesión se le suma) */
.sesion-aviso:empty,
.sesion-boton[hidden] {
  display: none;
}

.sesion-aviso {
  font-size: 0.72rem;
  line-height: 1.3;
  opacity: 0.55;
}

/* Lo último del panel: créditos, aviso legal y privacidad (legal.html) y, a su lado, el «?»
   de las preguntas frecuentes */
.pie-lateral {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0.7rem 0.7rem;
}

.pie-botones {
  display: flex;
  gap: 0.4rem;
}

.boton-ajustes,
.boton-ayuda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border: 1px solid rgba(var(--t-tinte), 0.3);
  border-radius: 50%;
  background: transparent;
  color: rgba(var(--t-texto-rgb), 0.7);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
}

.boton-ajustes .icono {
  width: 0.85rem;
  height: 0.85rem;
}

.boton-ajustes:hover,
.boton-ayuda:hover {
  border-color: rgb(var(--color-vista));
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

/* ---------- Ajustes ---------- */

.ajustes-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.6rem;
}

.ajustes-nombre {
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Las opciones, juntas como un interruptor */
.ajustes-opciones {
  position: relative;
  display: flex;
  padding: 0.2rem;
  border-radius: 0.55rem;
  background: var(--t-fondo);
}

/* La sombra de la elegida: una sola, que se desliza a la nueva (la coloca js/comun/ajustes.js) */
.ajustes-opciones::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  left: 0;
  width: var(--sombra-ancho, 0);
  border-radius: 0.4rem;
  background: var(--t-control);
  transform: translateX(var(--sombra-x, 0));
  transition: transform 0.25s ease, width 0.25s ease;
}

.ajustes-opciones.sin-animar::before {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .ajustes-opciones::before {
    transition: none;
  }
}

.ajustes-opciones button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  border: none;
  border-radius: 0.4rem;
  background: transparent;
  color: rgba(var(--t-texto-rgb), 0.7);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.ajustes-opciones button .icono {
  width: 0.95rem;
  height: 0.95rem;
}

.ajustes-opciones button:hover {
  color: var(--t-texto);
}

.ajustes-opciones button.elegido {
  color: var(--t-texto);
  font-weight: bold;
}

/* ---------- Preguntas frecuentes ---------- */

#dialogo-ayuda {
  width: min(40rem, 94vw);
}

.ayuda-lista {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 65vh;
  overflow-y: auto;
}

.ayuda-lista details {
  border-radius: 0.5rem;
  background: var(--t-fondo-2);
}

.ayuda-lista summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.85rem;
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}

.ayuda-lista summary::-webkit-details-marker {
  display: none;
}

.ayuda-lista summary::after {
  content: "▾";
  margin-left: auto;
  opacity: 0.6;
  transition: transform 0.2s;
}

.ayuda-lista details:not([open]) summary::after {
  transform: rotate(-90deg);
}

.ayuda-lista summary:hover {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.ayuda-lista p {
  margin: 0;
  padding: 0 0.85rem 0.75rem;
  line-height: 1.45;
}

.ayuda-cerrar {
  background: var(--t-control);
  color: var(--t-texto);
}

.enlace-legal {
  flex: none;
  color: inherit;
  font-size: 0.72rem;
  opacity: 0.45;
  text-decoration: none;
}

.enlace-legal:hover {
  opacity: 0.8;
  text-decoration: underline;
}

/* Borrar la cuenta: en rojo y apartado, que no se pulse sin querer */
/* Mismo botón que «Cerrar», pero en rojo (también «Borrar mi cuenta» del perfil) */
.dialogo-sesion .boton-rojo {
  border: none;
  border-radius: 0.45rem;
  background: var(--t-rojo-oscuro);
  color: #fff;
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
}

.dialogo-sesion .boton-rojo:hover {
  background: var(--t-rojo);
}

.sesion-legal {
  margin: 0.8rem 0 0;
  font-size: 0.75rem;
  opacity: 0.6;
}

.sesion-legal a {
  color: inherit;
}

:root { --color-vista: 91, 141, 239; }

.contenido {
  flex: 1;
  min-width: 0;
  /* Cada sección con su color, suave: un tinte arriba y los acentos de la sección (en :root\r\n   para que lo vean también los recuadros) */
  position: relative;
  background-image: linear-gradient(180deg, rgba(var(--color-vista), 0.1), rgba(var(--color-vista), 0) 12rem);
}

/* La línea de color de arriba, por encima de todo: las pestañas cuelgan de ella */
.contenido::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  height: 3px;
  background: rgb(var(--color-vista));
  pointer-events: none;
}

:root:has(#vista-inicio:not([hidden])) { --color-vista: 231, 76, 60; }
:root:has(#vista-lockes:not([hidden])) { --color-vista: 214, 88, 76; }
:root:has(#vista-crear:not([hidden])),
:root:has(#vista-equipos:not([hidden])) { --color-vista: 91, 141, 239; }
:root:has(#vista-rutas:not([hidden])) { --color-vista: 82, 183, 136; }
:root:has(#vista-levelcaps:not([hidden])) { --color-vista: 0, 184, 169; }
:root:has(#vista-pokedex:not([hidden])) { --color-vista: 232, 82, 110; }
:root:has(#vista-calculadora:not([hidden])) { --color-vista: 155, 110, 230; }
:root:has(#vista-normas:not([hidden])) { --color-vista: 205, 165, 100; }
:root:has(#vista-ruleta:not([hidden])) { --color-vista: 240, 150, 60; }
:root:has(#vista-randomizer:not([hidden])) { --color-vista: 160, 205, 80; }
:root:has(#vista-amigos:not([hidden])) { --color-vista: 80, 190, 215; }
:root:has(#vista-foro:not([hidden])) { --color-vista: 196, 128, 214; }
:root:has(#vista-logros:not([hidden])) { --color-vista: 241, 196, 15; }
:root:has(#vista-juegos:not([hidden])) { --color-vista: 76, 182, 92; }
:root:has(#vista-jugar:not([hidden])) { --color-vista: 186, 62, 102; }
:root:has(#vista-lucha:not([hidden])) { --color-vista: 222, 112, 52; }

/* Grupos desplegables del menú */

.grupo-menu summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.45rem;
  font-weight: bold;
  font-size: 0.95rem;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.grupo-menu summary::-webkit-details-marker {
  display: none;
}

.grupo-menu summary::after {
  content: "▾";
  margin-left: auto; /* la flecha, al borde derecho */
  transition: transform 0.2s;
}

.grupo-menu:not([open]) summary::after {
  transform: rotate(-90deg);
}

.submenu {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-left: 1.25rem;
  padding: 0.3rem 0 0.3rem 0.5rem;
  border-left: 2px solid rgba(var(--color-boton), 0.35);
}

/* ---------- Pantallas estrechas (móvil) ---------- */

@media (max-width: 760px) {
  .app {
    flex-direction: column;
  }

  .barra-lateral {
    position: static;
    height: auto;
    flex: none;
  }
}

/* Las casillas de texto, en el oscuro de la web (poco específicas: las que tienen el suyo, lo
   mantienen). Dentro de un recuadro o una tarjeta, que ya son de ese color, más oscuras. */
:where(input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="date"], textarea, select) {
  background-color: var(--t-panel);
  color: var(--t-texto);
}

:where(dialog, .tarjeta, .calc-lado, .calc-centro, .ruleta-panel, .pokedex-filtros) :where(input:not([type]), input[type="text"], input[type="search"], input[type="number"], input[type="email"], input[type="date"], textarea, select) {
  background-color: var(--t-fondo);
}

/* Sombrita en los botones y casillas de las barras de cada sección (no en las tarjetas de los Pokémon) */
#vista-crear .barra-superior :is(input, button),
#vista-equipos .barra-equipos :is(input, button, select),
#vista-rutas .barra-nuzlocke :is(input, button),
#vista-levelcaps .barra-nuzlocke button,
.barra-pokedex :is(input, select, button),
.ruleta-elegir,
.ruleta-borrar,
.ruleta-anadir,
.conjunto-barra button,
.selector-juegos button {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

:is(.logro, .logros-cabecera, .pokedex-filtros) {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* La casilla grande de los recuadros (importar...): casi como la tarjeta, sin teñir */
dialog textarea {
  background-color: var(--t-fondo-2);
}

/* ---------- Ventanas de cuenta y demás, con el estilo de las ventanas de un locke ----------
   Línea de color arriba, título grande, etiquetas legibles y el pie de botones separado por una
   línea de puntos. Vale para todas las «dialogo-sesion» (entrar, mote, perfil, fondos, ajustes,
   borrar cuenta...) y para algunas más. */

:is(.dialogo-sesion, #dialogo-avisos, #dialogo-importar, #dialogo-tipos, #dialogo-analisis, #dialogo-buscar-equipo) {
  padding: 1.5rem 1.6rem 1.3rem;
  border-top: 4px solid rgb(var(--color-vista));
  border-radius: 1rem;
}

:is(.dialogo-sesion, #dialogo-avisos, #dialogo-importar, #dialogo-tipos, #dialogo-analisis, #dialogo-buscar-equipo) h2 {
  margin: 0 0 0.9rem;
  font-size: 1.7rem;
  line-height: 1.05;
}

.dialogo-sesion label {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t-gris-2);
}

.dialogo-sesion label.casilla-sesion {
  color: var(--t-texto);
}

.dialogo-sesion input:not([type="checkbox"], [type="radio"], [type="file"]) {
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
}

:is(.dialogo-sesion, #dialogo-avisos, #dialogo-importar, #dialogo-tipos, #dialogo-analisis, #dialogo-buscar-equipo) .dialogo-botones {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--t-tinte), 0.12);
}

:is(.dialogo-sesion, #dialogo-avisos, #dialogo-importar, #dialogo-tipos, #dialogo-analisis, #dialogo-buscar-equipo) .dialogo-botones button {
  padding: 0.6rem 1.3rem;
  font-family: inherit;
  font-size: 1rem;
}

/* Notificaciones: cada aviso con la capa de color de su tipo, y el icono suelto (sin círculo) */
#dialogo-avisos {
  width: min(34rem, 94vw);
}

.aviso {
  gap: 0.75rem;
  padding: 0.7rem 0.8rem 0.7rem 0.9rem;
  border-radius: 0.7rem;
  box-shadow: inset 4px 0 0 rgba(var(--t-tinte), 0.2), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.aviso:has(.aviso-icono.amistad) {
  box-shadow: inset 4px 0 0 #3498db, 0 2px 6px rgba(0, 0, 0, 0.25);
}

.aviso:has(.aviso-icono.de-locke) {
  box-shadow: inset 4px 0 0 var(--color-locke, #3498db), 0 2px 6px rgba(0, 0, 0, 0.25);
}

.aviso-icono {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 0;
  background: none;
}

.aviso-icono .icono {
  width: 1.4rem;
  height: 1.4rem;
}

.aviso-texto {
  font-size: 0.95rem;
}

.aviso button {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.5rem;
}

/* ---------- Panel lateral: detalles con el estilo nuevo (líneas de puntos, foto con aro, Baloo 2) ---------- */

.sesion-foto {
  width: 2.3rem;
  height: 2.3rem;
  border: 2px solid rgb(var(--color-vista));
  box-sizing: border-box;
  object-fit: cover;
}

.sesion-nombre {
  font-family: var(--letra-titulos);
  font-size: 1.05rem;
}

/* Sin sesión, «Iniciar sesión» es la acción principal del panel */
.sesion-boton {
  background: rgb(var(--color-vista));
  color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}

.sesion-boton:hover {
  background: color-mix(in srgb, rgb(var(--color-vista)) 85%, white);
}