.vsd-logros-loading{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:140px;
  padding:28px 16px;
  color:#9a968c;
  font-size:14px;
  text-align:center;
}
.vsd-logros-loading__pulse{
  width:36px;
  height:36px;
  border-radius:50%;
  border:2px solid #3a3834;
  border-top-color:#c4a574;
  animation:vsdLogrosSpin .7s linear infinite;
}
@keyframes vsdLogrosSpin{
  to{ transform:rotate(360deg); }
}

/* Logros catalog UI (desde herramientas vsd 1) */

.vsd-logro-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}


/* ===== AISLAR COLORES DEL POPUP (evita azul del tema) ===== */

#vsdLogrosPopup,
#vsdLogrosPopup *{
  color:#d5d2cb;
  font-family:inherit;
}

/* títulos */
#vsdLogrosPopup h2{
  color:#f0eee8;
}

/* textos secundarios */
#vsdLogrosPopup .vsd-logro-desc{
  color:#9a968c;
}

/* títulos desbloqueados — acento suave */
#vsdLogrosPopup .vsd-titulo{
  color:#c4a574;
}

/* botones internos */
#vsdLogrosPopup button{
  color:#d5d2cb;
}

/* evitar azul enlaces WP */
#vsdLogrosPopup a{
  color:#c4a574;
  text-decoration:none;
}
/* overlay */
.vsd-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.78);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  backdrop-filter:blur(3px);
}

