/* Secciones «Rutas» y «Level caps» */

/* ---------- Selector de región y juego ---------- */

.selector-regiones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border-bottom: 2px solid var(--t-panel);
  padding-bottom: 0.45rem;
}

.selector-regiones button {
  padding: 0.5rem 0.95rem;
  border: none;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--t-texto);
  font-weight: bold;
  font-size: 0.95rem;
  cursor: pointer;
}

.selector-regiones button:hover {
  background: rgba(var(--t-tinte), 0.08);
}

.selector-regiones button.activa {
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
}

/* Las pestañas de arriba del todo (regiones de Rutas y Level caps, Normas, Ruleta) cuelgan
   de la línea de color de la sección: la elegida se pega a ella, con una curva a cada lado */
:is(.selector-juego, #vista-normas, #vista-ruleta, #vista-randomizer, #vista-foro, #vista-juegos) > .selector-regiones:first-child {
  align-items: flex-start; /* cada pestaña de su largo: la elegida cuelga más */
  gap: 1.3rem;
  margin: -0.85rem 0 0 1.3rem;
  padding: 0;
  border-bottom: none;
}

/* Las no elegidas, solo la letra flotando; la elegida (y la que tiene el ratón encima) se
   rellena y se funde con la línea con una curva a cada lado (--curva: lo que mide cada una) */
:is(.selector-juego, #vista-normas, #vista-ruleta, #vista-randomizer, #vista-foro, #vista-juegos) > .selector-regiones:first-child button {
  --fondo: transparent;
  --curva: 1.1rem;
  position: relative;
  padding: 1.15rem 1rem 0.5rem;
  border-radius: 0 0 0.9rem 0.9rem;
  background: var(--fondo);
  color: var(--t-gris-2);
  font-family: var(--letra-titulos);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

:is(.selector-juego, #vista-normas, #vista-ruleta, #vista-randomizer, #vista-foro, #vista-juegos) > .selector-regiones:first-child button:hover {
  --fondo: rgba(var(--t-tinte), 0.08);
  background: var(--fondo);
  color: var(--t-texto);
}

:is(.selector-juego, #vista-normas, #vista-ruleta, #vista-randomizer, #vista-foro, #vista-juegos) > .selector-regiones:first-child button.activa {
  --fondo: rgb(var(--color-vista));
  padding-bottom: 0.8rem;
  background: var(--fondo);
  color: var(--t-tinta);
  font-weight: 800;
}

/* La curva que une cada pestaña con la línea, a los dos lados (en todas, cada una de su color) */
:is(.selector-juego, #vista-normas, #vista-ruleta, #vista-randomizer, #vista-foro, #vista-juegos) > .selector-regiones:first-child button::before,
:is(.selector-juego, #vista-normas, #vista-ruleta, #vista-randomizer, #vista-foro, #vista-juegos) > .selector-regiones:first-child button::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--curva);
  height: var(--curva);
}

:is(.selector-juego, #vista-normas, #vista-ruleta, #vista-randomizer, #vista-foro, #vista-juegos) > .selector-regiones:first-child button::before {
  right: 100%;
  background: radial-gradient(circle at 0 100%, transparent var(--curva), var(--fondo) calc(var(--curva) + 0.5px));
}

:is(.selector-juego, #vista-normas, #vista-ruleta, #vista-randomizer, #vista-foro, #vista-juegos) > .selector-regiones:first-child button::after {
  left: 100%;
  background: radial-gradient(circle at 100% 100%, transparent var(--curva), var(--fondo) calc(var(--curva) + 0.5px));
}

/* Al cambiar de pestaña, una copia del relleno (con sus curvas) viaja de la vieja a la nueva
   (js/comun/pestanas-deslizantes.js); las pestañas, por encima, y la nueva sin su relleno
   hasta que llega */
:is(.selector-juego, #vista-normas, #vista-ruleta, #vista-randomizer, #vista-foro, #vista-juegos) > .selector-regiones:first-child {
  position: relative;
}

:is(.selector-juego, #vista-normas, #vista-ruleta, #vista-randomizer, #vista-foro, #vista-juegos) > .selector-regiones:first-child button {
  z-index: 1;
}

:is(.selector-juego, #vista-normas, #vista-ruleta, #vista-randomizer, #vista-foro, #vista-juegos) > .selector-regiones:first-child button.pestana-llegando {
  --fondo: transparent;
  background: transparent;
  color: var(--t-texto);
}

.pestana-viajera {
  --curva: 1.1rem;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0 0 0.9rem 0.9rem;
  background: var(--fondo);
  pointer-events: none;
}

.pestana-viajera::before,
.pestana-viajera::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--curva);
  height: var(--curva);
}

