/*
 * Código Guerrero Dev - Homepage Custom CSS
 * Tema: Nebulosa espacial con acentos RGB/vibrantes
 */

/* ─── Títulos con gradiente vibrante ─── */
.header-title {
  background: linear-gradient(135deg, #f472b6, #a78bfa, #60a5fa, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}

/* ─── Cards con glow sutíl ─── */
.group-items > .service-card {
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.25s ease;
  min-height: 80px;
}

.group-items > .service-card:hover {
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 0 20px rgba(167, 139, 250, 0.15), 0 0 60px rgba(96, 165, 250, 0.08);
  transform: translateY(-2px);
}

/* ─── Nombres de servicio más visibles ─── */
.service-name {
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: #e2e8f0 !important;
}

/* ─── Descripción más visible ─── */
.service-description {
  opacity: 0.75;
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
}

/* ─── Iconos con gradiente RGB ─── */
.service-card .service-icon {
  font-size: 1.8rem !important;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.3));
}

/* Colores aleatorios para cards de servicios por grupo */
.group-name {
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

/* ─── Bookmarks más limpios ─── */
.bookmark-item {
  padding: 4px 10px;
  transition: all 0.2s ease;
}

.bookmark-item:hover {
  background: rgba(167, 139, 250, 0.1);
  border-radius: 6px;
}

/* ─── Footer versión invisible ─── */
#version {
  opacity: 0.25;
  font-size: 0.65rem;
}

/* ─── Widgets con estilo limpio ─── */
#information-widgets .resource-value {
  font-weight: 700;
  font-size: 0.95rem;
  color: #a78bfa;
}

/* ─── Borde de estado más visible ─── */
.status-dot {
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.4);
}

/* ─── Quick Launch ─── */
.search-container input {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  color: #e2e8f0 !important;
}

.search-container input:focus {
  border-color: rgba(167, 139, 250, 0.5) !important;
  box-shadow: 0 0 15px rgba(167, 139, 250, 0.1) !important;
}

/* ─── Botón de recarga ─── */
#reload-button {
  opacity: 0.5;
  transition: opacity 0.2s;
}

#reload-button:hover {
  opacity: 1;
}

/* ─── Títulos de grupo con color ─── */
.section-title .group-name {
  font-size: 0.85rem !important;
  letter-spacing: 0.12em;
}

/* ─── Simple Icons en cards se vean bien ─── */
.service-icon img, .service-icon svg {
  width: 2rem;
  height: 2rem;
  filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.2));
}