:root{
  --primary:#156fe7;--primary-dark:#105cb1;--primary-light:#4d9ef5;
  --accent:#105cb1;--success:#03d26e;--danger:#ef4444;--warning:#f59e0b;
  --dark:#0a1628;--dark2:#07091a;--text:#0f172a;--text2:#475569;--text3:#94a3b8;
  --border:#e2e8f0;--bg:#f0f6ff;--font:'Inter',system-ui,sans-serif;
  --r:14px;--r-sm:10px;
  --navy:#0d2a6e;--blue-light:#c8e0fb;--slate:#64748b;--blue-pale:#eef5ff;--blue-ghost:#f4f8ff;--purple:#6d28d9;--blue-200:#84bcf7;--border-light:#eef3fb;--blue-100:#dbeafe;--success-dark:#02a857;--gray-100:#f1f5f9;--gray-50:#f8fafc;
  --blue-600:#2563eb;--blue-900:#1e3a8a;--amber-200:#fde68a;--amber-400:#fbbf24;--amber-900:#92400e;--orange-600:#ea580c;--gray-300:#cbd5e1;--violet-400:#a78bfa;--violet-600:#7c3aed;--blue-400:#60a5fa;--blue-muted:#5a8fc4;--green-50:#f0fdf4;--blue-500:#3a7fd4;--blue-300:#bfdbfe;--green-100:#dcfce7;--green-600:#16a34a;--blue-wash:#e8f0fb;--amber-600:#d97706;--blue-medium:#7aabce;--slate-700:#334155;--white:#ffffff;
  --pink:#ff3a72;--yellow-100:#fef9c3;--amber-100:#fef3c7;--green-200:#bbf7d0;--violet-50:#faf5ff;--green-300:#86efac;--amber-50:#fffbeb;--sky-300:#93c5fd;--emerald-50:#ecfdf5;--orange-400:#fb923c;--green-700:#15803d;--emerald-700:#047857;--violet-50b:#f5f3ff;--violet-200:#e9d5ff;--orange-50:#fff7ed;--blue-50:#eff6ff;--blue-soft:#f5f9ff;--emerald-600:#059669;--emerald-300:#6ee7b7;--blue-500b:#3b82f6;--indigo-600:#4f46e5;--yellow-50:#fefce8;--amber-700:#b45309;--blue-steel:#c7d5ee
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{font-family:var(--font);background:var(--dark2);color:var(--text);-webkit-font-smoothing:antialiased;min-height:100vh}

/* SCREENS */
.screen{position:fixed;inset:0;display:none;overflow-y:auto;z-index:10}
.screen.active{display:block}

/* BG ORBS */
.bg-circle{position:fixed;border-radius:50%;pointer-events:none;z-index:0}
.bc1{width:600px;height:600px;background:radial-gradient(circle,rgba(37,99,235,.2) 0%,transparent 70%);top:-150px;right:100px}
.bc2{width:450px;height:450px;background:radial-gradient(circle,rgba(109,40,217,.16) 0%,transparent 70%);bottom:-120px;left:-100px}
.bc3{width:280px;height:280px;background:radial-gradient(circle,rgba(14,165,233,.12) 0%,transparent 70%);top:35%;right:80px}
.bc4{width:180px;height:180px;background:radial-gradient(circle,rgba(37,99,235,.22) 0%,transparent 70%);bottom:80px;right:350px}
.diamond{position:fixed;transform:rotate(45deg);pointer-events:none;z-index:0}
.d1{width:14px;height:14px;background:var(--blue-500b);opacity:.4;top:20%;right:45%}
.d2{width:10px;height:10px;background:#818cf8;opacity:.35;bottom:28%;right:40%}
.d3{width:9px;height:9px;background:var(--blue-400);opacity:.3;top:58%;right:52%}
.d4{width:7px;height:7px;background:var(--violet-400);opacity:.3;top:15%;right:28%}

/* LOGO */
.logo-img{height:100px;width:auto;object-fit:contain;flex-shrink:0}
.logo-fallback{width:40px;height:40px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:11px;display:flex;align-items:center;justify-content:center;color:white;font-weight:900;font-size:18px;flex-shrink:0}
.logo-row{display:flex;align-items:center;gap:12px}
.logo-text-main{font-size:16px;font-weight:900;color:white;letter-spacing:.5px}
.logo-text-sub{font-size:10px;font-weight:600;color:rgba(255,255,255,.35);letter-spacing:2px;margin-top:2px}

/* ════════════════════════════
   WELCOME SCREEN — DESKTOP
════════════════════════════ */
#welcome-screen{
  background:linear-gradient(135deg,var(--dark2) 0%,#0d1535 55%,#160830 100%);
  min-height:100vh;
  min-height:100dvh
}
.welcome-close{
  position:fixed;top:20px;right:20px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
  color:white;width:38px;height:38px;border-radius:50%;font-size:16px;
  cursor:pointer;z-index:100;display:flex;align-items:center;justify-content:center;transition:.2s
}
.welcome-close:hover{background:rgba(255,255,255,.2)}
.welcome-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;
  min-height:100vh;min-height:100dvh;width:100%;max-width:1400px;
  margin:0 auto;padding:0 40px
}
.welcome-left{
  padding:48px 40px 48px 0;
  display:flex;flex-direction:column;justify-content:center
}
.welcome-left .logo-row {
    justify-content: center;
    margin-bottom: 32px; /* Un poco de margen extra por debajo para que respire */
  }
.welcome-left h1{
  font-size:clamp(28px,3.5vw,48px);font-weight:900;
  color:white;line-height:1.1;margin-bottom:14px;letter-spacing:-.5px
}
.welcome-left h1 span{color:var(--primary-light)}
.welcome-subtitle{font-size:clamp(14px,1.2vw,18px);color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:32px}
.feats{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-bottom:36px}
.feat{display:flex;align-items:center;gap:13px;padding:6px 0}
.feat-icon-wrap{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid}
.feat-icon-wrap.purple{background:rgba(109,40,217,.2);border-color:rgba(109,40,217,.25)}
.feat-icon-wrap.purple i{font-size:20px;color:var(--violet-400)}
.feat-icon-wrap.blue{background:rgba(37,99,235,.2);border-color:rgba(37,99,235,.25)}
.feat-icon-wrap.blue i{font-size:20px;color:var(--blue-200)}
.feat-content{display:flex;flex-direction:column;gap:3px}
.feat-body{display:flex;align-items:center;gap:6px}
.feat-label{font-size:14px;font-weight:700;color:white}
.feat-info{font-size:16px;color:rgba(255,255,255,.3);cursor:pointer;transition:.15s;flex-shrink:0}
.feat-info:hover{color:var(--primary-light)}
.feat-sub{font-size:13px;color:rgba(255,255,255,.7)}
.info-tooltip{
  position:fixed;background:#1e293b;border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.85);font-size:13px;line-height:1.5;
  padding:12px 16px;border-radius:12px;max-width:260px;
  z-index:9999;display:none;box-shadow:0 8px 32px rgba(0,0,0,.3);font-family:var(--font)
}
.cta-wrap{margin-bottom:14px}
.btn-welcome-cta{
  background:linear-gradient(135deg,var(--primary),var(--indigo-600));
  color:white;border:none;padding:16px 32px;border-radius:var(--r-sm);
  font-size:16px;font-weight:700;cursor:pointer;font-family:var(--font);
  display:inline-flex;align-items:center;gap:10px;transition:.2s;
  box-shadow:0 4px 20px rgba(37,99,235,.35)
}
.btn-welcome-cta:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(37,99,235,.45)}
.btn-welcome-cta i{font-size:18px}
.welcome-note{font-size:13px;color:rgba(255,255,255,.2);display:flex;align-items:center;gap:6px}
.welcome-note i{font-size:15px}

/* PREVIEWS — DERECHA */
.welcome-right{
  padding:40px 0 40px 32px;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1
}
.previews-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.pcard{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;overflow:hidden;transition:.15s
}
.pcard:hover{border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.05)}
.pcard-head{
  background:rgba(0,0,0,.25);padding:8px 12px;
  display:flex;align-items:center;gap:7px;border-bottom:1px solid rgba(255,255,255,.05)
}
.pdots{display:flex;gap:4px}
.pdot{width:7px;height:7px;border-radius:50%;display:inline-block}
.pcard-label{
  font-size:10px;font-weight:700;color:rgba(255,255,255,.28);
  text-transform:uppercase;letter-spacing:.5px;flex:1;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:4px
}
.pcard-label i{font-size:12px}
.pcard-body{padding:12px}
.mini-hero{background:linear-gradient(135deg,var(--dark),var(--blue-900));border-radius:8px;padding:10px 11px;margin-bottom:9px}
.mini-top{font-size:9px;color:rgba(255,255,255,.4);margin-bottom:5px;display:flex;align-items:center;justify-content:space-between}
.mini-badges{display:flex;gap:4px}
.mini-badge{background:rgba(255,255,255,.1);border-radius:20px;padding:2px 6px;font-size:8px;font-weight:700;color:rgba(255,255,255,.55)}
.mini-reto-label{font-size:8px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.mini-reto-text{font-size:9px;font-weight:700;color:white;line-height:1.3;padding:5px 8px;background:rgba(255,255,255,.08);border-radius:4px;border-left:2px solid var(--blue-400);margin-bottom:7px}
.mini-cta-bar{background:var(--blue-600);color:white;font-size:8px;font-weight:800;padding:6px 8px;border-radius:5px;text-align:center}
.mini-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px}
.mini-stat{background:rgba(255,255,255,.05);border-radius:5px;padding:6px 4px;text-align:center}
.mini-stat-v{font-size:11px;font-weight:900}
.mini-stat-v.blue{color:var(--blue-400);font-size:10px}
.mini-stat-v.orange{color:var(--orange-400)}
.mini-stat-l{font-size:8px;color:rgba(255,255,255,.3);margin-top:2px}
.mini-tool{display:flex;align-items:center;gap:7px;padding:7px 6px;background:rgba(255,255,255,.05);border-radius:6px;margin-bottom:5px}
.mini-tool i{font-size:14px;color:var(--violet-400);width:18px;text-align:center;flex-shrink:0}
.mini-tool-name{font-size:9px;font-weight:700;color:white}
.mini-tag{display:inline-block;padding:2px 6px;border-radius:8px;font-size:8px;font-weight:700;margin-top:2px}
.mini-tag.green{background:rgba(16,185,129,.2);color:#5de8a8}
.mini-tag.yellow{background:rgba(245,158,11,.2);color:#fcd34d}
.mini-tag.blue-tag{background:rgba(37,99,235,.2);color:var(--blue-200)}
.mini-tag.red{background:rgba(239,68,68,.2);color:#fca5a5}
.mini-liga-title{font-size:9px;font-weight:800;color:white;margin-bottom:6px;display:flex;align-items:center;justify-content:space-between}
.mini-liga-d{background:rgba(37,99,235,.3);color:var(--blue-200);font-size:8px;padding:2px 6px;border-radius:8px}
.mini-racha{display:flex;align-items:center;gap:7px;background:rgba(234,88,12,.1);border:1px solid rgba(234,88,12,.18);border-radius:6px;padding:6px 9px;margin-bottom:8px}
.mini-racha-num{font-size:16px;font-weight:900;color:var(--orange-400)}
.mini-racha-text{font-size:8px;color:rgba(255,255,255,.35);line-height:1.4}
.mini-row{display:flex;align-items:center;gap:5px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.mini-row.me .mini-name{color:var(--blue-400);font-weight:800}
.mini-row.me .mini-pos{color:var(--blue-400)}
.mini-pos{font-size:8px;font-weight:800;color:rgba(255,255,255,.3);width:12px;flex-shrink:0}
.mini-name{font-size:8px;color:rgba(255,255,255,.5);flex:1}
.mini-bar{flex:1;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.mini-bar-fill{height:100%;border-radius:2px;background:var(--blue-600)}
.mini-rtk{font-size:8px;font-weight:800;color:var(--blue-400);width:32px;text-align:right;flex-shrink:0}
.mini-game{display:flex;align-items:center;gap:7px;padding:7px 6px;background:rgba(255,255,255,.05);border-radius:6px;margin-bottom:5px;border:1px solid rgba(255,255,255,.04)}
.mini-game i{font-size:14px;color:var(--violet-400);width:18px;text-align:center;flex-shrink:0}
.mini-game-name{font-size:9px;font-weight:800;color:white}
.mini-game-desc{font-size:8px;color:rgba(255,255,255,.3);margin-top:2px}
.mini-game-rtk{font-size:9px;font-weight:800;color:var(--blue-400);margin-left:auto;flex-shrink:0}

/* ════════════════════════════
   AUTH
════════════════════════════ */
#auth-screen{
  background:linear-gradient(135deg,var(--dark2) 0%,#0d1535 60%,#160830 100%);
  min-height:100vh;
  min-height:100dvh;
  align-items:center;
  justify-content:center;
  padding:24px
}
#auth-screen.active{display:flex}
.auth-card{
  position:relative;z-index:1;
  background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);border-radius:20px;
  padding:36px;width:100%;max-width:440px;
  box-shadow:0 12px 40px rgba(0,0,0,.3)
}
.auth-logo{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:26px}
.auth-tabs{display:flex;background:rgba(255,255,255,.06);border-radius:var(--r-sm);padding:4px;margin-bottom:24px}
.auth-tab{
  flex:1;padding:11px;text-align:center;border-radius:8px;
  font-size:14px;font-weight:600;cursor:pointer;
  color:rgba(255,255,255,.4);border:none;background:transparent;
  font-family:var(--font);transition:.2s
}
.auth-tab.active{background:var(--primary);color:white}
.auth-form{display:none;flex-direction:column;gap:16px}
.auth-form.active{display:flex}
.form-group{display:flex;flex-direction:column;gap:7px}
.form-group label{font-size:12px;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.5px}
.form-group input,.form-group select{
  width:100%;padding:13px 16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);font-size:15px;font-family:var(--font);
  color:white;outline:none;transition:.2s
}
.form-group input::placeholder{color:rgba(255,255,255,.25)}
.form-group input:focus{border-color:var(--primary);background:rgba(37,99,235,.1);box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.input-pw-wrap{position:relative}
.input-pw-wrap input{padding-right:48px}
.btn-eye{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--primary-light,#6ea8ff);padding:4px;font-size:18px}
.btn-eye:hover{color:#a8d0ff}
.btn-link{background:none;border:none;color:var(--primary-light);font-size:13px;cursor:pointer;font-family:var(--font);text-align:right;padding:0;font-weight:600}
.btn-link.back{text-align:left;margin-bottom:4px}
.btn-primary{
  width:100%;background:var(--primary);color:white;border:none;
  padding:14px;border-radius:var(--r-sm);font-size:15px;font-weight:700;
  cursor:pointer;font-family:var(--font);transition:.2s
}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.auth-divider{display:flex;align-items:center;gap:12px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}
.auth-divider span{font-size:13px;color:rgba(255,255,255,.3)}
.btn-google{
  width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.65);padding:13px;border-radius:var(--r-sm);
  font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);
  display:flex;align-items:center;justify-content:center;gap:10px
}
.btn-google:disabled{opacity:.5;cursor:not-allowed}
.soon-badge{background:rgba(255,255,255,.1);color:rgba(255,255,255,.45);font-size:11px;font-weight:700;padding:3px 8px;border-radius:10px}
.form-msg{font-size:13px;padding:11px 15px;border-radius:var(--r-sm);font-weight:600;display:none}
.form-msg.error{background:rgba(239,68,68,.15);color:#fca5a5;border:1px solid rgba(239,68,68,.3);display:block}
.form-msg.success{background:rgba(16,185,129,.15);color:#5de8a8;border:1px solid rgba(16,185,129,.3);display:block}
.form-msg.info{background:rgba(37,99,235,.15);color:var(--blue-200);border:1px solid rgba(37,99,235,.3);display:block}
.forgot-hint{font-size:13px;color:rgba(255,255,255,.5);line-height:1.6}

/* ════════════════════════════
   ONBOARDING
════════════════════════════ */
#onboarding-screen{
  background:linear-gradient(135deg,var(--dark2) 0%,#0d1535 60%,#160830 100%);
  min-height:100vh;min-height:100dvh;padding:32px 24px
}
#onboarding-screen.active{display:block}
.ob-container{position:relative;z-index:1;max-width:580px;width:100%;margin:0 auto;padding-bottom:60px}
.ob-logo{display:flex;align-items:center;gap:12px;margin-bottom:36px}
.ob-step{display:none;animation:fadeUp .3s ease}
.ob-step.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.ob-step-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.ob-back{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.65);font-size:12px;font-weight:700;font-family:var(--font);
  padding:7px 12px;border-radius:9px;cursor:pointer;transition:.2s
}
.ob-back:hover{background:rgba(255,255,255,.14);color:white}
.ob-step-num{font-size:13px;font-weight:700;color:var(--primary-light);letter-spacing:1px}
.ob-dots{display:flex;gap:6px}
.ob-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.15);display:inline-block;transition:.3s}
.ob-dot.active{background:var(--primary);width:22px;border-radius:4px}
.ob-dot.done{background:var(--success)}
.ob-step h2{font-size:clamp(22px,4vw,30px);font-weight:900;color:white;margin-bottom:10px;line-height:1.2}
.ob-step h2 span{color:var(--primary-light)}
.ob-sub{font-size:15px;color:rgba(255,255,255,.45);margin-bottom:24px}
.ob-intro-icon{font-size:52px;margin-bottom:20px;text-align:center}
.ob-intro-feats{display:flex;flex-direction:column;gap:12px;margin:22px 0 28px}
.ob-intro-feat{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:14px 16px}
.ob-intro-feat i{font-size:20px;color:var(--violet-400);flex-shrink:0}
.ob-intro-feat strong{display:block;font-size:14px;font-weight:700;color:white;margin-bottom:3px}
.ob-intro-feat span{font-size:12px;color:rgba(255,255,255,.4)}
.ob-list{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.ob-list.ob-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ob-opt{
  display:flex;align-items:center;gap:14px;padding:15px 16px;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.08);
  border-radius:12px;cursor:pointer;transition:.2s;
  color:rgba(255,255,255,.7);font-size:14px;font-weight:600
}
.ob-opt:hover{border-color:var(--primary);background:rgba(37,99,235,.1);color:white}
.ob-opt.selected{border-color:var(--primary);background:rgba(37,99,235,.15);color:white}
.ob-opt i{font-size:20px;width:26px;text-align:center;flex-shrink:0;color:var(--violet-400)}
.ob-opt span{flex:1}
.ob-opt small{display:block;font-size:12px;color:rgba(255,255,255,.35);font-weight:400;margin-top:3px}
.ob-opt.grid{flex-direction:column;align-items:flex-start;gap:8px;padding:16px}
.ob-opt.grid i{font-size:22px}
.ob-check{width:22px;height:22px;border-radius:6px;border:2px solid rgba(255,255,255,.2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:.2s}
.ob-opt.selected .ob-check{background:var(--primary);border-color:var(--primary)}
.ob-opt.selected .ob-check::after{content:'✓';color:white;font-size:12px;font-weight:900}
.ob-form{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}
.ob-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.req{color:var(--danger)}
.alias-wrap{position:relative}
.alias-wrap input{padding-right:40px}
.alias-status{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:16px}
.date-row{display:grid;grid-template-columns:1fr 1.6fr 1fr;gap:10px}
.date-row select{
  width:100%;padding:13px 10px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-sm);font-size:14px;font-family:var(--font);
  color:rgba(255,255,255,.7);outline:none;cursor:pointer
}
.date-row select option{background:#1e293b}
.gender-row{display:flex;gap:10px;flex-wrap:wrap}
.gender-opt{
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.1);
  border-radius:10px;padding:11px 16px;cursor:pointer;transition:.2s
}
.gender-opt input[type="radio"]{display:none}
.gender-opt span{font-size:14px;font-weight:600;color:rgba(255,255,255,.6)}
.gender-opt:has(input:checked){border-color:var(--primary);background:rgba(37,99,235,.15)}
.gender-opt:has(input:checked) span{color:white}
.form-hint{font-size:12px;color:rgba(255,255,255,.3);margin-top:5px;display:block}

/* ════════════════════════════
   LOADING
════════════════════════════ */
#loading-screen{background:white;min-height:100vh;min-height:100dvh;padding:24px}
#loading-screen.active{display:block}
.loading-wrap{max-width:560px;width:100%;margin:0 auto;padding:40px 0 60px}
.loading-logo{display:flex;align-items:center;gap:12px;margin-bottom:32px}
.loading-logo .logo-text-main{color:var(--text)}
.loading-logo .logo-text-sub{color:var(--text3)}
.loading-logo .logo-img{filter:none}
.loading-spark{font-size:32px;text-align:center;color:var(--accent);margin-bottom:16px;display:block;animation:sparkle 2s ease-in-out infinite}
@keyframes sparkle{0%,100%{transform:scale(1) rotate(0deg)}50%{transform:scale(1.2) rotate(15deg)}}
.loading-title{font-size:clamp(24px,4vw,36px);font-weight:900;color:var(--text);text-align:center;line-height:1.2;margin-bottom:12px}
.loading-title span{color:var(--primary)}
.loading-sub{font-size:15px;color:var(--text2);text-align:center;line-height:1.6;margin-bottom:32px}
.loading-steps{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}
.loading-step{
  display:flex;align-items:flex-start;gap:18px;
  background:var(--gray-50);border:1px solid var(--border);border-radius:16px;
  padding:20px;opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s ease
}
.loading-step.visible{opacity:1;transform:translateY(0)}
.loading-step-num{width:34px;height:34px;border-radius:50%;background:var(--primary);color:white;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.loading-step-body{flex:1}
.loading-step-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:4px 12px;border-radius:20px;margin-bottom:10px;letter-spacing:.5px}
.loading-step-badge.diag{background:var(--violet-50b);color:var(--accent);border:1px solid var(--violet-200)}
.loading-step-badge.entr{background:var(--green-50);color:var(--green-600);border:1px solid var(--green-200)}
.loading-step-body h3{font-size:15px;font-weight:800;color:var(--text);margin-bottom:8px;line-height:1.3}
.loading-step-body p{font-size:13px;color:var(--text2);line-height:1.6}
.loading-step-icon{font-size:40px;flex-shrink:0;opacity:.6}
.loading-bar-card{background:var(--gray-50);border:1px solid var(--border);border-radius:14px;padding:16px 20px;margin-bottom:16px}
.loading-bar-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.loading-spinner{width:20px;height:20px;border:2.5px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-bar-top span{font-size:14px;font-weight:600;color:var(--text)}
.loading-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden;margin-bottom:6px}
.loading-bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:4px;transition:width .3s ease}
.loading-bar-pct{font-size:13px;font-weight:800;color:var(--primary);text-align:right}
.loading-note{font-size:14px;color:var(--text3);text-align:center;line-height:1.6}

/* ════════════════════════════
   RESPONSIVE — TABLET
════════════════════════════ */
@media(max-width:1024px){
  .welcome-grid{grid-template-columns:1fr;padding:0 32px}
  .welcome-left{padding:48px 0 0}
  .welcome-right{padding:32px 0 48px}
  .previews-grid{grid-template-columns:1fr 1fr}
}

/* ════════════════════════════
   RESPONSIVE — MÓVIL
════════════════════════════ */
@media(max-width:640px){
  .welcome-grid{padding:0 20px}
  .welcome-left{padding:80px 0 24px}
  .welcome-left h1{font-size:30px}
  .welcome-subtitle{font-size:15px}
  .feats{grid-template-columns:1fr;gap:8px}
  .feat-icon-wrap{width:38px;height:38px}
  .feat-icon-wrap i{font-size:18px}
  .feat-label{font-size:15px}
  .feat-sub{font-size:14px}
  .btn-welcome-cta{width:100%;justify-content:center;font-size:15px;padding:16px 24px}
  .welcome-right{display:none}

  #auth-screen{padding:20px}
  .auth-card{padding:28px 20px;border-radius:16px}
  .auth-tab{font-size:13px;padding:10px}
  .form-group input{font-size:16px}

  #onboarding-screen{padding:20px 16px}
  .ob-row{grid-template-columns:1fr}
  .ob-list.ob-grid{grid-template-columns:1fr 1fr}
  .gender-row{flex-direction:column}
  .ob-opt{font-size:15px;padding:14px}
  .ob-opt small{font-size:12px}

  .loading-wrap{padding:32px 0 48px}
  .loading-title{font-size:26px}
  .loading-step{flex-wrap:wrap}
  .loading-step-icon{display:none}
}

@media(max-width:380px){
  .ob-list.ob-grid{grid-template-columns:1fr}
  .welcome-left h1{font-size:26px}
}

/* ════════════ DASHBOARD ════════════ */
#app-screen{background:var(--bg)}
.dash-layout{display:flex;min-height:100vh;background:var(--bg)}
.dash-sidebar{width:240px;flex-shrink:0;background:linear-gradient(160deg,#0a1f5c 0%,var(--primary-dark) 55%,#0a1f5c 100%);padding:28px 18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;border-right:1px solid transparent;background-clip:padding-box;box-shadow:1px 0 0 0 rgba(21,111,231,.6),2px 0 10px 0 rgba(21,111,231,.12)}
.sb-orb1{position:absolute;width:220px;height:220px;background:radial-gradient(circle,rgba(37,99,235,.18) 0%,transparent 70%);top:-60px;right:-40px;pointer-events:none}
.sb-orb2{position:absolute;width:180px;height:180px;background:radial-gradient(circle,rgba(109,40,217,.14) 0%,transparent 70%);bottom:-40px;left:-30px;pointer-events:none}
.sb-diamonds{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sb-dm{position:absolute;border-radius:2px;transform:rotate(45deg);animation:sbFloat linear infinite}
@keyframes sbFloat{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(-10px)}}
.dash-logo{display:flex;align-items:center;gap:10px;margin-bottom:28px;position:relative;z-index:2}
.dash-logo-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:9px;display:flex;align-items:center;justify-content:center;color:white;font-weight:900;font-size:14px;flex-shrink:0}
.dash-logo-text{font-size:14px;font-weight:800;color:white}
.dash-logo-text small{display:block;font-size:9px;color:rgba(255,255,255,.3);letter-spacing:1.5px;margin-top:1px}
.dash-user-card{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:10px;margin-bottom:24px;position:relative;z-index:2}
.dash-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:white;flex-shrink:0}
.dash-av-name{font-size:12px;font-weight:700;color:white}
.dash-av-status{font-size:10px;color:rgba(255,255,255,.4);margin-top:2px;line-height:1.3}

/* ─── ROLE BADGE (al lado del nombre en el sidebar) ─── */
.dash-av-name-row{display:flex;align-items:center;gap:6px;min-width:0}
.dash-av-name-row .dash-av-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.role-badge{
  flex-shrink:0;display:inline-flex;align-items:center;gap:3px;
  padding:2px 7px;border-radius:6px;
  font-size:8.5px;font-weight:900;letter-spacing:.4px;
  font-family:'Outfit',sans-serif;text-transform:uppercase;
  line-height:1;white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.2)
}
.role-badge i{font-size:10px}
.role-premium{background:linear-gradient(135deg,var(--amber-400),var(--amber-600));color:white}
.role-profesor{background:linear-gradient(135deg,var(--blue-400),var(--blue-600));color:white}
.role-admin{background:linear-gradient(135deg,var(--violet-400),var(--violet-600));color:white}
.role-superadmin{
  background:linear-gradient(135deg,var(--pink),#c0185a);color:white;
  animation:roleSuperGlow 2.4s ease-in-out infinite
}
@keyframes roleSuperGlow{
  0%,100%{box-shadow:0 1px 3px rgba(0,0,0,.2),0 0 0 0 rgba(255,58,114,.5)}
  50%{box-shadow:0 1px 3px rgba(0,0,0,.2),0 0 0 4px rgba(255,58,114,0)}
}
.dash-nav{display:flex;flex-direction:column;gap:3px;position:relative;z-index:2}
.dash-nav-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;color:rgba(255,255,255,.82);font-size:13px;font-weight:600;cursor:pointer;transition:.15s;text-decoration:none;border:1px solid transparent}
.dash-nav-item i{font-size:18px;width:22px;text-align:center;flex-shrink:0}
.dash-nav-item:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.05)}
.dash-nav-item.active{background:rgba(21,111,231,.2);color:var(--white);border-color:rgba(21,111,231,.3)}
.dash-upgrade{background:linear-gradient(135deg,rgba(37,99,235,.2),rgba(109,40,217,.2));border:1px solid rgba(37,99,235,.2);border-radius:10px;padding:13px;margin-top:auto;position:relative;z-index:2}
.dash-upgrade-t{font-size:12px;font-weight:800;color:white;margin-bottom:3px}
.dash-upgrade-s{font-size:10px;color:rgba(255,255,255,.4);margin-bottom:9px}
.dash-upgrade-btn{width:100%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:none;color:white;padding:8px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.btn-logout-dash{width:100%;padding:9px;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.45);background:transparent;border-radius:9px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;transition:.15s;position:relative;z-index:2}
.btn-logout-dash:hover{border-color:rgba(239,68,68,.4);color:#fca5a5;background:rgba(239,68,68,.08)}
.dash-main{flex:1;background:var(--blue-ghost);overflow-y:auto;height:100vh;display:flex;flex-direction:column}
.dash-topbar{padding:14px 28px;display:flex;align-items:center;justify-content:space-between;background:white;border-bottom:1px solid var(--border);flex-shrink:0;position:sticky;top:0;z-index:10}
.dash-topbar-left h2{font-size:16px;font-weight:900;color:var(--dark)}
.dash-topbar-left h2 span{color:var(--primary)}
.dash-topbar-left p{font-size:11px;color:var(--slate);margin-top:2px}
.dash-topbar-right{display:flex;align-items:center;gap:10px}
.dash-plan-pill{display:flex;align-items:center;gap:10px;background:var(--gray-50);border:1px solid var(--border);padding:8px 14px;border-radius:10px}
.dash-plan-label{font-size:9px;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.dash-plan-name{font-size:13px;font-weight:800;color:var(--dark)}
.dash-plan-link{font-size:10px;color:var(--primary);font-weight:700;cursor:pointer}
.dash-plan-icon{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;color:white;font-size:15px}
.dash-bell{width:36px;height:36px;border-radius:50%;background:var(--gray-100);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--slate);font-size:17px;cursor:pointer;position:relative;flex-shrink:0}
.dash-bell-dot{position:absolute;top:3px;right:3px;width:8px;height:8px;background:var(--danger);border-radius:50%;border:1.5px solid white}
.dash-content{padding:0;flex:1;background:var(--blue-ghost);display:flex;flex-direction:column}
.dash-content-hidden{display: none !important}
.dash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.dstat{background:white;border:1px solid var(--blue-light);border-radius:12px;padding:16px}
.dstat-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.dstat-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.dsi-blue{background:var(--blue-pale);color:var(--primary)}
.dsi-purple{background:var(--violet-50);color:var(--violet-600)}
.dsi-orange{background:var(--orange-50);color:var(--orange-600)}
.dstat-label{font-size:10px;color:var(--slate);font-weight:600;margin-bottom:2px}
.dstat-val{font-size:20px;font-weight:900;color:var(--dark)}
.dstat-sub{font-size:10px;color:var(--text3);margin-top:3px}
.dstat-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-top:8px}
.dstat-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--blue-600),var(--purple))}
.dstat-dots{display:flex;gap:4px;margin-top:8px}
.ddot{width:9px;height:9px;border-radius:50%;background:var(--border)}
.ddot.on{background:var(--blue-600)}
.dash-reto-banner{background:linear-gradient(135deg,var(--dark),var(--blue-900));border-radius:12px;padding:16px 20px;margin-bottom:14px;display:flex;align-items:center;gap:16px}
.drb-icon{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;color:white;font-size:21px;flex-shrink:0}
.drb-content{flex:1;min-width:0}
.drb-badge{display:inline-flex;align-items:center;gap:5px;background:rgba(37,99,235,.3);border:1px solid rgba(37,99,235,.4);padding:2px 9px;border-radius:20px;font-size:9px;font-weight:700;color:var(--blue-200);margin-bottom:5px}
.drb-title{font-size:13px;font-weight:800;color:white;margin-bottom:3px;line-height:1.4}
.drb-desc{font-size:10px;color:rgba(255,255,255,.5);line-height:1.4}
.drb-btn{background:var(--blue-600);color:white;border:none;padding:10px 16px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0}
.dash-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:10px}
.dcard{background:white;border:1px solid var(--blue-light);border-radius:12px;padding:10px 12px;transition:.15s}
.dcard:hover{border-color:var(--blue-200)}
.dcard.center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.dcard-lbl{font-size:10px;font-weight:700;color:var(--slate);width:100%;text-align:left;margin-bottom:4px}
.liga-emoji{font-size:36px}
.liga-pos-text{font-size:10px;color:var(--slate)}
.liga-pos-num{font-size:24px;font-weight:900;color:var(--dark);display:block;line-height:1}
.liga-div-badge{background:var(--yellow-50);color:var(--amber-900);padding:3px 10px;border-radius:10px;font-size:10px;font-weight:800}
.liga-up-text{font-size:10px;color:var(--success);display:flex;align-items:center;gap:3px}
.btn-outline-blue{padding:7px 14px;border:1.5px solid var(--blue-100);color:var(--primary);background:white;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;width:100%;font-family:inherit}
.trophy-emoji{font-size:40px}
.logro-lbl{font-size:10px;color:var(--slate)}
.logro-nm{font-size:14px;font-weight:800;color:var(--primary)}
.vs-wrap{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--slate)}
.vs-circle{width:34px;height:34px;background:var(--blue-pale);border:1px solid var(--blue-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--primary)}
.vs-desc{font-size:11px;color:var(--slate);line-height:1.5;text-align:center}
.btn-grad{width:100%;padding:9px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:none;color:white;border-radius:9px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.dash-section-hd{font-size:15px;font-weight:800;color:var(--dark);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
.dash-section-hd span{font-size:11px;font-weight:600;color:var(--primary);cursor:pointer}
.dash-plan-list{display:flex;flex-direction:column;gap:8px;padding-bottom:32px}
.dplan-item{display:flex;align-items:center;gap:14px;background:white;border:1px solid var(--blue-light);padding:13px 16px;border-radius:11px;cursor:pointer;transition:.15s}
.dplan-item:hover{border-color:var(--blue-200);transform:translateX(3px)}
.dplan-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.dpi-purple{background:rgba(167,139,250,.15);color:var(--violet-600)}
.dpi-blue{background:rgba(96,165,250,.15);color:var(--primary)}
.dpi-indigo{background:rgba(129,140,248,.15);color:var(--indigo-600)}
.dpi-pink{background:rgba(244,114,182,.15);color:#db2777}
.dpi-green{background:rgba(52,211,153,.15);color:var(--success-dark)}
.dplan-content{flex:1;min-width:0}
.dplan-content strong{font-size:13px;color:var(--dark);font-weight:700;display:block;margin-bottom:2px}
.dplan-content span{font-size:11px;color:var(--slate);line-height:1.4}
.dplan-content small{font-size:10px;color:var(--text3);display:block;margin-top:2px}
.blur-content{filter:blur(4px);user-select:none}
.dplan-actions{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.btn-plan-act{padding:6px 14px;background:var(--blue-pale);border:1px solid var(--blue-300);color:var(--primary);border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit}
.rtk-lbl{font-size:11px;font-weight:800;color:var(--success)}
.plan-arrow{font-size:17px;color:var(--gray-300);flex-shrink:0}
@media(max-width:1024px){.dash-sidebar{width:200px}.dash-stats,.dash-grid3{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.dash-layout{flex-direction:column}.dash-main{height:auto;padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}.dash-stats,.dash-grid3{grid-template-columns:1fr}.dash-reto-banner{flex-direction:column}.drb-btn{width:100%}}
.dato-card{background:white;border:1px solid var(--blue-light);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.dato-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.dato-titulo{font-size:11px;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.5px}
.dato-texto{font-size:14px;font-weight:600;color:var(--dark);line-height:1.5;font-style:italic;margin-bottom:6px}
.dato-fuente{font-size:11px;color:var(--text3)}

/* ════════════ PANTALLA LOGROS ════════════ */
.logros-wrap{padding:24px 28px;flex:1}
.logros-header{margin-bottom:20px}
.logros-header h2{font-size:22px;font-weight:900;color:var(--dark);margin-bottom:4px}
.logros-header p{font-size:13px;color:var(--slate)}
.progreso-card{background:white;border:1px solid var(--blue-light);border-radius:12px;padding:16px 20px;margin-bottom:20px;display:flex;align-items:center;gap:20px}
.progreso-icono{font-size:36px;flex-shrink:0}
.progreso-info{flex:1}
.progreso-titulo{font-size:14px;font-weight:800;color:var(--dark);margin-bottom:6px}
.progreso-bar{height:8px;background:var(--border);border-radius:4px;overflow:hidden;margin-bottom:4px}
.progreso-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--blue-600),var(--purple));transition:.5s}
.progreso-nums{font-size:11px;color:var(--slate);display:flex;justify-content:space-between}
.progreso-total{text-align:center;flex-shrink:0}
.progreso-total-num{font-size:28px;font-weight:900;color:var(--primary);display:block;line-height:1}
.progreso-total-lbl{font-size:10px;color:var(--slate)}
.rareza-section{margin-bottom:22px}
.rareza-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rareza-badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:.3px}
.rb-comun{background:var(--gray-100);color:var(--text2)}
.rb-poco{background:var(--green-50);color:var(--green-600);border:1px solid var(--green-200)}
.rb-raro{background:var(--blue-pale);color:var(--primary);border:1px solid var(--blue-300)}
.rb-epico{background:var(--violet-50);color:var(--violet-600);border:1px solid var(--violet-200)}
.rb-legendario{background:linear-gradient(135deg,var(--yellow-100),var(--amber-200));color:var(--amber-900)}
.rareza-count{font-size:11px;color:var(--text3);margin-left:auto}
.logros-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.logro-card{background:white;border:1.5px solid var(--blue-100);border-radius:12px;padding:14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;position:relative;transition:.15s;cursor:pointer}
.logro-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.logro-card.bloqueado{background:var(--gray-50);border-color:var(--border);cursor:default}
.logro-card.bloqueado:hover{transform:none;box-shadow:none}
.logro-icono-wrap{font-size:30px;line-height:1;margin-bottom:2px}
.logro-icono-wrap.bloq{filter:grayscale(1);opacity:.35}
.logro-nombre{font-size:13px;font-weight:900;color:var(--dark);line-height:1.2}
.logro-card.bloqueado .logro-nombre{color:var(--text3)}
.logro-desc{font-size:11px;font-weight:900;color:var(--text2);line-height:1.3}
.logro-card.bloqueado .logro-desc{color:var(--gray-300)}
.logro-rtk-badge{font-size:10px;font-weight:800;color:var(--primary);margin-top:2px}
.logro-card.bloqueado .logro-rtk-badge{color:var(--border)}
.logro-fecha{font-size:9px;color:var(--text3);margin-top:1px}
.logro-nuevo-badge{position:absolute;top:-5px;right:-5px;background:var(--danger);color:white;font-size:8px;font-weight:800;padding:2px 6px;border-radius:8px;letter-spacing:.3px}
.logro-lock{position:absolute;top:8px;right:8px;font-size:13px;color:var(--border)}
.logro-card.poco_comun.desbloqueado{border-color:var(--green-300)}
.logro-card.raro.desbloqueado{border-color:var(--blue-200);box-shadow:0 2px 12px rgba(37,99,235,.1)}
.logro-card.epico.desbloqueado{border-color:#c4b5fd;box-shadow:0 2px 14px rgba(109,40,217,.15)}
.logro-card.legendario.desbloqueado{border-color:#fde047;box-shadow:0 2px 18px rgba(234,179,8,.25);background:linear-gradient(135deg,var(--amber-50),var(--yellow-50))}
.logros-loading{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--slate);font-size:14px;gap:10px}
@media(max-width:1024px){.logros-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.logros-grid{grid-template-columns:repeat(2,1fr)}.logros-wrap{padding:16px}}

/* LOGROS — iconos Tabler */
.logro-icon-wrap{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:4px;flex-shrink:0;transition:.2s
}
.logro-icon-wrap i{font-size:24px}
.logro-icon-wrap.bloq{opacity:.2;filter:grayscale(1)}
.li-comun{background:var(--gray-100);color:var(--text2)}
.li-poco{background:var(--green-50);color:var(--green-600)}
.li-raro{background:var(--blue-pale);color:var(--primary)}
.li-epico{background:var(--violet-50);color:var(--violet-600)}
.li-legendario{background:linear-gradient(135deg,var(--amber-100),var(--amber-200));color:var(--amber-700)}
.logro-card.desbloqueado .logro-icon-wrap{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.logro-card.legendario.desbloqueado .logro-icon-wrap{box-shadow:0 2px 14px rgba(234,179,8,.3)}

/* ════════════ PANTALLA PERFIL ════════════ */
.perfil-wrap{padding:24px 28px;flex:1}
.perfil-grid{display:grid;grid-template-columns:300px 1fr;gap:16px}
.perfil-card{background:white;border:1px solid var(--blue-light);border-radius:14px;padding:20px}
.perfil-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:18px;border-bottom:1px solid var(--gray-100);margin-bottom:16px}
.perfil-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:white;flex-shrink:0;letter-spacing:-1px}
.perfil-nombre{font-size:17px;font-weight:800;color:var(--dark);text-align:center}
.perfil-alias{font-size:12px;color:var(--slate);display:flex;align-items:center;gap:4px}
.perfil-alias i{font-size:13px;color:var(--primary)}
.perfil-plan-badge{background:var(--blue-pale);color:var(--primary);border:1px solid var(--blue-300);font-size:10px;font-weight:800;padding:3px 10px;border-radius:20px;letter-spacing:.3px}
.perfil-info-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--gray-50)}
.perfil-info-row:last-of-type{border-bottom:none}
.perfil-info-icon{width:30px;height:30px;border-radius:8px;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.perfil-info-icon i{font-size:15px;color:var(--primary)}
.perfil-info-lbl{font-size:10px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.perfil-info-val{font-size:13px;font-weight:600;color:var(--dark);margin-top:1px}
.btn-perfil-edit{width:100%;margin-top:16px;padding:10px;border:1.5px solid var(--blue-100);background:white;color:var(--primary);border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;transition:.15s}
.btn-perfil-edit:hover{background:var(--blue-pale)}
.btn-perfil-logout{width:100%;margin-top:8px;padding:10px;border:1px solid rgba(239,68,68,.2);background:white;color:var(--danger);border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;transition:.15s}
.btn-perfil-logout:hover{background:rgba(239,68,68,.05)}
.perfil-right{display:flex;flex-direction:column;gap:14px}
.perfil-section-title{font-size:11px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.perfil-section-title i{font-size:14px}
.perfil-nivel-card{background:linear-gradient(135deg,var(--dark),var(--blue-900));border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:14px}
.perfil-nivel-icon{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.perfil-nivel-icon i{font-size:22px;color:var(--blue-400)}
.perfil-nivel-info{flex:1;min-width:0}
.perfil-nivel-lbl{font-size:10px;color:rgba(255,255,255,.5);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.perfil-nivel-val{font-size:16px;font-weight:900;color:white;margin-bottom:6px}
.perfil-nivel-bar{height:5px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden}
.perfil-nivel-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--blue-400),var(--violet-400))}
.perfil-nivel-sub{font-size:10px;color:rgba(255,255,255,.4);margin-top:5px}
.perfil-nivel-rtk{font-size:22px;font-weight:900;color:var(--blue-400);flex-shrink:0;text-align:right;line-height:1}
.perfil-nivel-rtk small{display:block;font-size:10px;color:rgba(255,255,255,.4);font-weight:400;margin-top:3px}
.perfil-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.perfil-stat-box{background:var(--gray-50);border:1px solid var(--border);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px}
.perfil-stat-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px}
.psi-blue{background:var(--blue-pale);color:var(--primary)}
.psi-orange{background:var(--orange-50);color:var(--orange-600)}
.psi-purple{background:var(--violet-50);color:var(--violet-600)}
.psi-green{background:var(--green-50);color:var(--green-600)}
.perfil-stat-lbl{font-size:10px;color:var(--slate);font-weight:600}
.perfil-stat-val{font-size:18px;font-weight:900;color:var(--dark);line-height:1.1;margin-top:1px}
.perfil-stat-sub{font-size:10px;color:var(--text3);margin-top:1px}
.perfil-obj-wrap{display:flex;flex-wrap:wrap;gap:6px}
.perfil-obj-tag{background:var(--blue-pale);color:var(--primary);border:1px solid var(--blue-300);font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;display:flex;align-items:center;gap:5px}
.perfil-obj-tag i{font-size:12px}
.perfil-logros-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.perfil-logro-mini{background:var(--gray-50);border:1px solid var(--border);border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer;transition:.15s}
.perfil-logro-mini:hover{border-color:var(--blue-200)}
.plm-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin:0 auto 5px;font-size:15px}
.plm-comun{background:var(--gray-100);color:var(--text2)}
.plm-poco{background:var(--green-50);color:var(--green-600)}
.plm-raro{background:var(--blue-pale);color:var(--primary)}
.plm-epico{background:var(--violet-50);color:var(--violet-600)}
.plm-legendario{background:var(--yellow-50);color:var(--amber-700)}
.plm-count{font-size:15px;font-weight:900;color:var(--dark)}
.plm-lbl{font-size:9px;color:var(--text3);font-weight:600;margin-top:1px}
.perfil-loading{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--slate);font-size:14px;gap:10px}
@media(max-width:1024px){.perfil-grid{grid-template-columns:1fr}.perfil-logros-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:768px){.perfil-wrap{padding:16px}.perfil-logros-grid{grid-template-columns:repeat(3,1fr)}.perfil-stats-grid{grid-template-columns:1fr}}