.pestana-viajera::before {
  right: 100%;
  background: radial-gradient(circle at 0 100%, transparent var(--curva), var(--fondo) calc(var(--curva) + 0.5px));
}

.pestana-viajera::after {
  left: 100%;
  background: radial-gradient(circle at 100% 100%, transparent var(--curva), var(--fondo) calc(var(--curva) + 0.5px));
}

/* La de Logros, de pie sobre la línea: redondeada arriba y con las curvas abajo */
.pestana-viajera.de-pie {
  border-radius: 0.9rem 0.9rem 0 0;
}

.pestana-viajera.de-pie::before,
.pestana-viajera.de-pie::after {
  top: auto;
  bottom: 0;
}

.pestana-viajera.de-pie::before {
  background: radial-gradient(circle at 0 0, transparent var(--curva), var(--fondo) calc(var(--curva) + 0.5px));
}

.pestana-viajera.de-pie::after {
  background: radial-gradient(circle at 100% 0, transparent var(--curva), var(--fondo) calc(var(--curva) + 0.5px));
}
.selector-juegos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.6rem;
}

.selector-juegos button {
  padding: 0.4rem 0.85rem;
  border: 2px solid rgb(var(--color-vista));
  border-radius: 1rem;
  background: transparent;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
  font-weight: bold;
  font-size: 0.85rem;
  cursor: pointer;
}

.selector-juegos button.activo {
  background: rgb(var(--color-vista));
  color: var(--t-tinta-2);
}
/* ---------- Barra (buscador, progreso, desmarcar) ---------- */

.barra-nuzlocke {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  margin-top: 0.85rem;
}

.rutas-buscar {
  flex: 0 1 18rem;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 0.45rem;
  font-size: 0.93rem;
}

.rutas-progreso {
  font-weight: bold;
}

.boton-reiniciar {
  margin-left: auto;
  padding: 0.45rem 0.85rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-rojo-oscuro);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

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

/* Editar un juego propio: a la derecha, junto a «Desmarcar todo» */
.juego-editar {
  margin-left: auto;
  padding: 0.45rem 0.85rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
}

.juego-editar:hover {
  background: var(--t-control-2);
}

.juego-editar:not([hidden]) ~ .boton-reiniciar {
  margin-left: 0;
}

/* «Tus juegos»: la pestaña y el botón de crear uno */
.selector-juegos .juego-nuevo {
  border-style: dashed;
  border-color: rgba(var(--color-vista), 0.6);
}

.selector-juegos .juego-nuevo:hover {
  background: rgba(var(--color-vista), 0.1);
}

.rutas-vacio,
.caps-vacio {
  margin: 0.85rem 0 0;
  font-size: 0.95rem;
  opacity: 0.65;
}

.juego-editar.activo {
  background: var(--t-bien-oscuro);
  color: #fff;
}

.juego-editar.activo:hover {
  background: var(--t-bien);
}

/* ---------- Editar unos personalizados (Rutas y Level caps) ---------- */

/* Casillas oscuras, del mismo tono que las tarjetas, para que se vea igual que la lista */
.caps-editor-cabecera input,
.cap-editable input,
.rutas-editor-cabecera input,
.rutas-editor-cabecera select,
.rutas-ed-grupo input {
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(var(--t-tinte), 0.12);
  border-radius: 0.4rem;
  background: var(--t-fondo);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.88rem;
}

.caps-editor-cabecera input:focus,
.cap-editable input:focus,
.rutas-editor-cabecera input:focus,
.rutas-ed-grupo input:focus {
  outline: none;
  border-color: rgb(var(--color-vista));
}

/* Nombre de la lista y borrarla */
.caps-editor-cabecera,
.rutas-editor-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.caps-editor-cabecera .caps-ed-nombre,
.rutas-editor-cabecera .rutas-ed-nombre {
  flex: 0 1 18rem;
  font-size: 1.05rem;
  font-weight: bold;
}

.caps-ed-borrar,
.rutas-ed-borrar,
.caps-ed-anadir,
.rutas-ed-anadir-apartado {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  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;
}

