/* ============================================================
   PROFUNDIDAD VISUAL — Panel de administración
   ============================================================ */

html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background-color: #07030a;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(212,120,154,0.105) 0, transparent 25rem),
    radial-gradient(circle at 92% 72%, rgba(184,126,192,0.075) 0, transparent 31rem),
    linear-gradient(rgba(212,120,154,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,120,154,0.018) 1px, transparent 1px),
    linear-gradient(145deg, #07030a 0%, #0b050f 52%, #07030a 100%);
  background-size: auto, auto, 72px 72px, 72px 72px, auto;
  background-attachment: fixed;
}

/* Textura fina sobre las superficies vacías. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: 0.032;
  background-image:
    repeating-radial-gradient(circle at 19% 27%, rgba(255,255,255,0.65) 0 0.4px, transparent 0.7px 3px),
    repeating-linear-gradient(112deg, rgba(255,255,255,0.12) 0 0.5px, transparent 0.5px 4px);
  background-size: 5px 5px, 7px 7px;
  mix-blend-mode: soft-light;
}

/* Luz ambiental dentro del área de trabajo. */
.admin-main {
  position: relative;
  isolation: isolate;
}

.admin-main::before,
.admin-main::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}

.admin-main::before {
  width: clamp(320px, 42vw, 610px);
  aspect-ratio: 1;
  top: -7rem;
  right: -18rem;
  border: 1px solid rgba(242,179,204,0.065);
  background: radial-gradient(circle at 38% 40%, rgba(212,120,154,0.055), transparent 62%);
  box-shadow: inset 0 0 100px rgba(184,126,192,0.035), 0 0 120px rgba(212,120,154,0.025);
}

.admin-main::after {
  width: clamp(240px, 32vw, 470px);
  aspect-ratio: 1;
  left: -14rem;
  bottom: -10rem;
  background: radial-gradient(circle, rgba(184,126,192,0.06), transparent 68%);
}

/* Navegación de cristal, separada visualmente del contenido. */
body .admin-nav {
  background:
    linear-gradient(90deg, rgba(7,3,10,0.94), rgba(15,7,20,0.9), rgba(7,3,10,0.94));
  border-bottom-color: rgba(212,120,154,0.2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.24), inset 0 -1px 0 rgba(255,255,255,0.018);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
}

/* Superficies principales: más volumen sin aclarar demasiado el panel. */
body :is(
  .card,
  .stat-card,
  .prod-card,
  .alb-card,
  .gal-item,
  .msg-item,
  .detalle-card,
  .det-card,
  .pk-editor,
  .pk-preview-shell,
  .login-card,
  .wrap > .card
) {
  background:
    linear-gradient(145deg, rgba(255,255,255,0.046), rgba(255,255,255,0.018)),
    rgba(13,6,18,0.78);
  border-color: rgba(212,120,154,0.19);
  box-shadow:
    0 22px 58px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 0 0 1px rgba(212,120,154,0.012);
  backdrop-filter: blur(13px) saturate(1.06);
  -webkit-backdrop-filter: blur(13px) saturate(1.06);
}

body .stat-card {
  position: relative;
  overflow: hidden;
}

body .stat-card::after {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  right: -38px;
  bottom: -48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,120,154,0.13), transparent 70%);
  pointer-events: none;
}

body .stat-card.highlight {
  box-shadow:
    0 22px 58px rgba(0,0,0,0.28),
    0 0 32px rgba(212,120,154,0.07),
    inset 0 1px 0 rgba(255,255,255,0.045);
}

/* Tablas y listas largas dejan de flotar sobre un vacío plano. */
body .table-wrap {
  border-radius: 12px;
  background: rgba(12,5,16,0.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.018);
}

body table {
  background: linear-gradient(180deg, rgba(255,255,255,0.018), transparent 35%);
}

body :is(input, textarea, select) {
  background-color: rgba(255,255,255,0.038);
  box-shadow: inset 0 1px 10px rgba(0,0,0,0.1);
}

body .page-title,
body .welcome h1 {
  text-shadow: 0 0 30px rgba(212,120,154,0.09);
}

body footer {
  background: linear-gradient(180deg, transparent, rgba(12,5,16,0.42));
}

@media (max-width: 768px) {
  body {
    background-size: auto, auto, 54px 54px, 54px 54px, auto;
  }

  body::after {
    opacity: 0.018;
    mix-blend-mode: normal;
  }

  /* Mantiene los brillos dentro del lienzo para que no amplíen el documento. */
  .admin-main::before {
    width: min(72vw, 310px);
    right: 0;
    opacity: 0.52;
  }

  .admin-main::after {
    width: min(68vw, 280px);
    left: 0;
    opacity: 0.45;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body::after { display: none; }

  body :is(
    .card,
    .stat-card,
    .prod-card,
    .alb-card,
    .gal-item,
    .msg-item,
    .detalle-card,
    .det-card,
    .pk-editor,
    .pk-preview-shell,
    .login-card,
    .wrap > .card
  ) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}