/* Logros: la sección, la pestaña del perfil y el aviso al conseguir uno (js/comun/logros.js) */

/* ---------- Insignia: el círculo con el icono, del color de su nivel ---------- */

.logro-insignia {
  --color-nivel: #cd7f32;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color-nivel) 55%, #fff), var(--color-nivel) 60%, color-mix(in srgb, var(--color-nivel) 70%, #000));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-nivel) 60%, #000), 0 3px 8px rgba(0, 0, 0, 0.4);
  color: var(--t-tinta);
}

.logro-insignia .icono {
  width: 1.35rem;
  height: 1.35rem;
}

/* Los de tipo: el icono del tipo (es una máscara, toma el color del texto) */
.logro-insignia .icono-tipo-insignia {
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}

.logro-insignia.bronce  { --color-nivel: #cd7f32; }
.logro-insignia.plata   { --color-nivel: #c3cad6; }
.logro-insignia.oro     { --color-nivel: #f1c40f; }
.logro-insignia.platino { --color-nivel: #7fe0f0; }

/* Sin conseguir: gris y con un candado */
.logro-insignia.bloqueado {
  background: var(--t-panel-3);
  box-shadow: 0 0 0 2px var(--t-control);
  color: rgba(var(--t-texto-rgb), 0.35);
}

/* ---------- Sección «Logros» ---------- */

.logros-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-bottom: 0.9rem;
  padding: 1rem 1.2rem;
  border-radius: 0.7rem;
  background: var(--t-panel);
}

.logros-cabecera > .logro-insignia {
  width: 3.8rem;
  height: 3.8rem;
}

.logros-cabecera > .logro-insignia .icono {
  width: 1.9rem;
  height: 1.9rem;
}

.logros-total {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 14rem;
}

.logros-total strong {
  font-size: 1.8rem;
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.logros-total strong small {
  font-size: 1.1rem;
  color: rgba(var(--t-texto-rgb), 0.6);
}

.logros-aviso {
  font-size: 0.85rem;
  opacity: 0.7;
}

.logros-niveles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.logros-nivel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.logros-nivel .logro-insignia {
  width: 1.4rem;
  height: 1.4rem;
}

.logros-nivel .logro-insignia .icono {
  width: 0.75rem;
  height: 0.75rem;
}

.logros-nivel strong {
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

/* Barra de lo que llevas */
.logro-barra {
  height: 0.4rem;
  border-radius: 1rem;
  background: var(--t-fondo);
  overflow: hidden;
}

.logro-barra.grande {
  height: 0.6rem;
  max-width: 24rem;
}

.logro-barra span {
  display: block;
  height: 100%;
  border-radius: 1rem;
  background: linear-gradient(90deg, #e67e22, #f1c40f);
}

/* Todos / Conseguidos / Por conseguir: pestañas que salen de la línea dorada de debajo (como
   las de Rutas, pero al revés), con una curva a cada lado que las une a ella */
.logros-filtro {
  gap: 1.3rem;
  margin-bottom: 0.4rem;
  padding: 0 0 0 1.3rem;
  border-bottom: 3px solid rgb(var(--color-vista));
}

/* Las mismas pestañas que las de arriba de Rutas o Level caps (css/nuzlocke.css), pero de pie
   sobre la línea: las no elegidas, solo la letra; la elegida (y la del ratón), con su fondo y
   su curva a cada lado, y del color de la sección y un poco más alta */
.logros-filtro {
  align-items: flex-end;
}

.logros-filtro button {
  --fondo: transparent;
  --curva: 1.1rem;
  position: relative;
  padding: 0.5rem 1rem 0.55rem;
  border-radius: 0.9rem 0.9rem 0 0;
  background: var(--fondo);
  color: var(--t-gris-2);
  font-family: var(--letra-titulos);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

.logros-filtro button:hover {
  --fondo: rgba(var(--t-tinte), 0.08);
  background: var(--fondo);
  color: var(--t-texto);
}

.logros-filtro button.activa {
  --fondo: rgb(var(--color-vista));
  padding-top: 0.8rem;
  background: var(--fondo);
  color: var(--t-tinta);
  font-weight: 800;
}

/* Al cambiar, el relleno viaja de una a otra (js/comun/pestanas-deslizantes.js; la copia que
   viaja, .pestana-viajera.de-pie, en css/nuzlocke.css) */
.logros-filtro {
  position: relative;
}

.logros-filtro button {
  z-index: 1;
}

.logros-filtro button.pestana-llegando {
  --fondo: transparent;
  background: transparent;
  color: var(--t-texto);
}

.logros-filtro button::before,
.logros-filtro button::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: var(--curva);
  height: var(--curva);
}

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

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

.logros-grupo h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0.6rem;
  font-size: 1.1rem;
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.logros-grupo h2 small {
  font-size: 0.85rem;
  font-weight: normal;
  color: rgba(var(--t-texto-rgb), 0.6);
}

.logros-grupo h2::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: #f1c40f;
  opacity: 0.25;
}

.logros-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
  gap: 0.6rem;
}

.logro {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.6rem;
  background: var(--t-panel);
  opacity: 0.7;
}

.logro.conseguido {
  opacity: 1;
  box-shadow: inset 0 0 0 1px rgba(241, 196, 15, 0.35);
}

.logro-texto {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.logro-texto strong {
  font-size: 0.95rem;
}

.logro-descripcion {
  font-size: 0.82rem;
  opacity: 0.75;
}

.logro-fecha {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
}

.logro-fecha .icono {
  width: 0.8rem;
  height: 0.8rem;
}

.logro-cuenta {
  font-size: 0.75rem;
  opacity: 0.7;
}

.logro-nivel {
  position: absolute;
  top: 0.45rem;
  right: 0.6rem;
  font-size: 0.65rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.45;
}

/* A la derecha, en columna: el nivel arriba, justo debajo la muestra del fondo que da (si da
   alguno) y los Pokédólares abajo del todo, en la esquina */
.logro-lado {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.3rem;
  flex: none;
  margin-right: -0.25rem; /* toda la columna, un pelín hacia el borde: así los tres acaban igual */
}

.logro-lado .logro-nivel {
  position: static;
  margin-top: -0.3rem;
  /* El espaciado entre letras deja un hueco después de la última: fuera, para que acabe donde
     acaban la muestra del fondo y los Pokédólares */
  margin-right: -0.08em;
}

.logro-lado .logro-fichas {
  margin-top: auto;
}

.logro-premio {
  position: relative;
  padding: 0.2rem 0.5rem;
  border-radius: 0.35rem;
  background-color: var(--t-fondo);
  box-shadow: inset 0 0 0 1px rgba(var(--t-tinte), 0.15);
  font-size: 0.66rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--t-texto);
  cursor: help;
}

.logro-premio.fondo-plata { box-shadow: inset 0 0 0 1px rgba(195, 202, 214, 0.6); }
.logro-premio.fondo-oro { box-shadow: inset 0 0 0 1px rgba(241, 196, 15, 0.6); }
.logro-premio.fondo-platino { box-shadow: inset 0 0 0 1px rgba(214, 206, 246, 0.7); }
.logro-premio.fondo-tipo { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-tipo) 70%, transparent); }

/* El marco liso que da cada logro de tipo: la plaquita con el borde del color del tipo (--marco,
   de las clases .marco-brasa... de css/juegos.css) */
.logro-premio.logro-premio-marco { box-shadow: inset 0 0 0 2px var(--marco); }

/* En los de tipo, el mosaico más pequeño (si no, en algo tan chico no se ve el icono) */
.logro-premio.fondo-tipo::before {
  -webkit-mask-size: 1.6rem 1.6rem;
  mask-size: 1.6rem 1.6rem;
  opacity: 0.45;
}

.logros-vacio {
  opacity: 0.6;
}

/* ---------- Título (un logro, debajo del nombre) ---------- */

/* Una plaquita: del tamaño del texto, con un fondo y un borde del color de su nivel (los de
   la Tienda llevan además su propio diseño: css/juegos.css, .placa-tienda) */
.perfil-titulo {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: -0.15rem auto 0.1rem;
  padding: 0.18rem 0.7rem;
  border: none;
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--color-nivel, #f1c40f) 14%, var(--t-panel-3));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-nivel, #f1c40f) 55%, transparent);
  color: var(--color-nivel, #f1c40f);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: bold;
  letter-spacing: 0.03em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

button.perfil-titulo {
  cursor: pointer;
}

button.perfil-titulo:hover:not(:disabled) {
  background: rgba(var(--t-tinte), 0.07);
}

.perfil-titulo.sin-titulo {
  background: transparent;
  box-shadow: none;
  color: rgba(var(--t-texto-rgb), 0.45);
  font-weight: normal;
  font-size: 0.85rem;
}

.perfil-titulo.nivel-bronce { --color-nivel: #cd7f32; }
.perfil-titulo.nivel-plata { --color-nivel: #c3cad6; }
.perfil-titulo.nivel-oro { --color-nivel: #f1c40f; }
.perfil-titulo.nivel-platino { --color-nivel: #7fe0f0; }

/* ---------- Aviso al conseguir uno ---------- */

.avisos-logro {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}

.aviso-logro {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 15rem;
  padding: 0.7rem 1rem 0.7rem 0.75rem;
  border: none;
  border-radius: 0.7rem;
  background: var(--t-panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(241, 196, 15, 0.5);
  color: var(--t-texto);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  animation: logro-entra 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

.aviso-logro span {
  display: flex;
  flex-direction: column;
}

.aviso-logro small {
  font-size: 0.72rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.aviso-logro strong {
  font-size: 0.95rem;
}

.aviso-logro.saliendo {
  opacity: 0;
  transform: translateX(1rem);
  transition: opacity 0.5s, transform 0.5s;
}

@keyframes logro-entra {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.9);
  }
}

/* ---------- Rediseño: capa de color por nivel, números grandes y líneas de puntos ---------- */

/* La cabecera: el trofeo, el total en grande y los cuatro niveles en una tira */
.logros-cabecera {
  padding: 1.1rem 1.3rem 1.1rem 1.1rem;
  border-radius: 0.9rem;
  background:
    linear-gradient(100deg, color-mix(in srgb, rgb(var(--color-vista)) 14%, transparent), transparent 60%),
    var(--t-panel);
  box-shadow: inset 5px 0 0 rgb(var(--color-vista)), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.logros-total strong {
  font-family: var(--letra-titulos);
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1;
}

.logros-total strong small {
  font-size: 1.4rem;
}

.logros-niveles {
  gap: 0;
  border: 1px dashed rgba(var(--t-tinte), 0.3);
  border-radius: 0.7rem;
  background: var(--t-fondo-2);
}

.logros-nivel {
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 1rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.logros-nivel + .logros-nivel {
  border-left: 1px dashed rgba(var(--t-tinte), 0.25);
}

.logros-nivel .logro-insignia {
  display: none;
}

.logros-nivel strong {
  order: -1;
  font-family: var(--letra-titulos);
  font-size: 1.5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--color-nivel) var(--t-vivo), black);
}

.logros-nivel.bronce { --color-nivel: #cd7f32; }
.logros-nivel.plata { --color-nivel: #c3cad6; }
.logros-nivel.oro { --color-nivel: #f1c40f; }
.logros-nivel.platino { --color-nivel: #7fe0f0; }

/* Título de cada categoría: grande, y la línea de puntos hasta el final */
.logros-grupo h2 {
  margin: 1.4rem 0 0.7rem;
  font-size: 1.5rem;
  color: var(--t-texto);
}

.logros-grupo h2 small {
  font-family: var(--letra-titulos);
  font-size: 1.1rem;
  font-weight: 800;
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.logros-grupo h2::after {
  height: 0;
  border-top: 1px dashed rgba(var(--t-tinte), 0.3);
  border-radius: 0;
  background: none;
  opacity: 1;
}

/* Cada logro, con la capa del color de su nivel; los que faltan, apagados y con borde de puntos */
.logro {
  --color-nivel: #cd7f32;
  padding: 0.8rem 0.9rem 0.8rem 1rem;
  border: 1px dashed rgba(var(--t-tinte), 0.28);
  border-left: 0.3rem solid rgba(var(--t-tinte), 0.2);
  border-radius: 0.8rem;
  opacity: 0.8;
}

.logro.bronce { --color-nivel: #cd7f32; }
.logro.plata { --color-nivel: #c3cad6; }
.logro.oro { --color-nivel: #f1c40f; }
.logro.platino { --color-nivel: #7fe0f0; }

.logro.conseguido {
  border: 1px solid transparent;
  border-left: 0.3rem solid var(--color-nivel);
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--color-nivel) 16%, transparent), transparent 65%),
    var(--t-panel);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  opacity: 1;
}

.logro-texto strong {
  font-family: var(--letra-titulos);
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.15;
}

.logro-nivel {
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.logro.conseguido .logro-nivel {
  color: color-mix(in srgb, var(--color-nivel) var(--t-vivo), black);
  opacity: 1;
}