.caps-ed-borrar,
.rutas-ed-borrar {
  margin-left: auto;
}

.caps-ed-borrar:hover,
.rutas-ed-borrar:hover {
  background: var(--t-rojo-oscuro);
}

.caps-ed-anadir:hover,
.rutas-ed-anadir-apartado:hover {
  background: var(--t-control);
}

.caps-ed-anadir {
  width: 100%;
  justify-content: center;
  border: 2px dashed rgba(var(--t-tinte), 0.15);
  background: transparent;
}

.caps-editor-cabecera .icono,
.rutas-editor-cabecera .icono,
.caps-ed-anadir .icono,
.rutas-ed-anadir-apartado .icono {
  width: 0.9rem;
  height: 0.9rem;
}

/* Un combate: imagen, título / nombre / lugar, nivel y botones */
.cap-editable {
  gap: 0.6rem;
}

.cap-ed-imagen {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px dashed rgba(var(--t-tinte), 0.25);
  border-radius: 0.4rem;
  background: transparent;
  color: rgba(var(--t-texto-rgb), 0.5);
  cursor: pointer;
}

.cap-ed-imagen.con-imagen {
  border-color: transparent;
}

.cap-ed-imagen:hover {
  border-color: rgb(var(--color-vista));
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.cap-ed-imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.cap-ed-imagen .icono {
  width: 1.1rem;
  height: 1.1rem;
}

.cap-ed-campos {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.4rem;
}

.cap-ed-campos .cap-ed-etiqueta {
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: bold;
}

.cap-ed-campos .cap-ed-nombre {
  font-weight: bold;
}

/* Más fuerte que «.cap input» y «.cap label», que son para la casilla de superado */
.cap.cap-editable input {
  width: 100%;
  height: auto;
  margin: 0;
  box-sizing: border-box;
  accent-color: auto;
  cursor: text;
}

.cap .cap-ed-nivel {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: bold;
  white-space: nowrap;
  cursor: default;
}

.cap.cap-editable .cap-ed-nivel input {
  width: 4.4rem;
  font-weight: bold;
}

.cap-ed-acciones {
  display: flex;
  gap: 0.2rem;
}

.cap-ed-acciones button,
.rutas-ed-quitar-apartado,
.ruta-ed-quitar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem;
  border: none;
  border-radius: 0.35rem;
  background: transparent;
  color: rgba(var(--t-texto-rgb), 0.6);
  cursor: pointer;
}

.cap-ed-acciones button:hover:not(:disabled) {
  background: var(--t-control);
  color: var(--t-texto);
}

.cap-ed-acciones .cap-ed-quitar:hover,
.rutas-ed-quitar-apartado:hover,
.ruta-ed-quitar:hover {
  background: var(--t-rojo-oscuro);
  color: #fff;
}

.cap-ed-acciones button:disabled {
  opacity: 0.25;
  cursor: default;
}

.cap-ed-acciones .icono,
.rutas-ed-quitar-apartado .icono,
.ruta-ed-quitar .icono {
  width: 0.9rem;
  height: 0.9rem;
}

/* Rutas: el título del apartado como casilla, con su rayita detrás */
.rutas-ed-grupo h3 input {
  flex: 0 1 16rem;
  color: var(--color-apartado);
  font-size: 1rem;
  font-weight: bold;
}

/* Un lugar ya puesto: como un botón de ruta, con su X */
.ruta-ed {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.25rem 0.25rem 0.6rem;
  border-radius: 0.45rem;
  background: var(--t-panel);
  font-size: 0.88rem;
  font-weight: bold;
}

.ruta-ed > span {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Añadir lugar: la casilla va en una caja para que la lista de sugerencias salga debajo */
.ruta-ed-nuevo-caja {
  position: relative;
  display: flex;
  flex: 0 1 14rem;
}

.rutas-ed-grupo .ruta-ed-nuevo {
  flex: 1;
  width: 100%;
  border-style: dashed;
  background: transparent;
}

.ruta-ed-nuevo-caja .sugerencias {
  min-width: 16rem;
}

.rutas-ed-anadir-apartado {
  margin-top: 1rem;
}

/* ---------- Ventana de la imagen de un combate ---------- */

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

.imagen-barra {
  display: flex;
  gap: 0.5rem;
}

.imagen-barra .imagen-buscar {
  flex: 1;
  min-width: 0;
}

.imagen-subir {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.85rem;
  white-space: nowrap;
}

.imagen-subir .icono {
  width: 1rem;
  height: 1rem;
}

.imagen-personajes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: 0.4rem;
  height: 50vh;
  margin-top: 0.7rem;
  overflow-y: auto;
  align-content: start;
}

