/* Reduced border-radius globally for cyberpunk sharpness */
:root {
  --radius-xl: 12px !important;
  --radius-lg: 10px !important;
  --radius-md: 8px !important;
  --radius-sm: 6px !important;
}

.glass-card,
.info-card,
.showcase-panel,
.btn,
.card,
.badge,
.tag,
.form-input,
.select,
textarea,
.modal-card,
.job-card,
.course-card,
.stepper,
.sidebar,
.step-card,
.auth-card,
.wizard-card,
.modal-box,
.hero-card {
  border-radius: 8px !important;
}

.btn,
.badge,
.nav-link,
.side-link,
.tag,
.hero-badge,
.badge-success,
.badge-warning,
.paid-badge,
.badge-red,
.badge-blue,
.badge-green,
.filter-chip,
.radio-btn {
  border-radius: 6px !important;
}

/* Cyberpunk Neon Glow Effects across elements */
body.dark-mode h1,
body.dark-mode h2,
body.dark h1,
body.dark h2,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2 {
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.4) !important;
}

body.dark-mode .eyebrow,
body.dark .eyebrow,
html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .section-subtitle {
  color: var(--primary) !important;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.5) !important;
}

body.dark-mode .icon-wrap,
body.dark-mode .avatar-circle,
body.dark .icon-badge,
html[data-theme="dark"] .nav-avatar,
html[data-theme="dark"] .step-number {
  background: rgba(0, 240, 255, 0.1) !important;
  color: var(--primary) !important;
  box-shadow: 0 0 15px rgba(0, 240, 255, 0.2), inset 0 0 10px rgba(0, 240, 255, 0.1) !important;
  border: 1px solid rgba(0, 240, 255, 0.4) !important;
}

body.dark-mode .btn-primary,
body.dark .btn-primary,
html[data-theme="dark"] .btn-primary {
  background: transparent !important;
  color: var(--primary) !important;
  border: 1px solid var(--primary) !important;
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.2), inset 0 0 8px rgba(0, 240, 255, 0.1) !important;
}

body.dark-mode .btn-primary:hover,
body.dark .btn-primary:hover,
html[data-theme="dark"] .btn-primary:hover {
  background: var(--primary) !important;
  color: #000 !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.4), inset 0 0 15px rgba(0, 240, 255, 0.2) !important;
}

body.dark-mode .btn-secondary,
body.dark .btn-secondary,
html[data-theme="dark"] .btn-secondary {
  background: transparent !important;
  color: var(--secondary) !important;
  border: 1px solid var(--secondary) !important;
  box-shadow: 0 0 12px rgba(255, 0, 60, 0.2), inset 0 0 8px rgba(255, 0, 60, 0.1) !important;
}

body.dark-mode .btn-secondary:hover,
body.dark .btn-secondary:hover,
html[data-theme="dark"] .btn-secondary:hover {
  background: var(--secondary) !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(255, 0, 60, 0.4), inset 0 0 15px rgba(255, 0, 60, 0.2) !important;
}

body.dark-mode .glass-card,
body.dark-mode .info-card,
body.dark-mode .showcase-panel,
body.dark-mode .showcase-card,
body.dark .card,
body.dark .hero-card,
body.dark .modal-content,
body.dark .sidebar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .wizard-card,
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .step-card {
  background: rgba(11, 15, 25, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(0, 240, 255, 0.2) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

body.dark-mode .glass-card:hover,
body.dark-mode .info-card:hover,
body.dark-mode .showcase-card:hover,
body.dark .card:hover,
body.dark .hero-card:hover,
html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .step-card:hover {
  border-color: rgba(0, 240, 255, 0.5) !important;
  box-shadow: 0 10px 30px rgba(0, 240, 255, 0.15), inset 0 0 15px rgba(0, 240, 255, 0.05) !important;
  transform: translateY(-4px) !important;
}

body.dark-mode .badge,
body.dark .badge-success,
html[data-theme="dark"] .badge-green,
html[data-theme="dark"] .badge-blue {
  background: rgba(0, 240, 255, 0.1) !important;
  border: 1px solid rgba(0, 240, 255, 0.3) !important;
  color: var(--primary) !important;
}

body.dark-mode .badge-orange,
body.dark .badge-warning,
html[data-theme="dark"] .badge-yellow {
  background: rgba(252, 238, 10, 0.1) !important;
  border: 1px solid rgba(252, 238, 10, 0.3) !important;
  color: var(--accent) !important;
}

body.dark-mode .badge-green,
html[data-theme="dark"] .paid-badge,
html[data-theme="dark"] .badge-red {
  background: rgba(255, 0, 60, 0.1) !important;
  border: 1px solid rgba(255, 0, 60, 0.3) !important;
  color: var(--secondary) !important;
}

body.dark-mode .site-header,
body.dark .topbar,
html[data-theme="dark"] #navbar {
  background: rgba(7, 10, 17, 0.85) !important;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.1) !important;
}