/* ════════════ PANTALLA LIGA ════════════ */
.liga-wrap{padding:24px 28px;flex:1}
.liga-header{margin-bottom:20px}
.liga-header h2{font-size:22px;font-weight:900;color:var(--dark);margin-bottom:4px}
.liga-header p{font-size:13px;color:var(--slate)}
.liga-top-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.liga-stat-card{background:white;border:1px solid var(--blue-light);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px}
.liga-stat-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.lsi-blue{background:var(--blue-pale);color:var(--primary)}
.lsi-amber{background:var(--amber-50);color:var(--amber-600)}
.lsi-green{background:var(--green-50);color:var(--green-600)}
.liga-stat-lbl{font-size:11px;color:var(--slate);font-weight:600;margin-bottom:2px}
.liga-stat-val{font-size:20px;font-weight:900;color:var(--dark);line-height:1}
.liga-stat-sub{font-size:10px;color:var(--text3);margin-top:2px}
.liga-div-banner{background:linear-gradient(135deg,var(--dark),var(--blue-900));border-radius:12px;padding:16px 20px;margin-bottom:16px;display:flex;align-items:center;gap:16px}
.liga-div-icon{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.liga-div-icon i{font-size:26px;color:var(--amber-400)}
.liga-div-info{flex:1}
.liga-div-lbl {
    font-size: 10px;
    color: #000000;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 4px;
}
.liga-div-name{font-size:20px;font-weight:900;color:rgb(0, 0, 0);margin-bottom:2px}
.liga-div-sub{font-size:12px;color:rgba(0, 0, 0, 0.5)}
.liga-div-pos{text-align:right;flex-shrink:0}
.liga-div-pos-num{font-size:32px;font-weight:900;color:var(--blue-400);line-height:1}
.liga-div-pos-lbl{font-size:10px;color:rgba(255,255,255,.4);margin-top:2px}
.liga-ranking-card{background:white;border:1px solid var(--blue-light);border-radius:14px;overflow:hidden}
.liga-ranking-header{padding:14px 18px;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;justify-content:space-between}
.liga-ranking-title{font-size:14px;font-weight:800;color:var(--dark);display:flex;align-items:center;gap:8px}
.liga-ranking-title i{font-size:16px;color:var(--primary)}
.liga-ranking-sub{font-size:12px;color:var(--text3)}
.liga-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--gray-50);transition:.15s}
.liga-row:last-child{border-bottom:none}
.liga-row:hover{background:var(--gray-50)}
.liga-row.yo{background:var(--blue-pale);border-left:3px solid var(--blue-600)}
.liga-row.yo .liga-row-nombre{color:var(--primary);font-weight:800}
.liga-row.separador{background:#fafafa;justify-content:center;padding:8px;color:var(--text3);font-size:12px;font-weight:600;letter-spacing:.5px}
.liga-row-pos{width:32px;text-align:center;flex-shrink:0}
.pos-medal{font-size:20px;line-height:1}
.pos-num{font-size:14px;font-weight:900;color:var(--slate)}
.liga-row-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--border),var(--gray-300));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--text2);flex-shrink:0}
.liga-row.yo .liga-row-avatar{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white}
.liga-row-nombre{font-size:14px;font-weight:600;color:var(--dark);flex:1}
.liga-row-bar-wrap{flex:1;max-width:180px}
.liga-row-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden}
.liga-row-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--blue-600),var(--purple))}
.liga-row.yo .liga-row-bar-fill{background:linear-gradient(90deg,var(--blue-600),var(--purple))}
.liga-row-rtk{font-size:13px;font-weight:800;color:var(--primary);width:60px;text-align:right;flex-shrink:0}
.liga-row-rtk small{display:block;font-size:10px;font-weight:500;color:var(--text3)}
.liga-empty{padding:40px;text-align:center;color:var(--text3)}
.liga-empty i{font-size:40px;display:block;margin-bottom:12px;color:var(--blue-100)}
@media(max-width:768px){
  .liga-top-grid{grid-template-columns:1fr}
  .liga-wrap{padding:16px}
  .liga-row-bar-wrap{display:none}
}




/* ════════════ LOGROS V2 — TROFEOS SVG ════════════ */
.logros-v2-wrap{padding:24px 28px;flex:1}
.logros-v2-header{margin-bottom:16px}
.logros-v2-header h2{font-size:22px;font-weight:900;color:var(--dark);margin-bottom:4px}
.logros-v2-header p{font-size:13px;color:var(--slate)}

/* Tabs nivel */
.nivel-tabs{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:2px}
.nivel-tab{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--border);background:white;cursor:pointer;transition:.15s;white-space:nowrap;flex-shrink:0}
.nivel-tab.active{border-color:var(--primary);background:var(--blue-pale)}
.nivel-tab.inactive{opacity:.6}
.nivel-tab-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.nivel-tab-icon i{font-size:17px;color:white}
.nt-blue{background:linear-gradient(135deg,var(--blue-600),var(--blue-500b))}
.nt-silver{background:linear-gradient(135deg,var(--slate),var(--text3))}
.nt-gold{background:linear-gradient(135deg,var(--amber-600),var(--warning))}
.nt-purple{background:linear-gradient(135deg,var(--violet-600),var(--violet-400))}
.nivel-tab-name{font-size:12px;font-weight:800;color:var(--dark);display:block}
.nivel-tab.active .nivel-tab-name{color:var(--primary)}
.nivel-tab.inactive .nivel-tab-name{color:var(--text3)}
.nivel-tab-sub{font-size:10px;color:var(--text3);font-weight:600}
.nivel-tab.active .nivel-tab-sub{color:var(--blue-200)}

