/* Liquid Glass — capa visual exclusiva del panel administrativo. */
body.admin-ui {
  --liquid-surface: rgba(255, 255, 255, 0.24);
  --liquid-surface-strong: rgba(255, 255, 255, 0.42);
  --liquid-edge: rgba(255, 255, 255, 0.72);
  --liquid-edge-soft: rgba(255, 255, 255, 0.28);
  --liquid-ink: #2d302b;
  --liquid-accent: #948a50;
  --liquid-shadow: 0 18px 50px rgba(48, 48, 35, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 1px 0 0 rgba(255, 255, 255, 0.35);
  --liquid-shadow-raised: 0 26px 70px rgba(45, 44, 30, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  color: var(--liquid-ink);
  background-color: #d9ddd7;
  background-image:
    radial-gradient(circle at 8% 4%, rgba(241, 225, 137, 0.62), transparent 28rem),
    radial-gradient(circle at 93% 18%, rgba(151, 203, 192, 0.52), transparent 32rem),
    radial-gradient(circle at 48% 88%, rgba(255, 255, 255, 0.72), transparent 38rem),
    linear-gradient(135deg, #e9ebe5 0%, #ccd8d3 48%, #e4dfcd 100%);
  background-attachment: fixed;
}

.admin-ui .admin-topbar,
.admin-ui .subnav {
  border: 1px solid var(--liquid-edge-soft);
  backdrop-filter: blur(30px) saturate(175%);
  -webkit-backdrop-filter: blur(30px) saturate(175%);
}

.admin-ui .admin-topbar {
  background: linear-gradient(110deg, rgba(37, 48, 43, 0.72), rgba(48, 53, 42, 0.56));
  box-shadow: 0 12px 38px rgba(27, 35, 31, 0.2), inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.admin-ui .subnav {
  margin: 10px 14px 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.2));
  box-shadow: var(--liquid-shadow);
}

.admin-ui .subnav .nav-link {
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.admin-ui .subnav .nav-link:hover,
.admin-ui .subnav .nav-link:focus-visible {
  background: rgba(255, 255, 255, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 16px rgba(50, 55, 43, 0.09);
}

.admin-ui .card,
.admin-ui .admin-card,
.admin-ui .operational-insights a,
.admin-ui .exports-card,
.admin-ui .empty-state,
.admin-ui .report-dialog,
.admin-ui .project-dialog,
.admin-ui .incident-dashboard article,
.admin-ui .dashboard-search > label,
.admin-ui .dashboard-search-results,
.admin-ui .global-search-box,
.admin-ui .theme-toggle,
.admin-ui .pwa-update-dialog {
  border: 1px solid var(--liquid-edge);
  background: linear-gradient(135deg, var(--liquid-surface-strong), var(--liquid-surface));
  box-shadow: var(--liquid-shadow);
  backdrop-filter: blur(28px) saturate(165%);
  -webkit-backdrop-filter: blur(28px) saturate(165%);
}

.admin-ui .card,
.admin-ui .admin-card,
.admin-ui .operational-insights a,
.admin-ui .incident-dashboard article {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
}

.admin-ui .card::after,
.admin-ui .admin-card::after,
.admin-ui .operational-insights a::after,
.admin-ui .incident-dashboard article::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: -45%;
  left: -20%;
  width: 72%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.38), transparent 67%);
  transform: rotate(-14deg);
}

.admin-ui .card > *,
.admin-ui .admin-card > *,
.admin-ui .operational-insights a > *,
.admin-ui .incident-dashboard article > * {
  position: relative;
  z-index: 1;
}

.admin-ui .card:hover,
.admin-ui .admin-card:hover,
.admin-ui .admin-card:focus-visible,
.admin-ui .operational-insights a:hover {
  border-color: rgba(255, 255, 255, 0.92);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(245, 241, 215, 0.28));
  box-shadow: var(--liquid-shadow-raised);
  transform: translateY(-5px) scale(1.006);
}

