/* =====================================================================
   Plasma — Dashboard admin (dark / liquid glass)
   Todo va scopeado bajo .plasma-admin para no tocar el resto del sitio.
   La tipografía Geist se carga vía Google Fonts en index.html.
   ===================================================================== */

.plasma-admin {
  --adm-bg: #08040D;
  --adm-fg: #F5F0FF;
  position: relative;
  min-height: 100vh;
  color: var(--adm-fg);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* cosmic violet glow backdrop — mirrors plasma-design.com */
  background-color: var(--adm-bg);
  background-image:
    radial-gradient(ellipse 60% 40% at 8% -5%,  rgba(168,85,247,.16) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 95% 8%,  rgba(217,70,239,.12) 0%, transparent 55%),
    radial-gradient(ellipse 80% 50% at 75% 105%,rgba(124,58,237,.12) 0%, transparent 60%),
    linear-gradient(180deg, #0B0613 0%, #08040D 60%, #06030A 100%);
  background-attachment: fixed;
}

/* El contenedor de la ruta admin pinta el fondo base para que no se vea el de la tienda */
.page--admin { background: #08040D; }

.plasma-admin *,
.plasma-admin *::before,
.plasma-admin *::after { box-sizing: border-box; }

.plasma-admin button,
.plasma-admin input,
.plasma-admin select,
.plasma-admin textarea { font-family: inherit; color: inherit; }
.plasma-admin a { color: inherit; }

.plasma-admin ::selection { background: rgba(217,70,239,.5); color: #fff; }

/* Scrollbar (webkit) */
.plasma-admin ::-webkit-scrollbar { width: 10px; height: 10px; }
.plasma-admin ::-webkit-scrollbar-track { background: transparent; }
.plasma-admin ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.08); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
.plasma-admin ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.18); background-clip: content-box; border: 2px solid transparent;
}

/* Liquid-glass surfaces */
.plasma-admin .glass {
  background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  border: .5px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 .5px 0 rgba(255,255,255,.08),
    0 1px 0 rgba(0,0,0,.4),
    0 12px 40px rgba(0,0,0,.35);
}
.plasma-admin .glass-soft {
  background: rgba(255,255,255,.025);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: .5px solid rgba(255,255,255,.06);
}
.plasma-admin .grad-text {
  background: linear-gradient(135deg, #F5E5FF 0%, #D946EF 45%, #A855F7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plasma-admin .grad-btn {
  background: linear-gradient(135deg, #E879F9 0%, #C026D3 35%, #A855F7 75%, #7C3AED 100%);
  box-shadow:
    0 0 0 .5px rgba(255,255,255,.18) inset,
    0 1px 0 rgba(255,255,255,.25) inset,
    0 8px 28px rgba(168,85,247,.45),
    0 2px 10px rgba(217,70,239,.35);
}
.plasma-admin .grad-btn:hover { filter: brightness(1.08); }

/* Animaciones — nombres prefijados para no chocar con el resto del sitio */
@keyframes adm-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes adm-slidein {
  from { transform: translateX(28px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes adm-toastin {
  from { transform: translate(-50%, 12px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes adm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}