/* Hero nivel */
.nivel-hero{background:linear-gradient(135deg,var(--blue-900),var(--blue-600),var(--indigo-600));border-radius:14px;padding:18px 22px;margin-bottom:16px;display:flex;align-items:center;gap:16px}
.nivel-hero-badge{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nivel-hero-badge i{font-size:28px;color:white}
.nivel-hero-info{flex:1;min-width:0}
.nivel-hero-name{font-size:17px;font-weight:900;color:white;margin-bottom:3px}
.nivel-hero-desc{font-size:11px;color:black;line-height:1.4;margin-bottom:10px}
.nivel-hero-bar{height:5px;background:rgba(255,255,255,.2);border-radius:3px;overflow:hidden}
.nivel-hero-fill{height:100%;background:white;border-radius:3px;transition:.5s}
.nivel-hero-count{text-align:right;flex-shrink:0}
.nivel-hero-num{font-size:26px;font-weight:900;color:var(--dark);line-height:1}
.nivel-hero-lbl{font-size:10px;color:var(--slate);font-weight:700;margin-top:3px}

/* Grid trofeos */
.trofeos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.trofeo-card{background:white;border:1px solid var(--border);border-radius:16px;padding:20px 12px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;cursor:pointer;transition:.2s;position:relative;overflow:visible}
.trofeo-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(37,99,235,.12);border-color:var(--blue-200)}
.trofeo-card.t-bloqueado{background:var(--gray-50);border-color:var(--border)}
.trofeo-card.t-bloqueado:hover{transform:none;box-shadow:none;border-color:var(--border)}
.trofeo-card.t-legendario{border-color:var(--amber-200);background:linear-gradient(180deg,var(--amber-50) 0%,white 60%)}
.trofeo-card.t-legendario:hover{border-color:var(--warning);box-shadow:0 10px 28px rgba(217,119,6,.15)}
.trofeo-glow{position:absolute;top:-24px;left:50%;transform:translateX(-50%);width:80px;height:80px;border-radius:50%;opacity:.08;background:var(--tc,var(--blue-600))}
.trofeo-card.t-bloqueado .trofeo-glow{display:none}
.trofeo-svg-wrap{width:80px;height:90px;margin-bottom:10px;flex-shrink:0;position:relative}
.trofeo-svg-wrap svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 8px rgba(0,0,0,.16))}
.trofeo-stars{position:absolute;inset:0;pointer-events:none}
.trofeo-star{position:absolute;font-size:9px;animation:tstar 2s ease-in-out infinite}
@keyframes tstar{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.trofeo-card.t-bloqueado .trofeo-stars{display:none}
.trofeo-nuevo{position:absolute;top:-8px;right:8px;background:linear-gradient(135deg,var(--danger),#f97316);color:white;font-size:8px;font-weight:800;padding:3px 8px;border-radius:10px;letter-spacing:.3px;z-index:10;box-shadow:0 2px 6px rgba(239,68,68,.4)}
.trofeo-name{font-size:12px;font-weight:800;color:var(--dark);margin-bottom:4px;line-height:1.2}
.trofeo-card.t-bloqueado .trofeo-name{color:var(--text3)}
.trofeo-desc{font-size:10px;color:var(--slate);line-height:1.4;margin-bottom:10px;flex:1}
.trofeo-status{display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px;font-weight:700;margin-top:auto;width:100%}
.ts-ok{color:var(--success)}
.ts-lock{color:var(--text3)}
.ts-dot-ok{width:16px;height:16px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ts-dot-ok i{font-size:9px;color:white}
.ts-dot-lock{width:16px;height:16px;border-radius:50%;background:var(--gray-300);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ts-dot-lock i{font-size:9px;color:white}

/* Footer */
.logros-v2-footer{background:white;border:1px solid var(--blue-light);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:14px}
.logros-v2-footer-icon{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logros-v2-footer-icon i{font-size:20px;color:white}
.logros-v2-footer-info{flex:1}
.logros-v2-footer-title{font-size:13px;font-weight:800;color:var(--dark);margin-bottom:2px}
.logros-v2-footer-sub{font-size:11px;color:var(--slate)}
.btn-proximos-niveles{background:var(--blue-600);color:white;border:none;padding:9px 16px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0}
.btn-proximos-niveles i{font-size:14px}

.logros-v2-loading{display:flex;align-items:center;justify-content:center;padding:60px;color:var(--slate);font-size:14px;gap:10px}

@media(max-width:1024px){.trofeos-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:768px){.trofeos-grid{grid-template-columns:repeat(2,1fr)}.logros-v2-wrap{padding:16px}.nivel-tabs{gap:6px}}

/**/
/* ════════════ FAB MENÚ MÓVIL ════════════ */
.fab-wrap{display:none;position:fixed;bottom:28px;right:24px;flex-direction:column;align-items:flex-end;gap:10px;z-index:600}
.fab-overlay{position:fixed;inset:0;background:rgba(10,22,40,.35);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:595}
.fab-overlay.fab-visible{opacity:1;pointer-events:auto}
.fab-item{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(16px) scale(.85);transition:all .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.fab-item.fab-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.fab-item:nth-child(1){transition-delay:.00s}
.fab-item:nth-child(2){transition-delay:.05s}
.fab-item:nth-child(3){transition-delay:.10s}
.fab-item:nth-child(4){transition-delay:.15s}
.fab-item:nth-child(5){transition-delay:.20s}
.fab-item-label{background:var(--dark);color:white;font-size:11px;font-weight:700;padding:5px 12px;border-radius:20px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25);font-family:inherit}
.fab-item-btn{width:46px;height:46px;border-radius:14px;background:white;border:1.5px solid var(--blue-100);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;box-shadow:0 3px 12px rgba(0,0,0,.1);flex-shrink:0}
.fab-item-btn:hover{background:var(--blue-pale);border-color:var(--blue-200);transform:scale(1.08)}
.fab-item-btn.fab-active{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-color:transparent;box-shadow:0 4px 14px rgba(37,99,235,.35)}
.fab-item-btn.fab-active i{color:white}
.fab-item-btn i{font-size:20px;color:var(--primary)}
.fab-main-btn{width:56px;height:56px;border-radius:17px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 5px 18px rgba(37,99,235,.45);transition:all .3s cubic-bezier(.34,1.56,.64,1);flex-shrink:0}
.fab-main-btn:hover{transform:scale(1.06)}
.fab-main-btn.fab-open{transform:rotate(45deg) scale(1.05);background:linear-gradient(135deg,var(--danger),#f97316);box-shadow:0 5px 18px rgba(239,68,68,.4)}
.fab-main-btn i{font-size:24px;color:white;transition:transform .3s}

@media(max-width:768px){
  /* Sidebar → cabecera compacta: logo + usuario + campana (el menú vive en la barra inferior) */
  .dash-sidebar{width:100%;height:auto;min-height:0;position:relative;top:auto;flex-direction:row;align-items:center;gap:8px;padding:8px 12px;overflow:visible}
  .dash-logo{margin-bottom:0;flex-shrink:0}
  .dash-logo-img-wrap{padding:0;width:auto}
  .dash-logo-img{width:96px;filter:drop-shadow(0 0 6px rgba(37,99,235,.4)) brightness(1.15)}
  .dash-user-card{margin-bottom:0;flex:1;min-width:0;padding:6px 9px;gap:8px;border-radius:12px}
  .dash-av{width:30px;height:30px;font-size:11px}
  .dash-av-name{font-size:11.5px}
  .dash-av-status{display:none}
  .role-badge{padding:2px 5px;font-size:7.5px}
  .dash-bell-wrap{flex-shrink:0}
  .dash-nav,.dash-upgrade,.dash-nav-divider,.dash-nav-help,.btn-logout-dash,.sb-orb1,.sb-orb2,.sb-diamonds{display:none}
  /* Panel de notificaciones adaptado a móvil (antes quedaba fuera de pantalla) */
  .notif-panel{left:0;width:min(330px,88vw);z-index:2100}
}

/* ════════════ SECCIÓN DIAGNÓSTICO ════════════ */
.diag-wrap{padding:24px 28px 40px;flex:1;overflow-y:auto}
.diag-header{margin-bottom:14px}
.diag-header h2{font-size:22px;font-weight:900;color:var(--dark);margin-bottom:3px}
.diag-header h2 span{color:var(--primary)}
.diag-header p{font-size:12px;color:var(--slate);margin-bottom:3px}
.diag-header strong{font-size:12px;color:var(--primary);font-weight:700}
.diag-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.diag-stat{background:white;border:1px solid var(--blue-light);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:12px}
.dsi{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dsi-b{background:linear-gradient(135deg,var(--primary),var(--primary-dark))}
.dsi-p{background:linear-gradient(135deg,var(--violet-600),var(--violet-400))}
.dsi i{font-size:19px;color:white}
.ds-val{font-size:20px;font-weight:900;color:var(--dark);line-height:1}
.ds-lbl{font-size:10px;color:var(--slate);margin-top:2px}
.ds-link{font-size:10px;color:var(--primary);font-weight:700;cursor:pointer;margin-top:4px;display:block}
.orbital-wrap{background:white;border:1px solid var(--blue-light);border-radius:16px;padding:18px 18px 22px;margin-bottom:14px;overflow:hidden}
.orbital-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.orbital-title{font-size:11px;font-weight:800;color:var(--slate);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:5px}
.orbital-title i{font-size:13px}
.orbital-page-lbl{font-size:10px;color:var(--text3);font-weight:600}
.orbital-nav{display:flex;gap:6px;align-items:center;margin-bottom:14px}
.orb-nb{width:28px;height:28px;border-radius:8px;border:1.5px solid var(--blue-100);background:white;color:var(--primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;font-size:13px;font-family:inherit}
.orb-nb:hover{background:var(--blue-pale);border-color:var(--blue-200)}
.orb-nb:disabled{opacity:.3;cursor:default}
.orb-dots{display:flex;gap:4px;align-items:center}
.orb-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:.3s;cursor:pointer}
.orb-dot.active{background:var(--blue-600);width:16px;border-radius:3px}
.orbital{position:relative;width:100%;height:440px;overflow:hidden}
.orbital-lines{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.orbital-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:128px;height:128px;border-radius:50%;overflow:hidden;z-index:10;box-shadow:0 8px 32px rgba(37,99,235,.35),inset 0 -4px 12px rgba(37,99,235,.15);border:3px solid var(--sky-300);transition:border-color .5s}
.sphere-bg{position:absolute;inset:0;background:var(--blue-light);border-radius:50%}
.liquid-svg{position:absolute;left:0;width:100%;transition:bottom 1.5s cubic-bezier(.4,0,.2,1)}
.sphere-shine{position:absolute;top:12px;left:15px;width:42px;height:26px;background:radial-gradient(ellipse,rgba(255,255,255,.65) 0%,transparent 75%);border-radius:50%;pointer-events:none;z-index:5}
.sphere-shine2{position:absolute;bottom:14px;right:14px;width:20px;height:12px;background:radial-gradient(ellipse,rgba(255,255,255,.3) 0%,transparent 75%);border-radius:50%;pointer-events:none;z-index:5}
.sphere-border{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),inset 0 0 20px rgba(37,99,235,.08);z-index:6;pointer-events:none}
.sphere-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:7}
.sphere-title-s{font-size:8px;font-weight:700;color:var(--navy);opacity:.85;margin-bottom:1px}
.sphere-pct-s{font-size:26px;font-weight:900;color:var(--dark);text-shadow:0 1px 3px rgba(255,255,255,.8);line-height:1}
.sphere-sub-s{font-size:8px;font-weight:700;color:var(--navy);opacity:.7;margin-top:2px}
.tool-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:all .35s cubic-bezier(.34,1.2,.64,1);z-index:5}
.tool-node:hover{transform:translate(-50%,-50%) scale(1.1)}
.tool-node.t-bloq{cursor:default;opacity:.55}
.tool-node.t-bloq:hover{transform:translate(-50%,-50%)}
.tool-node.node-in{animation:nIn .4s cubic-bezier(.34,1.3,.64,1) both}
@keyframes nIn{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.ti-wrap{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;border:2px solid;position:relative;box-shadow:0 3px 10px rgba(0,0,0,.1)}
.ti-wrap i{font-size:21px}
.tw-h{background:linear-gradient(135deg,var(--green-50),var(--green-100));border-color:var(--green-300)}.tw-h i{color:var(--green-600)}
.tw-l{background:linear-gradient(135deg,var(--blue-50),var(--blue-100));border-color:var(--blue-200)}.tw-l i{color:var(--primary)}
.tw-b{background:var(--gray-100);border-color:var(--border)}.tw-b i{color:var(--text3)}
.t-check{position:absolute;bottom:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--success);border:2px solid white;display:flex;align-items:center;justify-content:center}
.t-check i{font-size:7px;color:white}
.t-lock{position:absolute;bottom:-4px;right:-4px;width:16px;height:16px;border-radius:50%;background:var(--text3);border:2px solid white;display:flex;align-items:center;justify-content:center}
.t-lock i{font-size:7px;color:white}
.t-free{position:absolute;top:-6px;right:-6px;background:var(--yellow-100);color:var(--amber-900);font-size:7px;font-weight:800;padding:1px 5px;border-radius:7px;border:1px solid var(--amber-200)}
.tool-name{font-size:9px;font-weight:700;color:var(--dark);text-align:center;max-width:74px;line-height:1.2}
.tool-node.t-bloq .tool-name{color:var(--text3)}
.tool-st{font-size:8px;font-weight:600}
.st-h{color:var(--success)}.st-l{color:var(--primary)}.st-b{color:var(--text3)}
.diag-expand{background:white;border:1px solid var(--blue-light);border-radius:12px;overflow:hidden;margin-bottom:12px}
.dex-hd{padding:12px 16px;display:flex;align-items:center;gap:10px;cursor:pointer}
.dex-icon{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dex-icon i{font-size:17px;color:white}
.dex-title{font-size:13px;font-weight:800;color:var(--dark);flex:1}
.dex-sub{font-size:10px;color:var(--slate)}
.dex-body{padding:0 16px 14px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.df{display:flex;align-items:flex-start;gap:8px}
.df-n{width:24px;height:24px;border-radius:7px;background:var(--blue-pale);color:var(--primary);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.df-t{font-size:11px;font-weight:800;color:var(--dark);margin-bottom:2px}
.df-s{font-size:10px;color:var(--slate);line-height:1.4}
.diag-cta{background:linear-gradient(135deg,var(--dark),var(--blue-900));border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:12px}
.dcta-icon{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dcta-icon i{font-size:20px;color:var(--violet-400)}
.dcta-t{font-size:13px;font-weight:900;color:white;margin-bottom:2px}
.dcta-s{font-size:10px;color:rgba(255,255,255,.5)}
.btn-mejor{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border:none;padding:9px 16px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:5px;font-family:inherit}
@media(max-width:768px){.diag-wrap{padding:16px}.diag-stats{grid-template-columns:1fr}.dex-body{grid-template-columns:1fr}}

/* ════════════ SECCIÓN ENTRENAMIENTO V2 ════════════ */
.entr-wrap{padding:24px 28px 40px;flex:1;overflow-y:auto}

/* Hero */
.entr-hero{background:linear-gradient(135deg,var(--dark),var(--blue-900),var(--blue-600));border-radius:16px;padding:28px 32px;margin-bottom:20px;display:flex;align-items:center;gap:24px;position:relative;overflow:hidden}
.entr-hero::before{content:'';position:absolute;top:-40px;right:120px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.04)}
.entr-hero::after{content:'';position:absolute;bottom:-60px;right:60px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.03)}
.entr-hero-text{flex:1;z-index:1}
.entr-hero-text h2{font-size:26px;font-weight:900;color:white;line-height:1.2;margin-bottom:8px}
.entr-hero-text h2 span{color:var(--blue-400)}
.entr-hero-text p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.5}
.entr-hero-icon{flex-shrink:0;z-index:1;opacity:.9}

/* Cards superiores */
.entr-top-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.entr-comp-card{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:14px;padding:20px;color:white}
.entr-comp-title{font-size:16px;font-weight:900;margin-bottom:4px}
.entr-comp-sub{font-size:11px;opacity:.65;margin-bottom:14px;line-height:1.4}
.entr-comp-modes{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.entr-comp-mode{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:.15s;min-width:58px}
.entr-comp-mode:hover{background:rgba(255,255,255,.2)}
.entr-comp-mode i{font-size:20px}
.entr-comp-mode span{font-size:9px;font-weight:700;opacity:.85}
.btn-crear-comp {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: .15s;
}
.btn-crear-comp:hover {
  background: rgba(255, 255, 255, 0.25);
}

.entr-inv-card{background:white;border:1px solid var(--blue-light);border-radius:14px;padding:20px}
.entr-inv-title{font-size:14px;font-weight:900;color:var(--dark);margin-bottom:4px}
.entr-inv-sub{font-size:11px;color:var(--slate);margin-bottom:14px;line-height:1.4}
.entr-inv-badge{display:flex;align-items:center;gap:10px;background:var(--blue-soft);border:1px solid var(--blue-light);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.entr-inv-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.entr-inv-avatar i{font-size:18px;color:white}
.entr-inv-name{font-size:12px;font-weight:800;color:var(--dark)}
.entr-inv-comp{font-size:10px;color:var(--slate)}
.entr-inv-input{display:flex;gap:8px}
.entr-inv-input input{flex:1;border:1.5px solid var(--border);border-radius:8px;padding:8px 12px;font-size:12px;font-family:inherit;outline:none;color:var(--dark)}
.entr-inv-input input:focus{border-color:var(--blue-200)}
.entr-inv-input button{background:var(--blue-600);color:white;border:none;padding:8px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit}

/* Grid herramientas */
.entr-section-title{font-size:16px;font-weight:900;color:var(--dark);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.entr-section-title i{font-size:18px;color:var(--primary)}

.entr-tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.entr-tool{background:white;border:1.5px solid var(--border);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;transition:.2s;position:relative;overflow:hidden}
.entr-tool:hover{border-color:var(--blue-200);box-shadow:0 6px 20px rgba(37,99,235,.1);transform:translateY(-2px)}
.entr-tool.prox{background:rgba(255,255,255,.02);cursor:default;opacity:.5}
.entr-tool.prox:hover{transform:none;box-shadow:none;border-color:var(--border)}
.entr-tool-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.entr-tool-icon{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.entr-tool-icon i{font-size:22px;color:white}
.entr-tool-badge{font-size:9px;font-weight:800;padding:3px 8px;border-radius:8px;white-space:nowrap;align-self:flex-start}
.badge-rtk{background:var(--yellow-100);color:var(--amber-900);border:1px solid var(--amber-200)}
.badge-prox{background:var(--gray-100);color:var(--slate);border:1px solid var(--border)}
.badge-nuevo{background:var(--green-100);color:var(--green-700);border:1px solid var(--green-200)}
.badge-ia{background:var(--violet-50b);color:var(--purple);border:1px solid var(--violet-200)}
.entr-tool-info{flex:1}
.entr-tool-name{font-size:13px;font-weight:800;color:var(--dark);margin-bottom:3px;line-height:1.2}
.entr-tool.prox .entr-tool-name{color:var(--slate)}
.entr-tool-sub{font-size:11px;color:var(--slate);line-height:1.4;margin-bottom:4px}
.entr-tool-dev{font-size:10px;font-weight:700;color:var(--primary)}
.entr-tool.prox .entr-tool-dev{color:var(--text3)}
.entr-tool-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}
.btn-entr{border:none;padding:8px 16px;border-radius:9px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px;transition:.15s}
.btn-entr-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white}
.btn-entr-primary:hover{opacity:.9}
.btn-entr-outline{background:white;color:var(--primary);border:1.5px solid var(--blue-100)}
.btn-entr-outline:hover{background:var(--blue-pale)}
.btn-entr-gray{background:var(--gray-100);color:var(--text3);cursor:default}
.entr-tool-rtk{font-size:10px;font-weight:700;color:var(--success);display:flex;align-items:center;gap:3px}
.entr-tool-rtk i{font-size:11px}

/* Layout derecha */
.entr-layout{display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:flex-start}
.entr-side{display:flex;flex-direction:column;gap:14px}

/* Recursos */
.entr-recursos{background:white;border:1px solid var(--blue-light);border-radius:14px;padding:16px}
.entr-rec-title{font-size:13px;font-weight:800;color:var(--dark);margin-bottom:12px}
.entr-rec-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:.15s}
.entr-rec-item:last-child{border-bottom:none;padding-bottom:0}
.entr-rec-item:hover .entr-rec-name{color:var(--primary)}
.entr-rec-thumb{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.entr-rec-name{font-size:12px;font-weight:700;color:var(--dark);margin-bottom:2px;line-height:1.2}
.entr-rec-sub{font-size:10px;color:var(--slate)}
.entr-rec-link{font-size:10px;font-weight:700;color:var(--primary);margin-top:3px;display:block}

/* Ranking lateral */
.entr-ranking{background:white;border:1px solid var(--blue-light);border-radius:14px;padding:16px}
.entr-rank-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.entr-rank-title{font-size:13px;font-weight:800;color:var(--dark)}
.entr-rank-link{font-size:10px;font-weight:700;color:var(--primary);cursor:pointer}
.entr-rank-item{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid #f8faff}
.entr-rank-item:last-child{border-bottom:none}
.entr-rank-pos{width:20px;font-size:12px;font-weight:900;color:var(--dark);text-align:center;flex-shrink:0}
.entr-rank-pos.p1{color:var(--warning)}
.entr-rank-pos.p2{color:var(--text3)}
.entr-rank-pos.p3{color:var(--amber-700)}
.entr-rank-av{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:white;flex-shrink:0}
.entr-rank-name{font-size:11px;font-weight:700;color:var(--dark);flex:1}
.entr-rank-rtk{font-size:10px;font-weight:700;color:var(--primary)}

/* Banner CTA */
.entr-banner{background:linear-gradient(135deg,var(--dark),var(--blue-900));border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:14px;margin-top:20px}
.entr-banner-icon{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.entr-banner-icon i{font-size:22px;color:var(--amber-400)}
.entr-banner-info{flex:1}
.entr-banner-title{font-size:14px;font-weight:900;color:white;margin-bottom:2px}
.entr-banner-sub{font-size:11px;color:rgba(255,255,255,.5)}
.btn-entr-banner{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border:none;padding:10px 18px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0}

@media(max-width:1024px){
  .entr-layout{grid-template-columns:1fr}
  .entr-side{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .entr-tools-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .entr-wrap{padding:16px}
  .entr-top-cards{grid-template-columns:1fr}
  .entr-tools-grid{grid-template-columns:1fr}
  .entr-side{grid-template-columns:1fr}
  .entr-hero{padding:20px}
  .entr-hero-text h2{font-size:20px}
}

/* ════════════ DIAGNÓSTICO — MODAL INFORME ════════════ */






/* Modal informe */
.informe-modal-overlay{position:fixed;inset:0;background:rgba(10,22,40,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:8000;display:flex;align-items:center;justify-content:center;padding:20px}
.informe-modal{background:white;border-radius:24px;padding:32px 28px;max-width:400px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.2);position:relative;animation:modalIn .3s cubic-bezier(.34,1.3,.64,1)}
@keyframes modalIn{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
.modal-back{position:absolute;top:18px;left:18px;background:var(--gray-100);border:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--slate);font-size:18px;transition:.15s}
.modal-back:hover{background:var(--border);color:var(--dark)}
.modal-title-sub{font-size:15px;font-weight:700;color:var(--slate);margin-bottom:4px}
.modal-title-main{font-size:22px;font-weight:900;color:var(--primary);margin-bottom:24px;line-height:1.2}
.modal-icon-wrap{position:relative;width:140px;height:140px;margin:0 auto 24px;display:flex;align-items:center;justify-content:center}
.modal-icon-circle{width:130px;height:130px;border-radius:50%;background:linear-gradient(135deg,#ede9fe,var(--blue-100));display:flex;align-items:center;justify-content:center}
.modal-icon-circle i{font-size:58px;color:var(--purple)}
.modal-icon-lock{position:absolute;bottom:4px;right:4px;width:36px;height:36px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.modal-icon-lock i{font-size:18px;color:var(--dark)}
.modal-free-icon{position:absolute;bottom:4px;right:4px;width:36px;height:36px;background:var(--success);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(16,185,129,.3)}
.modal-free-icon i{font-size:18px;color:white}
.modal-premium-label{font-size:15px;font-weight:900;color:var(--dark);margin-bottom:8px}
.modal-desc{font-size:13px;color:var(--slate);line-height:1.6;margin-bottom:24px}
.modal-price{font-size:42px;font-weight:900;color:var(--dark);margin-bottom:4px;line-height:1}
.modal-price span{font-size:24px;font-weight:700;color:var(--slate)}
.modal-price-sub{font-size:11px;color:var(--text3);margin-bottom:24px}
.modal-credits-info{background:var(--green-50);border:1px solid var(--green-200);border-radius:12px;padding:12px 16px;margin-bottom:20px;text-align:left}
.modal-credits-title{font-size:12px;font-weight:800;color:var(--green-700);margin-bottom:4px}
.modal-credits-desc{font-size:11px;color:var(--green-600);line-height:1.4}
.btn-modal-primary{width:100%;background:var(--blue-600);color:white;border:none;padding:16px;border-radius:14px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;margin-bottom:12px;transition:.15s}
.btn-modal-primary:hover{background:#1d4ed8}
.btn-modal-primary.green{background:var(--success)}
.btn-modal-primary.green:hover{background:var(--success-dark)}
.modal-divider{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:var(--text3);font-size:12px}
.modal-divider::before,.modal-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.btn-modal-pro{width:100%;background:white;color:var(--purple);border:2px solid var(--purple);padding:14px;border-radius:14px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;transition:.15s}
.btn-modal-pro:hover{background:var(--violet-50b)}
.modal-pro-sub{font-size:11px;color:var(--text3)}
.modal-free-badge{background:var(--green-100);color:var(--green-700);font-size:12px;font-weight:800;padding:6px 16px;border-radius:20px;display:inline-block;margin-bottom:16px}

/* ════════════ RETO MENÚ DIALOG ════════════ */
.reto-menu{display:flex;flex-direction:column;gap:6px;align-items:flex-end;margin-bottom:4px}
.reto-option{background:var(--dark);color:white;font-size:11px;font-weight:700;padding:9px 14px;border-radius:20px 20px 4px 20px;cursor:pointer;transition:all .2s cubic-bezier(.34,1.3,.64,1);opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;white-space:nowrap;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 14px rgba(0,0,0,.2)}
.reto-option.reto-opt-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.reto-option:hover{background:var(--blue-900);transform:translateY(-1px) scale(1.03)}
.reto-option:active{transform:scale(.97)}
.reto-option-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.reto-bubble{position:relative}
.reto-bubble::after{content:'';position:absolute;bottom:-6px;right:18px;width:12px;height:12px;background:var(--dark);border-right:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);transform:rotate(45deg)}
.reto-avatar-wrap.reto-open .reto-mic-svg{animation:retoFloat .8s ease-in-out infinite}

/* ════════════ MASCOTA RETO V3 ════════════ */
.reto-widget{position:fixed;bottom:28px;right:28px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:999;pointer-events:none}
.reto-widget .reto-avatar-wrap{pointer-events:auto}

/* Bocadillo con pulso */
.reto-boc{background:var(--dark);border:1.5px solid rgba(255,255,255,.12);border-radius:16px 16px 16px 4px;padding:14px 15px;width:232px;box-shadow:0 8px 28px rgba(0,0,0,.25);position:relative;opacity:0;visibility:hidden;transform:scale(.93) translateY(6px);transform-origin:bottom right;transition:opacity .35s cubic-bezier(.34,1.3,.64,1),transform .35s cubic-bezier(.34,1.3,.64,1),visibility .35s;pointer-events:none}
.reto-boc.show{opacity:1;visibility:visible;transform:scale(1) translateY(0);pointer-events:auto;animation:bocRespira 4s ease-in-out infinite}
@keyframes bocRespira{
  0%,100%{box-shadow:0 8px 28px rgba(0,0,0,.25),0 0 0 0 rgba(37,99,235,0)}
  40%{box-shadow:0 8px 28px rgba(0,0,0,.25),0 0 0 4px rgba(37,99,235,.18)}
  70%{box-shadow:0 8px 28px rgba(0,0,0,.25),0 0 0 2px rgba(37,99,235,.08)}
}
.reto-boc::after{content:'';position:absolute;bottom:-7px;right:18px;width:13px;height:13px;background:var(--dark);border-right:1.5px solid rgba(255,255,255,.12);border-bottom:1.5px solid rgba(255,255,255,.12);transform:rotate(45deg)}

.boc-header{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.boc-back{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.1);border:none;color:rgba(255,255,255,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;font-size:11px;flex-shrink:0;font-family:inherit}
.boc-back:hover{background:rgba(255,255,255,.2);color:white}
.boc-back.hidden{opacity:0;pointer-events:none}
.boc-crumb{font-size:10px;font-weight:800;color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.5px;flex:1}
.boc-text{color:rgba(255,255,255,.7);font-size:11px;font-weight:600;line-height:1.5;margin-bottom:10px}

.boc-opts{display:flex;flex-direction:column;gap:5px}
.boc-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:.15s;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;animation:optShimmer .5s ease both}
.boc-opt:nth-child(1){animation-delay:.05s}
.boc-opt:nth-child(2){animation-delay:.12s}
.boc-opt:nth-child(3){animation-delay:.19s}
.boc-opt:nth-child(4){animation-delay:.26s}
@keyframes optShimmer{0%{opacity:0;transform:translateX(8px)}60%{opacity:1;transform:translateX(-2px)}100%{opacity:1;transform:translateX(0)}}
.boc-opt::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:shimmerSlide 2.5s ease-in-out infinite}
@keyframes shimmerSlide{0%{left:-100%}60%,100%{left:160%}}
.boc-opt:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.15);transform:translateX(-2px)}
.boc-opt:active{transform:scale(.97)}
.boc-icon{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.boc-icon i{font-size:11px}
.boc-label{color:white;font-size:11px;font-weight:700;flex:1;line-height:1.2}
.boc-arr{color:rgba(255,255,255,.25);font-size:10px}
.boc-resp{color:white;font-size:12px;font-weight:600;line-height:1.6;margin-bottom:10px;animation:bocFi .35s ease}
@keyframes bocFi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.boc-action{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:white;padding:8px 12px;border-radius:9px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:6px;transition:.15s}
.boc-action:hover{background:rgba(255,255,255,.16)}

/* Avatar */
.reto-avatar-wrap{position:relative;width:60px;height:60px;cursor:pointer;flex-shrink:0}
.reto-mic-svg{width:60px;height:60px;animation:retoFloat 3s ease-in-out infinite;filter:drop-shadow(0 5px 12px rgba(37,99,235,.4))}
@keyframes retoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.reto-wave{position:absolute;border-radius:50%;border:2px solid rgba(37,99,235,.2);top:50%;left:50%;transform:translate(-50%,-50%);animation:retoWave 2.5s ease-out infinite;pointer-events:none}
.reto-wave:nth-child(1){width:68px;height:68px}
.reto-wave:nth-child(2){width:82px;height:82px;animation-delay:.6s}
@keyframes retoWave{0%{opacity:.5;transform:translate(-50%,-50%) scale(.85)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}}
.reto-dot{position:absolute;bottom:1px;right:1px;width:12px;height:12px;background:var(--success);border-radius:50%;border:2px solid white;animation:retoDot 2s ease-in-out infinite}
@keyframes retoDot{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{box-shadow:0 0 0 4px rgba(16,185,129,0)}}
.reto-eye{animation:retoBlink 4s ease-in-out infinite}
.reto-eye-r{animation:retoBlink 4s ease-in-out infinite;animation-delay:.1s}
@keyframes retoBlink{0%,44%,56%,100%{transform:scaleY(1)}50%{transform:scaleY(.08)}}

/* Overlay cierre */
.reto-overlay{position:fixed;inset:0;z-index:998;display:none}

/* Móvil — Reto abajo derecha, por encima de la barra de navegación (y bajo ella en z-index,
   así nunca tapa sus botones) */
@media(max-width:768px){
  .reto-widget{position:fixed;left:auto;right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));align-items:flex-end;z-index:930}
  .reto-overlay{z-index:929}
  .reto-mic-svg{width:50px;height:50px}
  .reto-wave:nth-child(1){width:56px;height:56px}
  .reto-wave:nth-child(2){width:68px;height:68px}
  .reto-boc{width:min(300px,calc(100vw - 24px));max-height:calc(100dvh - 190px);overflow-y:auto}
}

/* ════════════ SECCIÓN RETORIKA ════════════ */
.rtk-wrap{padding:24px 28px 40px;flex:1;overflow-y:auto}
.rtk-hero{display:flex;align-items:flex-start;gap:28px;margin-bottom:28px}
.rtk-hero-text{flex:1}
.rtk-hero-text h1{font-size:28px;font-weight:900;color:var(--dark);margin-bottom:4px}
.rtk-hero-text h1 span{color:var(--primary)}
.rtk-hero-divider{width:48px;height:3px;background:linear-gradient(90deg,var(--blue-600),var(--purple));border-radius:2px;margin-bottom:14px}
.rtk-hero-text p{font-size:13px;color:var(--slate);line-height:1.7;margin-bottom:20px}
.rtk-mision{background:linear-gradient(135deg,var(--primary),var(--primary-dark));border-radius:14px;padding:16px 20px;display:flex;align-items:center;gap:14px}
.rtk-mision-icon{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rtk-mision-icon i{font-size:22px;color:white}
.rtk-mision-text{color:white}
.rtk-mision-label{font-size:12px;font-weight:800;opacity:.7;margin-bottom:2px}
.rtk-mision-value{font-size:14px;font-weight:700;line-height:1.4}
.rtk-hero-logo{width:160px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.rtk-logo-svg{width:140px;height:140px}

/* Servicios */
.rtk-section-title{font-size:18px;font-weight:900;color:var(--dark);margin-bottom:4px}
.rtk-section-divider{width:40px;height:3px;background:linear-gradient(90deg,var(--blue-600),var(--purple));border-radius:2px;margin-bottom:18px}
.rtk-services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
.rtk-service{background:white;border:1px solid var(--border);border-radius:14px;padding:20px;display:flex;flex-direction:column;transition:.2s}
.rtk-service:hover{border-color:var(--blue-200);box-shadow:0 6px 20px rgba(37,99,235,.08);transform:translateY(-2px)}
.rtk-service-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rtk-service-num{font-size:13px;font-weight:800;color:var(--text3)}
.rtk-service-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rtk-service-icon i{font-size:20px}
.rtk-service-name{font-size:14px;font-weight:900;color:var(--dark);margin-bottom:4px;line-height:1.2}
.rtk-service-divider{width:30px;height:2px;background:linear-gradient(90deg,var(--blue-600),var(--purple));border-radius:1px;margin-bottom:10px}
.rtk-service-desc{font-size:11px;color:var(--slate);line-height:1.6;flex:1;margin-bottom:14px}
.rtk-service-link{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--primary);cursor:pointer;transition:.15s;text-decoration:none;border:none;background:none;padding:0;font-family:inherit}
.rtk-service-link:hover{gap:8px}
.rtk-service-link i{font-size:14px}

/* Bottom row */
.rtk-bottom{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.rtk-custom{background:white;border:1px solid var(--border);border-radius:14px;padding:20px}
.rtk-custom-num{font-size:13px;font-weight:800;color:var(--text3);margin-bottom:4px}
.rtk-custom-icon{font-size:28px;margin-bottom:8px}
.rtk-custom-title{font-size:14px;font-weight:900;color:var(--dark);margin-bottom:4px}
.rtk-custom-desc{font-size:11px;color:var(--slate);line-height:1.5;margin-bottom:14px}

.rtk-cupones{background:linear-gradient(135deg,var(--dark),var(--blue-900));border-radius:14px;padding:20px;display:flex;align-items:center;gap:16px}
.rtk-cupones-icon{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rtk-cupones-icon i{font-size:26px;color:var(--violet-400)}
.rtk-cupones-title{font-size:15px;font-weight:900;color:white;margin-bottom:4px}
.rtk-cupones-desc{font-size:11px;color:rgba(255,255,255,.55);line-height:1.4;margin-bottom:12px}
.btn-cupones{background:white;color:var(--primary);border:none;padding:9px 18px;border-radius:9px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px;white-space:nowrap}

/* RRSS */
.rtk-rrss-title{font-size:16px;font-weight:900;color:var(--dark);margin-bottom:4px}
.rtk-rrss-sub{font-size:12px;color:var(--slate);margin-bottom:16px}
.rtk-rrss-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rtk-rrss-item{background:white;border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:.2s;text-decoration:none}
.rtk-rrss-item:hover{border-color:var(--blue-200);transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,.08)}
.rtk-rrss-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rtk-rrss-icon i{font-size:18px;color:white}
.rtk-rrss-name{font-size:12px;font-weight:800;color:var(--dark)}
.rtk-rrss-handle{font-size:10px;color:var(--slate)}
.rtk-rrss-arrow{margin-left:auto;color:var(--text3);font-size:13px}

/* Sidebar ayuda */
.dash-nav-divider{height:1px;background:rgba(255,255,255,.08);margin:8px 16px}
.dash-nav-help{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;cursor:pointer;transition:.15s;color:rgba(255,255,255,.8);font-size:13px;font-weight:600;margin:0 8px;text-decoration:none}
.dash-nav-help:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.7)}
.dash-nav-help i{font-size:18px;flex-shrink:0}

@media(max-width:768px){.rtk-wrap{padding:16px}.rtk-services-grid{grid-template-columns:1fr}.rtk-bottom{grid-template-columns:1fr}.rtk-rrss-grid{grid-template-columns:repeat(2,1fr)}.rtk-hero{flex-direction:column}.rtk-hero-logo{display:none}}

/* ════════════ MODAL SOPORTE ════════════ */
.soporte-overlay{position:fixed;inset:0;background:rgba(10,22,40,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:8000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}
.soporte-modal{background:white;border-radius:20px;padding:28px;max-width:460px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.2);animation:modalIn .3s cubic-bezier(.34,1.3,.64,1);max-height:90vh;overflow-y:auto}
.soporte-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.soporte-title{font-size:20px;font-weight:900;color:var(--dark);margin-bottom:4px}
.soporte-sub{font-size:12px;color:var(--slate)}
.soporte-close{width:32px;height:32px;border-radius:50%;border:none;background:var(--gray-100);color:var(--slate);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;transition:.15s}
.soporte-close:hover{background:var(--border);color:var(--dark)}
.soporte-field{margin-bottom:14px}
.soporte-label{font-size:12px;font-weight:700;color:var(--dark);margin-bottom:6px;display:block}
.soporte-input{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;font-size:13px;font-family:inherit;color:var(--dark);outline:none;transition:.15s;background:white}
.soporte-input:focus{border-color:var(--blue-200);box-shadow:0 0 0 3px rgba(37,99,235,.08)}
.soporte-textarea{resize:vertical;min-height:100px}
.soporte-motivos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.soporte-motivo{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:.15s;font-size:12px;font-weight:600;color:var(--slate)}
.soporte-motivo:hover{border-color:var(--blue-200);color:var(--primary);background:var(--blue-pale)}
.soporte-motivo.selected{border-color:var(--primary);background:var(--blue-pale);color:var(--primary)}
.soporte-motivo i{font-size:16px}
.soporte-info{background:var(--green-50);border:1px solid var(--green-200);border-radius:10px;padding:12px 14px;font-size:11px;color:var(--green-700);line-height:1.5;margin-bottom:16px;display:flex;align-items:flex-start;gap:8px}
.soporte-info i{font-size:16px;flex-shrink:0;margin-top:1px}
.btn-soporte-send{width:100%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border:none;padding:13px;border-radius:12px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;transition:.15s}
.btn-soporte-send:hover{opacity:.9}
.btn-soporte-send:disabled{opacity:.5;cursor:default}
.soporte-success{text-align:center;padding:20px 0}
.soporte-success-icon{width:64px;height:64px;border-radius:50%;background:var(--green-100);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.soporte-success-icon i{font-size:32px;color:var(--success)}
.soporte-success-title{font-size:18px;font-weight:900;color:var(--dark);margin-bottom:8px}
.soporte-success-sub{font-size:13px;color:var(--slate);line-height:1.5}

/* ════════════ LOGO SIDEBAR ════════════ */
.dash-logo-img-wrap{
  padding:14px 0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  box-sizing:border-box;
}
.dash-logo-img{
  width:165px;
  height:auto;
  display:block;
  filter:
    drop-shadow(0 0 8px rgba(37,99,235,.5))
    drop-shadow(0 0 20px rgba(37,99,235,.25))
    brightness(1.15);
  transition:filter .3s ease;
}
.dash-logo-img:hover{
  filter:
    drop-shadow(0 0 12px rgba(37,99,235,.7))
    drop-shadow(0 0 28px rgba(37,99,235,.35))
    brightness(1.25);
}

/* ════════════ DASHBOARD — CARDS REDISEÑADAS ════════════ */

/* Racha — fondo oscuro premium */
.dstat-racha{background:linear-gradient(135deg,var(--dark),var(--blue-900)) !important;border:1px solid rgba(251,146,60,.2) !important;position:relative;overflow:hidden}
.dstat-racha::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;background:rgba(251,146,60,.08)}
.dstat-racha-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dstat-racha-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--orange-600),var(--warning));display:flex;align-items:center;justify-content:center}
.dstat-racha-icon i{font-size:18px;color:white}
.dstat-racha-badge{font-size:9px;font-weight:800;background:rgba(251,146,60,.15);border:1px solid rgba(251,146,60,.3);color:var(--orange-400);padding:3px 8px;border-radius:10px}
.dstat-racha-num{font-size:36px;font-weight:900;color:white;line-height:1;margin-bottom:2px}
.dstat-racha-unit{font-size:14px;font-weight:600;color:rgba(255,255,255,.4);margin-left:4px}
.dstat-racha-dots{display:flex;gap:5px;margin-bottom:8px}
.dstat-racha-dots .ddot{background:rgba(255,255,255,.15)}
.dstat-racha-dots .ddot.on{background:linear-gradient(135deg,var(--orange-600),var(--warning))}
.dstat-racha-sub{font-size:10px;color:rgba(255,255,255,.35);font-weight:600}

/* Liga card — fondo oscuro premium */
.dcard-liga{background:linear-gradient(135deg,var(--dark),#064e3b) !important;border:1px solid rgba(52,211,153,.2) !important;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:6px;position:relative;overflow:hidden}
.dcard-liga::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;background:rgba(52,211,153,.06)}
.dcard-liga:hover{border-color:rgba(52,211,153,.35) !important;box-shadow:0 6px 20px rgba(5,150,105,.15) !important}
.dcard-liga-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.dcard-liga-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--success-dark),#0891b2);display:flex;align-items:center;justify-content:center}
.dcard-liga-icon i{font-size:18px;color:white}
.dcard-liga-badge{font-size:9px;font-weight:800;background:rgba(52,211,153,.15);border:1px solid rgba(52,211,153,.3);color:var(--success);padding:3px 8px;border-radius:10px}
.dcard-liga-pos{font-size:40px;font-weight:900;color:white;line-height:1}
.dcard-liga-div{font-size:11px;color:rgba(255,255,255,.4);font-weight:600}
.dcard-liga-rtk{font-size:11px;font-weight:700;color:var(--success);display:flex;align-items:center;gap:4px}
.dcard-liga-rtk i{font-size:13px}
.dcard-liga-link{font-size:11px;font-weight:700;color:rgba(255,255,255,.35);display:flex;align-items:center;gap:4px;margin-top:4px}
.dcard-liga-link i{font-size:13px}

/* Logros card con SVG trofeos */
.dcard-logros{background:white;border:1px solid var(--blue-light);cursor:pointer;display:flex;flex-direction:column;gap:10px;text-align:left}
.dcard-logros:hover{border-color:var(--blue-200) !important;box-shadow:0 6px 20px rgba(37,99,235,.08) !important}
.dcard-logros-header{display:flex;align-items:center;justify-content:space-between;width:100%}
.dcard-logros-title{font-size:12px;font-weight:800;color:var(--dark)}
.dcard-logros-link{font-size:10px;font-weight:700;color:var(--primary)}
.dcard-logros-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:100%}
.dlg-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;background:var(--gray-50);border:1px solid var(--border);border-radius:10px;transition:.15s}
.dlg-item.desbloqueado{background:var(--amber-50);border-color:var(--amber-200)}
.dlg-item svg{width:44px;height:50px}
.dlg-name{font-size:11px;font-weight:900;color:var(--dark);text-align:center;line-height:1.2}
.dlg-locked{width:44px;height:50px;display:flex;align-items:center;justify-content:center;opacity:.25}
.dlg-locked i{font-size:22px;color:var(--text3)}

/* ════════════ DASHBOARD BIENVENIDA ════════════ */
.dash-bienvenida{padding:20px 28px 40px;display:flex;flex-direction:column;gap:16px;background:var(--blue-ghost);box-sizing:border-box}

/* HERO */
.db-hero{background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 50%,var(--primary-dark) 100%);border-radius:18px;padding:24px 28px;position:relative;overflow:hidden;min-height:160px;border:1px solid rgba(255,255,255,.1);flex-shrink:0;display:flex;flex-direction:column;justify-content:center}
.db-hero-canvas{position:absolute;inset:0;pointer-events:none;border-radius:22px}
.db-orb{position:absolute;border-radius:50%;pointer-events:none}
.db-orb1{width:300px;height:300px;background:radial-gradient(circle,rgba(37,99,235,.2) 0%,transparent 65%);top:-80px;right:0}
.db-orb2{width:180px;height:180px;background:radial-gradient(circle,rgba(109,40,217,.14) 0%,transparent 65%);bottom:-50px;right:260px}
.db-hero-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;flex:1}
.db-hero-text{flex:1}
.db-eyebrow{font-size:10px;font-weight:800;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.db-dot{width:6px;height:6px;border-radius:50%;background:var(--success);animation:dbDot 2s ease-in-out infinite;flex-shrink:0}
@keyframes dbDot{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.6)}50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}}
.db-hero-h{font-size:30px;font-weight:900;color:white;line-height:1.1;margin-bottom:5px}
.db-hero-h span{color:var(--blue-400)}
.db-hero-sub{font-size:12px;color:rgba(255,255,255,.3);margin-bottom:16px}
.db-chips{display:flex;gap:8px;flex-wrap:wrap}
.db-chip{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:5px 12px;font-size:10px;font-weight:700;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:5px}
.db-chip i{font-size:12px}
.db-chip-fire{border-color:rgba(251,146,60,.4);color:#c2410c;background:rgba(251,146,60,.1)}
.db-chip-gold{border-color:rgba(251,191,36,.4);color:var(--amber-900);background:rgba(251,191,36,.1)}
.db-chip-blue{border-color:rgba(255,255,255,.3);color:white;background:rgba(255,255,255,.12)}
.db-gauge{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:120px}
.db-gauge-wrap{position:relative;width:110px;height:110px;flex-shrink:0}
.db-gauge-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.db-gauge-val{font-size:24px;font-weight:900;color:white;line-height:1}
.db-gauge-lbl{font-size:9px;color:rgba(255,255,255,.4);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.db-gauge-sub{font-size:10px;color:rgba(255,255,255,.5);text-align:center;max-width:130px;white-space:nowrap}

/* RETO */
.db-reto{background:linear-gradient(135deg,var(--blue-50),var(--violet-50b));border:2px solid var(--blue-300);border-radius:18px;padding:20px 22px;display:flex;gap:18px;align-items:flex-start;position:relative;overflow:hidden;transition:.2s}
.db-reto::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue-600),var(--purple),#db2777)}
.db-reto:hover{box-shadow:0 8px 28px rgba(37,99,235,.12);transform:translateY(-1px)}
.db-reto.db-reto-done{background:linear-gradient(135deg,var(--green-50),var(--emerald-50));border-color:var(--green-300)}
.db-reto.db-reto-done::before{background:linear-gradient(90deg,var(--success-dark),var(--success))}
.db-reto-icon{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary-dark));display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 18px rgba(37,99,235,.3)}
.db-reto.db-reto-done .db-reto-icon{background:linear-gradient(135deg,var(--success-dark),var(--success));box-shadow:0 6px 18px rgba(5,150,105,.3)}
.db-reto-icon i{font-size:26px;color:white}
.db-reto-body{flex:1}
.db-reto-tag{display:inline-flex;align-items:center;gap:4px;background:var(--blue-light);border:1px solid var(--sky-300);border-radius:20px;padding:3px 10px;font-size:9px;font-weight:800;color:#1d4ed8;margin-bottom:7px;text-transform:uppercase;letter-spacing:.5px}
.db-reto.db-reto-done .db-reto-tag{background:var(--green-100);border-color:var(--green-300);color:var(--green-700)}
.db-reto-title{font-size:15px;font-weight:900;color:var(--dark);margin-bottom:4px;line-height:1.2}
.db-reto-sub{font-size:11px;color:var(--text2);line-height:1.5;margin-bottom:12px}
.db-reto-actions{display:flex;align-items:center;gap:12px}
.db-btn-reto{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white;border:none;padding:10px 20px;border-radius:11px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px;box-shadow:0 4px 12px rgba(37,99,235,.3)}
.db-reto.db-reto-done .db-btn-reto{background:linear-gradient(135deg,var(--success-dark),var(--success));box-shadow:0 4px 12px rgba(5,150,105,.3)}
.db-reto-rtk{background:var(--green-100);color:var(--green-700);border:1px solid var(--green-300);border-radius:20px;padding:5px 12px;font-size:11px;font-weight:800}

/* TRIO */
.db-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.db-trio-card{border-radius:18px;padding:18px;transition:.2s;cursor:pointer}
.db-trio-card:hover{transform:translateY(-3px)}
.db-tc-racha{background:var(--white);border:1px solid var(--amber-200);border-top:2px solid var(--warning)}
.db-tc-racha:hover{box-shadow:0 12px 28px rgba(234,88,12,.2);transform:translateY(-4px)}
.db-tc-racha .db-tc-lbl{color:var(--orange-400)}
.db-tc-racha .db-tc-val{color:var(--orange-600)}
.db-tc-racha .db-tc-sub{color:rgba(255,255,255,.35)}
.db-tc-racha .db-tc-link{color:var(--orange-400)}
.db-tc-racha .db-rc-dots .ddot{background:rgba(251,146,60,.15)}
.db-tc-racha .db-rc-dots .ddot.on{background:linear-gradient(135deg,var(--orange-600),var(--warning))}
.db-tc-racha .db-tc-badge{background:rgba(251,146,60,.15);border-color:rgba(251,146,60,.3);color:var(--orange-400)}
.db-tc-dato{background:linear-gradient(160deg,var(--blue-50),var(--violet-50b));border:1.5px solid #c4b5fd;cursor:default}
.db-tc-dato .db-tc-lbl{color:var(--violet-400)}
.db-tc-dato .db-dato-text{color:#1e1b4b;border-color:var(--purple)}
.db-tc-dato .db-dato-fuente{color:var(--purple);opacity:.7}
.db-tc-dato .db-tc-link{color:var(--violet-400)}
.db-tc-dato .db-tc-badge{background:rgba(167,139,250,.15);border-color:rgba(167,139,250,.3);color:var(--violet-400)}
.db-tc-liga{background:linear-gradient(160deg,var(--green-50),var(--emerald-50));border:1.5px solid var(--green-300)}
.db-tc-liga:hover{box-shadow:0 12px 28px rgba(5,150,105,.2);transform:translateY(-4px)}
.db-tc-liga .db-tc-lbl{color:var(--success)}
.db-tc-liga .db-tc-val{color:var(--success-dark)}
.db-tc-liga .db-tc-sub{color:rgba(255,255,255,.35)}
.db-tc-liga .db-tc-link{color:var(--success)}
.db-tc-liga .db-liga-rtk{color:var(--success-dark)}
.db-tc-liga .db-tc-badge{background:rgba(52,211,153,.15);border-color:rgba(52,211,153,.3);color:var(--success)}
.db-tc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.db-tc-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.db-tc-icon i{font-size:20px;color:white}
.db-tc-badge{font-size:9px;font-weight:800;padding:3px 8px;border-radius:10px}
.db-tc-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.db-tc-racha .db-tc-lbl{color:#c2410c}
.db-tc-dato .db-tc-lbl{color:var(--purple)}
.db-tc-liga .db-tc-lbl{color:var(--success-dark)}
.db-tc-val{font-size:32px;font-weight:900;line-height:1;margin-bottom:4px}
.db-tc-racha .db-tc-val{color:var(--orange-600)}
.db-tc-liga .db-tc-val{color:var(--success-dark)}
.db-liga-pos{font-size:38px}
.db-tc-sub{font-size:11px;line-height:1.4;margin-bottom:8px}
.db-tc-racha .db-tc-sub{color:#9a3412}
.db-tc-liga .db-tc-sub{color:#065f46}
.db-tc-link{font-size:11px;font-weight:700;display:flex;align-items:center;gap:4px;margin-top:8px}
.db-tc-link i{font-size:13px}
.db-tc-racha .db-tc-link{color:var(--orange-600)}
.db-rc-dots{display:flex;gap:4px;margin-bottom:4px}
.db-rc-dots .ddot{width:9px;height:9px;border-radius:50%;background:rgba(234,88,12,.15)}
.db-rc-dots .ddot.on{background:linear-gradient(135deg,var(--orange-600),var(--warning))}
.db-dato-text{font-size:12px;font-weight:700;color:#1e1b4b;line-height:1.5;font-style:italic;border-left:3px solid var(--purple);padding-left:8px;margin-bottom:6px}
.db-dato-fuente{font-size:10px;color:var(--purple);opacity:.6;margin-bottom:6px}
.db-liga-rtk{font-size:11px;font-weight:700;color:var(--success-dark);display:flex;align-items:center;gap:4px;margin-bottom:4px}
.db-liga-rtk i{font-size:13px}

/* BOTTOM */
.db-bottom{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.db-plan{background:var(--white);border:1px solid var(--blue-light);border-radius:16px;overflow:hidden;box-shadow:0 2px 8px rgba(37,99,235,.06)}
.db-plan-head{padding:12px 16px;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;gap:8px}
.db-plan-head-icon{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--indigo-600),var(--purple));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.db-plan-head-icon i{font-size:13px;color:white}
.db-plan-head-title{font-size:13px;font-weight:800;color:var(--navy)}
.db-plan-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--gray-100);transition:.15s;cursor:pointer}
.db-plan-item:last-child{border-bottom:none}
.db-plan-item:hover{background:var(--blue-soft)}
.db-pi-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.db-pi-icon i{font-size:17px;color:white}
.db-pi-body{flex:1;min-width:0}
.db-pi-title{font-size:12px;font-weight:700;color:var(--navy)}
.db-pi-sub{font-size:10px;color:var(--blue-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-pi-btn{background:var(--blue-pale);color:var(--primary);border:1px solid var(--blue-300);padding:5px 10px;border-radius:7px;font-size:9px;font-weight:800;cursor:pointer;font-family:inherit;flex-shrink:0;transition:.15s}
.db-pi-btn:hover{background:var(--blue-light)}
.db-logros{background:linear-gradient(135deg,var(--amber-50),var(--yellow-100));border:1.5px solid var(--amber-200);border-radius:16px;padding:16px;cursor:pointer;transition:.2s}
.db-logros:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(245,158,11,.12)}
.db-logros-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.db-logros-title{font-size:13px;font-weight:800;color:var(--amber-900)}
.db-logros-link{font-size:10px;font-weight:700;color:var(--amber-600)}
.db-logros-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.dlg-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:10px;transition:.15s;cursor:pointer}
.dlg-item:hover{background:white;border-color:var(--warning)}
.dlg-item.desbloqueado{background:white;border-color:var(--warning)}
.dlg-item .trofeo-svg-wrap{width:48px;height:54px;margin:0}
.dlg-item .trofeo-svg-wrap svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 5px rgba(0,0,0,.15))}
.dlg-name{font-size:11px;font-weight:900;color:var(--amber-900);text-align:center;line-height:1.2;max-width:70px}
.dlg-desc{font-size:7px;color:rgba(255,255,255,.25);text-align:center;line-height:1.3;max-width:72px;margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dlg-item.desbloqueado .dlg-desc{color:rgba(96,165,250,.6)}
.dlg-locked{width:48px;height:54px;display:flex;align-items:center;justify-content:center}
.dlg-locked i{font-size:24px;color:var(--amber-600);opacity:.25}

@media(max-width:1024px){.db-trio{grid-template-columns:1fr 1fr}.db-bottom{grid-template-columns:1fr}}
@media(max-width:768px){.dash-bienvenida{padding:14px}.db-trio{grid-template-columns:1fr}.db-hero{padding:20px}.db-hero-h{font-size:22px}.db-gauge{display:none}.db-chips{flex-wrap:wrap}}

/* ════════════ TOPBAR ELIMINADO — AJUSTES ════════════ */
.dash-topbar{display: none}

/* Campana flotante en hero */
.db-bell-float{position:absolute;top:14px;right:14px;z-index:10;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s}
.db-bell-float:hover{background:rgba(255,255,255,.2)}
.db-bell-float i{font-size:15px;color:white}
.db-bell-dot{position:absolute;top:4px;right:4px;width:8px;height:8px;background:var(--danger);border-radius:50%;border:2px solid transparent}

/* Compactar todo para caber en pantalla */

.db-hero-compact{padding:20px 24px}
.db-hero-h{font-size:26px;margin-bottom:4px}
.db-hero-sub{margin-bottom:12px}
.db-gauge-wrap{width:95px;height:95px}
.db-gauge-wrap svg{width:95px;height:95px}
.db-gauge-val{font-size:20px}
.db-trio{gap:10px}
.db-trio-card{padding:14px}
.db-tc-val{font-size:26px}
.db-liga-pos{font-size:32px}
.db-bottom{gap:10px}
.db-plan-head{padding:11px 16px}
.db-plan-item{padding:9px 16px}
.db-logros{padding:14px}
.db-logros-head{margin-bottom:10px}

/* ANIMACIONES FLOTANTES EN TRIO CARDS */

/* Canvas para las animaciones */
.db-tc-canvas{position:absolute;inset:0;pointer-events:none;border-radius:18px}
.db-trio-card{position:relative;overflow:hidden}


/* ════════════ CAMPANA SIDEBAR ════════════ */
.dash-bell-wrap{position:relative;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;flex-shrink:0}
.dash-bell-wrap:hover{background:rgba(255,255,255,.14)}
.dash-bell-wrap i{font-size:16px;color:rgba(255,255,255,.6)}
.dash-bell-wrap.has-notif i{animation:bellShake .6s ease-in-out infinite;color:white}
@keyframes bellShake{
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(12deg)}
  30%{transform:rotate(-10deg)}
  45%{transform:rotate(8deg)}
  60%{transform:rotate(-6deg)}
  75%{transform:rotate(3deg)}
}
.dash-bell-badge{position:absolute;top:-3px;right:-3px;width:9px;height:9px;background:var(--danger);border-radius:50%;border:2px solid #f0f5ff;animation:bellPulse 2s ease-in-out infinite}
@keyframes bellPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}50%{box-shadow:0 0 0 4px rgba(239,68,68,0)}}

/* Notificaciones panel */
.notif-panel{position:fixed;top:0;left:240px;width:280px;height:100vh;background:var(--white);border-right:1px solid rgba(255,255,255,.08);z-index:2000;transform:translateX(-120%);transition:transform .3s cubic-bezier(.34,1.1,.64,1);box-shadow:4px 0 20px rgba(0,0,0,.4);visibility:hidden}
.notif-panel.open{transform:translateX(0);visibility:visible}
.notif-panel-head{padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;justify-content:space-between}
.notif-panel-title{font-size:14px;font-weight:800;color:var(--navy)}
.notif-panel-close{width:28px;height:28px;border-radius:8px;background:rgba(255,255,255,.07);border:none;color:rgba(255,255,255,.5);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:inherit}
.notif-panel-close:hover{background:rgba(255,255,255,.12);color:white}
.notif-empty{padding:40px 20px;text-align:center;color:var(--text3)}
.notif-empty i{font-size:36px;display:block;margin-bottom:10px}
.notif-empty p{font-size:12px}
.notif-item{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.05);display:flex;gap:10px;cursor:pointer;transition:.15s}
.notif-item:hover{background:rgba(255,255,255,.04)}
.notif-item.unread{border-left:2px solid var(--blue-600)}
.notif-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.notif-icon i{font-size:16px;color:white}
.notif-title{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:2px}
.notif-sub{font-size:10px;color:var(--text3);line-height:1.4}
.notif-time{font-size:9px;color:rgba(255,255,255,.2);margin-top:3px}

/* ════════════ DARK MODE GLOBAL — TODAS LAS SECCIONES ════════════ */
#app-screen{background:var(--blue-ghost)}
.dash-layout{background:var(--blue-ghost)}
.dash-main{background:var(--blue-ghost)}

/* Secciones contenedoras */
.logros-v2-wrap,.logros-wrap,.perfil-wrap,.liga-wrap,.entr-wrap,.diag-wrap,.rtk-wrap{
  background:var(--blue-ghost);color:var(--navy)
}

/* Cards genéricas → light */
.dstat,.dcard,.dplan-item,.dato-card,.logro-card,.trofeo-card,
.entr-tool,.entr-ranking,.entr-recursos,.liga-ranking-card,.liga-stat-card,
.liga-div-banner,.perfil-card,.perfil-stat-box,.perfil-nivel-card,
.perfil-logro-mini,.logros-v2-footer,.nivel-hero,.nivel-tab,
.diag-stat,.orbital-wrap,.diag-expand,.diag-cta,.rtk-service,.rtk-custom{
  background:var(--white);
  border-color:var(--blue-light);
  color:var(--navy)
}

/* Textos principales */
.logros-header h2,.logros-v2-header h2,.perfil-nombre,.perfil-stat-val,
.liga-header h2,.liga-stat-val,.entr-section-title,.diag-header h2,
.rtk-section-title,.rtk-hero-text h1,.rtk-rrss-name,.trofeo-name,
.logro-nombre,.entr-tool-name,.liga-row-nombre,.entr-rank-name,
.nivel-tab-name,.nivel-hero-name,.perfil-nivel-val,.perfil-info-val,
.dstat-val,.dstat-label,.dstat-sub{
  color:var(--navy)
}

/* Subtextos */
.logros-header p,.logros-v2-header p,.liga-header p,.diag-header p,
.entr-tool-sub,.trofeo-desc,.liga-stat-lbl,.liga-stat-sub,
.nivel-tab-sub,.perfil-stat-lbl,.perfil-stat-sub,.perfil-info-lbl,
.dato-texto,.dato-fuente,.rtk-hero-text p,.rtk-service-desc,.rtk-rrss-handle{
  color:var(--blue-500)
}

/* Bordes separadores */
.liga-row,.entr-rec-item,.entr-rank-item,.perfil-info-row{
  border-color:var(--blue-wash)
}

/* Hover */
.logro-card:hover,.trofeo-card:hover,.entr-tool:hover,.liga-row:hover,
.rtk-service:hover,.rtk-rrss-item:hover,.dplan-item:hover{
  background:var(--blue-pale);
  border-color:var(--blue-200)
}

/* Progreso bars */
.progreso-bar,.dstat-bar,.nivel-hero-bar,.perfil-nivel-bar{
  background:var(--border)
}

/* Tabs */
.nivel-tab.active{background:var(--blue-pale);border-color:var(--blue-300)}
.nivel-tab.active .nivel-tab-name{color:var(--primary)}

/* Liga row yo */
.liga-row.yo{background:var(--blue-pale);border-left-color:var(--primary)}
.liga-row.yo .liga-row-nombre{color:var(--primary)}

/* Buttons */
.btn-outline-blue{background:var(--blue-pale);border-color:var(--blue-300);color:var(--primary)}
.btn-entr-outline{background:var(--blue-pale);border-color:var(--blue-300);color:var(--primary)}

/* Trofeos bloqueados */
.trofeo-card.t-bloqueado{background:var(--gray-50);border-color:var(--border)}

/* Orbital diagnóstico */
.orbital-wrap{overflow:hidden;background:var(--white);border-color:var(--blue-light)}
.diag-stat{background:var(--white);border-color:var(--blue-light)}
.ds-val,.ds-lbl{color:var(--navy)}
.ds-link{color:var(--primary)}

/* Perfil nivel card */
.perfil-nivel-card{background:linear-gradient(135deg,var(--primary-dark),var(--primary));border:1px solid #1d4ed8}

/* RTK label */
.rtk-lbl{color:var(--success-dark)}

/* Plan list items */
.dplan-icon{opacity:.9}

/* Sección Retorika */
.rtk-mision{border:1px solid rgba(37,99,235,.2)}
.rtk-service-link{color:var(--primary)}
.rtk-service-num{color:var(--blue-steel)}
.rtk-service-divider{opacity:.15}
.rtk-rrss-item{background:var(--white);border-color:var(--blue-light)}
.rtk-rrss-arrow{color:var(--blue-steel)}
.rtk-rrss-title{color:var(--navy)}
.rtk-rrss-sub{color:var(--blue-500)}
.rtk-section-divider{opacity:.15}
.rtk-hero-divider{opacity:.15}
.rtk-custom-num{color:var(--blue-steel)}
.rtk-custom-title{color:var(--navy)}
.rtk-custom-desc{color:var(--blue-500)}

/* Progreso card logros */
.progreso-card{background:var(--white);border-color:var(--blue-light)}
.progreso-titulo{color:var(--navy)}
.progreso-nums{color:var(--blue-muted)}
.progreso-total-num{color:var(--primary)}
.progreso-total-lbl{color:var(--blue-muted)}

/* Rareza badges */
.rareza-badge.rb-comun{background:var(--gray-100);color:var(--text2)}
.rareza-count{color:var(--blue-steel)}

/* Liga ranking */
.liga-ranking-header{border-color:var(--blue-wash);background:var(--blue-soft)}
.liga-ranking-title{color:var(--navy)}
.liga-ranking-sub{color:var(--blue-muted)}
.liga-row-bar{background:var(--border)}
.liga-row-rtk{color:var(--primary)}
.liga-row-rtk small{color:var(--text3)}
.pos-num{color:var(--text3)}

/* Entrenamiento */
.entr-rec-name{color:var(--navy)}
.entr-rec-sub{color:var(--blue-muted)}
.entr-rank-name{color:var(--navy)}
.entr-rank-rtk{color:var(--primary)}
.entr-rank-title{color:var(--navy)}
.entr-rank-link{color:var(--primary)}
.entr-banner{border:1px solid rgba(37,99,235,.15)}
.entr-inv-card{background:var(--white);border-color:var(--blue-light)}
.entr-inv-title{color:var(--navy)}
.entr-inv-sub{color:var(--blue-500)}
.entr-inv-badge{background:var(--blue-ghost);border-color:var(--blue-light)}
.entr-inv-name{color:var(--navy)}
.entr-inv-comp{color:var(--blue-muted)}
.entr-inv-input input{background:var(--blue-soft);border-color:var(--blue-light);color:var(--navy)}
.entr-hero{border:1px solid rgba(37,99,235,.15)}

/* Perfil */
.perfil-alias{color:var(--blue-muted)}
.perfil-plan-badge{background:var(--blue-pale);border-color:var(--blue-300);color:var(--primary)}
.btn-perfil-edit{background:var(--blue-soft);border-color:var(--blue-light);color:var(--primary)}
.btn-perfil-logout{background:rgba(239,68,68,.05);border-color:rgba(239,68,68,.2)}
.perfil-obj-tag{background:var(--blue-pale);border-color:var(--blue-300);color:var(--primary)}
.plm-count{color:var(--navy)}
.plm-lbl{color:var(--text3)}
.perfil-logro-mini:hover{border-color:var(--blue-200)}

/* Dashboard */
.dash-upgrade{background:var(--blue-pale);border-color:var(--blue-300)}
.dash-upgrade-t,.dash-upgrade-s{color:var(--navy)}
.dato-card{background:var(--white);border-color:var(--blue-light)}
.dato-titulo{color:var(--primary)}
.dato-texto{color:var(--navy)}
.dato-fuente{color:var(--blue-muted)}

/* Diagnóstico expand */
.dex-title{color:var(--navy)}
.dex-sub{color:var(--blue-muted)}
.df-t{color:var(--navy)}
.df-s{color:var(--blue-500)}
.df-n{background:var(--blue-pale);color:var(--primary)}

/* Plan list */
.dplan-item{background:var(--white);border-color:var(--blue-light)}
.dplan-content strong{color:var(--navy)}
.dplan-content span{color:var(--blue-500)}

/* ════════════ RESPONSIVE POR ALTURA — pantallas <960px alto ════════════ */
@media (max-height: 960px) {

  /* Sidebar más compacto */
  .dash-sidebar{padding:16px 14px}
  .dash-logo-img-wrap{padding:6px 0 6px}
  .dash-logo-img{width:130px}
  .dash-user-card{padding:8px 10px;margin-bottom:14px}
  .dash-av{width:32px;height:32px;font-size:12px}
  .dash-av-name{font-size:11px}
  .dash-av-status{font-size:9px}
  .dash-nav{gap:1px}
  .dash-nav-item{padding:8px 10px;font-size:12px}
  .dash-nav-item i{font-size:16px}
  .dash-upgrade{padding:10px;margin-top:auto}
  .dash-upgrade-t{font-size:11px}
  .dash-upgrade-s{font-size:9px;margin-bottom:6px}
  .dash-upgrade-btn{padding:6px;font-size:10px}
  .btn-logout-dash{padding:7px;font-size:11px;margin-top:6px}
  .dash-nav-help{padding:7px 10px;font-size:11px}
  .dash-nav-divider{margin:4px 10px}

  /* Inicio más compacto */
  .dash-bienvenida{padding:10px 18px 14px;gap:8px}

  /* Hero más pequeño */
  .db-hero{padding:14px 20px}
  .db-hero-h{font-size:22px;margin-bottom:3px}
  .db-hero-sub{margin-bottom:10px;font-size:11px}
  .db-chips{gap:5px}
  .db-chip{padding:3px 9px;font-size:9px}
  .db-gauge-wrap{width:80px;height:80px}
  .db-gauge-wrap svg{width:80px;height:80px}
  .db-gauge-val{font-size:17px}
  .db-eyebrow{margin-bottom:5px;font-size:9px}

  /* Trio más compacto */
  .db-trio{gap:7px}
  .db-trio-card{padding:11px}
  .db-tc-top{margin-bottom:8px}
  .db-tc-icon{width:34px;height:34px;border-radius:10px}
  .db-tc-icon i{font-size:17px}
  .db-tc-val{font-size:22px;margin-bottom:2px}
  .db-liga-pos{font-size:26px}
  .db-tc-lbl{margin-bottom:2px;font-size:9px}
  .db-tc-sub{font-size:9px;margin-bottom:5px}
  .db-tc-link{margin-top:5px;font-size:10px}
  .db-dato-text{font-size:10px;margin-bottom:3px}
  .db-dato-fuente{font-size:9px;margin-bottom:3px}
  .db-rc-dots{margin-bottom:3px}
  .db-rc-dots .ddot{width:7px;height:7px}

  /* Bottom más compacto */
  .db-bottom{gap:7px}
  .db-plan-head{padding:8px 14px}
  .db-plan-head-title{font-size:11px}
  .db-plan-item{padding:7px 14px}
  .db-pi-icon{width:30px;height:30px;border-radius:8px}
  .db-pi-icon i{font-size:14px}
  .db-pi-title{font-size:11px}
  .db-pi-sub{font-size:9px}
  .db-logros{padding:11px}
  .db-logros-head{margin-bottom:8px}
  .db-logros-title{font-size:11px}
  .dlg-item .trofeo-svg-wrap{width:38px;height:42px}
  .dlg-name{font-size:10px}
}

/* Para alturas aún más pequeñas <820px */
@media (max-height: 820px) {
  .db-gauge{display:none}
  .db-hero-inner{gap:16px}
  .db-trio-card{padding:9px}
  .db-tc-val{font-size:20px}
  .db-plan-item{padding:6px 12px}
  .dash-logo-img{width:110px}
}

/* ════════════ HERRAMIENTAS PRO EN ENTRENAMIENTO ════════════ */
.entr-tools-pro-title{
  font-size:11px;font-weight:800;color:rgba(255,255,255,.45);
  text-transform:uppercase;letter-spacing:.7px;
  margin-bottom:12px;display:flex;align-items:center;gap:7px
}
.entr-tools-pro-title i{font-size:15px;color:rgba(255,255,255,.4)}

.entr-tools-pro-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}

.entr-tool-pro{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:16px 18px;display:flex;align-items:center;
  justify-content:space-between;gap:16px;cursor:pointer;transition:.2s
}
.entr-tool-pro:hover{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);
  transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.15)
}