.imagen-personaje {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.3rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-fondo-2);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
}

.imagen-personaje:hover {
  background: var(--t-panel-3);
  box-shadow: inset 0 0 0 2px rgb(var(--color-vista));
}

.imagen-personaje img {
  width: 3.2rem;
  height: 3.2rem;
  object-fit: contain;
  image-rendering: pixelated;
}

.imagen-personaje span {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.imagen-ninguno {
  grid-column: 1 / -1;
  opacity: 0.6;
}

@media (max-width: 760px) {
  .cap-ed-campos {
    grid-template-columns: 1fr;
  }
}

/* ---------- Rutas ---------- */

/* Un color por apartado, con su rayita al lado del título (igual que en «Normas»).
   El amarillo es el de por defecto: los juegos con apartados propios (las islas de
   Alola, por ejemplo) no tienen color asignado y se quedan con ese. */
.rutas-grupo {
  --color-apartado: rgb(var(--color-vista));
}


.rutas-grupo h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0.5rem;
  font-size: 1.25rem;
  color: var(--color-apartado);
}

.rutas-grupo h3::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: var(--color-apartado);
  opacity: 0.35;
}

/* Cada tarjeta del ancho de su nombre (en la lista lo mide js/rutas/index.js) y cada fila
   estirada hasta llenar el ancho, como un texto justificado. La última no: el ::after se
   queda con lo que sobra. Igual en el editor de los personalizados. */
.rutas-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem; /* de lado, sitio para la capa de color que asoma a la izquierda */
  padding-left: 0.3rem;
}

.rutas-botones::after {
  content: "";
  flex-grow: 1000;
}

.rutas-botones > .ruta,
.rutas-botones > .ruta-ed {
  flex-grow: 1;
  min-width: 0;
  max-width: 100%;
}

/* Al medir: cada una a su tamaño, sin estirar ni encoger */
.rutas-midiendo .rutas-botones > .ruta {
  flex: none;
  max-width: none;
}

/* El lugar (y debajo el detalle de los eventos y el mote de la captura) */
.ruta-textos {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
}

.ruta-detalle {
  font-weight: normal;
  font-size: 0.82rem;
  opacity: 0.85;
}

/* El nombre y el detalle, cada uno en una sola línea. La tarjeta mide lo que ellos; esto es
   por si ni así caben (un móvil muy estrecho: cortado con «...») */
