:root {
  --alma-panel: rgba(15, 23, 42, 0.42);
  --alma-panel-strong: rgba(15, 23, 42, 0.56);
  --alma-card: rgba(255, 255, 255, 0.08);
  --alma-card-hover: rgba(255, 255, 255, 0.14);
  --alma-border: rgba(255, 255, 255, 0.10);
  --alma-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

body,
html,
#app {
  backdrop-filter: saturate(110%);
  -webkit-backdrop-filter: saturate(110%);
}

/* Paneles de grupos */
.service-group,
.bookmark-group,
.widget,
.information-widget,
.info-widget,
.weather-widget,
.resources-widget,
.datetime-widget,
.search-widget {
  background: var(--alma-panel) !important;
  border: 1px solid var(--alma-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--alma-shadow) !important;
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  padding: 12px 14px !important;
}

/* Títulos */
.service-group h2,
.bookmark-group h2,
.service-group .group-title,
.bookmark-group .group-title {
  font-weight: 700 !important;
  letter-spacing: 0.2px !important;
  margin-bottom: 12px !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.30) !important;
}

/* Tarjetas y enlaces */
.service-group a,
.bookmark-group a,
.service a,
.bookmark a,
li.bookmark,
div.bookmark,
li.service,
div.service {
  background: var(--alma-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  transition: all 0.18s ease !important;
}

/* Hover */
.service-group a:hover,
.bookmark-group a:hover,
.service a:hover,
.bookmark a:hover,
li.bookmark:hover,
div.bookmark:hover,
li.service:hover,
div.service:hover {
  background: var(--alma-card-hover) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
}

/* Más aire y mejor lectura */
.service,
.bookmark,
.service-card,
.bookmark-card,
li.service,
li.bookmark {
  margin-bottom: 8px !important;
}

.service-name,
.bookmark-name,
.service-title,
.bookmark-title {
  font-weight: 600 !important;
}

.service-description,
.bookmark-description,
.service small,
.bookmark small,
.service span,
.bookmark span {
  opacity: 0.92 !important;
}

/* Iconos/favicons */
.service img,
.bookmark img,
.service svg,
.bookmark svg,
.service-icon,
.bookmark-icon {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border-radius: 6px !important;
}

/* Cabecera */
header,
nav,
.info-widgets,
.search-container,
div[class*="search"],
div[class*="widget"] {
  border-radius: 16px !important;
}

/* Caja de búsqueda algo más visible */
input[type="text"],
input[type="search"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
}

/* Espaciado vertical entre bloques */
.service-group,
.bookmark-group {
  margin-bottom: 16px !important;
}

/* Responsive */
@media (max-width: 900px) {
  .service-group,
  .bookmark-group,
  .widget,
  .information-widget {
    padding: 10px !important;
    border-radius: 14px !important;
  }

  .service img,
  .bookmark img,
  .service svg,
  .bookmark svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }
}