.entr-tool-pro-left{display:flex;align-items:flex-start;gap:14px;flex:1;min-width:0}

.entr-tool-pro-icon{
  width:46px;height:46px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.entr-tool-pro-icon i{font-size:22px;color:white}

.entr-tool-pro-name{
  font-size:13px;font-weight:800;color:rgba(255,255,255,.85);margin-bottom:4px
}
.entr-tool-pro-sub{
  font-size:11px;color:rgba(255,255,255,.4);line-height:1.5;margin-bottom:8px
}
.entr-tool-pro-tags{display:flex;flex-wrap:wrap;gap:5px}
.entr-pro-tag{
  font-size:9px;font-weight:800;padding:2px 8px;border-radius:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.3px
}

.btn-entr-pro{
  padding:9px 16px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);border-radius:9px;
  color:rgba(255,255,255,.7);font-size:11px;font-weight:800;
  cursor:pointer;font-family:inherit;display:flex;align-items:center;
  gap:5px;white-space:nowrap;flex-shrink:0;transition:.15s
}
.btn-entr-pro:hover{background:rgba(255,255,255,.16);color:white;border-color:rgba(255,255,255,.25)}
.btn-entr-pro i{font-size:14px}

/* ════════════ PALETA OFICIAL RETORIKA — OVERRIDE FINAL ════════════ */

/* Variables oficiales */
:root {
  --rtk-blue: var(--primary);
  --rtk-blue-dark: var(--primary-dark);
  --rtk-fuchsia: var(--pink);
  --rtk-green: var(--success);
  --rtk-white: var(--white);
  --rtk-bg: var(--blue-ghost);
  --rtk-text: var(--navy);
  --rtk-text2: var(--blue-500);
  --rtk-text3: var(--blue-medium);
  --rtk-border: var(--blue-light);
}

/* Sidebar con paleta oficial */
.dash-sidebar {
  background: linear-gradient(175deg, #0a1f5c 0%, var(--primary-dark) 60%, var(--primary) 100%);
}
.dash-nav-item { color: rgba(255,255,255,.75); }
.dash-nav-item:hover { background: rgba(255,255,255,.1); color: white; }
.dash-nav-item.active { background: rgba(255,255,255,.18); color: white; border-color: rgba(255,255,255,.3); }
.dash-av { background: linear-gradient(135deg,var(--pink),#ff6b9d); }
.dash-upgrade { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); }
.dash-upgrade-t, .dash-upgrade-s { color: white; }
.dash-upgrade-btn { background: white; color: var(--primary-dark); }
.dash-logo-img { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,.3)); }
.dash-av-name { color: white; }
.dash-av-status { color: rgba(255,255,255,.6); }
.btn-logout-dash { color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.15); }
.dash-nav-help { color: rgba(255,255,255,.5); }
.dash-nav-divider { background: rgba(255,255,255,.1); }
.dash-bell-wrap { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); }
.dash-bell-wrap i { color: white; }
.dash-bell-badge { border-color: var(--primary-dark); }
.sb-orb1, .sb-orb2 { opacity: .4; }

/* Botones primarios — azul oficial */
.btn-primary, .btn-grad, .btn-modal-primary,
.btn-launch, .btn-entr-primary, .db-btn-reto,
.drb-btn, .btn-reto, .btn-soporte-send,
.btn-crear-comp { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }

/* Botones outline — azul oficial */
.btn-plan-act, .btn-plan-act:hover { background: var(--blue-pale); color: var(--primary); border-color: var(--blue-light); }

/* Cards en modo claro */
.dstat, .dcard, .dato-card, .logro-card, .trofeo-card,
.entr-tool, .entr-ranking, .entr-recursos, .liga-ranking-card,
.liga-stat-card, .perfil-card, .perfil-stat-box,
.diag-stat, .orbital-wrap, .diag-expand, .rtk-service, .rtk-custom,
.progreso-card, .perfil-logro-mini, .logros-v2-footer, .nivel-tab,
.hp-item, .diag-cta, .liga-div-banner {
  background: var(--white);
  border-color: var(--blue-light);
}

/* Textos principales en claro */
.dstat-val, .dstat-label, .logro-nombre, .trofeo-name,
.entr-tool-name, .liga-row-nombre, .entr-rank-name,
.nivel-tab-name, .perfil-nombre, .perfil-stat-val,
.liga-stat-val, .entr-section-title, .diag-header h2,
.logros-header h2, .logros-v2-header h2, .liga-header h2,
.rtk-section-title, .rtk-hero-text h1, .rtk-rrss-name,
.nivel-hero-name, .perfil-nivel-val, .perfil-info-val,
.dash-section-hd, .entr-rank-title, .dplan-content strong,
.ds-val, .ds-lbl, .dex-title, .df-t, .orbital-title,
.liga-ranking-title, .perfil-alias {
  color: var(--navy);
}

/* Subtextos */
.dstat-sub, .trofeo-desc, .entr-tool-sub,
.liga-stat-lbl, .liga-stat-sub, .nivel-tab-sub,
.perfil-stat-lbl, .perfil-stat-sub, .perfil-info-lbl,
.dato-texto, .dato-fuente, .rtk-service-desc, .rtk-rrss-handle,
.logros-header p, .logros-v2-header p, .liga-header p,
.diag-header p, .rtk-hero-text p, .entr-rec-sub,
.entr-rank-name, .dex-sub, .df-s, .liga-ranking-sub,
.dplan-content span, .dplan-content small {
  color: var(--blue-500);
}

/* Links y acentos */
.ds-link, .entr-rank-link, .entr-rec-link,
.rtk-service-link, .lc-link, .tc-link,
.db-tc-link, .db-logros-link { color: var(--primary); }

/* RTK badge — verde oficial */
.rtk-lbl, .entr-tool-rtk { color: var(--success); }

