:root{
  /* Fondo más serio (no tan morado) */
  --bg: #0b1220;             /* fondo base oscuro */
  --card: rgba(20, 27, 45, 0.72);
  --surface: rgba(255,255,255,.08);

  --text: #e8eefc;           /* texto claro */
  --muted: rgba(232,238,252,.68);
  --line: rgba(232,238,252,.10);

  --primary: #3b82f6;        /* azul pro */
  --primary2:#2563eb;

  --danger:#ef4444;
  --ok:#22c55e;

  --radius: 16px;
  --radius-sm: 12px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.25), 0 10px 30px rgba(0,0,0,.35);
  --shadow-md: 0 2px 8px rgba(0,0,0,.35), 0 20px 60px rgba(0,0,0,.45);

  --focus: 0 0 0 4px rgba(59,130,246,.25);

  --chip-bg: rgba(59,130,246,.14);
  --chip-tx: rgba(232,238,252,.86);

  --surface-2: rgba(255,255,255,.06);     /* para list items y barras */
  --surface-3: rgba(255,255,255,.08);

  --line-2: rgba(255,255,255,.12);

  /* estados */
  --st-prog: rgba(59,130,246,.20);
  --st-conf: rgba(99,102,241,.22);
  --st-curso: rgba(34,197,94,.18);
  --st-comp: rgba(148,163,184,.14);
  --st-noas: rgba(251,113,133,.18);
  --st-canc: rgba(148,163,184,.10);

  --st-block: rgba(245,158,11,.18);
}

*{ box-sizing:border-box; }

html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  color: var(--text);
  background-color: var(--bg);
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(900px 500px at 85% 5%, rgba(99,102,241,.18), transparent 55%),
    radial-gradient(700px 450px at 70% 90%, rgba(16,185,129,.10), transparent 60%);
  background-repeat: no-repeat;
  filter: saturate(0.9);
}

a{ color:inherit; }

::selection{ background: rgba(37,99,235,.22); }

.card, .panel{
  background: var(--card);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.25);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  position: relative;
  overflow: hidden;
  outline: 1px solid rgba(255,255,255,0.06);
  outline-offset: -1px;
}
.card::before, .panel::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.04),
    rgba(255,255,255,0.00) 60%
  );
  transform: rotate(12deg);
  pointer-events:none;
}
/* borde 3D compatible (sin mask) */
.card::after, .panel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  /* “doble borde” + brillo */
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.10),   /* highlight arriba/izq */
    inset -1px -1px 0 rgba(0,0,0,0.28);      /* sombra abajo/der */
}