/* ================================================================
   Na'at — Design Enhancement System
   Mejoras visuales globales sin modificar funcionalidad
   ================================================================ */

/* ── VARIABLES EXTENDIDAS ─────────────────────────────────── */
:root {
  --bd: #0a2463;
  --bm: #1e56a0;
  --bb: #3a86ff;
  --bl: #bdd5fb;
  --bp: #e8f1ff;
  --w:  #ffffff;
  --gs: #f4f7fc;
  --td: #0d1b2a;
  --tm: #5a6f8a;

  --blue-deep:   #0a2463;
  --blue-mid:    #1e56a0;
  --blue-bright: #3a86ff;
  --blue-light:  #bdd5fb;
  --blue-pale:   #e8f1ff;
  --white:       #ffffff;
  --gray-soft:   #f4f7fc;
  --text-dark:   #0d1b2a;
  --text-muted:  #5a6f8a;

  /* New tokens */
  --shadow-sm:  0 2px 8px rgba(10,36,99,.07);
  --shadow-md:  0 4px 20px rgba(10,36,99,.10);
  --shadow-lg:  0 8px 40px rgba(10,36,99,.14);
  --shadow-xl:  0 16px 56px rgba(10,36,99,.18);
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --trans:      all .22s cubic-bezier(.4,0,.2,1);
  --accent:     #7c3aed;
  --ok:         #22c55e;
  --warn:       #f59e0b;
  --err:        #ef4444;
}

/* ── SCROLLBAR ───────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: var(--gray-soft); }
::-webkit-scrollbar-thumb  { background: var(--blue-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue-bright); }

/* ── SELECTION ───────────────────────────────────────────── */
::selection { background: var(--blue-pale); color: var(--blue-deep); }

/* ── SMOOTH TRANSITIONS ON ALL INTERACTIVE ELEMENTS ─────── */
a, button, input, select, textarea {
  transition: var(--trans);
}