/* Racha — mantener naranja */
.db-tc-racha .db-tc-val { color: var(--orange-600); }
.db-tc-racha .db-tc-lbl { color: #c2410c; }

/* Liga — verde oficial */
.db-tc-liga .db-tc-val { color: var(--success-dark); }
.db-tc-liga .db-tc-lbl { color: var(--success-dark); }
.db-tc-liga .db-liga-rtk { color: var(--success); }

/* Dato — azul oficial */
.db-tc-dato .db-tc-lbl { color: var(--primary); }
.db-tc-dato .db-dato-text { color: var(--navy); }
.db-tc-dato .db-dato-fuente { color: var(--blue-500); }

/* Nav item dots */
.ddot.on { background: var(--primary); }

/* Progreso fill */
.progreso-fill, .dstat-bar-fill, .perfil-nivel-fill,
.nivel-hero-fill, .db-gauge-fill stop { stop-color: var(--primary); }
.dstat-bar-fill { background: linear-gradient(90deg, var(--primary), var(--primary-dark)); }
.progreso-fill { background: linear-gradient(90deg, var(--primary), var(--primary-dark)); }

/* Logros tabs activos */
.nivel-tab.active { background: var(--blue-pale); border-color: var(--blue-light); }
.nivel-tab.active .nivel-tab-name { color: var(--primary); }

/* Liga row yo */
.liga-row.yo { background: var(--blue-pale); border-left-color: var(--primary); }
.liga-row.yo .liga-row-nombre { color: var(--primary); }

/* Hover cards */
.logro-card:hover, .trofeo-card:hover, .entr-tool:hover,
.liga-row:hover, .rtk-service:hover, .rtk-rrss-item:hover,
.dplan-item:hover, .perfil-logro-mini:hover {
  background: var(--blue-pale);
  border-color: var(--primary);
}

/* Chips del hero */
.db-chip { border-color: rgba(255,255,255,.25); color: white; background: rgba(255,255,255,.12); }
.db-chip-fire { border-color: rgba(255,190,100,.4); color: #ffd4a0; background: rgba(255,140,50,.12); }
.db-chip-gold { border-color: rgba(255,215,100,.4); color: #ffe97a; background: rgba(255,200,50,.12); }

/* Gauge */
.db-gauge-val, .db-gauge-lbl, .db-gauge-sub { color: white; }

/* Dots racha en hero */
.db-dot { background: var(--success); }
.db-eyebrow { color: rgba(255,255,255,.5); }

/* Hero sub */
.db-hero-sub { color: rgba(255,255,255,.6); }
.db-hero-h { color: white; }
.db-hero-h span { color: #a8d4ff; }

/* Score y arquetipo en dashboard */
.arq-name { color: var(--primary); }
.arq-desc { color: var(--blue-500); }
.global-score { color: var(--navy); }

/* Bienvenida chips racha/dots */
.db-rc-dots .ddot { background: rgba(234,88,12,.2); }
.db-rc-dots .ddot.on { background: linear-gradient(135deg,var(--orange-600),var(--warning)); }

/* Separador sidebar — verde/azul */
.dash-sidebar {
  box-shadow: 1px 0 0 0 rgba(3,210,110,.4), 2px 0 10px 0 rgba(21,111,231,.1);
}

/* Fucsia en avatar y elementos especiales */
.dash-av { background: linear-gradient(135deg,var(--pink),#ff6b9d); }
.perfil-avatar { background: linear-gradient(135deg,var(--pink),#ff6b9d); }

/* Badges de rareza en claro */
.rb-comun { background: var(--gray-100); color: var(--text2); }
.rb-poco { background: var(--green-50); color: var(--green-600); border: 1px solid var(--green-200); }
.rb-raro { background: var(--blue-pale); color: var(--primary); border: 1px solid var(--blue-light); }
.rb-epico { background: var(--violet-50); color: var(--violet-600); border: 1px solid var(--violet-200); }
.rb-legendario { background: linear-gradient(135deg,var(--yellow-100),var(--amber-200)); color: var(--amber-900); }

/* Entr tool badges */
.badge-rtk { background: var(--yellow-100); color: var(--amber-900); border: 1px solid var(--amber-200); }
.badge-nuevo { background: var(--green-50); color: #03a857; border: 1px solid var(--green-200); }
.badge-ia { background: var(--violet-50); color: var(--violet-600); border: 1px solid var(--violet-200); }

/* Corrección notif panel */
.notif-panel { background: var(--white); border-right: 1px solid var(--blue-light); }
.notif-panel-head { border-bottom: 1px solid var(--blue-wash); }
.notif-panel-title { color: var(--navy); }
.notif-empty { color: var(--text3); }
.notif-panel-close { background: var(--blue-ghost); color: var(--blue-500); border: none; }
.notif-empty i { color: var(--blue-light); }

/* Dashboard bienvenida trio claro */
.db-trio-card { box-shadow: 0 2px 12px rgba(21,111,231,.08); }
.db-tc-racha { background: var(--orange-50); border-color: #fed7aa; border-top: 2px solid var(--warning); }
.db-tc-dato { background: linear-gradient(135deg,var(--blue-pale),#f5f0ff); border-color: #c4b5fd; }
.db-tc-liga { background: linear-gradient(135deg,var(--green-50),var(--emerald-50)); border-color: var(--green-300); }

/* Plan hoy */
.db-plan { background: var(--white); border-color: var(--blue-light); }
.db-plan-head { border-bottom: 1px solid var(--blue-wash); }
.db-plan-head-title { color: var(--navy); }
.db-plan-item:hover { background: var(--blue-ghost); }
.db-pi-title { color: var(--navy); }
.db-pi-sub { color: var(--blue-500); }
.db-pi-btn { background: var(--blue-pale); color: var(--primary); border-color: var(--blue-light); }

/* Logros panel dorado */
.db-logros { background: linear-gradient(135deg,var(--amber-50),var(--yellow-100)); border-color: var(--amber-200); }
.db-logros-title { color: var(--amber-900); }
.db-logros-link { color: var(--amber-600); }
.dlg-item { background: rgba(255,255,255,.7); border-color: rgba(253,230,138,.7); }
.dlg-item.desbloqueado { background: var(--white); border-color: var(--warning); }
.dlg-name { color: var(--amber-900); }
.dlg-locked i { color: var(--amber-600); opacity: .25; }

/* Datos poderosos separador */
#db-dato2, #db-dato3 { color: var(--navy); }
#db-dato2-fuente, #db-dato3-fuente { color: var(--blue-500); }

/* Score circle */
.score-circle { border-color: var(--primary); background: var(--blue-pale); }
#global-score { color: var(--navy); }

/* Entr hero mantiene oscuro — solo ajustar textos */
.entr-hero h2 { color: white; }
.entr-hero h2 span { color: #a8d4ff; }
.entr-hero p { color: rgba(255,255,255,.6); }

/* Inputs en secciones claras */
.form-group input, .form-group select,
.obs-textarea, .field-input {
  color: var(--navy);
  background: var(--blue-ghost);
  border-color: var(--blue-light);
}
.form-group input::placeholder { color: #9bb5d4; }

/* El registro y el onboarding van sobre fondo oscuro: los inputs deben
   mantener el estilo "cristal oscuro" y no heredar el tema claro de arriba
   (que dejaba el desplegable de fecha con texto oscuro sobre fondo oscuro). */
#auth-screen .form-group input, #auth-screen .form-group select,
#onboarding-screen .form-group input, #onboarding-screen .form-group select {
  color: #fff;
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
}
#auth-screen .form-group input::placeholder,
#onboarding-screen .form-group input::placeholder { color: rgba(255,255,255,.3); }
#onboarding-screen .date-row select { color: rgba(255,255,255,.85); }
#onboarding-screen .date-row select option { background: #1e293b; color: #fff; }

/* Iconos en cards light */
.dsi-blue { background: var(--blue-pale); color: var(--primary); }
.dsi-purple { background: #f5f0ff; color: var(--violet-600); }
.dsi-orange { background: var(--orange-50); color: var(--orange-600); }

/* ════════ DASHBOARD REFERENCIA — AJUSTES FINALES ════════ */
.dash-bienvenida { padding:20px 28px 40px; gap:16px; background:var(--blue-ghost); }
/* .dash-stats grid-template-columns se define en la regla base (línea ~467) */
.dstat { background:var(--white); border:1px solid var(--blue-light); border-radius:14px; padding:18px; }
.dstat-head { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.dstat-icon { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; }
.dsi-blue { background:var(--blue-pale); color:var(--primary); }
.dsi-purple { background:var(--blue-pale); color:var(--primary); }
.dsi-orange { background:var(--blue-pale); color:var(--primary); }
.dstat-label { font-size:11px; color:var(--blue-muted); font-weight:600; margin-bottom:3px; }
.dstat-val { font-size:22px; font-weight:900; color:var(--navy); line-height:1; }
.dstat-bar { height:5px; background:var(--blue-wash); border-radius:3px; overflow:hidden; margin-top:10px; }
.dstat-bar-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--primary),var(--primary-dark)); }
.dstat-sub { font-size:11px; color:var(--blue-muted); margin-top:6px; }
.dstat-dots { display:flex; gap:5px; margin-top:4px; }
.ddot { width:11px; height:11px; border-radius:50%; background:var(--blue-wash); }
.ddot.on { background:var(--primary); }

/* .dash-grid3 grid-template-columns se define en la regla base (línea ~489) */
.dcard { background:var(--white); border:1px solid var(--blue-light); border-radius:14px; padding:18px; transition:.15s; }
.dcard:hover { border-color:var(--primary); box-shadow:0 4px 16px rgba(21,111,231,.1); }
.dcard-lbl { font-size:12px; font-weight:800; color:var(--navy); margin-bottom:4px; }
.dcard.center { display:flex; flex-direction:column; align-items:center; text-align:center; }

.dash-reto-banner { background:linear-gradient(135deg,var(--blue-pale),var(--blue-wash)); border:1.5px solid var(--blue-light); border-radius:14px; padding:16px 20px; display:flex; align-items:center; gap:16px; }
.drb-icon { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:22px; flex-shrink:0; }
.drb-badge { display:inline-flex; align-items:center; gap:5px; background:var(--blue-pale); border:1px solid var(--blue-light); padding:2px 10px; border-radius:20px; font-size:10px; font-weight:800; color:var(--primary); margin-bottom:5px; }
.drb-title { font-size:14px; font-weight:900; color:var(--navy); margin-bottom:3px; }
.drb-desc { font-size:11px; color:var(--blue-muted); }
.drb-btn { background:var(--primary); color:white; border:none; padding:10px 18px; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; flex-shrink:0; font-family:inherit; }
.drb-btn:hover { background:var(--primary-dark); }

.dash-section-hd { font-size:17px; font-weight:900; color:var(--navy); margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; }
.dash-section-hd span { font-size:12px; font-weight:600; color:var(--primary); cursor:pointer; }

.dash-plan-list { display:flex; flex-direction:column; gap:10px; padding-bottom:32px; }
.dplan-item { display:flex; align-items:center; gap:14px; background:var(--white); border:1px solid var(--blue-light); padding:14px 18px; border-radius:12px; cursor:pointer; transition:.15s; }
.dplan-item:hover { border-color:var(--primary); transform:translateX(3px); }
.dplan-icon { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.dpi-blue { background:var(--blue-pale); color:var(--primary); }
.dpi-indigo { background:var(--blue-pale); color:var(--primary); }
.dpi-pink { background:#fff0f6; color:var(--pink); }
.dpi-purple { background:var(--blue-pale); color:var(--primary); }
.dpi-green { background:#f0fdf6; color:var(--success); }
.dplan-content { flex:1; min-width:0; }
.dplan-content strong { font-size:14px; color:var(--navy); font-weight:800; display:block; margin-bottom:3px; }
.dplan-content span { font-size:12px; color:var(--blue-muted); line-height:1.4; display:block; }
.dplan-content small { font-size:11px; color:#9bb5d4; display:block; margin-top:2px; }
.dplan-actions { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; }
.btn-plan-act { padding:8px 18px; background:var(--primary); border:none; color:white; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
.btn-plan-act:hover { background:var(--primary-dark); }
.rtk-lbl { font-size:12px; font-weight:800; color:var(--success); }
.plan-arrow { font-size:18px; color:var(--blue-light); flex-shrink:0; }
.btn-outline-blue { padding:9px 16px; border:1.5px solid var(--blue-light); color:var(--primary); background:var(--blue-pale); border-radius:9px; font-size:12px; font-weight:700; cursor:pointer; width:100%; font-family:inherit; transition:.15s; }
.btn-outline-blue:hover { background:var(--primary); color:white; }
.btn-grad { background:linear-gradient(135deg,var(--primary),var(--primary-dark)); border:none; color:white; border-radius:9px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; padding:10px 16px; transition:.15s; }
.btn-grad:hover { opacity:.9; }

/* Dato card */
.dato-card { background:var(--blue-pale); border:1px solid var(--blue-light); border-radius:12px; padding:14px 16px; margin-bottom:0; }
.dato-titulo { font-size:11px; font-weight:800; color:var(--primary); text-transform:uppercase; letter-spacing:.5px; }
.dato-texto { font-size:14px; font-weight:600; color:var(--navy); line-height:1.5; font-style:italic; margin:6px 0; }
.dato-fuente { font-size:11px; color:var(--blue-muted); }

/* ════════ HERO GAUGE RESPONSIVE ════════ */

.db-hero-text { flex:1; min-width:0; }
.db-gauge { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:6px; }

@media (max-height:960px) {
  .db-gauge-wrap { width:90px; height:90px; }
  .db-gauge-wrap svg { width:90px; height:90px; }
  .db-gauge-val { font-size:18px; }
}

@media (max-width:1100px) {
  .db-gauge-wrap { width:90px; height:90px; }
  .db-gauge-wrap svg { width:90px; height:90px; }
  .db-gauge-val { font-size:18px; }
  .db-gauge-sub { font-size:9px; }
}

@media (max-width:900px) {
  .db-gauge { display: none; }
  .db-hero-h { font-size:22px; }
}

/* ════════ SUPERADMIN + PROFESOR NAV ════════ */
.dash-nav-profesor { border-top: 1px solid rgba(255,255,255,.08); margin-top: 4px; padding-top: 8px; }
.dash-nav-superadmin { color: var(--pink); }
.dash-nav-superadmin:hover { background: rgba(255,58,114,.12); color: var(--pink); }
.dash-nav-superadmin.active { background: rgba(255,58,114,.18); border-color: rgba(255,58,114,.3); color: var(--pink); }
.dash-nav-item[data-seccion="evaluador"] { color: rgba(255,255,255,.7); }
.dash-nav-item[data-seccion="evaluador"]:hover { background: rgba(109,40,217,.2); }
.dash-nav-item[data-seccion="evaluador"].active { background: rgba(109,40,217,.2); border-color: rgba(109,40,217,.35); }
.spin-sm { width:20px;height:20px;border:2px solid var(--blue-light);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 8px;display:block }

/* ════════ PLAN DE HOY — NUEVO ════════ */
.dplan-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--blue-light);background:white;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s}
.dplan-check i{font-size:11px;color:transparent;transition:.2s}
.dplan-check.done{background:var(--green,var(--success));border-color:var(--green,var(--success))}
.dplan-check.done i{color:white}
.dplan-sub{font-size:11px;color:var(--blue-medium);margin-top:1px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
#plan-progreso{float:right}

/* ════════ MODALES DAILY ════════ */
.daily-modal-overlay{display:none;position:fixed;inset:0;z-index:2000;background:rgba(13,42,110,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);align-items:flex-end;justify-content:center}
.daily-modal-overlay.open{display:flex}
.daily-modal{background:white;border-radius:28px 28px 0 0;width:100%;max-width:480px;max-height:92vh;overflow-y:auto;animation:slideUp .3s ease}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.dm-header{padding:20px 20px 0;display:flex;align-items:center;gap:12px;border-radius:28px 28px 0 0}
.dm-mascot{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--primary));display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0}
.dm-header-text{flex:1}
.dm-header-title{font-family:'Outfit',sans-serif;font-size:18px;font-weight:900;color:var(--navy);line-height:1}
.dm-header-sub{font-size:12px;color:var(--blue-medium);margin-top:2px}
.dm-close{width:32px;height:32px;border-radius:50%;background:var(--blue-ghost);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--blue-medium);font-size:16px;flex-shrink:0}
.dm-body{padding:18px 20px}
.dm-quote-block{background:white;border:1px solid var(--blue-wash);border-radius:16px;padding:20px;margin-bottom:16px;position:relative}
.dm-quote-icon{font-size:40px;color:var(--blue-wash);font-family:Georgia,serif;line-height:1;margin-bottom:-10px}
.dm-quote-text{font-size:20px;font-weight:800;color:var(--navy);line-height:1.3;margin-bottom:8px}
.dm-quote-text span{color:var(--primary)}
.dm-quote-sub{font-size:13px;color:var(--blue-500);line-height:1.5}
.dm-quote-source{font-size:12px;color:var(--text3);border-top:1px solid var(--gray-100);padding-top:10px;margin-top:10px}
.dm-section-title{font-size:14px;font-weight:800;color:var(--navy);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.dm-section-title i{font-size:18px;color:var(--primary)}
.dm-tips{display:flex;flex-direction:column;gap:9px;margin-bottom:16px}
.dm-tip{display:flex;align-items:flex-start;gap:10px;background:var(--blue-ghost);border:1px solid var(--blue-wash);border-radius:11px;padding:11px 13px}
.dm-tip-icon{width:32px;height:32px;border-radius:8px;background:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dm-tip-icon i{font-size:15px;color:white}
.dm-tip-text{font-size:12px;color:var(--navy);line-height:1.5}
.dm-tip-text strong{color:var(--primary)}
.dm-btn-main{width:100%;padding:15px;border:none;border-radius:14px;font-size:15px;font-weight:800;cursor:pointer;font-family:'Outfit',sans-serif;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:16px;transition:.2s}
.dm-btn-main:hover{opacity:.9;transform:translateY(-1px)}
.dm-btn-aprendido{background:linear-gradient(135deg,var(--success),var(--success-dark));color:white}
.dm-btn-iniciar{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:white}
.dm-btn-guardar{background:linear-gradient(135deg,var(--warning),var(--amber-600));color:white}
.dm-libro-cover{display:flex;gap:14px;margin-bottom:16px;align-items:flex-start}
.dm-libro-img{width:80px;height:110px;border-radius:8px;background:linear-gradient(135deg,var(--navy),var(--primary));display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:28px;color:white}
.dm-libro-info{flex:1}
.dm-libro-title{font-size:18px;font-weight:900;color:var(--navy);margin-bottom:3px;font-family:'Outfit',sans-serif;line-height:1.2}
.dm-libro-autor{font-size:13px;color:var(--blue-medium);margin-bottom:8px}
.dm-libro-stars{color:var(--warning);font-size:14px;margin-bottom:6px}
.dm-libro-meta{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--blue-500)}
.dm-libro-meta span{display:flex;align-items:center;gap:5px}
.dm-libro-meta i{font-size:13px;color:var(--primary)}
.dm-aprendizajes{display:flex;flex-direction:column;gap:6px}
.dm-apr-item{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--navy);background:#f0fdf6;border:1px solid #a7f3d0;border-radius:8px;padding:8px 11px}
.dm-apr-item i{font-size:14px;color:var(--success);flex-shrink:0;margin-top:1px}

/* ════════ PLAN DE HOY — TIMELINE VERTICAL ════════ */
.dash-plan-timeline{display:flex;flex-direction:column;gap:0}

.dpt-item{display:flex;gap:0;cursor:pointer;align-items:stretch}
.dpt-item:hover .dpt-card{background:#f0f5ff;border-color:#a8c8f8}

.dpt-left{display:flex;flex-direction:column;align-items:center;width:36px;flex-shrink:0;padding-top:14px}
.dpt-check{width:24px;height:24px;border-radius:50%;border:2.5px solid var(--blue-light);background:white;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.25s;z-index:1}
.dpt-check i{font-size:12px;color:transparent;transition:.2s}
.dpt-check.done{background:var(--success);border-color:var(--success);box-shadow:0 0 0 4px rgba(3,210,110,.15)}
.dpt-check.done i{color:white}
.dpt-line{flex:1;width:2px;background:var(--blue-wash);margin:4px auto 0;min-height:12px}

.dpt-card{flex:1;display:flex;align-items:center;gap:12px;background:white;border:1.5px solid var(--border-light);border-radius:14px;padding:12px 14px;margin:4px 0 4px 8px;transition:.15s}
.dpt-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dpt-icon i{font-size:18px}
.dpt-content{flex:1;min-width:0}
.dpt-title{font-size:13px;font-weight:800;color:var(--navy);margin-bottom:2px}
.dpt-sub{font-size:12px;font-weight:600;color:var(--blue-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpt-desc{font-size:11px;color:var(--blue-medium);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpt-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}


/* ═══════════════════════════════════════════════════════════════
   DIAGNÓSTICOS — Rediseño con tarjetas + desbloqueo mensual
   Añadir al final de style.css
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   DIAGNÓSTICOS v2 — Rediseño profesional
   
   INSTRUCCIONES: 
   1. Localiza en style.css el bloque "DIAGNÓSTICOS — Rediseño con tarjetas + desbloqueo mensual"
   2. Borra ese bloque (desde el comentario hasta justo antes de @media)
   3. Pega TODO este archivo en su lugar
   
   Mantiene el responsive del original.
═══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.dxv2-page{padding:0 2px;max-width:720px;margin:0 auto;animation:dxv2FadeIn .4s ease}
@keyframes dxv2FadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes dxv2SlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes dxv2Pulse{0%,100%{opacity:.4}50%{opacity:.7}}

/* ═══════════════════════════════════════════════════════
   HERO — Tarjeta grande con porcentaje circular
═══════════════════════════════════════════════════════ */
.dxv2-hero{position:relative;border-radius:24px;overflow:hidden;margin-bottom:28px;color:white;box-shadow:0 16px 40px rgba(13,42,110,.18)}
.dxv2-hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,var(--navy) 0%,var(--blue-900) 45%,var(--primary) 100%);z-index:0}
.dxv2-hero-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(251,191,36,.18),transparent 50%),radial-gradient(circle at 20% 90%,rgba(3,210,110,.12),transparent 45%)}
.dxv2-hero-bg::after{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px);background-size:20px 20px;opacity:.3}
.dxv2-hero-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px}

.dxv2-hero-left{flex:1;min-width:0}
.dxv2-hero-label{display:inline-flex;align-items:center;gap:5px;background:rgba(251,191,36,.18);color:var(--amber-400);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px;padding:5px 12px;border-radius:20px;margin-bottom:10px;border:1px solid rgba(251,191,36,.3)}
.dxv2-hero-label i{font-size:12px}
.dxv2-hero-title{font-size:24px;font-weight:900;line-height:1.15;margin-bottom:6px;font-family:'Outfit',sans-serif;letter-spacing:-.4px}
.dxv2-hero-sub{font-size:13px;color:rgba(255,255,255,.75);margin-bottom:18px;line-height:1.5}

.dxv2-hero-stats{display:flex;gap:18px}
.dxv2-hstat{display:flex;flex-direction:column;gap:2px}
.dxv2-hstat-num{font-size:22px;font-weight:900;line-height:1;font-family:'Outfit',sans-serif}
.dxv2-hstat-num span{font-size:13px;font-weight:600;color:rgba(255,255,255,.5)}
.dxv2-hstat-label{font-size:10px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.5px}

/* Anillo de progreso */
.dxv2-hero-right{flex-shrink:0}
.dxv2-progress-ring{position:relative;width:140px;height:140px}
.dxv2-progress-ring svg{width:100%;height:100%}
.dxv2-progress-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.dxv2-progress-num{font-size:34px;font-weight:900;line-height:1;font-family:'Outfit',sans-serif;display:flex;align-items:baseline}
.dxv2-progress-num span{font-size:16px;font-weight:700;color:rgba(255,255,255,.7);margin-left:2px}
.dxv2-progress-label{font-size:9px;font-weight:700;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:1px;margin-top:2px}

/* ═══════════════════════════════════════════════════════
   SECTION HEADERS
═══════════════════════════════════════════════════════ */
.dxv2-section{margin-bottom:32px;animation:dxv2SlideUp .5s ease backwards}
.dxv2-section:nth-child(2){animation-delay:.05s}
.dxv2-section:nth-child(3){animation-delay:.1s}
.dxv2-section:nth-child(4){animation-delay:.15s}

.dxv2-section-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:0 4px}
.dxv2-section-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dxv2-section-icon i{font-size:22px;color:white}
.dxv2-icon-free{background:linear-gradient(135deg,var(--success),var(--success-dark));box-shadow:0 4px 12px rgba(3,210,110,.3)}
.dxv2-icon-premium{background:linear-gradient(135deg,var(--warning),var(--amber-600));box-shadow:0 4px 12px rgba(245,158,11,.3)}
.dxv2-icon-timeline{background:linear-gradient(135deg,var(--primary),var(--primary-dark));box-shadow:0 4px 12px rgba(21,111,231,.3)}

.dxv2-section-titles{flex:1;min-width:0}
.dxv2-section-title{font-size:16px;font-weight:900;color:var(--navy);font-family:'Outfit',sans-serif;line-height:1.2;margin-bottom:2px}
.dxv2-section-sub{font-size:11px;color:var(--blue-medium);font-weight:600;line-height:1.3}
.dxv2-section-counter{background:var(--blue-pale);color:var(--primary);font-size:11px;font-weight:800;padding:6px 12px;border-radius:10px;font-family:'Outfit',sans-serif;border:1px solid var(--blue-light);white-space:nowrap}

/* ═══════════════════════════════════════════════════════
   CARDS — Tarjetas de diagnóstico
═══════════════════════════════════════════════════════ */
.dxv2-cards{display:flex;flex-direction:column;gap:10px}

.dxv2-card{position:relative;display:flex;align-items:center;gap:13px;padding:14px 15px;background:white;border:1.5px solid var(--border-light);border-radius:16px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);overflow:hidden;animation:dxv2SlideUp .4s ease backwards}
.dxv2-card:hover{border-color:transparent;box-shadow:0 12px 28px rgba(21,111,231,.12);transform:translateY(-2px)}
.dxv2-card:hover .dxv2-card-accent{opacity:1}
.dxv2-card:hover .dxv2-card-icon{transform:scale(1.05) rotate(-3deg)}

.dxv2-card-accent{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--card-grad);opacity:0;transition:.25s;border-radius:18px 0 0 18px}

.dxv2-card-locked{opacity:.85}
.dxv2-card-locked .dxv2-card-icon{filter:grayscale(.6)}

.dxv2-card-renew{border-color:var(--amber-200);background:linear-gradient(135deg,var(--amber-50),var(--yellow-100))}
.dxv2-card-renew:hover{border-color:var(--warning);box-shadow:0 12px 28px rgba(245,158,11,.18)}

/* Icono de la tarjeta */
.dxv2-card-icon-wrap{position:relative;flex-shrink:0}
.dxv2-card-icon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;transition:.25s;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.dxv2-card-icon i{font-size:26px;color:white}
.dxv2-icon-overlay{position:absolute;bottom:-4px;right:-4px;width:22px;height:22px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.dxv2-icon-overlay i{font-size:12px;color:var(--text3)}

/* Contenido */
.dxv2-card-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.dxv2-card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.dxv2-card-meta{display:flex;align-items:center;gap:5px 10px;flex-wrap:wrap;min-width:0}
.dxv2-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.dxv2-card-title{font-size:15px;font-weight:800;color:var(--navy);font-family:'Outfit',sans-serif;letter-spacing:-.2px;line-height:1.2}
.dxv2-card-desc{font-size:11px;color:var(--blue-medium);font-weight:600;line-height:1.4}

/* Badges */
.dxv2-badge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;padding:3px 9px;border-radius:7px;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.dxv2-badge i{font-size:11px}
.dxv2-badge-available{background:var(--green-100);color:var(--emerald-600)}
.dxv2-badge-completed{background:var(--blue-100);color:#1e40af}
.dxv2-badge-renew{background:var(--amber-100);color:var(--amber-900);animation:dxv2Pulse 2s ease infinite}
.dxv2-badge-pending{background:var(--gray-100);color:var(--slate)}
.dxv2-badge-locked{background:linear-gradient(135deg,var(--amber-100),var(--amber-200));color:var(--amber-900);border:1px solid var(--amber-400)}

/* Chip de créditos */
.dxv2-credit-chip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:2px 0;border-radius:6px;width:fit-content;margin-top:0;background:none!important;border:none!important}
.dxv2-credit-chip i{font-size:12px}
.dxv2-credit-ok{color:#16a34a}
.dxv2-credit-empty{color:#94a3b8}
.dxv2-credit-gift{color:var(--blue-600)}

/* Botón(es) de acción: compactos, a la derecha de la fila inferior */
.dxv2-card-action{flex-shrink:0}
.dxv2-action-btn{padding:9px 14px;border:none;border-radius:10px;font-size:12px;font-weight:800;cursor:pointer;font-family:'Outfit',sans-serif;display:flex;align-items:center;gap:5px;transition:.2s;white-space:nowrap}
.dxv2-action-btn i{font-size:14px}
.dxv2-action-btn:not(:disabled):hover{transform:translateY(-1px)}
.dxv2-btn-start{background:linear-gradient(135deg,var(--success),var(--success-dark));color:white;box-shadow:0 4px 10px rgba(3,210,110,.3)}
.dxv2-btn-start:hover{box-shadow:0 6px 14px rgba(3,210,110,.4)}
.dxv2-btn-view{background:var(--blue-pale);color:var(--primary);border:1px solid var(--blue-light)}
.dxv2-btn-view:hover{background:var(--blue-100)}
.dxv2-btn-renew{background:linear-gradient(135deg,var(--warning),var(--amber-600));color:white;box-shadow:0 4px 10px rgba(245,158,11,.3)}
.dxv2-btn-renew:hover{box-shadow:0 6px 14px rgba(245,158,11,.4)}
/* Acabado metalizado profesional (botones de diagnóstico completado) */
.dxv2-btn-metal{background:linear-gradient(180deg,#ffffff,#e9eef4);color:#334766;border:1px solid #cbd5e1;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(15,23,42,.10)}
.dxv2-btn-metal:hover{background:linear-gradient(180deg,#ffffff,#dde5ee);border-color:#b6c2d4}
.dxv2-btn-metal-dark{background:linear-gradient(180deg,#eaf3ff,#d6e8fe);color:#156fe7;border:1px solid #bcd8fb;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(21,111,231,.12)}
.dxv2-btn-metal-dark:hover{background:linear-gradient(180deg,#e2eeff,#c8defd);border-color:#a6c9f7}
.dxv2-btn-unlock{background:linear-gradient(135deg,var(--navy),var(--blue-900));color:white;box-shadow:0 4px 10px rgba(13,42,110,.3)}
.dxv2-btn-unlock:hover{box-shadow:0 6px 14px rgba(13,42,110,.4)}
.dxv2-btn-locked{background:var(--gray-100);color:var(--text3);cursor:not-allowed}

/* ═══════════════════════════════════════════════════════
   PRO BANNER — Tarjeta destacada
═══════════════════════════════════════════════════════ */
.dxv2-pro-card{position:relative;border-radius:18px;padding:18px;margin-bottom:12px;overflow:hidden;transition:.25s}
.dxv2-pro-header{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.dxv2-pro-icon{font-size:32px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dxv2-pro-headtext{flex:1;min-width:0}
.dxv2-pro-title{font-size:15px;font-weight:900;font-family:'Outfit',sans-serif;line-height:1.2;margin-bottom:3px}
.dxv2-pro-sub{font-size:11px;font-weight:600;line-height:1.4}
.dxv2-pro-price{flex-shrink:0;text-align:right}
.dxv2-pro-price-num{font-size:22px;font-weight:900;font-family:'Outfit',sans-serif;line-height:1}
.dxv2-pro-price-period{font-size:11px;font-weight:600;opacity:.7}

/* PRO CTA (no eres pro) */
.dxv2-pro-cta{background:linear-gradient(135deg,var(--yellow-100),var(--amber-200) 60%,#fcd34d);border:1.5px solid var(--amber-400);cursor:pointer}
.dxv2-pro-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(245,158,11,.25)}
.dxv2-pro-cta .dxv2-pro-title{color:#78350f}
.dxv2-pro-cta .dxv2-pro-sub{color:var(--amber-900)}
.dxv2-pro-cta .dxv2-pro-price{color:#78350f}
.dxv2-pro-cta-glow{position:absolute;top:-50%;right:-30%;width:200px;height:200px;background:radial-gradient(circle,rgba(251,191,36,.4),transparent 70%);pointer-events:none;animation:dxv2Pulse 3s ease infinite}

.dxv2-pro-features{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;position:relative;z-index:1}
.dxv2-pro-feat{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.5);font-size:11px;font-weight:700;color:#78350f;padding:5px 10px;border-radius:8px;border:1px solid rgba(120,53,15,.15)}
.dxv2-pro-feat i{color:var(--emerald-600);font-size:13px}

/* PRO ACTIVE */
.dxv2-pro-active{background:linear-gradient(135deg,var(--blue-50),var(--blue-100));border:1.5px solid var(--sky-300)}
.dxv2-pro-active .dxv2-pro-title{color:var(--blue-900)}
.dxv2-pro-active .dxv2-pro-sub{color:var(--blue-600)}
.dxv2-pro-progress{height:8px;background:var(--blue-100);border-radius:5px;margin:14px 0 10px;overflow:hidden}
.dxv2-pro-progress-fill{height:100%;background:linear-gradient(90deg,var(--blue-500b),var(--primary));border-radius:5px;transition:width 1.2s cubic-bezier(.4,0,.2,1);box-shadow:0 0 8px rgba(59,130,246,.4)}
.dxv2-pro-next{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#1e40af}
.dxv2-pro-next i{font-size:14px}
.dxv2-pro-next strong{font-weight:800}

/* PRO COMPLETE */
.dxv2-pro-complete{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--green-100),var(--green-200));border:1.5px solid var(--emerald-300)}
.dxv2-pro-complete .dxv2-pro-icon{font-size:36px}
.dxv2-pro-complete .dxv2-pro-body{flex:1}
.dxv2-pro-complete .dxv2-pro-title{color:#065f46}
.dxv2-pro-complete .dxv2-pro-sub{color:var(--emerald-600)}

/* ═══════════════════════════════════════════════════════
   TIMELINE — Historial vertical
═══════════════════════════════════════════════════════ */
.dxv2-timeline{position:relative;padding-left:22px;background:white;border:1.5px solid var(--border-light);border-radius:16px;padding:18px 18px 18px 38px}
.dxv2-timeline::before{content:'';position:absolute;left:26px;top:24px;bottom:24px;width:2px;background:linear-gradient(to bottom,var(--blue-light),var(--border-light));border-radius:1px}
.dxv2-tl-item{display:flex;align-items:flex-start;gap:14px;padding:8px 0;position:relative}
.dxv2-tl-item:not(:last-child){margin-bottom:6px}
.dxv2-tl-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;box-shadow:0 0 0 4px white,0 2px 6px rgba(0,0,0,.1);margin-left:-14px}
.dxv2-tl-dot i{font-size:14px;color:white}
.dxv2-tl-content{flex:1;min-width:0;padding-top:2px}
.dxv2-tl-name{font-size:13px;font-weight:800;color:var(--navy);font-family:'Outfit',sans-serif;margin-bottom:3px}
.dxv2-tl-meta{display:flex;flex-wrap:wrap;gap:10px;font-size:10px;color:var(--text3);font-weight:600}
.dxv2-tl-meta span{display:inline-flex;align-items:center;gap:4px}
.dxv2-tl-meta i{font-size:12px}
.dxv2-tl-renew{color:var(--warning)}

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.dxv2-footer{text-align:center;padding:20px;font-size:12px;color:var(--blue-medium);font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.dxv2-footer i{font-size:16px;color:var(--amber-400)}

/* ═══════════════════════════════════════════════════════════════
   AULAS — Sistema de aulas para profesores
   Añadir al final de style.css
═══════════════════════════════════════════════════════════════ */

.aula-wrap { padding: 24px 28px 40px; }
.aula-page { padding: 0 4px; max-width: 720px; margin: 0 auto; animation: aulaFadeIn .4s ease; }
@keyframes aulaFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── HEADER ── */
.aula-header { position: relative; background: linear-gradient(135deg,var(--navy) 0%,var(--blue-900) 50%,var(--primary) 100%); border-radius: 22px; padding: 26px; margin-bottom: 22px; color: white; overflow: hidden; box-shadow: 0 12px 32px rgba(13,42,110,.2); display: flex; align-items: center; gap: 20px; }
.aula-header::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size: 22px 22px; opacity: .4; pointer-events: none; }
.aula-header::after { content: ''; position: absolute; top: -40%; right: -10%; width: 280px; height: 280px; background: radial-gradient(circle,rgba(251,191,36,.2),transparent 70%); pointer-events: none; }
.aula-header-left { flex: 1; min-width: 0; position: relative; z-index: 1; }
.aula-header-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(251,191,36,.2); color: var(--amber-400); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 5px 12px; border-radius: 20px; margin-bottom: 10px; border: 1px solid rgba(251,191,36,.35); }
.aula-header-title { font-size: 24px; font-weight: 900; line-height: 1.15; margin-bottom: 4px; font-family: 'Outfit',sans-serif; letter-spacing: -.4px; }
.aula-header-sub { font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.5; }
.aula-header-right { position: relative; z-index: 1; }
.aula-counter { background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.2); border-radius: 14px; padding: 14px 18px; text-align: center; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.aula-counter-num { font-size: 28px; font-weight: 900; line-height: 1; font-family: 'Outfit',sans-serif; }
.aula-counter-num span { font-size: 16px; opacity: .6; }
.aula-counter-label { font-size: 10px; font-weight: 700; opacity: .75; text-transform: uppercase; letter-spacing: .5px; margin-top: 3px; }

/* ── BOTÓN CREAR ── */
.aula-create-btn { width: 100%; padding: 16px; background: linear-gradient(135deg,var(--success),var(--success-dark)); border: none; border-radius: 14px; color: white; font-size: 14px; font-weight: 800; cursor: pointer; font-family: 'Outfit',sans-serif; display: flex; align-items: center; justify-content: center; gap: 8px; transition: .2s; margin-bottom: 14px; box-shadow: 0 4px 14px rgba(3,210,110,.3); }
.aula-create-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(3,210,110,.4); }
.aula-create-btn i { font-size: 18px; }
.aula-create-btn:disabled { opacity: .5; cursor: not-allowed; background: linear-gradient(135deg,var(--text3),var(--slate)); }

.aula-limit-warn { display: flex; align-items: flex-start; gap: 10px; background: var(--amber-100); border: 1px solid var(--amber-200); color: var(--amber-900); padding: 12px 14px; border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 1.5; margin-bottom: 14px; }
.aula-limit-warn i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* ── LISTA ── */
.aula-list { display: flex; flex-direction: column; gap: 12px; }

.aula-card { background: white; border: 1.5px solid var(--border-light); border-radius: 16px; padding: 18px; cursor: pointer; transition: .25s; position: relative; overflow: hidden; }
.aula-card:hover { border-color: var(--sky-300); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(21,111,231,.1); }
.aula-card-closed { opacity: .65; background: var(--gray-50); }

.aula-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.aula-card-info { flex: 1; min-width: 0; }
.aula-card-name { font-size: 16px; font-weight: 900; color: var(--navy); font-family: 'Outfit',sans-serif; margin-bottom: 3px; line-height: 1.2; }
.aula-card-desc { font-size: 12px; color: var(--blue-medium); line-height: 1.4; }

.aula-card-code { background: var(--gray-100); border: 1px solid var(--border); padding: 6px 10px; border-radius: 8px; font-family: monospace; font-size: 12px; font-weight: 800; color: var(--primary); white-space: nowrap; display: flex; align-items: center; gap: 5px; }

.aula-card-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 6px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.aula-status-active { background: var(--green-100); color: var(--emerald-600); }
.aula-status-closed { background: var(--gray-100); color: var(--slate); }
.aula-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.aula-status-active .aula-status-dot { animation: aulaPulse 2s ease infinite; }
@keyframes aulaPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(1.4); } }

.aula-card-stats { display: flex; flex-wrap: wrap; gap: 14px; }
.aula-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--text2); }
.aula-stat i { font-size: 14px; color: var(--primary); }

/* ── VACÍO ── */
.aula-empty { text-align: center; padding: 60px 20px; background: white; border: 1.5px dashed var(--gray-300); border-radius: 16px; }
.aula-empty-icon { font-size: 48px; margin-bottom: 12px; }
.aula-empty-title { font-size: 15px; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.aula-empty-sub { font-size: 12px; color: var(--blue-medium); }

.aula-empty-small { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 20px; background: var(--gray-50); border: 1.5px dashed var(--gray-300); border-radius: 14px; color: var(--text3); }
.aula-empty-small i { font-size: 36px; }
.aula-empty-small div { font-size: 13px; font-weight: 700; color: var(--text2); }
.aula-empty-help { font-size: 11px; color: var(--text3); font-weight: 500; }

/* ── BACK BUTTON ── */
.aula-back { background: none; border: none; color: var(--primary); font-size: 13px; font-weight: 700; cursor: pointer; padding: 8px 0; margin-bottom: 12px; display: flex; align-items: center; gap: 5px; font-family: inherit; }
.aula-back:hover { color: var(--navy); }

/* ── DETALLE (cabecera ahora pf2-hero) ── */

.aula-actions-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.aula-btn-secondary { padding: 10px 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: white; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Outfit',sans-serif; display: flex; align-items: center; gap: 5px; transition: .15s; }
.aula-btn-secondary:hover { background: rgba(255,255,255,.2); }
.aula-btn-danger { padding: 10px 16px; background: rgba(220,38,38,.85); border: 1px solid rgba(220,38,38,.5); border-radius: 10px; color: white; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Outfit',sans-serif; display: flex; align-items: center; gap: 5px; transition: .15s; }
.aula-btn-danger:hover { background: rgba(220,38,38,1); }

/* ── COMPARTIR (CÓDIGO + QR) ── */
.aula-share { background: linear-gradient(135deg,var(--yellow-50),var(--amber-100)); border: 1.5px solid var(--amber-200); border-radius: 16px; padding: 20px; margin-bottom: 20px; }
.aula-share-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--amber-900); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 14px; }
.aula-share-grid { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin-bottom: 14px; }
.aula-share-code { }
.aula-share-label { font-size: 10px; font-weight: 800; color: #a16207; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.aula-share-code-value { font-family: monospace; font-size: 26px; font-weight: 900; color: var(--navy); background: white; padding: 12px 16px; border-radius: 10px; letter-spacing: 1px; margin-bottom: 10px; text-align: center; border: 2px dashed var(--amber-400); }
.aula-share-qr { text-align: center; }
.aula-qr-wrap { background: white; padding: 10px; border-radius: 10px; display: inline-block; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.aula-qr-wrap img { display: block; }
.aula-copy-btn { width: 100%; padding: 9px; background: white; border: 1.5px solid var(--amber-400); border-radius: 9px; color: var(--amber-900); font-size: 12px; font-weight: 800; cursor: pointer; font-family: 'Outfit',sans-serif; display: flex; align-items: center; justify-content: center; gap: 5px; transition: .15s; }
.aula-copy-btn:hover { background: var(--amber-100); }
.aula-copy-btn-mini { padding: 9px 12px; background: white; border: 1.5px solid var(--amber-400); border-radius: 8px; color: var(--amber-900); cursor: pointer; }
.aula-copy-btn-mini:hover { background: var(--amber-100); }

.aula-share-url { }
.aula-url-row { display: flex; gap: 6px; }
.aula-url-row input { flex: 1; padding: 9px 12px; background: white; border: 1px solid var(--amber-200); border-radius: 8px; font-size: 11px; color: var(--text2); font-family: monospace; outline: none; }

/* ── SECCIONES INTERNAS ── */
.aula-section { background: white; border: 1.5px solid var(--border-light); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.aula-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.aula-section-title { font-size: 16px; font-weight: 900; color: var(--navy); font-family: 'Outfit',sans-serif; display: flex; align-items: center; gap: 6px; }
.aula-section-title i { color: var(--primary); }
.aula-section-sub { font-size: 12px; color: var(--blue-medium); margin-top: 2px; line-height: 1.4; }

/* ── HERRAMIENTAS ── */
.aula-tools-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap: 10px; }
.aula-tool { position: relative; background: var(--gray-50); border: 1.5px solid var(--border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: .2s; text-align: center; }
.aula-tool input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.aula-tool:hover { border-color: var(--sky-300); }
.aula-tool-active { background: white; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21,111,231,.1); }
.aula-tool-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: .2s; }
.aula-tool-icon i { font-size: 22px; color: white; }
.aula-tool-active .aula-tool-icon { transform: scale(1.05); }
.aula-tool-name { font-size: 12px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.aula-tool-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0); transition: .2s; }
.aula-tool-check i { color: white; font-size: 14px; }
.aula-tool-active .aula-tool-check { opacity: 1; transform: scale(1); }

/* ── ALUMNOS ── */
.aula-students { display: flex; flex-direction: column; gap: 8px; }
.aula-student { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--gray-50); border: 1px solid var(--border); border-radius: 12px; transition: .15s; }
.aula-student:hover { border-color: var(--blue-light); }
.aula-student-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,var(--primary),var(--navy)); color: white; display: flex; align-items: center; justify-content: center; font-weight: 900; font-family: 'Outfit',sans-serif; flex-shrink: 0; }
.aula-student-info { flex: 1; min-width: 0; }
.aula-student-name { font-size: 13px; font-weight: 800; color: var(--navy); margin-bottom: 1px; }
.aula-student-meta { font-size: 11px; color: var(--blue-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aula-student-stats { display: flex; gap: 14px; flex-shrink: 0; }
.aula-student-stat { display: flex; flex-direction: column; align-items: center; }
.aula-student-num { font-size: 16px; font-weight: 900; color: var(--primary); line-height: 1; font-family: 'Outfit',sans-serif; }
.aula-student-label { font-size: 9px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }

/* ── MODAL ── */
.aula-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(13,42,110,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px; animation: aulaOverlayIn .2s ease; }
@keyframes aulaOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.aula-modal { background: white; border-radius: 20px; max-width: 480px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,.3); animation: aulaModalIn .3s cubic-bezier(.4,0,.2,1); max-height: 92vh; display: flex; flex-direction: column; }
@keyframes aulaModalIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.aula-modal-alum { max-width: 540px; }
.aula-modal-header { display: flex; align-items: center; gap: 12px; padding: 20px; border-bottom: 1px solid var(--border-light); }
.aula-modal-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg,var(--success),var(--success-dark)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.aula-modal-icon i { font-size: 22px; color: white; }
.aula-modal-title { font-size: 16px; font-weight: 900; color: var(--navy); font-family: 'Outfit',sans-serif; line-height: 1.2; }
.aula-modal-sub { font-size: 12px; color: var(--blue-medium); margin-top: 2px; }
.aula-modal-close { margin-left: auto; width: 32px; height: 32px; background: var(--gray-100); border: none; border-radius: 8px; color: var(--slate); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .15s; }
.aula-modal-close:hover { background: var(--border); color: #1e293b; }
.aula-modal-close i { font-size: 18px; }
.aula-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.aula-modal-footer { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border-light); background: var(--gray-50); border-radius: 0 0 20px 20px; }
.aula-modal-footer button { flex: 1; }

.aula-modal-footer .aula-btn-secondary { background: white; border: 1.5px solid var(--border); color: var(--text2); }
.aula-modal-footer .aula-btn-secondary:hover { background: var(--gray-100); }
.aula-btn-primary { padding: 12px 18px; background: linear-gradient(135deg,var(--primary),var(--navy)); border: none; border-radius: 10px; color: white; font-size: 13px; font-weight: 800; cursor: pointer; font-family: 'Outfit',sans-serif; display: flex; align-items: center; justify-content: center; gap: 5px; transition: .15s; }
.aula-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(21,111,231,.3); }
.aula-btn-primary:disabled { opacity: .6; cursor: not-allowed; }

/* ── CAMPOS DE FORMULARIO ── */
.aula-field { margin-bottom: 16px; }
.aula-field label { display: block; font-size: 11px; font-weight: 800; color: var(--text2); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.aula-field input, .aula-field textarea { width: 100%; padding: 11px 14px; background: white; border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; color: var(--navy); font-family: inherit; outline: none; transition: .15s; resize: vertical; }
.aula-field input:focus, .aula-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(21,111,231,.1); }
.aula-help { font-size: 11px; color: var(--text3); margin-top: 5px; line-height: 1.4; }

.aula-radio-group { display: flex; gap: 6px; }
.aula-radio { flex: 1; position: relative; cursor: pointer; }
.aula-radio input { position: absolute; opacity: 0; }
.aula-radio span { display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--gray-50); border: 1.5px solid var(--border); border-radius: 10px; font-size: 14px; font-weight: 800; color: var(--text2); transition: .15s; font-family: 'Outfit',sans-serif; }
.aula-radio:hover span { border-color: var(--sky-300); }
.aula-radio input:checked + span { background: linear-gradient(135deg,var(--primary),var(--navy)); color: white; border-color: var(--navy); }

/* ── BANNER ALUMNO EN DASHBOARD ── */
.alum-aula-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: linear-gradient(135deg,var(--navy),var(--blue-900)); border-radius: 16px; color: white; cursor: pointer; transition: .25s; margin-bottom: 12px; box-shadow: 0 6px 16px rgba(13,42,110,.2); position: relative; overflow: hidden; }
.alum-aula-banner::before { content: ''; position: absolute; top: -30%; right: -10%; width: 180px; height: 180px; background: radial-gradient(circle,rgba(251,191,36,.18),transparent 70%); pointer-events: none; }
.alum-aula-banner:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(13,42,110,.3); }
.alum-aula-icon { width: 44px; height: 44px; background: rgba(251,191,36,.25); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid rgba(251,191,36,.4); position: relative; z-index: 1; }
.alum-aula-icon i { font-size: 22px; color: var(--amber-400); }
.alum-aula-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.alum-aula-label { font-size: 10px; font-weight: 800; color: var(--amber-400); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.alum-aula-name { font-size: 15px; font-weight: 900; font-family: 'Outfit',sans-serif; margin-bottom: 2px; line-height: 1.2; }
.alum-aula-meta { font-size: 11px; color: rgba(255,255,255,.7); }
.alum-aula-arrow { font-size: 20px; opacity: .6; position: relative; z-index: 1; }

/* ── RESPONSIVE ── */
@media(max-width:640px) {
  .aula-header { flex-direction: column; align-items: flex-start; padding: 22px; }
  .aula-header-right { width: 100%; }
  .aula-counter { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
  .aula-counter-label { text-align: right; }
  .aula-share-grid { grid-template-columns: 1fr; }
  .aula-share-qr { text-align: center; }
  .aula-card-top { flex-direction: column; gap: 8px; }
  .aula-card-code { align-self: flex-start; }
  .aula-tools-grid { grid-template-columns: repeat(2,1fr); }
  .aula-actions-row .aula-btn-secondary, .aula-actions-row .aula-btn-danger { flex: 1; }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media(max-width:640px){
  .dxv2-hero-content{flex-direction:column-reverse;padding:24px 20px;gap:20px;text-align:center}
  .dxv2-hero-stats{justify-content:center}
  .dxv2-hero-title{font-size:22px}
  .dxv2-progress-ring{width:120px;height:120px}
  .dxv2-progress-num{font-size:30px}
  
  .dxv2-card{padding:13px;gap:11px}
  .dxv2-card-icon{width:46px;height:46px;border-radius:12px}
  .dxv2-card-icon i{font-size:21px}
  .dxv2-card-title{font-size:14px}
  .dxv2-card-action{margin-top:0}
  .dxv2-action-btn{width:100%;justify-content:center;padding:11px}
  .dxv2-card{flex-wrap:wrap}
  .dxv2-card-content{flex:1 1 100%;min-width:0}
  
  .dxv2-section-header{flex-wrap:wrap}
  .dxv2-section-icon{width:38px;height:38px}
  .dxv2-section-icon i{font-size:20px}
  .dxv2-section-title{font-size:15px}
  
  .dxv2-pro-header{flex-wrap:wrap}
  .dxv2-pro-price{width:100%;text-align:left;margin-top:6px}
  .dxv2-pro-features{justify-content:flex-start}
}

@media(max-width:420px){
  .dxv2-hero-stats{gap:12px}
  .dxv2-hstat-num{font-size:18px}
  .dxv2-tl-meta{flex-direction:column;gap:3px}
}

/* ── Responsive ── */
@media(max-width:640px){
  .dx-hero{flex-direction:column;text-align:center;padding:24px 18px;gap:16px}
  .dx-hero-stats{justify-content:center}
  .dx-sphere-ring{width:90px;height:90px}
  .dx-card{padding:12px 14px;gap:10px}
  .dx-card-icon{width:42px;height:42px;border-radius:11px}
  .dx-card-icon i{font-size:20px}
  .dx-card-title{font-size:13px}
  .dx-card-btn{padding:7px 12px;font-size:11px}
  .dx-pro-banner{flex-wrap:wrap}
}


/* ═══════════════════════════════════════════════════════════════
   AULA DEL ALUMNO — Vista dedicada
   Añadir al final de style.css
═══════════════════════════════════════════════════════════════ */

.aula-alum-page { padding: 0 4px; max-width: 720px; margin: 0 auto; animation: aulaFadeIn .4s ease; }

/* ── HEADER ALUMNO ── */
.aula-alum-header { position: relative; background: linear-gradient(135deg,var(--navy) 0%,var(--blue-900) 50%,var(--primary) 100%); border-radius: 22px; padding: 24px; margin-bottom: 18px; color: white; overflow: hidden; box-shadow: 0 12px 32px rgba(13,42,110,.2); }
.aula-alum-header::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size: 22px 22px; opacity: .4; pointer-events: none; }
.aula-alum-header::after { content: ''; position: absolute; top: -40%; right: -10%; width: 280px; height: 280px; background: radial-gradient(circle,rgba(251,191,36,.2),transparent 70%); pointer-events: none; }

.aula-alum-header-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.aula-alum-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(251,191,36,.2); color: var(--amber-400); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 5px 12px; border-radius: 20px; border: 1px solid rgba(251,191,36,.35); }
.aula-alum-exit { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; color: white; font-size: 11px; font-weight: 700; padding: 7px 12px; cursor: pointer; font-family: inherit; transition: .15s; }
.aula-alum-exit:hover { background: rgba(255,255,255,.2); }
.aula-alum-exit i { font-size: 14px; }

.aula-alum-title { position: relative; z-index: 1; font-size: 26px; font-weight: 900; line-height: 1.15; margin-bottom: 6px; font-family: 'Outfit',sans-serif; letter-spacing: -.4px; }
.aula-alum-desc { position: relative; z-index: 1; font-size: 13px; color: rgba(255,255,255,.78); line-height: 1.5; margin-bottom: 14px; }

.aula-alum-meta { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.15); }
.aula-alum-meta-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: rgba(255,255,255,.85); }
.aula-alum-meta-item i { color: var(--amber-400); font-size: 14px; }
.aula-alum-meta-item strong { color: white; font-weight: 700; }

/* ── COMPLETED ── */
.aula-alum-completed { background: linear-gradient(135deg,var(--emerald-50),#d1fae5); border: 1.5px solid var(--emerald-300); border-radius: 18px; padding: 22px; text-align: center; margin-bottom: 18px; box-shadow: 0 4px 12px rgba(3,210,110,.1); }
.aula-alum-completed-icon { font-size: 48px; margin-bottom: 10px; }
.aula-alum-completed-title { font-size: 17px; font-weight: 900; color: var(--emerald-700); font-family: 'Outfit',sans-serif; margin-bottom: 6px; }
.aula-alum-completed-sub { font-size: 13px; color: var(--emerald-700); line-height: 1.5; opacity: .9; }

/* ── SECCIONES ── */
.aula-alum-section { background: white; border: 1.5px solid var(--border-light); border-radius: 16px; padding: 20px; margin-bottom: 16px; }
.aula-alum-section-header { margin-bottom: 16px; }
.aula-alum-section-title { font-size: 16px; font-weight: 900; color: var(--navy); font-family: 'Outfit',sans-serif; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.aula-alum-section-title i { color: var(--primary); }
.aula-alum-section-sub { font-size: 12px; color: var(--blue-medium); line-height: 1.4; }

/* ── HERRAMIENTAS DEL ALUMNO ── */
.aula-alum-tools { display: flex; flex-direction: column; gap: 10px; }
.aula-alum-tool { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--gray-50); border: 1.5px solid var(--border); border-radius: 14px; transition: .25s; cursor: pointer; }
.aula-alum-tool:hover:not(.aula-alum-tool-done) { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(21,111,231,.1); }
.aula-alum-tool-done { opacity: .65; cursor: default; }

.aula-alum-tool-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.aula-alum-tool-icon i { font-size: 24px; color: white; }

.aula-alum-tool-body { flex: 1; min-width: 0; }
.aula-alum-tool-name { font-size: 15px; font-weight: 800; color: var(--navy); font-family: 'Outfit',sans-serif; margin-bottom: 8px; }
.aula-alum-tool-progress { display: flex; align-items: center; gap: 10px; }
.aula-alum-tool-bar { flex: 1; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; max-width: 140px; }
.aula-alum-tool-bar-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
.aula-alum-tool-count { font-size: 11px; font-weight: 700; color: var(--slate); white-space: nowrap; }

.aula-alum-tool-action { flex-shrink: 0; }
.aula-alum-tool-btn { padding: 9px 16px; background: linear-gradient(135deg,var(--primary),var(--navy)); border: none; border-radius: 10px; color: white; font-size: 12px; font-weight: 800; cursor: pointer; font-family: 'Outfit',sans-serif; display: flex; align-items: center; gap: 5px; transition: .15s; }
.aula-alum-tool-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(21,111,231,.3); }
.aula-alum-tool-btn:disabled { opacity: .6; cursor: not-allowed; }
.aula-alum-tool-btn-done { background: linear-gradient(135deg,var(--text3),var(--slate)); }

/* ── COMPAÑEROS ── */
.aula-alum-mates { display: grid; grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); gap: 10px; }
.aula-alum-mate { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: var(--gray-50); border: 1px solid var(--border); border-radius: 12px; transition: .15s; }
.aula-alum-mate:hover { border-color: var(--blue-light); background: var(--blue-ghost); }
.aula-alum-mate-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--primary),var(--navy)); color: white; display: flex; align-items: center; justify-content: center; font-weight: 900; font-family: 'Outfit',sans-serif; font-size: 16px; }
.aula-alum-mate-name { font-size: 11px; font-weight: 700; color: var(--navy); text-align: center; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.aula-alum-mate-more { display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--blue-ghost); border: 1px dashed var(--blue-light); border-radius: 12px; font-size: 12px; font-weight: 700; color: var(--primary); }

/* ── RESPONSIVE ── */
@media(max-width:640px) {
  .aula-alum-title { font-size: 22px; }
  .aula-alum-tool { flex-wrap: wrap; }
  .aula-alum-tool-body { width: 100%; }
  .aula-alum-tool-action { width: 100%; }
  .aula-alum-tool-btn { width: 100%; justify-content: center; }
  .aula-alum-mates { grid-template-columns: repeat(auto-fill,minmax(80px,1fr)); }
}
/* ═══════════════════════════════════════════════════════════════
   ENTRENAMIENTO — 4 Dimensiones Comunicativas
   Añadir al final de style.css
═══════════════════════════════════════════════════════════════ */

/* ── DIMENSIÓN ── */
.entr-dim { background: white; border: 1.5px solid var(--border-light); border-radius: 18px; overflow: hidden; margin-bottom: 16px; box-shadow: 0 2px 8px rgba(13,42,110,.05); }

.entr-dim-header { padding: 16px 20px; display: flex; align-items: center; gap: 14px; color: white; position: relative; overflow: hidden; }
.entr-dim-header::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px); background-size: 18px 18px; pointer-events: none; }
.entr-dim-header-icon { width: 44px; height: 44px; background: rgba(255,255,255,.2); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; z-index: 1; }
.entr-dim-header-icon i { font-size: 22px; }
.entr-dim-title { font-size: 17px; font-weight: 900; font-family: 'Outfit',sans-serif; line-height: 1.2; position: relative; z-index: 1; }
.entr-dim-desc { font-size: 12px; color: rgba(255,255,255,.82); line-height: 1.4; position: relative; z-index: 1; }

.entr-dim-tools { padding: 12px; display: flex; flex-direction: column; gap: 8px; }

.entr-dim-tool { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--gray-50); border: 1.5px solid var(--border); border-radius: 12px; cursor: pointer; transition: .2s; }
.entr-dim-tool:hover:not(.entr-dim-tool-prox) { border-color: var(--primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(21,111,231,.1); }
.entr-dim-tool-prox { opacity: .6; cursor: default; }

.entr-dim-tool-icon { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.entr-dim-tool-icon i { font-size: 22px; color: white; }

.entr-dim-tool-body { flex: 1; min-width: 0; }
.entr-dim-tool-name { font-size: 14px; font-weight: 800; color: var(--navy); font-family: 'Outfit',sans-serif; margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
.entr-dim-tool-sub { font-size: 12px; color: var(--slate); line-height: 1.4; margin-bottom: 4px; }
.entr-dim-tool-skill { font-size: 11px; color: var(--text3); display: flex; align-items: center; gap: 4px; }

.entr-dim-tool-btn { padding: 9px 16px; background: linear-gradient(135deg,var(--primary),var(--navy)); border: none; border-radius: 10px; color: white; font-size: 12px; font-weight: 800; cursor: pointer; font-family: 'Outfit',sans-serif; display: flex; align-items: center; gap: 5px; transition: .15s; white-space: nowrap; flex-shrink: 0; }
.entr-dim-tool-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(21,111,231,.3); }
.entr-dim-tool-btn-prox { background: linear-gradient(135deg,var(--text3),var(--slate)); cursor: not-allowed; opacity: .7; }

.entr-prox-badge { background: var(--amber-100); color: var(--amber-900); font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--amber-200); font-family: inherit; }

/* ── JUEGOS GRID (compacto) ── */
.entr-juegos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.entr-juego { background: white; border: 1.5px solid var(--border-light); border-radius: 14px; padding: 14px; cursor: pointer; transition: .2s; display: flex; flex-direction: column; gap: 10px; }
.entr-juego:hover { border-color: var(--sky-300); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(21,111,231,.1); }
.entr-juego-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.entr-juego-icon i { font-size: 22px; color: white; }
.entr-juego-body { flex: 1; }
.entr-juego-name { font-size: 13px; font-weight: 800; color: var(--navy); font-family: 'Outfit',sans-serif; margin-bottom: 3px; }
.entr-juego-sub { font-size: 11px; color: var(--text3); line-height: 1.4; }
.entr-juego-rtk { font-size: 11px; font-weight: 800; color: var(--success); background: #f0fdf6; border: 1px solid #a7f3d0; padding: 3px 8px; border-radius: 6px; align-self: flex-start; }

/* ── RESPONSIVE ── */
@media(max-width:640px) {
  .entr-dim-header { flex-wrap: wrap; }
  .entr-dim-tool { flex-wrap: wrap; }
  .entr-dim-tool-btn { width: 100%; justify-content: center; }
  .entr-juegos-grid { grid-template-columns: 1fr; }
}
/* ── Botón evaluar alumno en aula ── */
.aula-btn-evaluador { padding: 10px 16px; background: linear-gradient(135deg,var(--violet-600),var(--purple)); border: none; border-radius: 10px; color: white; font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Outfit',sans-serif; display: flex; align-items: center; gap: 5px; transition: .15s; }
.aula-btn-evaluador:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,58,237,.4); }
/* ── Plan de hoy — items bloqueados ── */
.dpt-bloqueado {
  pointer-events: none;
  cursor: not-allowed;
}
.dpt-bloqueado .dpt-card {
  background: var(--gray-50);
  border-color: var(--border);
  box-shadow: none;
}
.dpt-bloqueado .dpt-icon {
  filter: grayscale(1);
  opacity: 0.4;
}
.dpt-bloqueado .dpt-title {
  color: var(--text3);
}
.dpt-bloqueado .dpt-sub,
.dpt-bloqueado .dpt-desc {
  color: var(--gray-300);
}
.dpt-bloqueado .btn-plan-act {
  visibility: hidden;
}
.dpt-bloqueado .rtk-lbl {
  visibility: hidden;
}
.dpt-bloqueado .dpt-check {
  background: var(--border);
  border-color: var(--gray-300);
  color: var(--text3);
}
.dpt-bloqueado .dpt-check i {
  color: var(--text3);
}
/* Animación de desbloqueo */
.dpt-item:not(.dpt-bloqueado) .dpt-card {
  transition: background .4s ease, border-color .4s ease;
}
/* ── Sección "Esta semana" ── */
.dash-semana-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }

.dpt-semana-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: white; border: 1.5px solid var(--border-light); border-radius: 14px; cursor: pointer; transition: .2s; position: relative; }
.dpt-semana-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(21,111,231,.1); }

.dpt-semana-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dpt-semana-icon i { font-size: 22px; color: white; }

.dpt-semana-body { flex: 1; min-width: 0; }
.dpt-semana-label { font-size: 10px; font-weight: 800; color: var(--blue-medium); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.dpt-semana-titulo { font-size: 14px; font-weight: 800; color: var(--navy); font-family: 'Outfit',sans-serif; line-height: 1.2; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpt-semana-meta { font-size: 11px; color: var(--text3); }

.dpt-semana-check { width: 26px; height: 26px; border-radius: 50%; background: var(--gray-100); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px; color: var(--text3); transition: .2s; }
.dpt-semana-check.done { background: var(--success); border-color: var(--success); color: white; }

/* ── Mensaje bloqueado en plan diario ── */
.dpt-bloqueado-msg { font-size: 11px; color: var(--text3); margin-top: 4px; display: flex; align-items: center; gap: 4px; font-style: italic; }

/* ── Responsive ── */
@media(max-width:640px) {
  .dash-semana-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════
   REDISEÑO SECCIÓN INICIO — Layout profesional centrado
   ════════════════════════════════════════════════════ */

/* 1. Contenedor con ancho máximo y centrado — clave anti-estirado */
.dash-content.dash-bienvenida{
  max-width: 1140px;
  margin: 0 auto;
  width: 100%;
  padding: 24px 28px 48px;
  box-sizing: border-box;
}

/* 2. El hero respira mejor */
.dash-content.dash-bienvenida .db-hero{
  margin-bottom: 22px;
}

/* 3. Stats row — sombra sutil y más aire */
.dash-content.dash-bienvenida .dash-stats{
  gap: 16px;
  margin-bottom: 16px;
}
.dash-content.dash-bienvenida .dstat{
  padding: 18px 20px;
  border: 1px solid #e3edfb;
  box-shadow: 0 1px 3px rgba(13,42,110,.04);
  border-radius: 14px;
}

/* 4. Grid 3 — tarjetas de igual altura, mejor spacing */
.dash-content.dash-bienvenida .dash-grid3{
  gap: 16px;
  margin-bottom: 24px;
  align-items: stretch;
}
.dash-content.dash-bienvenida .dcard{
  padding: 18px 20px;
  border: 1px solid #e3edfb;
  box-shadow: 0 1px 3px rgba(13,42,110,.04);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dash-content.dash-bienvenida .dcard:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(13,42,110,.09);
  border-color: var(--blue-light);
}
/* La tarjeta de liga empuja el botón abajo para alinear con las demás */
.dash-content.dash-bienvenida #dash-liga-card{ justify-content: space-between; }
.dash-content.dash-bienvenida #dash-liga-card .btn-outline-blue{ margin-top: auto; }
/* Crear competición y logros: empujar botón/contenido para igualar */
.dash-content.dash-bienvenida .dcard.center{ justify-content: space-between; }
.dash-content.dash-bienvenida .dcard.center .btn-grad{ margin-top: auto; }
.dash-content.dash-bienvenida #card-logros{ justify-content: space-between; }

/* 5. Label de tarjeta más refinado */
.dash-content.dash-bienvenida .dcard-lbl{
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text3);
  margin-bottom: 8px;
}

/* 6. Títulos de sección (PLAN DE HOY etc) con más presencia */
.dash-content.dash-bienvenida .dash-plan-timeline{
  margin-top: 4px;
}

/* 7. En pantallas muy anchas, un pelín más de ancho permitido */
@media(min-width:1600px){
  .dash-content.dash-bienvenida{ max-width: 1240px; }
}

/* 8. Tablet: padding lateral reducido */
@media(max-width:1024px){
  .dash-content.dash-bienvenida{ padding: 20px 20px 40px; }
}

/* 9. Móvil: padding mínimo */
@media(max-width:768px){
  .dash-content.dash-bienvenida{ padding: 16px 14px 32px; }
  .dash-content.dash-bienvenida .dash-stats,
  .dash-content.dash-bienvenida .dash-grid3{ gap: 12px; }
}


/* ════════════════════════════════════════════════════
   TARJETA DE LOGROS DESTACADA — Inicio
   ════════════════════════════════════════════════════ */
.dcard-logros{
  background: linear-gradient(160deg, var(--white) 0%, #fbfcff 100%);
  position: relative;
  overflow: hidden;
}
.dcard-logros::before{
  content:'';
  position:absolute;
  top:-50px; right:-50px;
  width:140px; height:140px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(245,158,11,.08), transparent 70%);
  pointer-events:none;
}

.dlog-count{
  font-size:12px;
  font-weight:900;
  color:var(--warning);
  background:var(--orange-50);
  border:1px solid #fed7aa;
  border-radius:20px;
  padding:3px 10px;
  font-family:'Outfit',sans-serif;
}

.dlog-mini-wrap{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:160px;
}
.dlog-loading{
  flex:1; display:flex; align-items:center; justify-content:center;
}

/* HERO — último logro */
.dlog-hero{
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 0 14px;
}
.dlog-trophy-big{
  width:72px; height:72px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.dlog-trophy-big svg{ width:100%; height:100%; }
/* Glow según rareza */
.dlog-trophy-big::after{
  content:'';
  position:absolute; inset:-8px;
  border-radius:50%;
  z-index:-1;
  opacity:.5;
  filter:blur(12px);
}
.dlog-rareza-comun::after{ background:radial-gradient(circle,var(--text3),transparent 70%); }
.dlog-rareza-poco_comun::after{ background:radial-gradient(circle,#22c55e,transparent 70%); }
.dlog-rareza-raro::after{ background:radial-gradient(circle,var(--blue-500b),transparent 70%); }
.dlog-rareza-epico::after{ background:radial-gradient(circle,#a855f7,transparent 70%); }
.dlog-rareza-legendario::after{ background:radial-gradient(circle,var(--warning),transparent 70%); animation:dlogPulse 2s ease-in-out infinite; }

@keyframes dlogPulse{
  0%,100%{ opacity:.4; transform:scale(1); }
  50%{ opacity:.7; transform:scale(1.1); }
}

.dlog-trophy-locked{
  background:var(--gray-100);
  border-radius:18px;
  font-size:34px;
  color:var(--gray-300);
}
.dlog-trophy-locked::after{ display:none; }

.dlog-hero-info{ flex:1; min-width:0; }
.dlog-hero-label{
  font-size:10px;
  font-weight:800;
  color:var(--warning);
  text-transform:uppercase;
  letter-spacing:.5px;
  display:flex; align-items:center; gap:4px;
  margin-bottom:4px;
}
.dlog-hero-label i{ font-size:12px; }
.dlog-hero-name{
  font-size:16px;
  font-weight:900;
  color:var(--navy);
  font-family:'Outfit',sans-serif;
  line-height:1.2;
  margin-bottom:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dlog-hero-rareza{
  display:inline-block;
  font-size:10px;
  font-weight:800;
  padding:2px 9px;
  border-radius:12px;
}
.dlog-rareza-txt-comun{ background:var(--gray-100); color:var(--slate); }
.dlog-rareza-txt-poco_comun{ background:var(--green-100); color:var(--green-600); }
.dlog-rareza-txt-raro{ background:var(--blue-100); color:var(--blue-600); }
.dlog-rareza-txt-epico{ background:#f3e8ff; color:#9333ea; }
.dlog-rareza-txt-legendario{ background:linear-gradient(135deg,var(--amber-100),var(--amber-200)); color:var(--amber-700); }

/* GALERÍA mini */
.dlog-galeria{
  display:flex;
  gap:8px;
  padding:12px 0;
  border-top:1px solid var(--border-light);
  align-items:center;
}
.dlog-gal-item{
  width:38px; height:38px;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s;
}
.dlog-gal-item svg{ width:100%; height:100%; }
.dlog-gal-item:hover{ transform:scale(1.15); }
.dlog-gal-more{
  font-size:12px;
  font-weight:800;
  color:var(--text3);
  background:var(--gray-100);
  border-radius:8px;
  padding:8px 10px;
  font-family:'Outfit',sans-serif;
}

/* CTA */
.dlog-cta{
  margin-top:auto;
  font-size:13px;
  font-weight:800;
  color:var(--primary);
  display:flex; align-items:center; gap:5px;
  padding-top:10px;
  transition:gap .15s;
}
.dcard-logros:hover .dlog-cta{ gap:9px; }
.dlog-cta i{ font-size:15px; }

.dlog-empty{
  flex:1;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:var(--primary);
}

.dlg-item.desbloqueado .dlg-name{font-size:12px;font-weight:900;color:var(--dark)}

.logro-card.bloqueado .logro-desc{color:var(--gray-300);font-weight:600}

.logro-desc{font-size:14px;font-weight:900;color:var(--slate-700);line-height:1.4}

.trofeo-desc{font-size:13px;font-weight:900;color:var(--slate-700);line-height:1.4}

/* Títulos de logros en azul corporativo */
.trofeo-name{font-size:13px;font-weight:900;color:var(--primary);margin-bottom:4px;line-height:1.2}
.trofeo-card.t-bloqueado .trofeo-name{color:var(--text3)}
.trofeo-card.t-legendario .trofeo-name{color:var(--amber-600)}

/* MOVIL COMPACTO */
@media(max-width:768px){
  .dash-content.dash-bienvenida{ padding:12px 12px 28px; }
  .dash-stats{ gap:8px; margin-bottom:10px; }
  .dstat{ padding:10px 12px; }
  .dstat-val{ font-size:16px; }
  .dstat-icon{ width:30px; height:30px; font-size:15px; }
  .dash-grid3{ gap:8px; margin-bottom:14px; }
  .dash-content.dash-bienvenida .dcard{ padding:12px 14px; }
  .dlog-mini-wrap{ min-height:120px; }
  .dlog-trophy-big{ width:54px; height:54px; }
  .dlog-hero-name{ font-size:14px; }
}

/* MOVIL — apilar tarjetas en 1 columna. Ya no necesita !important tras eliminar la regla duplicada */
@media(max-width:768px){
  .dash-stats { grid-template-columns: 1fr; }
  .dash-grid3 { grid-template-columns: 1fr; }
}
/* Tablet: 2 columnas en vez de 3 */
@media(min-width:769px) and (max-width:1100px){
  .dash-grid3 { grid-template-columns: 1fr 1fr; }
}

/* FIX MOVIL — plan de hoy se ajusta al ancho */
@media(max-width:768px){
  .dash-content.dash-bienvenida .dash-plan-timeline{
    width: 100%;
    box-sizing: border-box;
  }
  .dpt-item{ width:100%; box-sizing:border-box; }
  .dpt-card{
    min-width: 0;
    overflow: hidden;
  }
  .dpt-card .dpt-desc,
  .dpt-card .dpt-title{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .dpt-left{ width:30px; }
}

/* ════════════════════════════════════════════
   ANUNCIOS DEL AULA
   ════════════════════════════════════════════ */
.aula-anuncios-lista{display:flex;flex-direction:column;gap:12px}
.anuncio-card{background:white;border:1px solid #e3edfb;border-radius:14px;padding:16px 18px;box-shadow:0 1px 3px rgba(13,42,110,.04)}
.anuncio-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.anuncio-tipo-badge{font-size:11px;font-weight:800;padding:4px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:5px}
.anuncio-time{font-size:11px;color:var(--text3);font-weight:600}
.anuncio-del{margin-left:auto;background:none;border:none;color:var(--gray-300);cursor:pointer;padding:4px;border-radius:6px;transition:.15s}
.anuncio-del:hover{color:var(--danger);background:#fef2f2}
.anuncio-titulo{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:6px;font-family:'Outfit',sans-serif}
.anuncio-mensaje{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:8px;white-space:pre-wrap}
.anuncio-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--primary);text-decoration:none;background:var(--blue-pale);padding:6px 12px;border-radius:8px;margin-bottom:8px;word-break:break-all}
.anuncio-link:hover{background:var(--blue-100)}
.anuncio-autor{font-size:11px;color:var(--text3);font-style:italic;margin-top:4px}
.anuncio-respuestas{margin-top:14px;padding-top:14px;border-top:1px solid var(--border-light);display:flex;flex-direction:column;gap:10px}
.anuncio-resp{display:flex;gap:10px;align-items:flex-start}
.anuncio-resp-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--navy));color:white;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.anuncio-resp-mio .anuncio-resp-avatar{background:linear-gradient(135deg,var(--violet-600),var(--purple))}
.anuncio-resp-body{flex:1;background:#f8faff;border-radius:10px;padding:8px 12px}
.anuncio-resp-mio .anuncio-resp-body{background:var(--violet-50)}
.anuncio-resp-autor{font-size:12px;font-weight:800;color:var(--navy);margin-bottom:2px}
.anuncio-resp-msg{font-size:13px;color:var(--slate-700);line-height:1.4}
.anuncio-resp-time{font-size:10px;color:var(--text3);margin-top:3px}
.anuncio-resp-form{display:flex;gap:8px;margin-top:4px}
.anuncio-resp-form input{flex:1;padding:9px 12px;border:1.5px solid var(--border);border-radius:10px;font-size:13px;font-family:inherit;outline:none}
.anuncio-resp-form input:focus{border-color:var(--primary)}
.anuncio-resp-form button{background:linear-gradient(135deg,var(--primary),var(--navy));border:none;border-radius:10px;color:white;width:38px;cursor:pointer;display:flex;align-items:center;justify-content:center}
/* Selector de tipo en modal */
.anuncio-tipo-selector{display:flex;flex-wrap:wrap;gap:8px}
.anuncio-tipo-opt{display:flex;align-items:center;gap:5px;padding:8px 12px;border-radius:10px;border:1.5px solid var(--border);background:white;color:var(--slate);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.anuncio-tipo-opt.active{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,white);color:var(--c)}
.anuncio-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);font-weight:600;cursor:pointer;margin-top:4px}
.anuncio-check input{width:16px;height:16px;cursor:pointer}

/* Mensaje pendiente de confirmar (optimistic) */
.anuncio-resp-pending{opacity:.6}
.anuncio-resp-pending .anuncio-resp-time{color:var(--primary);font-style:italic}

/* ═══════════════════════════════════════════════════════════
   PERFIL v2 — rediseño moderno con colores de marca
   ═══════════════════════════════════════════════════════════ */
.pf2{display:flex;flex-direction:column;gap:16px;max-width:1100px;margin:0 auto}

/* HERO */
.pf2-hero{position:relative;overflow:hidden;border-radius:20px;padding:26px 28px;
  background:linear-gradient(135deg,var(--navy) 0%,var(--primary) 100%);
  box-shadow:0 14px 40px -12px rgba(13,42,110,.55)}
.pf2-hero-glow{position:absolute;top:-60px;right:-40px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.18),transparent 70%);pointer-events:none}
.pf2-hero-top{position:relative;display:flex;align-items:center;gap:20px}
.pf2-avatar{width:84px;height:84px;border-radius:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:900;color:#fff;letter-spacing:-1px;
  background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.35);
  box-shadow:0 8px 22px -6px rgba(0,0,0,.35);backdrop-filter:blur(4px)}
.pf2-hero-id{flex:1;min-width:0}
.pf2-name{font-size:24px;font-weight:900;color:#fff;letter-spacing:-.5px;line-height:1.1}
.pf2-alias{display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:600;color:rgba(255,255,255,.75);margin-top:3px}
.pf2-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pf2-badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#fff;
  padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.pf2-badge-plan{background:rgba(245,158,11,.22);border-color:rgba(251,191,36,.45);color:#ffe9b8}
.pf2-hero-rtk{flex-shrink:0;text-align:center;display:flex;flex-direction:column;padding-left:18px;border-left:1px solid rgba(255,255,255,.18)}
.pf2-rtk-num{font-size:34px;font-weight:900;color:#fff;line-height:1;letter-spacing:-1px}
.pf2-rtk-lbl{font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:4px}
.pf2-level{position:relative;margin-top:22px}
.pf2-level-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;color:rgba(255,255,255,.85);margin-bottom:7px}
.pf2-level-bar{height:9px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}
.pf2-level-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--success),#7dffc0);box-shadow:0 0 12px rgba(3,210,110,.6);transition:width .6s cubic-bezier(.34,1.3,.64,1)}

/* STATS */
.pf2-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pf2-stat{background:#fff;border:1px solid var(--border-light);border-radius:16px;padding:16px;
  box-shadow:0 4px 16px -10px rgba(13,42,110,.25);transition:transform .18s ease,box-shadow .18s ease}
.pf2-stat:hover{transform:translateY(-3px);box-shadow:0 12px 26px -12px rgba(13,42,110,.35)}
.pf2-stat-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;margin-bottom:11px}
.pf2-stat-ic.ic-orange{background:linear-gradient(135deg,#f59e0b,#ea580c)}
.pf2-stat-ic.ic-blue{background:linear-gradient(135deg,var(--primary-light),var(--primary))}
.pf2-stat-ic.ic-purple{background:linear-gradient(135deg,var(--violet-400),var(--violet-600))}
.pf2-stat-ic.ic-green{background:linear-gradient(135deg,#3ee87f,var(--success-dark))}
.pf2-stat-num{font-size:24px;font-weight:900;color:var(--navy);letter-spacing:-.5px;line-height:1}
.pf2-stat-num small{font-size:13px;font-weight:700;color:var(--text3);margin-left:3px}
.pf2-stat-lbl{font-size:12.5px;font-weight:700;color:var(--text2);margin-top:6px}
.pf2-stat-sub{font-size:11px;color:var(--text3);margin-top:2px}

/* GRID */
.pf2-grid{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
.pf2-col{display:flex;flex-direction:column;gap:16px}
.pf2-card{background:#fff;border:1px solid var(--border-light);border-radius:18px;padding:20px;box-shadow:0 4px 18px -12px rgba(13,42,110,.25)}
.pf2-card-head{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:900;color:var(--navy);margin-bottom:16px}
.pf2-card-head i{color:var(--primary);font-size:18px}
.pf2-card-head-row{justify-content:space-between}
.pf2-head-chip{margin-left:auto;font-size:12px;font-weight:800;color:var(--primary);background:var(--blue-pale);border:1px solid var(--blue-light);padding:2px 9px;border-radius:999px}
.pf2-head-btn{margin-left:auto;padding:7px 14px;background:var(--blue-pale);border:1px solid var(--blue-light);border-radius:9px;color:var(--primary);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.pf2-head-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

/* INFO PERSONAL */
.pf2-info{display:flex;flex-direction:column}
.pf2-info-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--gray-50)}
.pf2-info-row:last-child{border-bottom:none}
.pf2-info-ic{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--blue-pale);color:var(--primary);font-size:16px}
.pf2-info-tx{min-width:0}
.pf2-info-k{font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--text3)}
.pf2-info-v{font-size:14px;font-weight:700;color:var(--navy);word-break:break-word}
.pf2-actions{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.pf2-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:12px;border-radius:12px;
  font-size:13.5px;font-weight:800;cursor:pointer;font-family:inherit;transition:.18s;border:none}
.pf2-btn-edit{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;box-shadow:0 6px 16px -8px rgba(21,111,231,.7)}
.pf2-btn-edit:hover{filter:brightness(1.07);transform:translateY(-1px)}
.pf2-btn-logout{background:#fff;color:var(--danger);border:1.5px solid rgba(239,68,68,.25)}
.pf2-btn-logout:hover{background:rgba(239,68,68,.06)}

/* OBJETIVOS (reusa .perfil-obj-tag) */
.pf2-objs{display:flex;flex-wrap:wrap;gap:8px}
.pf2 .perfil-obj-tag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--primary-dark);
  background:var(--blue-pale);border:1px solid var(--blue-light);padding:7px 13px;border-radius:999px}
.pf2 .perfil-obj-tag i{font-size:15px;color:var(--primary)}

/* LOGROS MINI (reusa .perfil-logro-mini / .plm-*) */
.pf2-logros{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.pf2 .perfil-logro-mini{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;border-radius:14px;
  background:var(--gray-50);border:1px solid var(--border-light);cursor:pointer;transition:.18s}
.pf2 .perfil-logro-mini:hover{background:var(--blue-pale);border-color:var(--blue-light);transform:translateY(-2px)}
.pf2 .plm-icon{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}
.pf2 .plm-comun{background:linear-gradient(135deg,#94a3b8,#64748b)}
.pf2 .plm-poco{background:linear-gradient(135deg,#34d399,#059669)}
.pf2 .plm-raro{background:linear-gradient(135deg,var(--primary-light),var(--primary))}
.pf2 .plm-epico{background:linear-gradient(135deg,var(--violet-400),var(--violet-600))}
.pf2 .plm-legendario{background:linear-gradient(135deg,#fbbf24,#ea580c)}
.pf2 .plm-count{font-size:14px;font-weight:900;color:var(--navy)}
.pf2 .plm-lbl{font-size:10px;font-weight:700;color:var(--text3);text-align:center}

/* RESPONSIVE */
@media(max-width:900px){
  .pf2-grid{grid-template-columns:1fr}
  .pf2-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .pf2-hero-top{flex-wrap:wrap}
  .pf2-hero-rtk{padding-left:0;border-left:none;text-align:left}
  .pf2-stats{grid-template-columns:1fr 1fr}
  .pf2-logros{grid-template-columns:repeat(3,1fr)}
  .pf2-name{font-size:21px}
}

/* ═══════════════════════════════════════════════════════════
   LIGA v2 — mismo lenguaje visual que Perfil (reusa .pf2-*)
   ═══════════════════════════════════════════════════════════ */
.lg2-tabs{display:flex;gap:4px;background:#fff;border:1px solid var(--border-light);border-radius:14px;padding:5px;box-shadow:0 4px 16px -10px rgba(13,42,110,.25)}
.lg2-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border:none;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;color:var(--blue-medium);background:transparent;transition:.18s}
.lg2-tab:hover{background:var(--blue-ghost);color:var(--primary)}
.lg2-tab.act{color:#fff}
.lg2-tab.act-green{background:linear-gradient(135deg,var(--success),var(--success-dark));box-shadow:0 6px 14px -7px rgba(3,210,110,.7)}
.lg2-tab.act-blue{background:linear-gradient(135deg,var(--primary),var(--primary-dark));box-shadow:0 6px 14px -7px rgba(21,111,231,.7)}
.lg2-tab.act-pink{background:linear-gradient(135deg,#ff3a72,#c0185a);box-shadow:0 6px 14px -7px rgba(255,58,114,.7)}

.lg2-stats3{grid-template-columns:repeat(3,1fr)}
.lg2-div-avatar i{font-size:40px}

.lg2-ranking{display:flex;flex-direction:column;gap:3px}
.lg2-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:13px;transition:.15s}
.lg2-row:hover{background:var(--gray-50)}
.lg2-row.yo{background:var(--blue-pale);border:1px solid var(--blue-light)}
.lg2-pos{width:30px;height:30px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:var(--text2);background:var(--gray-50);border-radius:9px}
.lg2-row.yo .lg2-pos{background:#fff}
.lg2-pos-medal{font-size:18px;background:transparent}
.lg2-av{width:38px;height:38px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--primary-light),var(--primary))}
.lg2-row.yo .lg2-av{background:linear-gradient(135deg,var(--success),var(--success-dark))}
.lg2-main{flex:1;min-width:0}
.lg2-name{font-size:14px;font-weight:800;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}
.lg2-bar{height:6px;border-radius:999px;background:var(--gray-100);overflow:hidden}
.lg2-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary-light),var(--primary));transition:width .5s ease}
.lg2-row.yo .lg2-bar-fill{background:linear-gradient(90deg,var(--success),var(--success-dark))}
.lg2-rtk{flex-shrink:0;font-size:16px;font-weight:900;color:var(--navy);text-align:right;line-height:1.1}
.lg2-rtk small{display:block;font-size:9px;font-weight:700;color:var(--text3);letter-spacing:.5px}
.lg2-sep{text-align:center;color:var(--text3);font-size:15px;letter-spacing:3px;padding:3px 0}
.lg2-empty{text-align:center;padding:34px 16px;color:var(--text3);font-size:13px;display:flex;flex-direction:column;align-items:center;gap:10px}
.lg2-empty i{font-size:32px;color:var(--blue-light)}
@media(max-width:900px){.lg2-stats3{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   RETORIKA v2 — mismo lenguaje visual (reusa .pf2-*)
   ═══════════════════════════════════════════════════════════ */
.rtk2-hero-desc{position:relative;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.82);margin-top:16px;max-width:680px}
.rtk2-mision{position:relative;display:flex;align-items:center;gap:13px;margin-top:18px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.rtk2-mision i{font-size:24px;color:#ffe9b8;flex-shrink:0}
.rtk2-mision-tx{font-size:14px;font-weight:800;color:#fff;line-height:1.4}

.rtk2-services{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rtk2-service{display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--border-light);border-radius:16px;padding:18px;box-shadow:0 4px 16px -11px rgba(13,42,110,.25);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;cursor:pointer}
.rtk2-service:hover{transform:translateY(-3px);box-shadow:0 14px 28px -14px rgba(13,42,110,.4);border-color:#156fe7}
.rtk2-service-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.rtk2-service-ic{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px}
.rtk2-service-num{font-size:22px;font-weight:900;color:var(--gray-300)}
.rtk2-service-name{font-size:15px;font-weight:900;color:var(--navy);line-height:1.25;margin-bottom:8px}
.rtk2-service-desc{font-size:12.5px;line-height:1.6;color:var(--text2);flex:1;margin-bottom:14px}
.rtk2-link{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:13px;font-weight:800;color:var(--primary);transition:gap .18s ease;align-self:flex-start}
.rtk2-link:hover{gap:10px}

.rtk2-bottom{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rtk2-cta{display:flex;flex-direction:column}
.rtk2-cta-top{display:flex;align-items:center;gap:11px;margin-bottom:10px}
.rtk2-cta-ic{width:44px;height:44px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;background:var(--blue-pale);color:var(--primary)}
.rtk2-cta-title{font-size:15px;font-weight:900;color:var(--navy)}
.rtk2-cta-desc{font-size:12.5px;line-height:1.6;color:var(--text2);flex:1;margin-bottom:14px}

.rtk2-rrss{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rtk2-rrss-item{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:#fff;border:1px solid var(--border-light);text-decoration:none;transition:.18s ease}
.rtk2-rrss-item:hover{border-color:var(--blue-light);transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(13,42,110,.4)}
.rtk2-rrss-ic{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff;flex-shrink:0}
.rtk2-rrss-name{font-size:14px;font-weight:800;color:var(--navy)}
.rtk2-rrss-handle{font-size:11.5px;color:var(--text3)}
.rtk2-rrss-arrow{margin-left:auto;color:var(--text3);transition:.18s ease}
.rtk2-rrss-item:hover .rtk2-rrss-arrow{color:var(--primary);transform:translateX(3px)}

@media(max-width:900px){.rtk2-services{grid-template-columns:repeat(2,1fr)}.rtk2-bottom{grid-template-columns:1fr}.rtk2-rrss{grid-template-columns:1fr}}
@media(max-width:560px){.rtk2-services{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   LOGROS v2 — armazón unificado (hero/tabs/footer pf2); trofeos intactos
   ═══════════════════════════════════════════════════════════ */
.pf2-logros-card{padding:18px}
.lg2-tabs-logros .lg2-tab{font-size:12.5px}
.lg2-footer{display:flex;align-items:center;gap:14px}
.lg2-footer-ic{width:46px;height:46px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-dark))}
.lg2-footer-tx{flex:1;min-width:0}
.lg2-footer-title{font-size:15px;font-weight:900;color:var(--navy)}
.lg2-footer-sub{font-size:12.5px;color:var(--text2)}
@media(max-width:560px){
  .lg2-tabs-logros{flex-wrap:wrap}
  .lg2-tabs-logros .lg2-tab{flex:1 1 40%;font-size:12px;padding:9px 6px}
}

/* ═══════════════════════════════════════════════════════════
   ENTRENAMIENTO v2 — armazón unificado; colores de dimensión via --dim
   ═══════════════════════════════════════════════════════════ */
.en2-layout{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.en2-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.en2-side{position:sticky;top:8px}

.en2-dim{padding:0;overflow:hidden;border-top:3px solid var(--dim,var(--primary))}
.en2-dim-head{display:flex;align-items:center;gap:14px;padding:18px 20px 14px}
.en2-dim-ic{width:48px;height:48px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;box-shadow:0 6px 16px -8px rgba(0,0,0,.45)}
.en2-dim-name{font-size:17px;font-weight:900;color:var(--navy)}
.en2-dim-desc{font-size:12.5px;color:var(--text2);line-height:1.5;margin-top:2px}
.en2-tools{display:flex;flex-direction:column;gap:8px;padding:0 16px 16px}
.en2-tool{display:flex;align-items:center;gap:13px;padding:13px;border-radius:14px;background:var(--gray-50);border:1px solid var(--border-light);cursor:pointer;transition:.15s ease}
.en2-tool:hover{background:#fff;border-color:var(--dim,var(--blue-light));box-shadow:0 8px 20px -12px rgba(13,42,110,.4);transform:translateY(-1px)}
.en2-tool-ic{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff}
.en2-tool-body{flex:1;min-width:0}
.en2-tool-name{font-size:14px;font-weight:800;color:var(--navy);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.en2-tool-sub{font-size:12px;color:var(--text2);line-height:1.5;margin:3px 0}
.en2-tool-skill{font-size:11px;color:var(--text3);display:inline-flex;align-items:center;gap:4px}
.en2-tool-skill i{font-size:12px}
.en2-tool-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:9px 14px;border-radius:10px;border:none;background:var(--dim,var(--primary));color:#fff;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;transition:.15s}
.en2-tool-btn:hover{filter:brightness(1.08)}
.en2-tool-prox{opacity:.7}
.en2-tool-btn-prox{background:var(--gray-300);cursor:not-allowed}
.en2-prox-badge{font-size:9px;font-weight:800;padding:2px 7px;border-radius:999px;background:var(--gray-100);color:var(--text3);letter-spacing:.3px}

.en2-games{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.en2-game{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--gray-50);border:1px solid var(--border-light);cursor:pointer;transition:.15s ease}
.en2-game:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(13,42,110,.4)}
.en2-game-ic{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff}
.en2-game-body{flex:1;min-width:0}
.en2-game-name{font-size:13.5px;font-weight:800;color:var(--navy)}
.en2-game-sub{font-size:11px;color:var(--text2);line-height:1.4}
.en2-game-rtk{flex-shrink:0;font-size:11px;font-weight:800;color:var(--success-dark);background:var(--green-50);border:1px solid var(--green-100);padding:3px 8px;border-radius:999px}

.en2-rank{display:flex;flex-direction:column;gap:3px}
.en2-rank-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:11px;transition:.15s}
.en2-rank-item:hover{background:var(--gray-50)}
.en2-rank-pos{width:24px;text-align:center;font-size:14px;font-weight:900;color:var(--text2);flex-shrink:0}
.en2-rank-av{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--primary-light),var(--primary))}
.en2-rank-name{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.en2-rank-rtk{flex-shrink:0;font-size:11px;font-weight:800;color:var(--primary)}

@media(max-width:900px){.en2-layout{grid-template-columns:1fr}.en2-side{position:static}}
@media(max-width:560px){.en2-games{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   INICIO (dashboard) — rediseño con clases pf2 (hero intacto)
   ═══════════════════════════════════════════════════════════ */
.db-hero{border-radius:20px;box-shadow:0 14px 40px -16px rgba(13,42,110,.55)}

/* Stats (usan .pf2-stat) */
.dash-stats3{grid-template-columns:repeat(3,1fr)}
.dash-stat-bar{height:6px;border-radius:999px;background:var(--gray-100);overflow:hidden;margin-top:10px}
.dash-stat-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary-light),var(--primary))}

/* Tarjetas grid (usan .pf2-card .dash-gcard) */
.dash-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dash-gcard{display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.dash-gcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px rgba(13,42,110,.4);border-color:var(--blue-light)}
.dash-gcard-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dash-gcard-center{align-items:center;text-align:center;gap:10px}
.dash-liga-medal{width:54px;height:54px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-light),var(--primary));color:#fff;font-size:26px;box-shadow:0 8px 18px -8px rgba(21,111,231,.6)}
.dash-prox-pill{font-size:10px;font-weight:800;color:#d97706;background:#fff7ed;border:1px solid #fed7aa;border-radius:999px;padding:3px 10px}
.dash-vs{display:flex;align-items:center;gap:14px;margin:10px 0}
.dash-vs-av{width:42px;height:42px;border-radius:50%;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:20px}
.dash-vs-x{font-size:13px;font-weight:800;color:#9bb5d4}
.dash-comp-btn{width:100%;margin-top:auto;padding:12px;background:var(--gray-100);border:1.5px solid var(--border);border-radius:12px;color:var(--text3);font-size:13px;font-weight:800;cursor:not-allowed;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px}

/* Encabezados de sección (Tu plan de hoy / Esta semana) */
.dash-sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dash-sec-title{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:900;color:var(--navy)}
.dash-sec-ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;flex-shrink:0}
.dash-sec-meta{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--blue-medium)}

/* Plan de hoy / Esta semana — sombras coherentes */
.dpt-card{border:1px solid var(--border-light);border-radius:14px;box-shadow:0 3px 12px -10px rgba(13,42,110,.25)}
.dpt-item:hover .dpt-card{background:var(--blue-pale);border-color:var(--blue-light);box-shadow:0 10px 22px -14px rgba(13,42,110,.4)}
.dpt-semana-card{border:1px solid var(--border-light);border-radius:16px;box-shadow:0 4px 16px -11px rgba(13,42,110,.25);transition:transform .18s ease,box-shadow .18s ease}
.dpt-semana-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(13,42,110,.4)}

@media(max-width:900px){.dash-stats3{grid-template-columns:1fr}.dash-grid3{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   DIAGNÓSTICO v2 — ancho y grid coherentes con el resto (hero ahora pf2)
   ═══════════════════════════════════════════════════════════ */
.dxv2-page{max-width:1100px}
.dxv2-page .pf2-hero{margin-bottom:26px}
.dxv2-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:760px){.dxv2-cards{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   HEROS ANIMADOS (pf2-hero) — brillo a la deriva, orbe y destello
   ═══════════════════════════════════════════════════════════ */
.pf2-hero-top,.pf2-level{position:relative;z-index:2}
.pf2-hero-glow{z-index:1;animation:pf2GlowDrift 12s ease-in-out infinite}
@keyframes pf2GlowDrift{0%,100%{transform:translate(0,0) scale(1);opacity:1}50%{transform:translate(-26px,18px) scale(1.18);opacity:.65}}
.pf2-hero::before{content:'';position:absolute;z-index:1;bottom:-60px;left:16%;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(3,210,110,.20),transparent 70%);pointer-events:none;animation:pf2OrbFloat 14s ease-in-out infinite}
@keyframes pf2OrbFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,-22px)}}
.pf2-hero::after{content:'';position:absolute;z-index:1;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-18deg);pointer-events:none;animation:pf2Sheen 8s ease-in-out infinite}
@keyframes pf2Sheen{0%{left:-60%}58%,100%{left:140%}}

/* ═══════════════════════════════════════════════════════════
   DECORACIÓN LATERAL — solo en monitores grandes (≥1800px)
   Rombos de marca flotando en los márgenes; desaparecen si no hay hueco
   ═══════════════════════════════════════════════════════════ */
.side-decor{display:none}
@media(min-width:1600px){
  .side-decor{display:block;position:fixed;top:0;bottom:0;width:120px;pointer-events:none;z-index:1;overflow:hidden}
  .side-decor-left{left:244px}
  .side-decor-right{right:4px}
  .sdc{position:absolute;display:block;border-radius:7px;transform:rotate(45deg);background:linear-gradient(135deg,var(--primary-light),var(--primary));opacity:.5;animation:sdcFloat linear infinite}
  .sdc1{width:30px;height:30px;top:13%;left:28%;animation-duration:13s}
  .sdc2{width:18px;height:18px;top:32%;left:58%;opacity:.42;animation-duration:17s;animation-delay:1s;background:linear-gradient(135deg,var(--violet-400),var(--violet-600))}
  .sdc3{width:38px;height:38px;top:55%;left:20%;opacity:.35;animation-duration:15s;animation-delay:.5s}
  .sdc4{width:16px;height:16px;top:75%;left:52%;opacity:.5;animation-duration:19s;animation-delay:2s;background:linear-gradient(135deg,var(--success),var(--success-dark))}
  .sdc5{width:24px;height:24px;top:89%;left:32%;opacity:.4;animation-duration:16s;animation-delay:1.4s;background:linear-gradient(135deg,#fbbf24,#ea580c)}
  @keyframes sdcFloat{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(-42px)}}
}

/* ═══════════════════════════════════════════════════════════
   EVALUADOR v2 — estilo unificado pf2
   ═══════════════════════════════════════════════════════════ */
.ev2-wrap{padding:24px 28px 40px;flex:1;overflow-y:auto}
.ev2-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.guia-body{padding:18px 20px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.guia-item{display:flex;gap:12px;align-items:flex-start}
.guia-ic{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px}
.guia-t{font-size:14px;font-weight:800;color:var(--navy)}
.guia-d{font-size:12px;color:var(--text2);line-height:1.5;margin-top:2px}
.ev2-tool{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ev2-tool:hover{transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(13,42,110,.35);border-color:var(--blue-light)}
.ev2-tool-ic{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;margin-bottom:12px}
.ev2-tool-name{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:4px}
.ev2-tool-sub{font-size:12px;color:var(--blue-medium);line-height:1.5}
.ev2-tool-info{background:linear-gradient(135deg,var(--blue-pale),#f5f0ff)}
.ev2-note{margin-top:12px;font-size:11px;font-weight:700;color:var(--primary);background:var(--blue-pale);border:1px solid var(--blue-light);border-radius:8px;padding:6px 10px;display:flex;align-items:center;gap:5px}
@media(max-width:760px){.ev2-tools{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   AULA — control horario de herramientas (disponibilidad)
   ═══════════════════════════════════════════════════════════ */
.aula-disp-empty{font-size:13px;color:var(--blue-medium);padding:14px 4px}
.aula-disp-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border-light);border-radius:12px;margin-bottom:8px;background:#fff}
.aula-disp-ic{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
.aula-disp-info{flex:1;min-width:0}
.aula-disp-name{font-size:14px;font-weight:800;color:var(--navy)}
.aula-disp-state{font-size:11.5px;font-weight:700;margin-top:2px}
.aula-disp-state i{font-size:13px}
.aula-disp-libre{color:var(--blue-medium)}
.aula-disp-ok{color:var(--success-dark)}
.aula-disp-venc{color:var(--danger)}
.aula-disp-select{flex-shrink:0;padding:8px 10px;border:1px solid var(--blue-light);border-radius:9px;font-size:12.5px;font-weight:700;color:var(--navy);font-family:inherit;background:#fff;cursor:pointer}
.aula-alum-tool-plazo{font-size:11px;font-weight:700;color:var(--success-dark);margin-top:5px;display:flex;align-items:center;gap:4px}
.aula-alum-tool-venc{opacity:.72}

/* ═══════════════════════════════════════════════════════════
   AULA — presencia en vivo (alumnos conectados)
   ═══════════════════════════════════════════════════════════ */
.aula-online-count{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--success-dark);background:var(--green-50);border:1px solid var(--green-100);padding:5px 11px;border-radius:999px;white-space:nowrap}
.aula-student-avatar{position:relative}
.aula-online-dot{position:absolute;bottom:-1px;right:-1px;width:11px;height:11px;border-radius:50%;background:var(--success);border:2px solid #fff}
.aula-online-dot-sm{width:8px;height:8px;border-radius:50%;background:var(--success);display:inline-block;box-shadow:0 0 0 3px rgba(3,210,110,.18);animation:aulaPulse 2.2s ease-in-out infinite}
.aula-online-txt{display:inline-flex;align-items:center;gap:5px;color:var(--success-dark);font-weight:700}
.aula-student-online{background:linear-gradient(90deg,rgba(3,210,110,.06),transparent)}
@keyframes aulaPulse{0%,100%{box-shadow:0 0 0 2px rgba(3,210,110,.28)}50%{box-shadow:0 0 0 5px rgba(3,210,110,0)}}

/* ═══════════════════════════════════════════════════════════
   CONCURSOS (tipo Kahoot) — Sub-fase A: lista + constructor
   ═══════════════════════════════════════════════════════════ */
.cc-list{display:flex;flex-direction:column;gap:8px}
.cc-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border-light);border-radius:14px;background:#fff}
.cc-ic{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;background:linear-gradient(135deg,#f59e0b,#d97706)}
.cc-info{flex:1;min-width:0}
.cc-name{font-size:14px;font-weight:800;color:var(--navy)}
.cc-meta{font-size:12px;color:var(--text3)}
.cc-actions{display:flex;gap:6px;flex-shrink:0}
.cc-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:9px;border:1px solid var(--blue-light);background:var(--blue-pale);color:var(--primary);font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:.15s}
.cc-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.cc-btn-danger{background:#fff;border-color:rgba(239,68,68,.25);color:var(--danger)}
.cc-btn-danger:hover{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.4)}

.cb-overlay{position:fixed;inset:0;z-index:3500;background:rgba(13,42,110,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:16px}
.cb-modal{background:var(--blue-ghost);border-radius:20px;width:100%;max-width:720px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden}
.cb-head{display:flex;align-items:center;gap:12px;padding:16px 18px;background:#fff;border-bottom:1px solid var(--border-light)}
.cb-head-ic{width:40px;height:40px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;background:linear-gradient(135deg,#f59e0b,#d97706)}
.cb-titulo{flex:1;min-width:0;border:none;outline:none;font-size:17px;font-weight:800;color:var(--navy);font-family:inherit;background:transparent}
.cb-close{width:32px;height:32px;flex-shrink:0;border:none;border-radius:8px;background:var(--gray-100);color:var(--slate);cursor:pointer;display:flex;align-items:center;justify-content:center}
.cb-close:hover{background:var(--border)}
.cb-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.cb-q{background:#fff;border:1px solid var(--border-light);border-radius:16px;padding:14px;box-shadow:0 3px 12px -10px rgba(13,42,110,.3)}
.cb-q-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cb-q-num{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--primary)}
.cb-q-right{display:flex;align-items:center;gap:6px}
.cb-q-time{padding:5px 8px;border:1px solid var(--blue-light);border-radius:8px;font-size:12px;font-weight:700;color:var(--navy);font-family:inherit;background:#fff;cursor:pointer}
.cb-q-del{width:30px;height:30px;border:1px solid rgba(239,68,68,.25);border-radius:8px;background:#fff;color:var(--danger);cursor:pointer;display:flex;align-items:center;justify-content:center}
.cb-q-del:hover{background:rgba(239,68,68,.08)}
.cb-q-text{width:100%;box-sizing:border-box;padding:11px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-weight:700;color:var(--navy);font-family:inherit;margin-bottom:10px;outline:none}
.cb-q-text:focus{border-color:var(--primary)}
.cb-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cb-opt{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:11px;background:var(--oc)}
.cb-opt-shape{color:rgba(255,255,255,.92);font-size:15px;flex-shrink:0}
.cb-opt-input{flex:1;min-width:0;border:none;outline:none;background:rgba(255,255,255,.96);border-radius:7px;padding:7px 9px;font-size:13px;font-family:inherit;color:var(--navy)}
.cb-opt-correct{position:relative;flex-shrink:0;cursor:pointer;display:flex}
.cb-opt-correct input{position:absolute;opacity:0;inset:0;cursor:pointer}
.cb-opt-tick{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.35);border:2px solid #fff;display:flex;align-items:center;justify-content:center;color:transparent;font-size:14px}
.cb-opt-correct input:checked + .cb-opt-tick{background:#fff;color:#16a34a}
.cb-q-hint{font-size:11px;color:var(--text3);margin-top:8px}
.cb-add{width:100%;padding:12px;border:2px dashed var(--blue-light);border-radius:14px;background:var(--blue-pale);color:var(--primary);font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px}
.cb-add:hover{background:var(--blue-wash)}
.cb-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#fff;border-top:1px solid var(--border-light)}
.cb-foot-info{font-size:12px;font-weight:700;color:var(--text3)}
.cb-save{display:inline-flex;align-items:center;gap:7px;padding:12px 20px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--success),var(--success-dark));color:#fff;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 6px 16px -8px rgba(3,210,110,.7)}
.cb-save:hover{filter:brightness(1.07)}
@media(max-width:560px){.cb-opts{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   CONCURSO — Sub-fase B: sala en vivo (lobby) + banner alumno
   ═══════════════════════════════════════════════════════════ */
.cs-overlay{position:fixed;inset:0;z-index:3600;background:linear-gradient(135deg,rgba(13,42,110,.92),rgba(124,58,237,.88));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px}
.cs-modal{background:#fff;border-radius:22px;width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.cs-head{padding:18px 20px;background:linear-gradient(135deg,#0d2a6e,#156fe7);color:#fff}
.cs-title{font-size:18px;font-weight:900;display:flex;align-items:center;gap:9px}
.cs-lobby{flex:1;overflow-y:auto;padding:24px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.cs-badge{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;padding:7px 16px;border-radius:999px}
.cs-badge-live{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
.cs-badge-ok{background:var(--green-50);color:var(--success-dark);border:1px solid var(--green-100)}
.cs-dot{width:9px;height:9px;border-radius:50%;background:#dc2626;animation:aulaPulse 1.5s ease-in-out infinite}
.cs-hint{font-size:13px;color:var(--text2);line-height:1.5;max-width:380px}
.cs-count{font-size:15px;font-weight:800;color:var(--navy)}
.cs-count span{color:var(--primary)}
.cs-spin{width:44px;height:44px;border-radius:50%;border:4px solid var(--blue-light);border-top-color:var(--primary);animation:spin 1s linear infinite}
.cs-players{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.cs-player{display:flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;background:var(--gray-50);border:1px solid var(--border-light);border-radius:999px;font-size:13px;font-weight:700;color:var(--navy)}
.cs-player-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--primary-light),var(--primary));color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.cs-player-off{opacity:.45}
.cs-empty{font-size:13px;color:var(--text3);padding:14px}
.cs-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px;border-top:1px solid var(--border-light)}
.cs-btn-ghost{padding:11px 18px;border:1.5px solid var(--border);background:#fff;color:var(--text2);border-radius:11px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}
.cs-btn-ghost:hover{background:var(--gray-50)}
.cs-btn-go{display:inline-flex;align-items:center;gap:7px;padding:11px 20px;border:none;border-radius:11px;background:linear-gradient(135deg,var(--success),var(--success-dark));color:#fff;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}
.cs-btn-go:disabled{background:var(--gray-300);cursor:not-allowed}
.cc-btn-go{background:linear-gradient(135deg,var(--success),var(--success-dark));border-color:transparent;color:#fff}
.cc-btn-go:hover{filter:brightness(1.08);color:#fff;border-color:transparent}
.acb{display:flex;align-items:center;gap:13px;padding:14px 16px;margin-bottom:16px;border-radius:16px;cursor:pointer;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 10px 26px -10px rgba(217,119,6,.6)}
.acb:hover{filter:brightness(1.04)}
.acb-ic{width:46px;height:46px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(255,255,255,.2)}
.acb-tx{flex:1;min-width:0}
.acb-live{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.5px;opacity:.95}
.acb-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:aulaPulse 1.4s ease-in-out infinite}
.acb-title{font-size:16px;font-weight:900;margin-top:2px}
.acb-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border:none;border-radius:11px;background:#fff;color:#d97706;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}

/* ═══════════════════════════════════════════════════════════
   CONCURSO — Sub-fase C: juego en directo (pregunta/resultado/podio)
   ═══════════════════════════════════════════════════════════ */
.cs-game{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.cs-qhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cs-qnum{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--primary);white-space:nowrap}
.cs-timer{display:flex;align-items:center;gap:10px;flex:1;max-width:280px}
.cs-timer-num{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:900;flex-shrink:0}
.cs-timer-track{flex:1;height:8px;border-radius:999px;background:var(--gray-100);overflow:hidden}
.cs-timer-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,#03d26e,#f59e0b,#e21b3c);transition:width .2s linear}
.cs-qtext{font-size:19px;font-weight:900;color:var(--navy);text-align:center;padding:8px 0;line-height:1.3}
.cs-opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cs-opt{display:flex;align-items:center;gap:10px;padding:14px;border-radius:14px;background:var(--oc);color:#fff;font-size:15px;font-weight:800;border:none;font-family:inherit;text-align:left}
.cs-opt i{font-size:18px;flex-shrink:0}
.cs-opt span{flex:1;min-width:0}
.cs-opt-tap{cursor:pointer;transition:transform .12s,filter .12s;min-height:64px}
.cs-opt-tap:hover{filter:brightness(1.08)}
.cs-opt-tap:active{transform:scale(.97)}
.cs-respinfo{text-align:center;font-size:13px;font-weight:700;color:var(--text2);display:flex;align-items:center;justify-content:center;gap:6px}
.cs-sent{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px 10px;text-align:center}
.cs-sent-ic{width:70px;height:70px;border-radius:20px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:34px}
.cs-sent-tx{font-size:18px;font-weight:900;color:var(--navy)}
.cs-sent-sub{font-size:13px;color:var(--text3)}
.cs-res{position:relative;opacity:.5}
.cs-res-ok{opacity:1;box-shadow:0 0 0 3px #16a34a,0 8px 20px -8px rgba(38,137,12,.6)}
.cs-res-n{background:rgba(255,255,255,.3);border-radius:999px;padding:2px 9px;font-size:13px;flex-shrink:0}
.cs-mini-rank{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.cs-mr{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--gray-50);border-radius:10px}
.cs-mr-pos{width:22px;height:22px;border-radius:50%;background:var(--navy);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cs-mr-name{flex:1;min-width:0;font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-mr-score{font-size:13px;font-weight:900;color:var(--primary)}
.cs-rp{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 14px;border-radius:18px;text-align:center}
.cs-rp-ok{background:linear-gradient(135deg,#03d26e,#02a857);color:#fff}
.cs-rp-no{background:linear-gradient(135deg,#e21b3c,#b01228);color:#fff}
.cs-rp-none{background:var(--gray-100);color:var(--text2)}
.cs-rp-ic{font-size:52px;line-height:1}
.cs-rp-title{font-size:24px;font-weight:900}
.cs-rp-pts{font-size:18px;font-weight:800}
.cs-rp-correct{font-size:13px;opacity:.92;margin-top:4px}
.cs-wait-host{text-align:center;font-size:13px;color:var(--text3);margin-top:12px}
.cs-fin-head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.cs-fin-emoji{font-size:48px}
.cs-fin-title{font-size:22px;font-weight:900;color:var(--navy)}
.cs-fin-sub{font-size:13px;color:var(--text3)}
.cs-podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:8px 0}
.cs-pod{flex:1;max-width:130px;border-radius:14px 14px 0 0;padding:14px 8px;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:3px}
.cs-pod-medal{font-size:26px}
.cs-pod-name{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cs-pod-score{font-size:15px;font-weight:900}
.cs-pod-1{background:linear-gradient(135deg,#fbbf24,#d97706);min-height:120px;order:2}
.cs-pod-2{background:linear-gradient(135deg,#94a3b8,#64748b);min-height:96px;order:1}
.cs-pod-3{background:linear-gradient(135deg,#d89e6a,#b45309);min-height:76px;order:3}
@media(max-width:560px){.cs-opts-grid{grid-template-columns:1fr}}

/* Concurso — RTK en el podio (Sub-fase D) */
.cs-fin-rtk{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:900;color:#92400e;background:linear-gradient(135deg,#fef9c3,#fde68a);border:1px solid #fcd34d;padding:9px 18px;border-radius:999px;align-self:center}
.cs-pod-rtk{font-size:11px;font-weight:800;background:rgba(255,255,255,.28);border-radius:999px;padding:1px 8px;margin-top:3px}
.cs-mr-rtk{font-size:11px;font-weight:800;color:#d97706;background:#fff7ed;border:1px solid #fde68a;border-radius:999px;padding:1px 7px;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════
   AULA ALUMNO v2 — adopta el lenguaje pf2 (hero animado + ancho)
   ═══════════════════════════════════════════════════════════ */
.pf2.aula-alum-page{max-width:1040px;padding:0 4px}
.pf2.aula-alum-page .pf2-hero{margin-bottom:18px}
/* Acciones del hero (refrescar / dashboard) */
.pf2-hero-actions{flex-shrink:0;display:flex;align-items:center;gap:8px;align-self:flex-start}
.pf2-hero-btn{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  color:#fff;font-size:13px;font-weight:800;font-family:inherit;border-radius:11px;padding:9px 11px;cursor:pointer;transition:.15s;line-height:1}
.pf2-hero-btn:hover{background:rgba(255,255,255,.26);transform:translateY(-1px)}
.pf2-hero-btn i{font-size:17px}
.pf2-hero-btn-lbl{padding:9px 14px}
.pf2-badge-done{background:rgba(3,210,110,.22);border-color:rgba(3,210,110,.45);color:#bdf5d8}
/* Herramientas a 2 columnas cuando hay sitio (la fila escala bien) */
@media(min-width:780px){
  .pf2 .aula-alum-tools{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .pf2 .aula-alum-tool{flex-wrap:wrap}
}
@media(max-width:560px){
  .pf2-hero-actions{align-self:stretch}
  .pf2-hero-btn-lbl span{display:none}
}

/* Selector de aulas del alumno (cuando hay 2+ aulas activas) */
.aula-switch{display:flex;flex-wrap:wrap;gap:6px;background:#fff;border:1px solid var(--border-light);border-radius:14px;padding:5px;margin-bottom:18px;box-shadow:0 4px 16px -10px rgba(13,42,110,.25)}
.aula-switch-tab{flex:1;min-width:120px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 12px;border:none;border-radius:10px;font-size:13px;font-weight:800;font-family:inherit;color:var(--blue-medium);background:transparent;cursor:pointer;transition:.18s;white-space:nowrap;overflow:hidden}
.aula-switch-tab span{overflow:hidden;text-overflow:ellipsis}
.aula-switch-tab:hover{background:var(--blue-ghost);color:var(--primary)}
.aula-switch-tab.act{color:#fff;background:linear-gradient(135deg,var(--primary),var(--navy));box-shadow:0 4px 12px -4px rgba(21,111,231,.5)}
.aula-switch-tab i{font-size:16px;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════
   RETO INTELIGENTE — caja de texto, tarjeta personalizada y chat
   ═══════════════════════════════════════════════════════════ */
.reto-input-row{display:flex;gap:6px;margin-top:10px;align-items:center}
#reto-input{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:10px;color:#fff;font-size:11px;font-weight:600;font-family:inherit;padding:8px 10px;outline:none;transition:.15s}
#reto-input::placeholder{color:rgba(255,255,255,.4)}
#reto-input:focus{border-color:rgba(96,165,250,.6);background:rgba(255,255,255,.1)}
#reto-send{flex-shrink:0;width:32px;height:32px;border-radius:10px;border:none;cursor:pointer;background:linear-gradient(135deg,#3b82f6,#6d28d9);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;transition:.15s}
#reto-send:hover{filter:brightness(1.12)}

.reto-smart{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:11px;cursor:pointer;margin-bottom:7px;background:linear-gradient(135deg,rgba(96,165,250,.16),rgba(167,139,250,.16));border:1px solid rgba(255,255,255,.16);transition:.15s}
.reto-smart:hover{background:linear-gradient(135deg,rgba(96,165,250,.28),rgba(167,139,250,.28))}
.reto-smart-ic{width:30px;height:30px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:15px}
.reto-smart-tx{flex:1;min-width:0}
.reto-smart-lbl{font-size:8.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.45)}
.reto-smart-txt{font-size:11px;font-weight:700;color:#fff;line-height:1.3;margin-top:1px}
.reto-smart-arr{color:rgba(255,255,255,.5);font-size:15px;flex-shrink:0}

.reto-chat{display:flex;flex-direction:column;gap:7px;margin-bottom:9px;max-height:280px;overflow-y:auto;scrollbar-width:thin}
.reto-chat::-webkit-scrollbar{width:5px}
.reto-chat::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:3px}
.reto-msg-user{align-self:flex-end;max-width:85%;background:linear-gradient(135deg,#3b82f6,#6d28d9);color:#fff;font-size:11px;font-weight:600;line-height:1.45;padding:7px 11px;border-radius:12px 12px 4px 12px;animation:bocFi .25s ease}
.reto-msg-bot{align-self:flex-start;max-width:92%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:11px;font-weight:600;line-height:1.5;padding:7px 11px;border-radius:12px 12px 12px 4px;animation:bocFi .25s ease}
.reto-typing{display:inline-flex;gap:3px;align-items:center}
.reto-typing span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);animation:retoTyping 1.1s infinite ease-in-out}
.reto-typing span:nth-child(2){animation-delay:.18s}
.reto-typing span:nth-child(3){animation-delay:.36s}
@keyframes retoTyping{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* Aula del profesor (detalle) — adopta el hero pf2 y se ensancha */
.pf2.aula-page{max-width:1040px}
.pf2.aula-page .pf2-hero{margin:4px 0 16px}
.pf2.aula-page .aula-actions-row{margin:0 0 18px}

/* Libros flotando en el hero del profesor (suben como pompas, de fondo) */
.pf2-hero-libros .pf2-libros{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.pf2-hero-libros .pf2-libros i{position:absolute;bottom:-26px;color:rgba(255,255,255,.16);will-change:transform,opacity;animation:pf2LibroSube linear infinite}
@keyframes pf2LibroSube{
  0%{transform:translateY(0) rotate(-8deg);opacity:0}
  12%{opacity:1}
  85%{opacity:1}
  100%{transform:translateY(-200px) rotate(14deg);opacity:0}
}
.pf2-hero-libros .pf2-libros i:nth-child(1){left:5%;font-size:20px;animation-duration:9s;animation-delay:0s}
.pf2-hero-libros .pf2-libros i:nth-child(2){left:17%;font-size:13px;animation-duration:11.5s;animation-delay:1.6s}
.pf2-hero-libros .pf2-libros i:nth-child(3){left:31%;font-size:25px;animation-duration:8s;animation-delay:.7s}
.pf2-hero-libros .pf2-libros i:nth-child(4){left:46%;font-size:15px;animation-duration:12.5s;animation-delay:2.3s}
.pf2-hero-libros .pf2-libros i:nth-child(5){left:62%;font-size:22px;animation-duration:10s;animation-delay:.3s}
.pf2-hero-libros .pf2-libros i:nth-child(6){left:78%;font-size:14px;animation-duration:9.5s;animation-delay:1.9s}
.pf2-hero-libros .pf2-libros i:nth-child(7){left:90%;font-size:18px;animation-duration:11s;animation-delay:1.1s}

/* ═══════════════════════════════════════════════════════════
   EVALUADOR — Dashboard + Historial (clases → alumnos)
   ═══════════════════════════════════════════════════════════ */
.evd{max-width:1080px;margin:0 auto}
.evd-head{margin:4px 2px 20px}
.evd-head-row{display:flex;align-items:flex-start;gap:14px}
.evd-title{font-size:30px;font-weight:900;color:var(--navy);letter-spacing:-.5px;line-height:1.1}
.evd-sub{font-size:15px;color:var(--primary);font-weight:600;line-height:1.5;margin-top:6px}
.evd-back{flex-shrink:0;width:40px;height:40px;border-radius:11px;border:1px solid var(--border-light);background:#fff;color:var(--primary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;transition:.15s}
.evd-back:hover{background:var(--blue-pale);border-color:var(--blue-light)}

.evd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:20px}
@media(max-width:920px){.evd-cards{grid-template-columns:1fr}}
.evd-card{background:#fff;border:1px solid var(--border-light);border-radius:20px;padding:26px;cursor:pointer;transition:.18s;box-shadow:0 4px 20px -12px rgba(13,42,110,.25)}
.evd-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -16px rgba(13,42,110,.4);border-color:var(--blue-light)}
.evd-card-ic{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;margin-bottom:18px;box-shadow:0 10px 22px -10px rgba(13,42,110,.5)}
.evd-card-title{font-size:21px;font-weight:900;color:var(--navy);margin-bottom:7px}
.evd-card-sub{font-size:14px;color:var(--text2);line-height:1.5;max-width:90%}

.evd-panel{background:#fff;border:1px solid var(--border-light);border-radius:20px;padding:20px 22px;box-shadow:0 4px 18px -12px rgba(13,42,110,.22)}
.evd-panel-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--primary);margin-bottom:6px}
.evd-panel-head i{font-size:16px}

.evd-sesion{display:flex;align-items:center;gap:16px;padding:14px 4px;border-bottom:1px solid var(--gray-50)}
.evd-sesion:last-child{border-bottom:none}
.evd-sesion-info{flex:1;min-width:0}
.evd-sesion-name{font-size:15px;font-weight:800;color:var(--navy)}
.evd-sesion-meta{font-size:12.5px;color:var(--text3);margin-top:2px}
.evd-sesion-estado{font-size:13px;font-weight:600;color:var(--text3);flex-shrink:0}
.evd-sesion-evals{font-size:14px;font-weight:800;color:var(--primary);flex-shrink:0;min-width:64px;text-align:right}

.evd-btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--blue-light);background:#fff;color:var(--primary);border-radius:10px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:.15s;white-space:nowrap}
.evd-btn-ghost:hover:not(:disabled){background:var(--blue-pale)}
.evd-btn-ghost:disabled{opacity:.4;cursor:not-allowed}
.evd-btn-ghost i{font-size:15px}
.evd-btn-danger-ghost{border-color:rgba(239,68,68,.3);color:var(--danger)}
.evd-btn-danger-ghost:hover:not(:disabled){background:rgba(239,68,68,.06)}
.evd-btn-primary{display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border:none;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border-radius:11px;font-size:14px;font-weight:800;font-family:inherit;cursor:pointer;flex-shrink:0;box-shadow:0 8px 18px -8px rgba(21,111,231,.6);transition:.15s}
.evd-btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.evd-btn-danger{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border:1px solid rgba(239,68,68,.3);background:#fff;color:var(--danger);border-radius:10px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;transition:.15s}
.evd-btn-danger:hover{background:rgba(239,68,68,.06)}

.evd-table-head{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text3);padding:6px 4px 12px;border-bottom:1px solid var(--gray-100)}
.evd-table-head i{font-size:13px;vertical-align:-1px}
.evd-clase-grid{display:grid;grid-template-columns:2.2fr 1.4fr 1fr 1.5fr;align-items:center;gap:10px}
.evd-alumno-grid{display:grid;grid-template-columns:2.2fr 1.6fr 1fr 2.1fr;align-items:center;gap:10px}
.evd-clase-row,.evd-alumno-row{padding:13px 4px;border-bottom:1px solid var(--gray-50)}
.evd-clase-row{cursor:pointer;transition:.12s;border-radius:10px}
.evd-clase-row:hover{background:var(--blue-ghost)}
.evd-clase-row:last-child,.evd-alumno-row:last-child{border-bottom:none}
.evd-clase-info{display:flex;align-items:center;gap:13px;min-width:0}
.evd-clase-ic{width:46px;height:46px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;box-shadow:0 6px 14px -7px rgba(13,42,110,.5)}
.evd-clase-name{font-size:15px;font-weight:800;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evd-clase-sub{font-size:12.5px;color:var(--text3);margin-top:1px}
.evd-cell-mut{font-size:13.5px;color:var(--text2)}
.evd-clase-acts{display:flex;align-items:center;justify-content:flex-end;gap:10px}

.evd-nota{display:inline-block;font-size:14px;font-weight:800;padding:4px 12px;border-radius:9px;background:var(--gray-100);color:var(--text2)}
.evd-nota-green{background:#dcfce7;color:#15803d}
.evd-nota-amber{background:#fef9c3;color:#a16207}
.evd-nota-red{background:#fee2e2;color:#b91c1c}

.evd-breadcrumb{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text2);margin:4px 2px 18px}
.evd-breadcrumb strong{color:var(--primary)}
.evd-breadcrumb i{font-size:15px;color:var(--text4)}
.evd-clase-detail-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--gray-100)}
.evd-clase-detail-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.evd-media-pill{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;color:var(--text2);background:var(--gray-50);border:1px solid var(--border-light);border-radius:11px;padding:8px 14px}
.evd-av{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--primary-light),var(--violet-500))}
.evd-alumno-acts{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}
.evd-alumno-acts .evd-btn-ghost{padding:7px 11px;font-size:12.5px}

@media(max-width:820px){
  .evd-cards{grid-template-columns:1fr}
  .evd-clase-grid{grid-template-columns:1.6fr 1fr auto;}
  .evd-clase-grid span:nth-child(2),.evd-clase-row>div:nth-child(2){display:none}
  .evd-alumno-grid{grid-template-columns:1.4fr auto;}
  .evd-alumno-grid span:nth-child(2),.evd-alumno-grid span:nth-child(3),.evd-alumno-row>div:nth-child(2),.evd-alumno-row>div:nth-child(3){display:none}
  .evd-alumno-acts{justify-content:flex-start}
}

/* Evaluador — modal de inscripción por QR */
.evd-overlay{position:fixed;inset:0;z-index:9500;background:rgba(13,42,110,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;animation:evdFade .2s ease}
@keyframes evdFade{from{opacity:0}to{opacity:1}}
.evd-modal{position:relative;background:#fff;border-radius:22px;width:100%;max-width:400px;padding:28px 26px;text-align:center;box-shadow:0 30px 70px -24px rgba(0,0,0,.55);animation:evdPop .25s cubic-bezier(.34,1.3,.64,1)}
@keyframes evdPop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
.evd-modal-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:9px;border:none;background:var(--gray-100);color:var(--text2);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
.evd-modal-x:hover{background:var(--gray-200)}
.evd-modal-ic{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--navy));color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 12px 26px -10px rgba(21,111,231,.7)}
.evd-modal-title{font-size:20px;font-weight:900;color:var(--navy)}
.evd-modal-sub{font-size:13.5px;color:var(--text2);line-height:1.5;margin:8px 0 18px}
.evd-qr{display:inline-flex;padding:12px;background:#fff;border:1px solid var(--border-light);border-radius:16px;box-shadow:0 6px 18px -10px rgba(13,42,110,.3)}
.evd-qr img{display:block;border-radius:6px}
.evd-qr-code{font-family:'Space Mono',monospace;font-weight:700;font-size:16px;letter-spacing:1px;color:var(--primary);margin:14px 0 12px}
.evd-qr-url{display:flex;gap:8px}
.evd-qr-url input{flex:1;min-width:0;padding:10px 12px;border:1.5px solid var(--border-light);border-radius:10px;font-size:12.5px;color:var(--text2);background:var(--gray-50);outline:none}
.evd-qr-url button{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:10px 14px;border:1px solid var(--blue-light);background:var(--blue-pale);color:var(--primary);border-radius:10px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer}
.evd-qr-url button:hover{background:var(--primary);color:#fff}


/* ════════════════════════════
   NAVEGACIÓN MÓVIL — barra inferior + hoja "Más"
════════════════════════════ */
.mnav,.mnav-sheet,.mnav-sheet-overlay{display:none}
@media(max-width:768px){
  .mnav{position:fixed;bottom:0;left:0;right:0;z-index:950;display:flex;background:var(--white,#fff);border-top:1px solid var(--blue-light,#dbe7f5);box-shadow:0 -6px 24px rgba(13,42,110,.10);padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px));transition:transform .22s ease}
  .mnav.mnav-oculta{transform:translateY(110%)}
  /* Con la barra escondida, la mascota Reto baja a ocupar su hueco */
  .reto-widget{transition:bottom .22s ease}
  #app-screen.mnav-esta-oculta .reto-widget{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .mnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 2px;border:none;background:none;color:var(--blue-muted,#7aabce);font-size:10px;font-weight:700;font-family:inherit;text-decoration:none;cursor:pointer;border-radius:12px;transition:.15s}
  .mnav-item i{font-size:22px;line-height:1;transition:.15s}
  .mnav-item.active{color:var(--primary)}
  .mnav-item.active i{transform:translateY(-1px)}

  .mnav-sheet-overlay{display:block;position:fixed;inset:0;background:rgba(10,22,40,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .22s;z-index:940}
  .mnav-sheet-overlay.open{opacity:1;pointer-events:auto}
  .mnav-sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:945;background:var(--white,#fff);border-radius:20px 20px 0 0;padding:10px 16px calc(84px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(13,42,110,.18);transform:translateY(110%);transition:transform .28s cubic-bezier(.32,.9,.35,1)}
  .mnav-sheet.open{transform:translateY(0)}
  .mnav-sheet-handle{width:42px;height:4px;border-radius:3px;background:var(--blue-light,#dbe7f5);margin:2px auto 14px}
  .mnav-sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
  .mnav-sheet-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border-radius:14px;background:var(--blue-ghost,#f4f8ff);border:1px solid var(--blue-light,#dbe7f5);color:var(--navy,#0d2a6e);font-size:11px;font-weight:700;text-decoration:none;transition:.15s}
  .mnav-sheet-item i{font-size:22px;color:var(--primary)}
  .mnav-sheet-item.active{background:var(--blue-pale,#eef5ff);border-color:var(--primary)}
  .mnav-sheet-row{display:flex;gap:10px}
  .mnav-sheet-aux{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:12px;border:1px solid var(--blue-light,#dbe7f5);background:white;color:var(--blue-500,#3a7fd4);font-size:12px;font-weight:700;font-family:inherit;cursor:pointer}
  .mnav-sheet-logout{color:#dc2626;border-color:#fecaca;background:#fff8f8}
  /* Evitar desplazamiento horizontal fantasma (hace que el scroll vertical "se atasque") */
  body{overflow-x:hidden}
}

/* Estas reglas viven al final del archivo a propósito: sus estilos base se
   definen tarde y, a igual especificidad, ganaría la última. */
@media(max-width:768px){
  .dash-nav-help,.btn-logout-dash{display:none}

  /* Las secciones son flex-items de .dash-main: sin esto no pueden encoger
     por debajo de su contenido mínimo y desbordan la pantalla (SuperAdmin). */
  /* width:100% además de min-width:0 — el margin:0 auto en línea de algunas
     secciones desactiva el stretch del flex y las dejaba a ancho de contenido */
  .dash-main > [id^="seccion-"]{min-width:0;max-width:100%;width:100%}

  /* Pestañas del SuperAdmin: fila deslizable en vez de 7 botones aplastados */
  .sa-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sa-tabs::-webkit-scrollbar{display:none}
  .sa-tabs button{flex:0 0 auto !important;white-space:nowrap;padding:10px 14px !important}
}


/* ════════════════════════════
   MÓVIL — pulido visual (tipografía y espacios)
════════════════════════════ */
@media(max-width:768px){
  /* Héroes de sección (Perfil, Ranking, Diagnóstico, Aula…): menos denso */
  .pf2-hero{padding:18px 16px;border-radius:16px}
  .pf2-hero-top{gap:12px}
  .pf2-avatar{width:56px;height:56px;border-radius:16px;font-size:22px;letter-spacing:0}
  .pf2-name{font-size:19px;letter-spacing:0;line-height:1.2}
  .pf2-alias{font-size:12px}
  .pf2-badges{gap:6px;margin-top:8px}
  .pf2-badge{font-size:10.5px}
  .pf2-rtk-num{font-size:26px;letter-spacing:0}
  .pf2-stat-num{font-size:20px;letter-spacing:0}

  /* Titulares con letter-spacing negativo → respiración normal en pantallas pequeñas */
  .dxv2-hero-title{font-size:20px;letter-spacing:0;line-height:1.25}
  .dxv2-card-title{letter-spacing:0}
  .evd-title{font-size:22px;letter-spacing:0}
  .perfil-avatar{letter-spacing:0}

  /* Wraps que aún conservaban padding de escritorio */
  .ev2-wrap{padding:16px 14px}
  .logros-v2-wrap{padding:16px 14px}

  /* Panel SuperAdmin (padding de escritorio en línea) */
  #seccion-superadmin{padding:14px 12px 40px !important}

  /* Plan de hoy: los subtítulos pueden respirar en 2 líneas en vez de cortarse */
  .dpt-sub{white-space:normal;line-height:1.35}
  .dpt-desc{display:none}
}

/* ════════════════════════════
   INICIO MÓVIL — «Hoy» de un tirón (opción A)
   El inicio muestra solo lo accionable del día; el progreso, ranking y
   logros viven en sus pestañas de la barra inferior. Escritorio intacto.
════════════════════════════ */
@media(max-width:768px){
  .dash-bienvenida .pf2-stats.dash-stats3,
  .dash-bienvenida .dash-grid3{display:none}

  .dash-bienvenida{padding:10px 12px 12px;gap:10px}

  /* Saludo compacto */
  .db-hero{min-height:0;padding:14px 16px;border-radius:16px}
  .db-hero-h{font-size:21px;margin-bottom:2px}
  .db-hero-sub{font-size:12px;margin-bottom:8px}
  .db-chips{gap:6px}
  .dash-sec-head{margin:2px 2px 0}

  /* Plan de hoy → carrusel horizontal deslizable con imán (snap) */
  .dash-plan-timeline{flex-direction:row;overflow-x:auto;gap:10px;padding:4px 2px 6px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .dash-plan-timeline::-webkit-scrollbar{display:none}
  .dpt-item{flex:0 0 72%;max-width:280px;scroll-snap-align:center;position:relative}
  .dpt-line{display:none}
  .dpt-left{position:absolute;top:12px;right:12px;width:auto;padding:0;z-index:2}
  .dpt-card{flex-direction:column;align-items:flex-start;gap:8px;margin:0;padding:14px;height:100%;border-radius:16px}
  .dpt-icon{width:42px;height:42px}
  .dpt-title{font-size:14px}
  .dpt-sub{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;min-height:2.6em}
  .dpt-actions{flex-direction:row;align-items:center;gap:8px;width:100%;margin-top:auto}

  /* Esta semana: peli/serie y libro lado a lado */
  .dash-semana-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .dpt-semana-card{padding:12px 10px}
  .dpt-semana-meta{display:none}
  .dpt-semana-titulo{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px}
  /* La cabecera de sección ya dice "Esta semana": la etiqueta por tarjeta sobra */
  .dpt-semana-label{display:none}
}

/* ════════════════════════════
   PROMO DE INSTALACIÓN PWA (móvil)
════════════════════════════ */
.pwa-promo{display:none}
@media(max-width:768px){
  .pwa-promo{position:fixed;left:10px;right:10px;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:935;display:flex;align-items:center;gap:10px;background:var(--white,#fff);border:1px solid var(--blue-light,#dbe7f5);border-radius:16px;padding:10px 12px;box-shadow:0 10px 34px rgba(13,42,110,.18);animation:pwaUp .35s cubic-bezier(.34,1.2,.64,1)}
  @keyframes pwaUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  .pwa-promo-ic{width:38px;height:38px;border-radius:10px;flex-shrink:0}
  .pwa-promo-tx{flex:1;min-width:0}
  .pwa-promo-t{font-size:12.5px;font-weight:800;color:var(--navy,#0d2a6e)}
  .pwa-promo-s{font-size:11px;color:var(--blue-muted,#7aabce);margin-top:1px}
  .pwa-promo-btn{flex-shrink:0;background:linear-gradient(135deg,var(--primary,#156fe7),#0d4fb8);color:#fff;border:none;border-radius:10px;padding:9px 14px;font-size:12px;font-weight:800;font-family:inherit;cursor:pointer}
  .pwa-promo-x{flex-shrink:0;background:none;border:none;color:#b0c8e0;font-size:14px;padding:6px;cursor:pointer}
}