/* FILE: tema-glass-extra.css */

/* Fixed, low-intensity light fields give the glass something to refract. */
body {
  background-color: #0A1428;
  background-image:
    radial-gradient(ellipse at 12% 12%, rgba(10, 132, 255, .22) 0%, rgba(10, 132, 255, 0) 52%),
    radial-gradient(ellipse at 88% 24%, rgba(34, 211, 238, .14) 0%, rgba(34, 211, 238, 0) 48%),
    radial-gradient(ellipse at 62% 86%, rgba(99, 102, 241, .20) 0%, rgba(99, 102, 241, 0) 55%),
    radial-gradient(ellipse at 4% 80%, rgba(10, 132, 255, .10) 0%, rgba(10, 132, 255, 0) 44%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

.app-body,
.main-content {
  background-color: transparent;
  background-image: none;
}

/* Preserve existing border widths and box geometry. */
.metric,
.panel,
.overview-hero,
.project-strip,
.tabla-caja,
.sidebar-bottom,
.mod-tarjeta,
.mod-item,
.mod-tabla,
.fx-tabs,
.fx-vacio,
.ptz-slot,
.auth-tarjeta {
  background-color: rgba(255, 255, 255, .03);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, .07),
    rgba(255, 255, 255, .02)
  );
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border-color: rgba(140, 180, 255, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 0 0 1px rgba(140, 180, 255, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .02),
    0 12px 32px rgba(0, 5, 18, .22);
}

/* Page-sized shells stay quieter than their nested cards. */
.panel {
  background-color: rgba(10, 20, 40, .10);
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, .025),
    rgba(255, 255, 255, .008)
  );
  border-color: rgba(140, 180, 255, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    inset 0 0 0 1px rgba(140, 180, 255, .08);
}

.overview-hero {
  background-color: rgba(10, 20, 40, .20);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .015)),
    linear-gradient(120deg, rgba(10, 132, 255, .22), rgba(99, 102, 241, .12) 65%, rgba(34, 211, 238, .08));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    inset 0 0 0 1px rgba(140, 180, 255, .18),
    inset 0 0 48px rgba(10, 132, 255, .10),
    0 12px 32px rgba(0, 5, 18, .22);
}

.topbar {
  background-color: rgba(10, 20, 40, .55);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border-color: rgba(140, 180, 255, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .055),
    0 8px 28px rgba(0, 5, 18, .20);
}

.sidebar {
  background-color: rgba(10, 20, 40, .72);
  background-image: linear-gradient(
    180deg,
    rgba(18, 36, 62, .26),
    rgba(5, 12, 26, .18)
  );
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border-color: rgba(140, 180, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .05),
    inset -1px 0 0 rgba(140, 180, 255, .08),
    8px 0 28px rgba(0, 5, 18, .16);
}

.popover,
.notifications {
  background-color: rgba(13, 27, 46, .66);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border-color: rgba(140, 180, 255, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 0 0 1px rgba(140, 180, 255, .22),
    0 20px 52px rgba(0, 5, 18, .46);
}

.pm-mapa .leaflet-control-zoom,
.pm-mapa .leaflet-control-layers,
.pm-mapa .leaflet-tooltip,
.pm-mapa .leaflet-control-attribution {
  background-color: rgba(10, 20, 40, .62);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .01));
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-color: rgba(140, 180, 255, .20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 6px 20px rgba(0, 5, 18, .28);
  color: #E6EFFA;
}

.pm-mapa .leaflet-control-attribution a {
  color: #8BC8FF;
}

.ptz-vista-aviso {
  background-color: rgba(7, 17, 34, .60);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0));
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-color: rgba(140, 180, 255, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 8px 24px rgba(0, 5, 18, .24);
}

/* Static lighting only: no added motion, including reduced-motion mode. */
@media (hover: hover) {
  .metric:hover,
  .mod-tarjeta:hover,
  .mod-item:hover,
  .ptz-slot:hover {
    border-color: rgba(140, 180, 255, .34);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .14),
      inset 0 0 0 1px rgba(140, 180, 255, .34),
      inset 0 0 0 1px rgba(255, 255, 255, .02),
      0 10px 30px rgba(10, 132, 255, .14),
      0 12px 32px rgba(0, 5, 18, .22);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .metric,
  .panel,
  .overview-hero,
  .project-strip,
  .tabla-caja,
  .sidebar-bottom,
  .mod-tarjeta,
  .mod-item,
  .mod-tabla,
  .fx-tabs,
  .fx-vacio,
  .ptz-slot,
  .auth-tarjeta,
  .topbar,
  .sidebar,
  .popover,
  .notifications,
  .pm-mapa .leaflet-control-zoom,
  .pm-mapa .leaflet-control-layers,
  .pm-mapa .leaflet-tooltip,
  .pm-mapa .leaflet-control-attribution,
  .ptz-vista-aviso {
    background-color: rgba(13, 27, 46, .92);
  }
}