body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active,
body.dark .nav-link:hover,
body.dark .nav-link.active,
html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a.active {
  color: var(--primary) !important;
  background: rgba(0, 240, 255, 0.1) !important;
  text-shadow: 0 0 8px rgba(0, 240, 255, 0.4) !important;
}

body.dark-mode .brand-mark,
body.dark .brand i,
html[data-theme="dark"] .nav-logo i {
  color: var(--primary) !important;
}

/* Cyberpunk Card Gradients */
.course-card-pub .card-top-bar,
.course-card-top,
.progress-bar,
.stepper-item.done:not(:last-child)::after {
  background: linear-gradient(90deg, #00f0ff, #b52bff, #ff003c) !important;
}

/* Gratuito Badge Adjustment */
.free-badge,
body.dark .badge-success {
  background: rgba(252, 238, 10, 0.1) !important;
  border: 1px solid rgba(252, 238, 10, 0.3) !important;
  color: #fcee0a !important;
  border-radius: 6px !important;
}

/* CTA Banner Modern Cyberpunk Restyle */
body.dark-mode .jobs-cta-banner,
body.dark .jobs-cta-banner,
html[data-theme="dark"] .jobs-cta-banner {
  background: rgba(7, 10, 17, 0.95) !important;
  border: 1px solid rgba(252, 238, 10, 0.5) !important;
  box-shadow: 0 0 25px rgba(252, 238, 10, 0.15), inset 0 0 15px rgba(252, 238, 10, 0.05) !important;
  position: relative;
  margin-top: 40px !important;
}

body.dark-mode .jobs-cta-banner::before,
body.dark .jobs-cta-banner::before,
html[data-theme="dark"] .jobs-cta-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(252, 238, 10, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

body.dark-mode .jobs-cta-banner h2,
body.dark .jobs-cta-banner h2,
html[data-theme="dark"] .jobs-cta-banner h2,
body.dark-mode .jobs-cta-banner h3,
body.dark .jobs-cta-banner h3,
html[data-theme="dark"] .jobs-cta-banner h3 {
  color: #fcee0a !important;
  text-shadow: 0 0 10px rgba(252, 238, 10, 0.6) !important;
}

body.dark-mode .jobs-cta-banner p,
body.dark .jobs-cta-banner p,
html[data-theme="dark"] .jobs-cta-banner p {
  color: #e2e8f0 !important;
  font-weight: 500;
}

body.dark-mode .jobs-cta-banner .btn-primary,
body.dark .jobs-cta-banner .btn-primary,
html[data-theme="dark"] .jobs-cta-banner .btn-primary,
body.dark-mode .jobs-cta-banner .btn-outline,
body.dark .jobs-cta-banner .btn-outline,
html[data-theme="dark"] .jobs-cta-banner .btn-outline {
  background: rgba(252, 238, 10, 0.1) !important;
  border-color: #fcee0a !important;
  color: #fcee0a !important;
  box-shadow: 0 0 15px rgba(252, 238, 10, 0.3), inset 0 0 10px rgba(252, 238, 10, 0.2) !important;
}

body.dark-mode .jobs-cta-banner .btn-primary:hover,
body.dark .jobs-cta-banner .btn-primary:hover,
html[data-theme="dark"] .jobs-cta-banner .btn-primary:hover,
body.dark-mode .jobs-cta-banner .btn-outline:hover,
body.dark .jobs-cta-banner .btn-outline:hover,
html[data-theme="dark"] .jobs-cta-banner .btn-outline:hover {
  background: #fcee0a !important;
  color: #000 !important;
  box-shadow: 0 0 25px rgba(252, 238, 10, 0.6), inset 0 0 15px rgba(252, 238, 10, 0.4) !important;
}

/* Skills Selection Highlight */
.skills-wrapper .tag.selected,
.selected-preview .tag.selected,
.modal-body .tag.selected {
  background: rgba(252, 238, 10, 0.14) !important;
  border: 1px solid rgba(252, 238, 10, 0.5) !important;
  color: var(--accent) !important;
  box-shadow: 0 0 14px rgba(252, 238, 10, 0.18), inset 0 0 10px rgba(252, 238, 10, 0.08) !important;
}

.skills-wrapper .tag.selected:hover,
.selected-preview .tag.selected:hover,
.modal-body .tag.selected:hover,
html[data-theme="dark"] .skills-wrapper .tag.selected,
html[data-theme="dark"] .selected-preview .tag.selected,
html[data-theme="dark"] .modal-body .tag.selected {
  background: rgba(252, 238, 10, 0.18) !important;
  border-color: rgba(252, 238, 10, 0.72) !important;
  color: #fcee0a !important;
  box-shadow: 0 0 22px rgba(252, 238, 10, 0.28), inset 0 0 12px rgba(252, 238, 10, 0.12) !important;
}