.ruta-lugar,
.ruta-detalle {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Cada lugar, una fila baja: a la izquierda el retrato de Mundo Misterioso de lo que se
   capturó (o su hueco) y al lado el nombre, con el mote debajo. Todas de la misma altura,
   para que quepan muchas de un vistazo. */
.ruta {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.9rem;
  box-sizing: border-box;
  padding: 0.3rem 0.7rem 0.3rem 0.35rem;
  border: 1.5px dashed rgba(var(--t-tinte), 0.18);
  border-radius: 0.8rem;
  background: transparent;
  color: var(--t-gris-2);
  font-size: 0.9rem;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.ruta:hover {
  border-color: rgba(var(--t-tinte), 0.35);
  color: var(--t-texto);
}

/* Lugar ya usado: la tarjeta llena y teñida del color de la sección, con su borde, la capa
   asomando por la izquierda (como las filas de Level caps) y un sello ✓ en la esquina. Que
   se note de un vistazo dónde ya has capturado. */
.ruta.usada {
  position: relative;
  border: 1.5px solid rgba(var(--color-vista), 0.6);
  background: color-mix(in srgb, rgb(var(--color-vista)) 20%, var(--t-panel));
  color: var(--t-texto);
  box-shadow: -0.3rem 0 0 rgb(var(--color-vista)), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.ruta.usada:hover {
  border-color: rgb(var(--color-vista));
}

.ruta.usada::after {
  content: "✓";
  position: absolute;
  top: -0.45rem;
  right: -0.4rem;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--t-fondo);
  pointer-events: none;
}

.ruta-mote {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: var(--letra-titulos);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.1;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

/* El retrato (js/rutas/capturas.js) y su hueco en las libres: un círculo del mismo tamaño */
.ruta-captura,
.ruta-hueco {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  box-sizing: border-box;
  border-radius: 50%;
  overflow: hidden;
}

.ruta-hueco {
  border: 1.5px dashed rgba(var(--t-tinte), 0.14);
}

.ruta-captura {
  background: var(--t-fondo);
  transition: transform 0.15s;
}

/* Marcado pero sin apuntar qué se cogió: una «+» para apuntarlo */
.ruta-captura:not(.con) {
  border: 1.5px dashed rgb(var(--color-vista));
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.ruta-captura:hover {
  transform: scale(1.12);
}

.ruta-captura .icono {
  width: 0.85rem;
  height: 0.85rem;
}

.ruta-captura-cara {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* Sin captura («No la conseguí»): el lugar sigue gastado, pero con una ✗ roja en vez del
   retrato y la capa de color en rojo */
.ruta.usada.fallada {
  border-color: rgba(var(--t-mal-rgb), 0.55);
  background: color-mix(in srgb, var(--t-mal) 14%, var(--t-panel));
  box-shadow: -0.3rem 0 0 var(--t-mal), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.ruta-captura.fallada {
  border: 1.5px solid var(--t-mal);
  color: var(--t-mal);
}

.ruta.fallada .ruta-mote {
  color: var(--t-mal);
}

#dialogo-captura {
  overflow: visible; /* que las sugerencias no se corten */
}

.captura-campo-pokemon {
  position: relative;
}

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

/* ---------- Level caps ---------- */

/* El color de cada combate: el de la sección y, el Alto Mando y demás, el suyo. Es el de la
   capa que asoma por la izquierda de sus filas. */
.cap {
  --capa: rgb(var(--color-vista));
}

.alto-mando { --capa: #9b59b6; }
.campeon    { --capa: #c0392b; }
.historia   { --capa: #3498db; }
.extra      { --capa: #7f8c8d; }


/* ---------- Arriba: el progreso y las medallas ---------- */

/* Se queda pegado arriba mientras bajas por la lista: el progreso y las medallas siempre a la vista */
.caps-resumen {
  position: sticky;
  top: 0.6rem;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.6rem;
  margin-top: 0.95rem;
  padding: 0.8rem 1rem;
  border-radius: 1rem;
  background: var(--t-panel);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.caps-progreso {
  flex: 1 1 14rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.caps-progreso-texto {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
  font-weight: 800;
}

.caps-progreso-texto span:last-child {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.caps-pista {
  height: 0.6rem;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--t-control);
}

.caps-pista i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgb(var(--color-vista));
  transition: width 0.3s;
}

.caps-medallas-fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.caps-medallas-fila:empty {
  display: none;
}

/* Multiplicador y «Desmarcar todo», a la derecha de la franja */
.caps-resumen .multiplicador {
  margin-left: auto;
}

.caps-resumen .multiplicador button {
  background: var(--t-control);
}

.caps-resumen .multiplicador button:hover {
  background: var(--t-control-2);
}

.caps-resumen .boton-reiniciar {
  margin-left: 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

/* La barra de arriba solo lleva «Editar»: sin él, no se ve */
#vista-levelcaps .barra-nuzlocke:has(> .juego-editar[hidden]) {
  display: none;
}

/* Las que aún no tienes, en gris */
.caps-medalla-imagen {
  width: 2.3rem;
  height: 2.3rem;
  object-fit: contain;
  filter: grayscale(1) opacity(0.35);
  transition: filter 0.2s;
}

.caps-medalla-imagen.ganada {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* ---------- La lista, como una ruta ----------
   Un riel de puntos une los combates; cada fila lleva su barra de nivel, que llena el ancho y
   deja ver cómo sube el cap. El que toca ahora se despliega, con su retrato grande. */

.caps-ruta .cap {
  position: relative;
  display: block;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.caps-ruta .cap label {
  display: grid;
  grid-template-columns: 2.4rem 3.4rem minmax(9rem, 1.1fr) minmax(8rem, 2fr) 5rem;
  align-items: center;
  gap: 0 1rem;
  box-sizing: border-box;
  min-height: 4.3rem;
  padding: 0.5rem 1rem 0.5rem 0;
}

/* El riel */
.caps-ruta .cap::before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 0;
  bottom: 0;
  border-left: 2px dashed rgba(var(--t-tinte), 0.2);
}

.caps-ruta .cap:not(.cap + .cap)::before {
  top: 50%;
}

.caps-ruta .cap:not(:has(+ .cap))::before {
  bottom: 50%;
}

/* La casilla de superado es el punto del riel */
.caps-ruta .cap input {
  appearance: none;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin: 0 0 0 0.4rem;
  border: 2px solid var(--capa);
  border-radius: 50%;
  background: var(--t-fondo);
}

.caps-ruta .cap input:checked {
  border-color: var(--t-bien-oscuro);
  background: var(--t-bien-oscuro);
}

.caps-ruta .cap input:checked::after {
  content: "✓";
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}

.caps-ruta .cap input:focus-visible {
  outline: 2px solid rgb(var(--color-vista));
  outline-offset: 2px;
}

.caps-ruta .cap-retrato {
  width: 3.4rem;
  height: 3.4rem;
}

.caps-ruta .cap-nombre {
  font-size: 1.25rem;
}

.cap-barra {
  display: block;
  height: 0.75rem;
  overflow: hidden;
  border-radius: 1rem;
  background: var(--t-control);
}

.cap-barra i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--capa);
}

.cap-nivel-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.caps-ruta .cap-nivel {
  font-size: 1.4rem;
}

.cap-leyenda,
.cap-chapa {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.cap-leyenda {
  opacity: 0.65;
}

.cap-chapa {
  color: color-mix(in srgb, var(--capa) var(--t-vivo), black);
}

/* Superado: apagado, menos el punto verde */
.caps-ruta .cap.superado {
  opacity: 1;
}

.caps-ruta .cap.superado label > :not(input) {
  opacity: 0.5;
}

/* Al marcar un combate, el marco viaja al siguiente (js/levelcaps/index.js, moverMarco): una
   copia por debajo de las filas, y la fila de destino sin el suyo hasta que llega */
.caps-ruta {
  position: relative;
}

.caps-marco {
  position: absolute;
  margin: 0;
  list-style: none;
  pointer-events: none;
}

.caps-ruta .cap.siguiente.marco-llegando {
  background: transparent;
  box-shadow: none;
}

/* El que toca ahora, desplegado */
.caps-ruta .cap.siguiente {
  margin: 0.3rem 0;
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--capa) 16%, var(--t-panel));
  box-shadow: -0.3rem 0 0 var(--capa), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.caps-ruta .cap.siguiente::before {
  display: none;
}

.caps-ruta .cap.siguiente label {
  grid-template-columns: 2.4rem 6rem minmax(9rem, 1.1fr) minmax(8rem, 2fr) 6.5rem;
  padding: 0.9rem 1rem 0.9rem 0;
}

.caps-ruta .cap.siguiente .cap-retrato {
  width: 6rem;
  height: 6rem;
}

.caps-ruta .cap.siguiente .cap-nombre {
  font-size: 1.9rem;
}

.caps-ruta .cap.siguiente .cap-barra {
  height: 1rem;
}

.caps-ruta .cap.siguiente .cap-nivel {
  font-size: 3rem;
  line-height: 1;
  color: color-mix(in srgb, var(--capa) var(--t-vivo), black);
}

@media (max-width: 760px) {
  .caps-ruta .cap label,
  .caps-ruta .cap.siguiente label {
    grid-template-columns: 2rem 3.2rem minmax(0, 1fr) 4rem;
  }

  .caps-ruta .cap.siguiente label {
    grid-template-columns: 2rem 4.4rem minmax(0, 1fr) 4.5rem;
  }

  .cap-barra {
    display: none;
  }

  .caps-ruta .cap::before {
    left: 1rem;
  }

  .caps-ruta .cap.siguiente .cap-retrato {
    width: 4.4rem;
    height: 4.4rem;
  }

  .caps-ruta .cap.siguiente .cap-nombre {
    font-size: 1.4rem;
  }

  .caps-ruta .cap.siguiente .cap-nivel {
    font-size: 2.2rem;
  }
}
/* Multiplicador de nivel (a la izquierda de «Desmarcar todo») */
.multiplicador {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: bold;
}

.multiplicador button {
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--t-panel);
  color: var(--t-texto);
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
}

.multiplicador button:hover {
  background: var(--t-control);
}

.multiplicador-valor {
  min-width: 3rem;
  text-align: center;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

/* Con el multiplicador a su izquierda, «Desmarcar todo» ya no necesita empujarse a la derecha */
.multiplicador ~ .boton-reiniciar,
.multiplicador ~ .juego-editar {
  margin-left: 0;
}

.caps-lista {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0 0 0 0.3rem; /* sitio para la capa de color */
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* Lo de cada combate: arriba la etiqueta y el lugar, debajo el nombre */
.cap-textos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Cada combate, con la capa de su color asomando por la izquierda */
.cap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.35rem 1rem 0.35rem 0.75rem;
  border-radius: 0.8rem;
  background: var(--t-panel);
  box-shadow: -0.3rem 0 0 var(--capa);
}

.cap label {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  cursor: pointer;
}

.cap input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--t-bien-oscuro);
  cursor: pointer;
}

/* Retrato del entrenador (de momento solo Rojo Fuego / Verde Hoja) */
.cap-retrato {
  flex: none;
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  image-rendering: pixelated;
}

.cap-etiqueta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

.cap-nombre {
  font-family: var(--letra-titulos);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.15;
}

.cap-lugar {
  letter-spacing: normal;
  text-transform: none;
  font-weight: 600;
}

.cap-nivel {
  font-family: var(--letra-titulos);
  font-weight: 800;
  font-size: 1.3rem;
  white-space: nowrap;
}

.cap.superado {
  opacity: 0.45;
}

/* Separador de tramo dentro de la lista (Alto Mando, Campeón), con su rayita de color */
.caps-tramo {
  --color-tramo: #9b59b6;
}

.caps-tramo.campeon {
  --color-tramo: #c0392b;
}

.caps-tramo h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.85rem 0 0.1rem;
  font-size: 1.05rem;
  color: var(--color-tramo);
}

.caps-tramo h3::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: var(--color-tramo);
  opacity: 0.35;
}

/* Una parte opcional (Kanto en HeartGold / SoulSilver): su título con la casilla para sacarla */
.caps-tramo.caps-opcional {
  --color-tramo: #2e86c1;
}

.caps-opcional label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  cursor: pointer;
  opacity: 0.85;
}

/* Aviso de los gimnasios en cualquier orden (GS Vitro) */
.caps-nota {
  margin: 0.6rem 0 0.2rem;
  font-size: 0.88rem;
  opacity: 0.75;
}

/* Título de una sección aparte dentro de la lista (p. ej. «Líderes de otras regiones») */
.caps-seccion h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.85rem 0 0.1rem;
  font-size: 1.05rem;
  color: #3498db;
}

.caps-seccion h3::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: #3498db;
  opacity: 0.35;
}

.cap.superado .cap-nombre {
  text-decoration: line-through;
}

/* ---------- Normas ---------- */

/* Sin max-width: las normas ocupan todo el ancho, pero en columnas (abajo, .normas-grupo ul)
   para que las líneas no salgan larguísimas */
.normas {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 0.85rem;
}

/* Pestañas: las mismas que las regiones de Rutas y Level caps, con icono si lo llevan */
.normas-pestanas button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.normas-pestanas .icono {
  width: 0.95rem;
  height: 0.95rem;
}

/* La del locke, del color dorado de Versus (de ahí viene) */
.normas-pestanas .pestana-locke {
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.normas-pestanas .pestana-locke.activa {
  background: #f1c40f;
  color: var(--t-tinta-2);
}

.pestana-cerrar {
  display: inline-flex;
  margin-right: -0.3rem;
  padding: 0.1rem;
  border-radius: 0.3rem;
  opacity: 0.7;
}

.pestana-cerrar:hover {
  background: rgba(var(--t-oscurecer), 0.2);
  opacity: 1;
}

.pestana-cerrar .icono {
  width: 0.8rem;
  height: 0.8rem;
}

.normas-pestanas .pestana-nueva {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

/* Casilla de «incluye las generales», renombrar y borrar el conjunto */
.conjunto-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.conjunto-casilla {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-right: auto;
  font-size: 0.92rem;
  cursor: pointer;
}

.conjunto-casilla input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: rgb(var(--color-vista));
  cursor: pointer;
}

.conjunto-barra button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-panel);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: bold;
  cursor: pointer;
}

.conjunto-barra button:hover {
  background: var(--t-control);
}

.conjunto-barra .conjunto-borrar:hover {
  background: var(--t-rojo-oscuro);
}

.conjunto-barra .icono {
  width: 0.9rem;
  height: 0.9rem;
}

/* Las generales dentro de un conjunto: solo de consulta, un poco apagadas */
.normas-grupo.incluidas {
  opacity: 0.75;
}

.normas-grupo h2 small {
  font-size: 0.85rem;
  font-weight: normal;
  opacity: 0.75;
}

.normas-grupo h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-size: 1.25rem;
  color: var(--color-apartado);
}