/* ── SIDEBAR UPGRADE ─────────────────────────────────────── */
.sidebar, .sb {
  background: linear-gradient(180deg, #0a2463 0%, #0d2d7a 60%, #0e1f5e 100%) !important;
  border-right: 1px solid rgba(255,255,255,.04);
}
.sidebar-brand, .sb-brand {
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.sidebar-nav li a:hover, .sn li a:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  transform: translateX(3px);
}
.sidebar-nav li a.active, .sn li a.act {
  background: linear-gradient(135deg, var(--blue-bright), #60a5fa) !important;
  box-shadow: 0 4px 18px rgba(58,134,255,.45) !important;
}
.sidebar-xp, .xpbox {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.08);
  margin: 16px 12px !important;
  border-radius: 14px !important;
}
.xp-fill, .xfill {
  background: linear-gradient(90deg, #3a86ff, #a78bfa, #60a5fa) !important;
}

/* ── CARDS UPGRADE ───────────────────────────────────────── */
.stat-card, .course-card, .total-xp-card,
.results-table, .faq-section, .plan-card,
.current-plan, .profile-card, .ss-card,
.badge-section, .cert-section, .form-container,
.payment-summary, .email-hint {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  transition: var(--trans) !important;
}
.stat-card:hover, .plan-card:hover, .sec-card:hover,
.badge-card:hover, .level-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Stat icon upgrades */
.ic-xp      { background: linear-gradient(135deg,#ede9fe,#ddd6fe) !important; }
.ic-section { background: linear-gradient(135deg,#dcfce7,#bbf7d0) !important; }
.ic-quiz    { background: linear-gradient(135deg,#fef3c7,#fde68a) !important; }
.ic-level   { background: linear-gradient(135deg,#ffe4e6,#fecdd3) !important; }

/* ── BUTTONS UPGRADE ─────────────────────────────────────── */
.btn-continue, .btn-primary, .btn-plan.primary,
.btn-pay, .btn-cert, .btn-save, .btn-success,
.cm-btn-confirm {
  position: relative;
  overflow: hidden;
}
.btn-continue::after, .btn-primary::after,
.btn-plan.primary::after, .btn-pay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
  opacity: 0;
  transition: opacity .2s;
}
.btn-continue:hover::after, .btn-primary:hover::after,
.btn-plan.primary:hover::after, .btn-pay:hover::after {
  opacity: 1;
}

/* ── INPUTS UPGRADE ──────────────────────────────────────── */
input:not([type=range]), select, textarea {
  border-radius: var(--radius-sm) !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--blue-bright) !important;
  box-shadow: 0 0 0 3px rgba(58,134,255,.14) !important;
  background: #fff !important;
}

/* ── PROGRESS BARS UPGRADE ───────────────────────────────── */
.progress-fill, .prog-fill, .xp-fill, .tfill, .xfill,
.total-fill, .sb-fill, .skill-fill {
  background: linear-gradient(90deg, #3a86ff, #60a5fa, #a78bfa) !important;
  border-radius: 4px !important;
}

/* ── BADGES / PILLS UPGRADE ──────────────────────────────── */
.cp-badge, .popular-badge, .active-badge {
  font-weight: 800 !important;
  letter-spacing: .02em !important;
}
.plan-card.popular {
  border-color: var(--blue-bright) !important;
  box-shadow: 0 6px 32px rgba(58,134,255,.2) !important;
}
.plan-card.current-active {
  border-color: var(--ok) !important;
  box-shadow: 0 6px 32px rgba(34,197,94,.15) !important;
}

/* ── SUMMARY BANNERS ─────────────────────────────────────── */
.summary-banner, .overall-card, .course-banner {
  background: linear-gradient(135deg, #0a2463 0%, #1e56a0 60%, #2563eb 100%) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ── PAGE HEADERS ────────────────────────────────────────── */
.page-header h1, .ph h1 {
  font-family: 'Arial Black', sans-serif !important;
  background: linear-gradient(135deg, var(--blue-deep), var(--blue-bright));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── SECTION CARDS ───────────────────────────────────────── */
.sec-card {
  border-left: 4px solid var(--blue-pale) !important;
  border-radius: var(--radius-md) !important;
  transition: var(--trans) !important;
}
.sec-card.done {
  border-left-color: var(--ok) !important;
  background: linear-gradient(135deg, #fff, #f0fdf4) !important;
}
.sec-card:hover {
  border-left-color: var(--blue-bright) !important;
  transform: translateY(-2px) !important;
}

/* ── RESULTS TABLE ───────────────────────────────────────── */
.rt-row:hover { background: var(--blue-pale) !important; }
.results-table { overflow: hidden !important; }

/* ── LEADERBOARD ─────────────────────────────────────────── */
.lb-row.me {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  border-left: 4px solid var(--blue-bright) !important;
}

/* ── FORM PAGES (login/crear_cuenta/recover) ─────────────── */
.login-box, .form-box, .card {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
  backdrop-filter: blur(2px) !important;
}

/* ── NAV UPGRADE ─────────────────────────────────────────── */
nav {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 1px 20px rgba(10,36,99,.07) !important;
}
.nav-cta {
  background: linear-gradient(135deg, var(--blue-deep), var(--blue-mid)) !important;
  color: #fff !important;
  padding: 8px 20px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(10,36,99,.25) !important;
}
.nav-cta:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(10,36,99,.35) !important;
}

/* ── MOBILE NAV MENU ─────────────────────────────────────── */
.nav-mobile-menu {
  background: rgba(255,255,255,.98) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 2px solid var(--blue-pale) !important;
  box-shadow: 0 8px 40px rgba(10,36,99,.12) !important;
}
.nav-mobile-menu ul li a:hover {
  background: var(--blue-pale) !important;
  color: var(--blue-deep) !important;
  padding-left: 32px !important;
}

/* ── HAMBURGER BUTTON ────────────────────────────────────── */
.ham-btn {
  background: linear-gradient(135deg, #0a2463, #1e56a0) !important;
  box-shadow: 0 4px 18px rgba(10,36,99,.35) !important;
}
.ham-btn:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 6px 22px rgba(10,36,99,.45) !important;
}

/* ── FAQ ITEMS ───────────────────────────────────────────── */
.faq-item {
  border-radius: var(--radius-sm) !important;
  padding: 16px 12px !important;
  margin-bottom: 4px !important;
  transition: var(--trans) !important;
}
.faq-item:hover {
  background: var(--blue-pale) !important;
}

/* ── XP PILLS ────────────────────────────────────────────── */
.xp-pill {
  background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
  color: #92400e !important;
  border-radius: 100px !important;
}

/* ── SCORE PILLS ─────────────────────────────────────────── */
.score-pill { border-radius: 100px !important; font-weight: 800 !important; }
.sp-great   { background: linear-gradient(135deg,#dcfce7,#bbf7d0) !important; color: #166534 !important; }
.sp-good    { background: linear-gradient(135deg,#fef9c3,#fef08a) !important; color: #854d0e !important; }
.sp-low     { background: linear-gradient(135deg,#fee2e2,#fecaca) !important; color: #991b1b !important; }

/* ── OVERALL CARD (evaluacion) ───────────────────────────── */
.overall-card {
  background: linear-gradient(135deg, #0a2463 0%, #1e56a0 55%, #2563eb 100%) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-xl) !important;
}
.os-val {
  font-size: 2.4rem !important;
}

/* ── SKILL BARS (evaluacion) ─────────────────────────────── */
.skill-bar { border-radius: 4px !important; }

/* ── PODIUM (clasificacion) ──────────────────────────────── */
.p1 .podium-bar { background: linear-gradient(135deg,#f59e0b,#fbbf24) !important; }
.p2 .podium-bar { background: linear-gradient(135deg,#94a3b8,#e2e8f0) !important; }
.p3 .podium-bar { background: linear-gradient(135deg,#cd7c2f,#f59e0b) !important; }
.p1 .podium-avatar { box-shadow: 0 4px 20px rgba(245,158,11,.5) !important; }

/* ── CERT SECTION ────────────────────────────────────────── */
.cert-section {
  background: linear-gradient(135deg, #0a2463 0%, #1e56a0 50%, #2563eb 100%) !important;
  box-shadow: var(--shadow-xl) !important;
}

/* ── PRO BADGE ───────────────────────────────────────────── */
.pro-badge, .pro-badge-top {
  background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
  box-shadow: 0 4px 16px rgba(124,58,237,.45) !important;
}

/* ── MOBILE OPTIMIZATIONS ────────────────────────────────── */
@media (max-width: 768px) {
  .stat-card         { border-radius: var(--radius-md) !important; }
  .course-card       { border-radius: var(--radius-md) !important; padding: 20px !important; }
  .summary-banner    { border-radius: var(--radius-md) !important; }
  .overall-card      { border-radius: var(--radius-md) !important; }
  .results-table     { border-radius: var(--radius-md) !important; }
  .faq-section       { border-radius: var(--radius-md) !important; }
  .plan-card         { border-radius: var(--radius-md) !important; }

  /* Better touch targets */
  .sidebar-nav li a, .sn li a {
    padding: 13px 14px !important;
    font-size: .95rem !important;
  }
  .btn-continue, .btn-primary, .btn-plan {
    padding: 13px 20px !important;
  }

  /* Better card spacing */
  .stat-card { padding: 18px 16px !important; }
  .stat-card .s-val { font-size: 1.6rem !important; }
}

@media (max-width: 480px) {
  .stat-card { padding: 14px 12px !important; }
  .stat-card .s-icon { width: 38px !important; height: 38px !important; }
}

/* ── ANIMATIONS ──────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.main, .mn {
  animation: fadeIn .3s ease;
}
.stat-card, .course-card, .plan-card, .sec-card {
  animation: fadeInUp .35s ease both;
}
.stat-card:nth-child(1) { animation-delay: .05s; }
.stat-card:nth-child(2) { animation-delay: .10s; }
.stat-card:nth-child(3) { animation-delay: .15s; }
.stat-card:nth-child(4) { animation-delay: .20s; }

/* hero-title override — always white on dark hero bg */
.hero .hero-title, .hero h1 {
  background: none !important;
  -webkit-text-fill-color: var(--blue-deep) !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: var(--blue-deep) !important;
}
.hero .hero-title em {
  background: none !important;
  -webkit-text-fill-color: var(--blue-bright) !important;
  color: var(--blue-bright) !important;
}