.admin-ui .admin-icon {
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.2));
  box-shadow: 0 10px 24px rgba(66, 63, 37, 0.12), inset 0 1px 0 #fff;
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
}

.admin-ui input,
.admin-ui textarea,
.admin-ui select {
  border: 1px solid rgba(255, 255, 255, 0.66);
  background: rgba(255, 255, 255, 0.36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 7px 18px rgba(54, 58, 46, 0.06);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.admin-ui input:focus,
.admin-ui textarea:focus,
.admin-ui select:focus {
  border-color: rgba(148, 138, 80, 0.72);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: 0 0 0 4px rgba(148, 138, 80, 0.13), inset 0 1px 0 #fff;
}

.admin-ui .btn {
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: linear-gradient(145deg, rgba(166, 155, 91, 0.94), rgba(119, 109, 57, 0.96));
  box-shadow: 0 9px 22px rgba(83, 76, 39, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.admin-ui .btn.secundario {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.34);
  color: #57543e;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.admin-ui .report-table {
  overflow: auto;
  border-radius: 20px;
}

.admin-ui table {
  background: transparent;
}

.admin-ui thead {
  background: rgba(255, 255, 255, 0.3);
}

.admin-ui tbody tr:hover {
  background: rgba(255, 255, 255, 0.22);
}

.admin-ui .flash {
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: var(--liquid-shadow);
  backdrop-filter: blur(24px) saturate(165%);
  -webkit-backdrop-filter: blur(24px) saturate(165%);
}

@media (prefers-reduced-motion: no-preference) {
  body.admin-ui {
    background-size: 115% 115%;
    animation: liquid-glass-atmosphere 20s ease-in-out infinite alternate;
  }

  @keyframes liquid-glass-atmosphere {
    from { background-position: 0 0, 100% 0, 50% 100%, center; }
    to { background-position: 5% 3%, 96% 8%, 46% 94%, center; }
  }
}

@media (max-width: 700px) {
  .admin-ui .subnav {
    margin: 8px;
    border-radius: 16px;
  }

  .admin-ui .card,
  .admin-ui .admin-card,
  .admin-ui .incident-dashboard article {
    border-radius: 18px;
  }
}

html[data-theme="dark"] body.admin-ui {
  --liquid-surface: rgba(30, 39, 35, 0.42);
  --liquid-surface-strong: rgba(57, 67, 60, 0.55);
  --liquid-edge: rgba(225, 235, 225, 0.17);
  --liquid-edge-soft: rgba(225, 235, 225, 0.12);
  --liquid-ink: #e9efea;
  --liquid-shadow: 0 20px 56px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --liquid-shadow-raised: 0 28px 74px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  background-color: #17201c;
  background-image:
    radial-gradient(circle at 8% 5%, rgba(148, 138, 80, 0.24), transparent 28rem),
    radial-gradient(circle at 92% 18%, rgba(70, 126, 112, 0.24), transparent 32rem),
    linear-gradient(140deg, #151c19, #202b26 54%, #26251d);
}

html[data-theme="dark"] .admin-ui .card,
html[data-theme="dark"] .admin-ui .admin-card,
html[data-theme="dark"] .admin-ui .operational-insights a,
html[data-theme="dark"] .admin-ui .incident-dashboard article,
html[data-theme="dark"] .admin-ui .dashboard-search > label,
html[data-theme="dark"] .admin-ui .dashboard-search-results {
  border-color: var(--liquid-edge);
  background: linear-gradient(135deg, var(--liquid-surface-strong), var(--liquid-surface));
}

html[data-theme="dark"] .admin-ui input,
html[data-theme="dark"] .admin-ui textarea,
html[data-theme="dark"] .admin-ui select,
html[data-theme="dark"] .admin-ui .btn.secundario {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(34, 45, 40, 0.5);
  color: #e9efea;
}