/* Rayita del color del apartado a la derecha del título */
.normas-grupo h2::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: var(--color-apartado);
  opacity: 0.35;
}

/* Un color por apartado (el del locke lo pone su tipo, en línea) */
.normas-grupo.generales { --color-apartado: rgb(var(--color-vista)); }
.normas-grupo.mias      { --color-apartado: rgb(var(--color-vista)); }

.normas-grupo h2 .icono {
  width: 1.2rem;
  height: 1.2rem;
}

/* Botones del título (nueva norma, cerrar las del locke): detrás de la rayita */
.normas-grupo h2 button {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-panel);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: bold;
  cursor: pointer;
}

.normas-grupo h2 button:hover {
  background: var(--color-apartado);
  color: var(--t-tinta);
}

.normas-grupo h2 button .icono {
  width: 0.9rem;
  height: 0.9rem;
}

.normas-grupo h2::after {
  order: 1;
}

.normas-vacio {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.7;
}

/* Las de un locke, destacadas: fondo del color de su tipo */
.normas-grupo.del-locke {
  padding: 0.85rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--color-apartado) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-apartado) 45%, transparent);
}

/* Cambiar / borrar una de las mías: a la derecha, al pasar el ratón */
.normas-grupo li {
  position: relative;
}

.norma-acciones {
  position: absolute;
  top: 0.45rem;
  right: 0.5rem;
  display: flex;
  gap: 0.3rem;
  opacity: 0;
  transition: opacity 0.15s;
}

