/**
 * PATH: static/css/themes-class.css
 * FUNCIONES: Tema Class — inscripción futurista, verde/cyan/púrpura (portal clase).
 * CONECTA CON: themes.css variables, layout_futuristic.html, enroll_portal.css.
 * LLAMADO POR: layout_futuristic.html (link stylesheet).
 */

body.theme-class {
  --bg-primary:       #030208;
  --bg-secondary:     #0c0816;
  --bg-tertiary:      #14101f;
  --text-primary:     #f8fafc;
  --text-secondary:   #94a3b8;
  --text-muted:       #64748b;
  --accent:           #34d399;
  --accent-secondary: #22d3ee;
  --border:           rgba(52, 211, 153, 0.32);
  --text-on-accent:   #FFFFFF;
  --glow-accent:      rgba(52, 211, 153, 0.35);
}

body.theme-class {
  background-color: #030208 !important;
  background-image:
    radial-gradient(ellipse 80% 55% at 50% -15%, rgba(52, 211, 153, 0.14), transparent 55%),
    radial-gradient(ellipse 45% 40% at 95% 60%, rgba(124, 58, 237, 0.16), transparent 50%),
    radial-gradient(ellipse 40% 35% at 5% 80%, rgba(34, 211, 238, 0.1), transparent 45%) !important;
  color: #f8fafc !important;
}

body.theme-class {
  --primary: #34d399;
  --primary-dark: #059669;
  --primary-light: #6ee7b7;
  --secondary: #7c3aed;
  --primary-contrast: #FFFFFF;
  --primary-gradient: linear-gradient(135deg, #059669 0%, #34d399 50%, #22d3ee 100%);
  --secondary-gradient: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  --accent-gradient: linear-gradient(135deg, #059669 0%, #34d399 100%);
  --bg-dark: #030208;
  --bg-darker: #020106;
  --bg-card: rgba(12, 8, 22, 0.82);
  --bg-card-hover: rgba(52, 211, 153, 0.08);
  --glass-bg: rgba(52, 211, 153, 0.05);
  --glass-bg-solid: rgba(12, 8, 22, 0.94);
  --glass-border: rgba(52, 211, 153, 0.22);
  --glass-border-bright: rgba(52, 211, 153, 0.42);
  --glass-shadow: 0 8px 32px rgba(52, 211, 153, 0.12);
  --bg-gradient: linear-gradient(180deg, #030208 0%, #0c0816 42%, #030208 100%);
  --glow-purple: 0 0 24px rgba(167, 139, 250, 0.28);
}

body.theme-class .header {
  background: rgba(3, 2, 8, 0.94) !important;
  border-bottom: 1px solid rgba(52, 211, 153, 0.28) !important;
  box-shadow: 0 4px 24px rgba(52, 211, 153, 0.08) !important;
}

body.theme-class .left-sidebar,
body.theme-class .right-sidebar {
  background-color: rgba(12, 8, 22, 0.88) !important;
  border-color: rgba(52, 211, 153, 0.18) !important;
}

body.theme-class .glass-card,
body.theme-class .post-card,
body.theme-class .create-post-card,
body.theme-class .settings-section,
body.theme-class .modal-content {
  background: rgba(12, 8, 22, 0.9) !important;
  border: 1px solid rgba(52, 211, 153, 0.22) !important;
  color: #f8fafc !important;
  box-shadow: 0 0 15px rgba(52, 211, 153, 0.06);
}

body.theme-class .sidebar-item.active,
body.theme-class .sidebar-item:hover {
  background: rgba(52, 211, 153, 0.1) !important;
  color: #34d399 !important;
}

body.theme-class .btn-primary,
body.theme-class button.primary,
body.theme-class a.btn-primary,
body.theme-class a.btn.primary,
body.theme-class .rl-btn.primary,
body.theme-class a.rl-btn.primary,
body.theme-class .conf-btn--primary,
body.theme-class a.conf-btn--primary {
  background: linear-gradient(135deg, #059669, #34d399, #22d3ee) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
}

body.theme-class .header-theme-opt.on,
body.theme-class .header-theme-opt:hover {
  border-color: rgba(52, 211, 153, 0.45) !important;
  color: #34d399 !important;
}

/* Inscripción — efectos extra con tema Class */
body.theme-class.page-reading-enroll .main-feed {
  background: transparent !important;
}

body.theme-class.page-reading-enroll .rl-enroll-grid-overlay {
  opacity: 0.35;
}

body.theme-class.page-reading-enroll .rl-enroll-orb.a {
  background: rgba(52, 211, 153, 0.2);
}

body.theme-class.page-reading-enroll .rl-enroll-orb.b {
  background: rgba(167, 139, 250, 0.22);
}

body.theme-class.page-reading-enroll .rl-enroll-card {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 0 60px rgba(52, 211, 153, 0.1);
}

body.theme-class.page-reading-enroll .rl-enroll-card::before {
  opacity: 1;
}