/* ── Background Theme — Glassmorphism + Floating Shapes ──
   Modular: cambia colores, blur, opacidad desde aquí.
   Para desactivar, solo no incluyas este archivo en index.html.
   ============================================================ */

:root {
  --glass-bg: rgba(10, 18, 34, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 20px;
  --shape-blur: 50px;
  --s1: rgba(0, 236, 192, 0.25);
  --s2: rgba(0, 200, 255, 0.15);
  --s3: rgba(74, 240, 208, 0.2);
  --s4: rgba(0, 236, 192, 0.1);
}

body {
  position: relative;
  background:
    radial-gradient(ellipse at 20% 50%, var(--s4) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, var(--s2) 0%, transparent 40%),
    linear-gradient(160deg, #050a18 0%, #0a0e1a 30%, #0d1424 60%, #080c18 100%);
}

.app {
  position: relative;
  z-index: 1;
}

/* ── Floating shapes ── */
body::before,
body::after,
.shapes,
.shape-extra {
  content: '';
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

body::before {
  width: 600px;
  height: 600px;
  top: -150px;
  right: -120px;
  background: radial-gradient(circle, var(--s1) 0%, transparent 65%);
  filter: blur(var(--shape-blur));
}

body::after {
  width: 500px;
  height: 500px;
  bottom: -120px;
  left: -100px;
  background: radial-gradient(circle, var(--s2) 0%, transparent 65%);
  filter: blur(var(--shape-blur));
}

.shapes {
  width: 400px;
  height: 400px;
  top: 40%;
  left: 60%;
  background: radial-gradient(circle, var(--s3) 0%, transparent 65%);
  filter: blur(var(--shape-blur));
}

.shape-extra {
  width: 300px;
  height: 300px;
  top: 15%;
  left: 10%;
  background: radial-gradient(circle, var(--s4) 0%, transparent 60%);
  filter: blur(var(--shape-blur));
}

/* ── Glassmorphism cards ── */
.card,
.pcard {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.card:hover,
.pcard:hover {
  border-color: rgba(0, 236, 192, 0.2);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 236, 192, 0.05);
}

/* ── Fields glass ── */
.field input,
.field textarea,
.field select {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ── Responsive shapes ── */
@media (max-width: 640px) {
  body::before {
    width: 350px;
    height: 350px;
    top: -80px;
    right: -60px;
  }
  body::after {
    width: 300px;
    height: 300px;
    bottom: -60px;
    left: -50px;
  }
  .shapes {
    width: 250px;
    height: 250px;
  }
  .shape-extra {
    width: 180px;
    height: 180px;
  }
}