.normas-grupo li:hover .norma-acciones,
.norma-acciones:focus-within {
  opacity: 1;
}

.norma-acciones button {
  display: flex;
  padding: 0.35rem;
  border: none;
  border-radius: 0.4rem;
  background: var(--t-control);
  color: var(--t-texto);
  cursor: pointer;
}

.norma-acciones button:hover {
  background: var(--t-control-2);
}

.norma-acciones .norma-borrar:hover {
  background: var(--t-rojo-oscuro);
}

.norma-acciones .icono {
  width: 0.95rem;
  height: 0.95rem;
}

/* En el móvil no hay «pasar el ratón»: siempre a la vista */
@media (hover: none) {
  .norma-acciones {
    opacity: 1;
  }
}

/* Que el texto no se meta debajo de los botones */
.normas-grupo.mias li {
  padding-right: 5rem;
}

#dialogo-norma textarea {
  font-family: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}

.normas-grupo ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr));
  gap: 0.6rem;
}

.normas-grupo li {
  padding: 0.6rem 0.85rem;
  border-left: 0.3rem solid var(--color-apartado);
  border-radius: 0.45rem;
  background: var(--t-panel);
}

.normas-grupo li p {
  margin: 0.2rem 0 0;
  font-size: 0.93rem;
  opacity: 0.85;
}


/* ---------- Normas: sin una franja de color por cada norma ----------
   Cada norma es una tarjeta lisa; el color queda para el título del apartado y para el bloque
   de las normas de un locke (que sí identifica de quién son). */

.normas-grupo h2 {
  font-size: 1.6rem;
  color: var(--t-texto);
}

.normas-grupo h2 .icono {
  color: var(--color-apartado);
}

.normas-grupo h2 small {
  font-family: var(--letra-titulos);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-apartado);
  opacity: 1;
}

.normas-grupo h2::after {
  height: 1px;
  background: rgba(var(--t-tinte), 0.18);
  opacity: 1;
}

.normas-grupo li {
  padding: 0.75rem 1rem;
  border-left: none;
  border-radius: 0.7rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.normas-grupo li strong {
  font-family: var(--letra-titulos);
  font-size: 1.1rem;
  font-weight: 800;
}

.normas-grupo.del-locke {
  border-radius: 0.9rem;
}