/* marco principal — piedra oscura, oro solo como filo fino */
.vsd-popup-box{
  position:relative;
  background:
    linear-gradient(180deg, #16151a 0%, #0c0b0e 100%);
  color:#d5d2cb;
  padding:22px 20px 18px;
  border-radius:6px;
  width:1000px;
  max-width:96vw;
  height:88vh;
  max-height:88vh;
  overflow:hidden;
  border:1px solid #3a3834;
  box-shadow:
    0 0 0 1px rgba(180, 150, 90, .18),
    0 0 0 4px rgba(0,0,0,.5),
    0 20px 60px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* layout 2 columnas */
.vsd-layout{
  display:flex;
  gap:18px;
  height:100%;
}

/* sidebar */
.vsd-sidebar{
  width:220px;
  background:linear-gradient(180deg,#121116,#0a090c);
  border:1px solid #2e2c2a;
  border-radius:4px;
  padding:10px;
  overflow:auto;
  box-shadow:inset 0 0 24px rgba(0,0,0,.4);
}

/* botón categoría */
.vsd-cat{
  padding:9px 10px;
  border-radius:4px;
  margin-bottom:6px;
  cursor:pointer;
  font-size:13px;
  color:#a8a49a;
  transition:.12s;
  border:1px solid transparent;
}

.vsd-cat:hover{
  background:#1c1b20;
  border-color:#3a3834;
  color:#e8e6e0;
}

.vsd-cat.active{
  background:linear-gradient(180deg,#25232a,#18171c);
  color:#f0eee8;
  font-weight:600;
  border-color:#5c5648;
  box-shadow:inset 0 0 0 1px rgba(196,165,116,.2);
}

/* zona derecha */
.vsd-main{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
  padding-right:8px;
}

/* header */
.vsd-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  padding-right:40px;
  border-bottom:1px solid #2e2c2a;
  padding-bottom:10px;
}

.vsd-header h2{
  margin:0;
  font-size:22px;
  letter-spacing:.4px;
  color:#f0eee8;
  font-family:Georgia, "Times New Roman", serif;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* botón cerrar */
.vsd-cerrar{
  background:#1e1d22;
  border:1px solid #4a4844;
  color:#c8c4bc;
  width:28px;
  height:28px;
  border-radius:4px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;
  font-size:16px;
}

.vsd-cerrar:hover{
  background:#2a292f;
  color:#fff;
  border-color:#6a6660;
}

/* contenedor logros */
#vsdLogrosContenido{
  overflow:auto;
  padding-right:4px;
  min-height:0;   /* extra seguro */
}

/* fila logro */
.vsd-logro{
  display:flex;
  gap:12px;
  padding:11px;
  border:1px solid #2e2c2a;
  border-radius:4px;
  margin-bottom:8px;
  background:linear-gradient(180deg,#19181d,#121116);
  transition:.15s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

.vsd-logro:hover{
  border-color:#4a4844;
  background:linear-gradient(180deg,#1f1e24,#16151a);
}

.vsd-logro.locked{
  opacity:.42;
  filter:grayscale(.35);
}


/* texto bloque */
.vsd-logro-body{
  flex:1;
  min-width:0;
}

/* nombre */
.vsd-logro-nombre{
  font-weight:700;
  font-size:14px;
  margin-bottom:2px;
  color:#eceae4;
  font-family:Georgia, "Times New Roman", serif;
}

/* descripción */
.vsd-logro-desc{
  font-size:12px;
  opacity:.85;
  color:#9a968c;
}

/* título desbloqueado */
.vsd-titulo{
  font-size:12px;
  color:#c4a574;
  margin-top:2px;
}

/* progreso */
.vsd-progreso{
  margin-top:6px;
}

.vsd-progreso-texto{
  font-size:11px;
  opacity:.75;
  margin-bottom:3px;
  color:#9a968c;
}

/* barra — acento cálido contenido */
.vsd-barra{
  height:10px;
  background:#0e0d10;
  border-radius:2px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px #2a2826;
}

.vsd-barra-fill{
  height:100%;
  background:linear-gradient(90deg,#6b5a3a,#a89060);
  width:0%;
}

/* footer */
.vsd-footer{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #2a3342;
}

/* botones género */
.vsd-genero{
  display:flex;
  align-items:center;
  gap:8px;
}

.vsd-genero span{
  font-size:13px;
  opacity:.8;
}

.vsd-genero button{
  background:#1c2433;
  border:1px solid #2c3a52;
  color:#e7eaf0;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
}

.vsd-genero button:hover{
  background:#263149;
}
.vsd-open-logros{
  background:#25232a !important;
  color:#eceae4 !important;
  border:1px solid #5c5648 !important;
}
.vsd-icon{
  width:60px;
  height:60px;
  border-radius:4px;
  background:#121116;
  flex-shrink:0;
  background-size:cover;
  background-position:center;
  border:1px solid #3a3834;
  box-shadow:inset 0 0 10px rgba(0,0,0,.4);
}
/* ===== PUNTOS GLOBALES ===== */

.vsd-total{
  margin-bottom:12px;
}

.vsd-total-text{
  font-size:13px;
  margin-bottom:4px;
  color:#c4a574;
}

.vsd-total-fill{
  height:100%;
  background:linear-gradient(90deg,#6b5a3a,#a89060);
  width:0%;
}

/* ===== RECIENTES / SECCIONES ===== */

.vsd-recientes{
  margin-bottom:12px;
  padding:10px;
  border:1px solid #2e2c2a;
  border-radius:4px;
  background:linear-gradient(180deg,#19181d,#121116);
}

.vsd-recientes-title,
.vsd-seccion-title{
  font-size:12px;
  color:#c4a574;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
  padding-bottom:6px;
  border-bottom:1px solid #2e2c2a;
}

.vsd-seccion-title--spaced{
  margin-top:18px;
}

.vsd-reciente-item{
  font-size:12px;
  opacity:.85;
}

.vsd-resumen-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}
/* ===== SCROLL WOW ===== */
#vsdLogrosContenido{
  overflow:auto;
  padding-right:6px;
  scrollbar-gutter:stable;
}

/* Chrome / Edge / Safari */
#vsdLogrosContenido::-webkit-scrollbar{
  width:10px;
}

#vsdLogrosContenido::-webkit-scrollbar-track{
  background:#0f141d;
  border-radius:8px;
}

#vsdLogrosContenido::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#2c3a52,#3c4d6b);
  border-radius:8px;
  border:1px solid #1b2230;
}

#vsdLogrosContenido::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#3c4d6b,#4a5f86);
}

/* Firefox */
#vsdLogrosContenido{
  scrollbar-width:thin;
  scrollbar-color:#3c4d6b #0f141d;
}
/* ================================
   📱 RESPONSIVE MOBILE (POPUP COMPACTO + SCROLL OK)
   ================================ */
@media (max-width: 768px){

  /* overlay centrado con margen */
  .vsd-popup{
    align-items:center;
    padding:12px;
  }

  /* popup tipo modal (NO fullscreen) */
  .vsd-popup-box{
    width:100%;
    max-width:520px;

    height:auto;
    max-height:85vh; /* altura popup */

    border-radius:14px;
    padding:14px;

    display:flex;
    flex-direction:column;
    overflow:hidden; /* contiene scroll interno */
  }

  /* layout vertical */
  .vsd-layout{
    flex-direction:column;
    gap:10px;
    height:100%;
    min-height:0; /* 👈 clave para que flex permita scroll */
  }

  /* sidebar horizontal tipo tabs */
  .vsd-sidebar{
    width:100%;
    display:flex;
    gap:6px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:6px;
    flex-shrink:0;
  }

  .vsd-cat{
    white-space:nowrap;
    margin:0;
    font-size:12px;
    padding:6px 10px;
  }

  /* zona principal */
  .vsd-main{
    flex:1;
    min-height:0; /* 👈 clave scroll */
    display:flex;
    flex-direction:column;
  }

  /* scroll vertical contenido */
  #vsdLogrosContenido{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch; /* iOS smooth */
    padding-right:0;
  }

  /* header compacto */
  .vsd-header h2{
    font-size:16px;
  }

  /* logros compactos */
  .vsd-logro{
    padding:8px;
    gap:8px;
  }

  .vsd-icon{
    width:44px;
    height:44px;
  }

  .vsd-logro-nombre{
    font-size:13px;
  }

  .vsd-logro-desc{
    font-size:11px;
  }


  /* grid resumen 1 columna */
  .vsd-resumen-grid{
    grid-template-columns:1fr;
  }

}
/* ===== LOGRO COMPLETADO — aquí sí el acento cálido ===== */

.vsd-logro.completed{
  border:1px solid #6b5a3a;
  box-shadow:
    0 0 0 1px rgba(196,165,116,.2),
    inset 0 1px 0 rgba(255,255,255,.04);
  background:linear-gradient(180deg,#222018,#16151a);
}

.vsd-logro.completed .vsd-logro-nombre{
  color:#e8dcc0;
}

/* Completo: verde oliva cálido que liga con el oro del toast (#c4a574) */
.vsd-logro.completed .vsd-barra-fill{
  background:linear-gradient(90deg,#3f5234,#6f8a48);
}

.vsd-logro.completed .vsd-icon{
  border-color:#8a7850;
  box-shadow:0 0 10px rgba(196,165,116,.2);
}