/* =========================================================
   INMEGA · Claude Academy — Sistema de diseño (Producción)
   ========================================================= */
:root {
  --inmega:#2BAE66; --inmega-bright:#34D17E; --inmega-deep:#0E6B3A; --inmega-dark:#054A26;
  --side-line:rgba(255,255,255,.07); --side-text:#A9C6B6; --side-text-2:#6E8C7C;
  --bg:#F3F6F4; --surface:#FFFFFF; --surface-2:#F7FAF8; --line:#E4EAE6; --line-2:#EDF2EF;
  --ink:#0E1A14; --ink-2:#33453B; --slate:#5C6F64; --muted:#8A9A90;
  --ok:#1F9D57; --warn:#C9871F; --danger:#D6463B; --info:#2563EB;
  --sh-sm:0 1px 2px rgba(8,40,24,.05),0 1px 3px rgba(8,40,24,.04);
  --sh:0 2px 8px rgba(8,40,24,.06),0 8px 24px rgba(8,40,24,.05);
  --sh-lg:0 12px 40px rgba(8,40,24,.12);
  --sh-xl:0 30px 80px rgba(4,30,16,.45);
  --sh-emerald:0 8px 24px rgba(14,107,58,.22);
  --radius:14px; --ease:cubic-bezier(.16,.84,.44,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body, #app { height:100%; }
body { background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:'Sora','Inter',sans-serif; letter-spacing:-.02em; color:var(--ink); }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
::selection { background:var(--inmega); color:#fff; }
.icon { display:inline-block; vertical-align:middle; flex-shrink:0; }
.slate { color:var(--slate); } .muted { color:var(--muted); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#cdd9d2; border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:#b4c5bb; background-clip:padding-box; }

/* ---------- Botones ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid transparent;
  border-radius:10px; padding:10px 18px; font-size:13.5px; font-weight:600;
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, border-color .2s, color .2s; white-space:nowrap; }
.btn:active { transform:translateY(1px) scale(.99); }
.btn-primary { color:#fff; background:linear-gradient(135deg,var(--inmega),var(--inmega-deep)); box-shadow:var(--sh-emerald); }
.btn-primary:hover { box-shadow:0 10px 28px rgba(14,107,58,.32); transform:translateY(-1px); }
.btn-ghost { background:var(--surface); color:var(--ink-2); border-color:var(--line); box-shadow:var(--sh-sm); }
.btn-ghost:hover { border-color:var(--inmega); color:var(--inmega-deep); }
.btn-subtle { background:var(--surface-2); color:var(--slate); border-color:var(--line); }
.btn-subtle:hover { background:#eef4f0; color:var(--ink); }
.btn-danger-ghost { background:transparent; color:var(--danger); border-color:transparent; }
.btn-danger-ghost:hover { background:#fdecea; }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-block { width:100%; } .btn-sm { padding:7px 13px; font-size:12.5px; } .btn-lg { padding:13px 24px; font-size:14.5px; border-radius:12px; }
.linkbtn { background:none; border:none; color:var(--inmega-deep); font-weight:600; font-size:12.5px; }
.linkbtn:hover { text-decoration:underline; }

/* ---------- Cards / form / badges / track ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--sh-sm);
  transition:transform .25s var(--ease), box-shadow .3s var(--ease), border-color .25s; }
.card-pad { padding:22px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field label { font-size:12.5px; font-weight:600; color:var(--ink-2); }
.input { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; font-size:14px; color:var(--ink);
  background:var(--surface); transition:border-color .18s, box-shadow .18s; font-family:inherit; }
.input::placeholder { color:var(--muted); }
.input:focus { outline:none; border-color:var(--inmega); box-shadow:0 0 0 4px rgba(43,174,102,.13); }
.input-icon { position:relative; }
.input-icon .input { padding-left:42px; }
.input-icon > .icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--muted); }
select.input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A9A90' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
.badge { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:7px; }
.badge-emerald,.badge-biz { background:rgba(43,174,102,.12); color:var(--inmega-deep); }
.badge-tech { background:rgba(124,58,237,.11); color:#6D28D9; }
.badge-spec { background:rgba(14,165,233,.12); color:#0369A1; }
.badge-lock { background:#EEF1EF; color:var(--muted); }
.badge-done { background:rgba(31,157,87,.13); color:var(--ok); }
.badge-basic { background:rgba(43,174,102,.12); color:var(--inmega-deep); }
.badge-inter { background:rgba(201,135,31,.14); color:var(--warn); }
.badge-adv { background:rgba(214,70,59,.12); color:var(--danger); }
.track { height:7px; background:#E7EDE9; border-radius:99px; overflow:hidden; }
.track > i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--inmega),var(--inmega-deep)); transition:width .7s var(--ease); }

.ring { position:relative; flex-shrink:0; }
.ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg { fill:none; stroke:#E7EDE9; stroke-width:10; }
.ring-fg { fill:none; stroke:var(--inmega); stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset 1s var(--ease); }
.ring-label { position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.ring-label strong { font-family:'Sora'; font-size:26px; color:var(--inmega-deep); }
.ring-label span { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }

@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes pop { 0% { transform:scale(.96); opacity:0; } 100% { transform:scale(1); opacity:1; } }
@keyframes floaty { 0%,100% { transform:translateY(0);} 50% { transform:translateY(22px);} }
@keyframes spin { to { transform:rotate(360deg); } }
.anim-up { animation:fadeUp .5s var(--ease) both; }
.stagger > * { animation:fadeUp .5s var(--ease) both; }
.stagger > *:nth-child(1){animation-delay:.02s}.stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.10s}.stagger > *:nth-child(4){animation-delay:.14s}
.stagger > *:nth-child(5){animation-delay:.18s}.stagger > *:nth-child(6){animation-delay:.22s}
.stagger > *:nth-child(7){animation-delay:.26s}.stagger > *:nth-child(8){animation-delay:.30s}
.loading { display:grid; place-items:center; gap:14px; padding:80px 0; color:var(--muted); }
.spin { width:34px; height:34px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--inmega); animation:spin .8s linear infinite; }

.toast-wrap { position:fixed; bottom:26px; right:26px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast { background:var(--ink); color:#fff; padding:13px 18px; border-radius:12px; font-size:13px; font-weight:500;
  box-shadow:var(--sh-lg); display:flex; align-items:center; gap:10px; animation:pop .3s var(--ease) both; transition:opacity .25s, transform .25s; max-width:360px; }
.toast.ok { background:linear-gradient(135deg,var(--inmega-deep),#0a5530); }
.toast.err { background:linear-gradient(135deg,#b23a30,#8f2c24); }

/* ===========================================================
   LOGIN — tarjeta flotante con giro 3D
   =========================================================== */
.auth { min-height:100vh; display:grid; place-items:center; padding:30px 18px; position:relative; overflow:hidden;
  background:radial-gradient(900px 600px at 16% 10%, rgba(52,209,126,.28), transparent 55%),
    radial-gradient(760px 680px at 100% 100%, rgba(20,138,84,.40), transparent 60%),
    linear-gradient(160deg, #0F3022 0%, #0B2117 40%, #06120C 100%); background-color:#0A1C13; }
.auth::before { content:""; position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:26px 26px; }
.scene { width:100%; max-width:920px; perspective:2400px; position:relative; z-index:2; }
.flip { position:relative; width:100%; transition:transform .9s cubic-bezier(.55,.06,.3,1); transform-style:preserve-3d; min-height:520px; }
.flip.flipped { transform:rotateY(180deg); }
.face { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transform:rotateY(0deg); -webkit-transform:rotateY(0deg); transition:visibility 0s linear .45s; }
.face.back { transform:rotateY(180deg); -webkit-transform:rotateY(180deg); visibility:hidden; }
.flip.flipped .face.front { visibility:hidden; }
.flip.flipped .face.back { visibility:visible; }

.auth .card { display:grid; grid-template-columns:1fr 1.05fr; min-height:520px; border-radius:24px; overflow:hidden;
  background:linear-gradient(140deg,#0C2419 0%,#08160E 100%); border:1px solid rgba(255,255,255,.08);
  box-shadow:0 40px 90px rgba(2,18,10,.6); backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.auth .card.single { grid-template-columns:1fr; max-width:440px; margin:0 auto; min-height:0; }

/* Panel de bienvenida (verde) */
.welcome { position:relative; overflow:hidden; padding:44px 40px; display:flex; flex-direction:column; justify-content:space-between;
  color:#EAF6EF; background:linear-gradient(155deg,#1FA661 0%,#0F6E40 48%,#0A3A24 100%); }
.leaf { position:absolute; opacity:.10; color:#053019; pointer-events:none; }
.leaf.l1 { top:-30px; right:-30px; transform:rotate(20deg); }
.leaf.l2 { bottom:-50px; left:-40px; transform:rotate(-150deg) scale(1.4); }
.w-glow { position:absolute; width:340px; height:340px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 62%); top:-130px; right:-100px; filter:blur(3px); animation:floaty 10s ease-in-out infinite; }
.w-top { display:flex; align-items:center; gap:13px; position:relative; z-index:2; }
.brand-logo { width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); box-shadow:0 8px 20px rgba(0,0,0,.25); overflow:hidden; }
.brand-logo .bl-img { width:100%; height:100%; object-fit:contain; }
.w-wordmark { display:flex; flex-direction:column; line-height:1.15; }
.w-wordmark strong { font-family:'Sora'; font-size:17px; color:#fff; }
.w-wordmark span { font-size:12px; color:#C7ECD8; font-weight:600; }
.w-mid { position:relative; z-index:2; }
.w-mid h2 { color:#fff; font-size:34px; line-height:1.12; margin-bottom:14px; }
.w-mid p { font-size:13.5px; line-height:1.7; color:#D2EEE0; max-width:300px; }
.w-feats { list-style:none; display:flex; flex-direction:column; gap:11px; position:relative; z-index:2; }
.w-feats li { display:flex; align-items:center; gap:11px; font-size:12.5px; color:#DCF1E6; }
.w-feats li .icon { color:#A8EBC6; }

/* Lado del formulario (oscuro) */
.formside { padding:46px 44px; display:flex; flex-direction:column; justify-content:center; color:#EAF6EF; }
.fhead { margin-bottom:28px; }
.fhead h1 { font-size:30px; color:#fff; }
.fhead p { font-size:13px; color:rgba(234,246,239,.55); margin-top:7px; }
.aform { display:flex; flex-direction:column; gap:22px; }
.uline { display:flex; align-items:center; gap:11px; border-bottom:1px solid rgba(255,255,255,.18); padding:9px 2px; transition:border-color .2s; }
.uline .icon { color:rgba(234,246,239,.42); transition:color .2s; }
.uline input { flex:1; border:none; outline:none; background:transparent; font-family:inherit; font-size:14.5px; color:#fff; padding:2px 0; }
.uline input::placeholder { color:rgba(234,246,239,.42); }
.uline:focus-within { border-color:var(--inmega-bright); }
.uline:focus-within .icon { color:var(--inmega-bright); }
.forgot { display:flex; justify-content:flex-end; margin-top:-12px; }
.linkbtn { background:none; border:none; color:var(--inmega-bright); font-weight:600; font-size:12px; cursor:pointer; }
.linkbtn:hover { text-decoration:underline; }
.cta { margin-top:6px; width:100%; border:none; border-radius:30px; padding:14px; font-family:inherit; font-size:14.5px; font-weight:700; color:#fff; cursor:pointer;
  background:linear-gradient(135deg,var(--inmega-bright),var(--inmega-deep)); box-shadow:0 10px 26px rgba(14,107,58,.4); transition:transform .18s var(--ease), box-shadow .25s; }
.cta:hover { transform:translateY(-1px); box-shadow:0 14px 32px rgba(14,107,58,.5); }
.switch { margin-top:24px; text-align:center; font-size:13px; color:rgba(234,246,239,.6); }
.switch button { background:none; border:none; color:var(--inmega-bright); font-weight:700; font-size:13px; cursor:pointer; }
.switch button:hover { text-decoration:underline; }

/* Acceso con Microsoft */
.social { margin-top:22px; }
.sep { display:flex; align-items:center; gap:12px; color:rgba(234,246,239,.45); font-size:11.5px; }
.sep::before, .sep::after { content:""; flex:1; height:1px; background:rgba(255,255,255,.12); }
.ms-btn { margin-top:16px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.04); color:#EAF6EF; border-radius:12px; padding:12px;
  font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:all .18s var(--ease); }
.ms-btn:hover { border-color:var(--inmega-bright); background:rgba(255,255,255,.09); }

/* Overlay de recuperación */
.forgot-overlay { position:absolute; inset:0; display:grid; place-items:center; z-index:5;
  background:rgba(6,18,12,.6); backdrop-filter:blur(4px); border-radius:24px; animation:pop .3s var(--ease) both; }
.forgot-overlay .card.single .formside { padding:40px 40px; }

@media (max-width:820px) {
  .auth .card, .auth .card.single { grid-template-columns:1fr; max-width:430px; }
  .welcome { display:none; }
  .flip, .face { position:relative; min-height:0; }
  .flip { transform:none !important; }
  .face { transform:none; visibility:visible; }
  .face.back { display:none; }
  .flip.flipped .face.front { display:none; }
  .flip.flipped .face.back { display:block; transform:none; visibility:visible; }
  .formside { padding:38px 30px; }
}

/* ===========================================================
   LAYOUT (sidebar + topbar)
   =========================================================== */
.layout { display:grid; grid-template-columns:256px 1fr; min-height:100vh; transition:grid-template-columns .3s var(--ease); }
.layout.collapsed { grid-template-columns:76px 1fr; }
.layout.collapsed .brand-text, .layout.collapsed .nav-item span, .layout.collapsed .side-progress, .layout.collapsed .su-info { display:none; }
.sidebar { background:linear-gradient(180deg,#0E281D 0%,#0A1C14 100%); border-right:1px solid var(--side-line);
  display:flex; flex-direction:column; padding:16px 14px; gap:8px; position:sticky; top:0; height:100vh; }
.side-top { display:flex; align-items:center; justify-content:space-between; padding:6px 6px 14px; }
.brand { display:flex; align-items:center; gap:11px; overflow:hidden; }
.brand-mark { width:38px; height:38px; border-radius:11px; flex-shrink:0; background:linear-gradient(135deg,var(--inmega),var(--inmega-deep));
  color:#fff; display:grid; place-items:center; font-family:'Sora'; font-weight:800; font-size:14px; box-shadow:0 6px 16px rgba(14,107,58,.4); }
.brand-text { display:flex; flex-direction:column; line-height:1.2; white-space:nowrap; }
.brand-text strong { color:#fff; font-family:'Sora'; font-size:14px; }
.brand-text span { color:var(--inmega-bright); font-size:11px; font-weight:600; }
.collapse-btn { background:transparent; border:none; color:var(--side-text-2); padding:6px; border-radius:8px; display:grid; place-items:center; }
.collapse-btn:hover { background:rgba(255,255,255,.06); color:#fff; }
.side-nav { display:flex; flex-direction:column; gap:3px; margin-top:4px; }
.nav-item { display:flex; align-items:center; gap:13px; padding:11px 13px; border-radius:11px; border:none; background:transparent;
  color:var(--side-text); font-size:14px; font-weight:500; white-space:nowrap; transition:background .18s, color .18s; position:relative; text-align:left; }
.nav-item:hover { background:rgba(255,255,255,.05); color:#fff; }
.nav-item .icon { opacity:.85; }
.nav-item.active { background:linear-gradient(100deg,rgba(43,174,102,.22),rgba(43,174,102,.08)); color:#fff; font-weight:600; }
.nav-item.active::before { content:''; position:absolute; left:-14px; top:50%; transform:translateY(-50%); width:3px; height:22px; background:var(--inmega-bright); border-radius:0 4px 4px 0; }
.nav-item.active .icon { opacity:1; color:var(--inmega-bright); }
.side-progress { margin-top:auto; padding:14px 12px; background:rgba(255,255,255,.04); border-radius:12px; border:1px solid var(--side-line); }
.sp-row { display:flex; justify-content:space-between; font-size:11.5px; color:var(--side-text); margin-bottom:8px; }
.sp-row b { color:#fff; }
.side-progress .track { background:rgba(255,255,255,.1); }
.side-user { display:flex; align-items:center; gap:11px; padding:10px; margin-top:8px; border-top:1px solid var(--side-line); }
.su-av { width:36px; height:36px; border-radius:10px; background:rgba(43,174,102,.18); color:var(--inmega-bright); display:grid; place-items:center; font-weight:700; font-size:13px; flex-shrink:0; border:1px solid rgba(43,174,102,.25); }
.su-info { display:flex; flex-direction:column; line-height:1.25; overflow:hidden; flex:1; }
.su-info strong { color:#fff; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.su-info span { color:var(--side-text-2); font-size:11px; }
.su-logout { background:transparent; border:none; color:var(--side-text-2); padding:7px; border-radius:8px; }
.su-logout:hover { background:rgba(214,70,59,.16); color:#ff8a7e; }
.content { display:flex; flex-direction:column; min-width:0; }
.topbar { height:64px; background:rgba(255,255,255,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:30; }
.tb-left { font-size:14px; color:var(--slate); font-weight:500; }
.tb-right { display:flex; align-items:center; gap:12px; }
.chip { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--slate); background:var(--surface-2); border:1px solid var(--line); padding:7px 12px; border-radius:9px; }
.chip b { color:var(--ink); font-weight:700; } .chip .icon { color:var(--inmega); }
.tb-av { width:38px; height:38px; border-radius:11px; border:none; display:grid; place-items:center; background:linear-gradient(135deg,var(--inmega),var(--inmega-deep)); color:#fff; font-weight:700; font-size:13px; box-shadow:var(--sh-emerald); transition:transform .2s; }
.tb-av:hover { transform:translateY(-1px) scale(1.04); }
.page { padding:28px; max-width:1280px; width:100%; margin:0 auto; }

/* ---------- Dashboard ---------- */
.hero { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:32px 34px; margin-bottom:22px; overflow:hidden; background:linear-gradient(120deg,#fff 0%,#fff 55%,#F1FAF4 100%); }
.hero-eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--inmega-deep); text-transform:uppercase; letter-spacing:.06em; }
.hero h1 { font-size:30px; margin:12px 0 8px; }
.hero p { font-size:14.5px; color:var(--slate); max-width:520px; } .hero p b { color:var(--ink); }
.hero-actions { display:flex; gap:11px; margin-top:20px; flex-wrap:wrap; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px; }
.stat { display:flex; align-items:center; gap:14px; padding:18px; }
.stat:hover { transform:translateY(-2px); box-shadow:var(--sh); }
.stat-ico { width:46px; height:46px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; background:linear-gradient(135deg,rgba(43,174,102,.14),rgba(43,174,102,.06)); color:var(--inmega-deep); }
.stat-val { font-family:'Sora'; font-size:24px; font-weight:700; color:var(--ink); line-height:1.1; }
.stat-lbl { font-size:12.5px; color:var(--ink-2); font-weight:600; margin-top:2px; }
.stat-sub { font-size:11.5px; color:var(--muted); }
.grid-2 { display:grid; grid-template-columns:1.5fr 1fr; gap:24px; }
.sec-head { margin-bottom:14px; } .sec-head h3 { font-size:17px; }
.course-list { display:flex; flex-direction:column; gap:11px; }
.mini-course { text-align:left; padding:16px 18px; display:flex; flex-direction:column; gap:8px; border:1px solid var(--line); background:var(--surface); }
.mini-course:hover { transform:translateX(3px); border-color:var(--inmega); box-shadow:var(--sh); }
.mc-top { display:flex; align-items:center; justify-content:space-between; } .mc-top .icon { color:var(--muted); }
.mini-course:hover .mc-top .icon { color:var(--inmega); }
.mini-course strong { font-size:14.5px; color:var(--ink); }
.mc-desc { font-size:12.5px; color:var(--slate); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mc-foot { display:flex; align-items:center; gap:12px; } .mc-foot .track { flex:1; }
.mc-foot span { font-size:11.5px; color:var(--slate); font-weight:600; white-space:nowrap; }
.empty { padding:26px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.empty p { color:var(--slate); font-size:13.5px; }
.lb-row { display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-2); }
.lb-row:last-of-type { border-bottom:none; }
.lb-row.me { background:rgba(43,174,102,.06); border-radius:10px; padding:11px 12px; border-bottom:none; }
.lb-rank { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--surface-2); color:var(--slate); flex-shrink:0; }
.lb-rank.r1 { background:#FEF3C7; color:#B45309; } .lb-rank.r2 { background:#F1F5F9; color:#64748B; } .lb-rank.r3 { background:#FFEDD5; color:#C2410C; }
.lb-av { width:32px; height:32px; border-radius:9px; background:rgba(43,174,102,.12); color:var(--inmega-deep); display:grid; place-items:center; font-size:12px; font-weight:700; flex-shrink:0; }
.lb-info { flex:1; min-width:0; line-height:1.25; }
.lb-info strong { font-size:13px; color:var(--ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-info span { font-size:11px; color:var(--muted); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-xp { font-size:12.5px; font-weight:700; color:var(--inmega-deep); white-space:nowrap; }

/* ---------- Catálogo ---------- */
.head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:18px; flex-wrap:wrap; }
.head h2 { font-size:23px; } .head p { font-size:13.5px; margin-top:4px; }
.search { width:280px; max-width:100%; }
.filters { display:flex; align-items:center; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.fbtn { padding:8px 16px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--slate); font-size:13px; font-weight:600; transition:all .18s var(--ease); }
.fbtn:hover { border-color:var(--inmega); color:var(--inmega-deep); }
.fbtn.active { background:linear-gradient(135deg,var(--inmega),var(--inmega-deep)); color:#fff; border-color:transparent; box-shadow:var(--sh-emerald); }
.count { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:16px; }
.cc { padding:22px; display:flex; flex-direction:column; cursor:pointer; }
.cc:hover { transform:translateY(-4px); border-color:var(--inmega); box-shadow:var(--sh-lg); }
.cc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.cc-num { font-size:10.5px; font-weight:700; letter-spacing:.14em; color:var(--inmega-deep); }
.cc h3 { font-size:16px; line-height:1.32; margin-bottom:6px; }
.cc-aud { font-size:11.5px; color:var(--slate); font-weight:600; margin-bottom:10px; }
.cc-desc { font-size:12.8px; color:var(--slate); line-height:1.55; flex:1; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cc-prog { margin-bottom:14px; }
.cc-prow { display:flex; justify-content:space-between; font-size:11.5px; color:var(--slate); margin-bottom:7px; } .cc-prow b { color:var(--ink); }
.pct { font-weight:700; color:var(--inmega-deep); display:inline-flex; align-items:center; gap:4px; } .pct.done { color:var(--ok); }
.cc-actions { display:flex; gap:8px; }
.cc-enter { flex:1; }
.cc-link { width:44px; padding:0; flex-shrink:0; }

.pager { display:flex; align-items:center; gap:6px; justify-content:center; margin-top:26px; }
.pg-btn,.pg-num { min-width:36px; height:36px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--slate); font-weight:600; font-size:13px; display:grid; place-items:center; transition:all .18s var(--ease); }
.pg-btn:hover:not(:disabled),.pg-num:hover { border-color:var(--inmega); color:var(--inmega-deep); }
.pg-num.active { background:linear-gradient(135deg,var(--inmega),var(--inmega-deep)); color:#fff; border-color:transparent; box-shadow:var(--sh-emerald); }
.pg-btn:disabled { opacity:.4; cursor:not-allowed; }

/* ---------- Detalle de curso ---------- */
.ch { display:flex; justify-content:space-between; gap:28px; padding:28px 32px; margin:16px 0 26px; flex-wrap:wrap; }
.ch-breadcrumb { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--inmega-deep); font-weight:700; margin-bottom:8px; }
.ch h1 { font-size:26px; margin-bottom:10px; }
.ch p { font-size:14px; color:var(--slate); line-height:1.65; max-width:620px; }
.objectives { display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; }
.obj { font-size:11.5px; background:rgba(43,174,102,.1); color:var(--inmega-deep); font-weight:600; padding:6px 12px; border-radius:99px; }
.ch-side { display:flex; flex-direction:column; align-items:center; gap:12px; }
.ch-status { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:var(--warn); background:rgba(201,135,31,.12); padding:6px 13px; border-radius:99px; }
.ch-status.complete { color:var(--ok); background:rgba(31,157,87,.12); }
.sec-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink); margin-bottom:16px; display:flex; align-items:center; gap:9px; }
.sec-title::before { content:''; width:4px; height:15px; background:var(--inmega); border-radius:2px; }
.ex-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:15px; }
.ex { padding:20px; display:flex; flex-direction:column; transition:all .2s var(--ease); }
.ex:hover { transform:translateY(-2px); box-shadow:var(--sh); }
.ex.done { border-color:rgba(43,174,102,.4); background:linear-gradient(180deg,rgba(43,174,102,.05),transparent 40%); }
.ex-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.ex-num { font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--inmega-deep); }
.ex h4 { font-size:15px; margin-bottom:7px; }
.ex-desc { font-size:12.8px; color:var(--slate); line-height:1.55; margin-bottom:12px; flex:1; }
.ex-goal { display:flex; align-items:flex-start; gap:8px; font-size:12px; color:var(--ink-2); background:var(--surface-2); padding:9px 11px; border-radius:9px; margin-bottom:12px; }
.ex-goal .icon { color:var(--inmega-deep); flex-shrink:0; margin-top:1px; }
.ex-meta { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--slate); margin-bottom:14px; }
.ex-meta span { display:inline-flex; align-items:center; gap:6px; } .ex-xp { font-weight:700; color:var(--inmega-deep); }

/* ---------- Sandbox profesional ---------- */
.sandbox-pro { max-width:1380px; margin:0 auto; display:flex; flex-direction:column; gap:22px; }
.sp-headline { padding:2px 0 0; }
.sp-headline h2 { font-size:31px; line-height:1.12; margin:7px 0 8px; }
.sp-headline p { max-width:900px; font-size:15px; line-height:1.7; }
.eyebrow { display:inline-flex; align-items:center; gap:7px; color:var(--info); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.sp-card { overflow:hidden; border-radius:18px; }
.sp-tabs { display:flex; gap:8px; padding:12px; border-bottom:1px solid var(--line); background:#F8FAFC; overflow:auto; }
.sp-tab { border:1px solid transparent; background:transparent; color:#506174; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:12px; font-size:13px; font-weight:800; white-space:nowrap; transition:background .18s, color .18s, border-color .18s, box-shadow .18s; }
.sp-tab:hover { background:#fff; border-color:#DDE6EF; color:#0F172A; }
.sp-tab.active { background:#EFF6FF; color:#1D4ED8; border-color:#BFDBFE; box-shadow:0 1px 2px rgba(37,99,235,.08); }
.sp-body { padding:26px; display:flex; flex-direction:column; gap:19px; }
.sp-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.sp-title-row.compact { align-items:center; }
.sp-title-row h3 { font-size:22px; margin-bottom:5px; }
.sp-title-row p { color:var(--slate); font-size:13.5px; line-height:1.6; max-width:860px; }
.sp-label { color:#64748B; font-size:11px; text-transform:uppercase; letter-spacing:.12em; font-weight:900; }
.sp-case-block { display:flex; flex-direction:column; gap:9px; }
.sp-case-list { display:flex; gap:8px; flex-wrap:wrap; }
.sp-chip { border:1px solid #E2E8F0; background:#fff; color:#475569; border-radius:999px; padding:8px 12px; font-size:12.5px; font-weight:800; transition:background .18s, color .18s, border-color .18s, box-shadow .18s; }
.sp-chip:hover { border-color:#BFDBFE; color:#1D4ED8; }
.sp-chip.active { background:#0F172A; border-color:#0F172A; color:#fff; box-shadow:0 8px 20px rgba(15,23,42,.12); }
.sp-case { display:flex; align-items:flex-start; gap:14px; background:linear-gradient(180deg,#F8FAFC,#FFFFFF); border:1px solid #E2E8F0; border-radius:16px; padding:18px; }
.sp-case-icon { width:40px; height:40px; flex:0 0 40px; border-radius:12px; display:grid; place-items:center; color:#1D4ED8; background:#EFF6FF; border:1px solid #DBEAFE; }
.sp-case b { display:block; font-family:'Sora'; font-size:15px; margin-bottom:6px; }
.sp-case p { color:#475569; font-size:13.2px; line-height:1.65; margin-top:3px; }
.sp-case strong { color:#334155; }
.sp-file-panel { display:flex; flex-direction:column; gap:10px; }
.sp-file-panel input[type="file"] { width:1px; height:1px; opacity:0; position:absolute; pointer-events:none; }
.sp-file-drop { min-height:140px; border:1.5px dashed #CBD5E1; background:#F8FAFC; color:#64748B; border-radius:16px; padding:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; cursor:pointer; transition:border-color .18s, background .18s, color .18s; }
.sp-file-drop:hover { border-color:#2563EB; background:#EFF6FF; color:#1D4ED8; }
.sp-file-drop strong { font-family:'Sora'; color:#0F172A; font-size:15px; }
.sp-file-drop span { max-width:680px; font-size:13px; line-height:1.55; }
.sp-file-meta { border:1px solid #E2E8F0; background:#fff; border-radius:14px; padding:14px; display:flex; flex-direction:column; gap:10px; }
.sp-file-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sp-file-top > div { display:flex; align-items:center; gap:10px; color:#2563EB; }
.sp-file-top b { display:block; color:#0F172A; font-size:13px; }
.sp-file-top span { color:#64748B; font-size:12px; }
.sp-file-meta p, .sp-file-columns { color:#64748B; font-size:12.5px; line-height:1.55; }
.sp-file-columns b { color:#334155; }
.sp-file-meta pre { max-height:180px; overflow:auto; white-space:pre-wrap; background:#F8FAFC; border:1px solid #E2E8F0; border-radius:12px; padding:12px; font-size:12px; line-height:1.55; color:#334155; }
.sp-editor { display:flex; flex-direction:column; gap:8px; }
.sp-prompt { min-height:250px; margin-bottom:0; background:#fff; border-color:#D9E2EC; font-size:13.2px; }
.sp-prompt:focus { border-color:#2563EB; box-shadow:0 0 0 4px rgba(37,99,235,.12); }
.sp-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sp-results { display:flex; flex-direction:column; gap:18px; }
.sp-empty { padding:24px; display:flex; align-items:center; gap:12px; color:#92400E; background:#FFFBEB; border-color:#FDE68A; }
.sp-result { padding:24px; }
.sp-result-head { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.sp-result-head h3 { font-size:28px; margin:5px 0 4px; }
.sp-score { width:104px; height:104px; border-radius:26px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#F8FAFC; border:1px solid #E2E8F0; color:#0F172A; flex-shrink:0; }
.sp-score strong { font-family:'Sora'; font-size:34px; line-height:1; }
.sp-score span { color:#64748B; font-size:12px; font-weight:800; }
.sp-score.excellent { background:#ECFDF5; border-color:#A7F3D0; color:#047857; }
.sp-score.good { background:#EFF6FF; border-color:#BFDBFE; color:#1D4ED8; }
.sp-score.mid { background:#FFFBEB; border-color:#FDE68A; color:#B45309; }
.sp-score.low { background:#FEF2F2; border-color:#FECACA; color:#B91C1C; }
.sp-meter { height:10px; border-radius:999px; background:#E2E8F0; overflow:hidden; margin:18px 0 20px; }
.sp-meter i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#2563EB,#22C55E); transition:width .6s var(--ease); }
.sp-rubric { display:grid; grid-template-columns:repeat(4,minmax(180px,1fr)); gap:10px; }
.sp-rubric-item { border:1px solid #E2E8F0; background:#fff; border-radius:14px; padding:13px; min-height:122px; }
.sp-rubric-item.ok { border-color:#BBF7D0; background:#F0FDF4; }
.sp-rubric-item.pending { background:#F8FAFC; }
.sp-rubric-item > div { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:9px; }
.sp-rubric-item b { color:#0F172A; font-size:12.5px; }
.sp-rubric-item span { color:#64748B; font-size:11.5px; font-weight:900; }
.sp-rubric-item em { display:block; height:6px; background:#E2E8F0; border-radius:99px; overflow:hidden; margin-bottom:9px; }
.sp-rubric-item em i { display:block; height:100%; background:#2563EB; border-radius:inherit; }
.sp-rubric-item.ok em i { background:#16A34A; }
.sp-rubric-item p { color:#64748B; font-size:12px; line-height:1.45; }
.sp-two { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.sp-advice { padding:22px; }
.sp-advice h4 { display:flex; align-items:center; gap:9px; margin-bottom:12px; font-size:15px; }
.sp-advice ul { margin-left:18px; color:#475569; font-size:13.2px; line-height:1.75; }
.sp-improved { padding:24px; }
.sp-improved-text { min-height:340px; margin:16px 0 0; background:#F8FAFC; }
.hidden { display:none !important; }

@media (max-width:1180px) {
  .sp-rubric { grid-template-columns:repeat(2,minmax(180px,1fr)); }
}
@media (max-width:900px) {
  .sp-two { grid-template-columns:1fr; }
  .sp-result-head { align-items:flex-start; }
}
@media (max-width:640px) {
  .sp-headline h2 { font-size:27px; }
  .sp-body, .sp-result, .sp-improved { padding:18px; }
  .sp-title-row, .sp-result-head { flex-direction:column; }
  .sp-actions .btn { width:100%; }
  .sp-score { width:100%; height:auto; padding:18px; border-radius:18px; }
  .sp-rubric { grid-template-columns:1fr; }
}

/* ---------- Quiz ---------- */
.wrap { max-width:760px; margin:0 auto; }
.quiz { padding:30px 32px; }
.quiz-top { display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.q-count { font-size:12px; color:var(--slate); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; } .q-count b { color:var(--inmega-deep); }
.q-track { flex:1; height:6px; background:#E7EDE9; border-radius:99px; overflow:hidden; }
.q-track i { display:block; height:100%; background:linear-gradient(90deg,var(--inmega),var(--inmega-deep)); border-radius:99px; transition:width .5s var(--ease); }
.q-text { font-size:18px; line-height:1.45; margin-bottom:22px; font-family:'Inter'; font-weight:600; }
.options { display:flex; flex-direction:column; gap:11px; }
.opt { display:flex; align-items:center; gap:13px; padding:15px 16px; background:var(--surface); border:1px solid var(--line); border-radius:12px; text-align:left; font-size:13.5px; color:var(--ink); line-height:1.5; transition:all .18s var(--ease); }
.opt:hover { border-color:var(--inmega); background:var(--surface-2); }
.key { width:30px; height:30px; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); color:var(--slate); display:grid; place-items:center; font-weight:700; font-size:13px; flex-shrink:0; }
.otext { flex:1; } .oico { flex-shrink:0; }
.opt.correct { background:rgba(31,157,87,.1); border-color:var(--ok); color:#1a7d46; } .opt.correct .key { background:var(--ok); color:#fff; border-color:transparent; }
.opt.wrong { background:rgba(214,70,59,.08); border-color:var(--danger); color:#b23a30; } .opt.wrong .key { background:var(--danger); color:#fff; border-color:transparent; }
.opt.dim { opacity:.55; }
.quiz-foot { display:flex; align-items:center; justify-content:space-between; margin-top:24px; gap:14px; }
.verdict { font-size:13px; font-weight:600; } .verdict.ok { color:var(--ok); } .verdict.no { color:var(--danger); }
.result { padding:44px 32px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; }
.result-ring { width:84px; height:84px; border-radius:50%; display:grid; place-items:center; background:rgba(201,135,31,.12); color:var(--warn); animation:pop .4s var(--ease) both; }
.result-ring.pass { background:rgba(43,174,102,.12); color:var(--inmega-deep); }
.result h3 { font-size:24px; } .result-score { font-family:'Sora'; font-size:30px; font-weight:800; color:var(--inmega-deep); } .result-score small { font-size:14px; color:var(--muted); font-weight:600; }
.result p { font-size:13.5px; color:var(--slate); max-width:380px; }

/* ---------- Certificados ---------- */
.up-form { margin-bottom:22px; }
.uf-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; } .uf-head h4 { font-size:15px; }
.uf-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.dropzone { border:2px dashed var(--line); border-radius:14px; padding:32px; text-align:center; transition:all .2s var(--ease); display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted); margin-bottom:16px; }
.dropzone.over { border-color:var(--inmega); background:rgba(43,174,102,.05); }
.dropzone.has { padding:18px; border-style:solid; }
.dropzone p { font-size:13.5px; color:var(--slate); } .dropzone small { font-size:12px; }
.link { color:var(--inmega-deep); font-weight:700; cursor:pointer; } .link:hover { text-decoration:underline; }
.file-chip { display:flex; align-items:center; gap:13px; width:100%; } .file-chip > .icon { color:var(--inmega-deep); flex-shrink:0; }
.file-chip div { flex:1; text-align:left; line-height:1.3; min-width:0; }
.file-chip strong { font-size:13.5px; color:var(--ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-chip span { font-size:12px; color:var(--muted); }
.cert-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; }
.cert { display:flex; align-items:center; gap:14px; padding:16px 18px; }
.cert:hover { transform:translateY(-2px); box-shadow:var(--sh); }
.cert-ico { width:48px; height:48px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; }
.cert-ico.pdf { background:rgba(214,70,59,.1); color:var(--danger); } .cert-ico.img { background:rgba(37,99,235,.1); color:var(--info); }
.cert-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.cert-body strong { font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cert-body .badge { align-self:flex-start; } .cert-meta { font-size:11.5px; color:var(--muted); }
.cert-actions { display:flex; gap:6px; flex-shrink:0; }
.ic-btn { width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--surface); color:var(--slate); display:grid; place-items:center; transition:all .18s; }
.ic-btn:hover { border-color:var(--inmega); color:var(--inmega-deep); }
.ic-btn.danger:hover { border-color:var(--danger); color:var(--danger); background:#fdecea; }
.empty-ico { width:70px; height:70px; border-radius:18px; display:grid; place-items:center; background:rgba(43,174,102,.1); color:var(--inmega-deep); }
.empty h4 { font-size:17px; }

/* ---------- Perfil ---------- */
.profile { text-align:center; }
.avatar { width:92px; height:92px; border-radius:24px; margin:0 auto 14px; display:grid; place-items:center; background:linear-gradient(135deg,var(--inmega),var(--inmega-deep)); color:#fff; font-family:'Sora'; font-weight:800; font-size:30px; box-shadow:var(--sh-emerald); }
.profile h3 { font-size:18px; }
.role { font-size:11.5px; color:var(--inmega-deep); text-transform:uppercase; letter-spacing:.08em; font-weight:700; margin-top:4px; }
.dept { font-size:12px; color:var(--muted); margin-top:6px; }
.level { margin-top:20px; text-align:left; }
.level-row { display:flex; justify-content:space-between; font-size:11.5px; color:var(--slate); font-weight:600; margin-bottom:7px; }
.facts { margin-top:18px; display:flex; flex-direction:column; gap:10px; text-align:left; background:var(--surface-2); padding:16px; border-radius:12px; }
.fact { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--slate); } .fact .icon { color:var(--inmega-deep); } .fact b { color:var(--ink); margin-left:auto; }
.mini-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.ms { padding:18px; text-align:center; } .ms:hover { transform:translateY(-2px); box-shadow:var(--sh); }
.ms-v { font-family:'Sora'; font-size:24px; font-weight:800; color:var(--inmega-deep); } .ms-l { font-size:11.5px; color:var(--slate); margin-top:3px; }
.ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.ach { padding:18px 14px; text-align:center; opacity:.5; filter:grayscale(.4); transition:all .25s var(--ease); }
.ach.on { opacity:1; filter:none; border-color:rgba(43,174,102,.35); } .ach:hover { transform:translateY(-2px); }
.ach-ico { width:46px; height:46px; border-radius:13px; margin:0 auto 10px; display:grid; place-items:center; background:var(--surface-2); color:var(--muted); }
.ach.on .ach-ico { background:rgba(43,174,102,.12); color:var(--inmega-deep); }
.ach-name { font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.ach-state { font-size:10.5px; color:var(--muted); margin-top:6px; display:inline-flex; align-items:center; gap:4px; } .ach.on .ach-state { color:var(--inmega-deep); font-weight:600; }
.next { display:flex; align-items:center; gap:18px; background:linear-gradient(120deg,#fff,#F1FAF4); }
.next-badge { flex-shrink:0; padding:14px 18px; border-radius:12px; font-family:'Sora'; font-weight:800; font-size:15px; background:linear-gradient(135deg,var(--inmega),var(--inmega-deep)); color:#fff; box-shadow:var(--sh-emerald); }
.next p { font-size:13.5px; color:var(--slate); line-height:1.6; } .next p b { color:var(--inmega-deep); }
.anim-up > .grid { display:grid; grid-template-columns:320px 1fr; gap:22px; }

/* ---------- Admin ---------- */
.ad-table-wrap { overflow-x:auto; padding:6px; }
.ad-table { width:100%; border-collapse:collapse; font-size:13px; min-width:720px; }
.ad-table thead th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; padding:12px 14px; border-bottom:1px solid var(--line); }
.ad-table td { padding:13px 14px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.ad-table tbody tr:last-child td { border-bottom:none; }
.ad-table tbody tr:hover { background:var(--surface-2); }
.ad-user { display:flex; align-items:center; gap:11px; }
.ad-av { width:36px; height:36px; border-radius:10px; background:rgba(43,174,102,.12); color:var(--inmega-deep); display:grid; place-items:center; font-weight:700; font-size:12px; flex-shrink:0; }
.ad-user div { line-height:1.25; min-width:0; }
.ad-user strong { font-size:13px; color:var(--ink); display:block; }
.ad-user span { font-size:11.5px; color:var(--muted); }
.ad-dept { color:var(--slate); }
.ad-prog { display:flex; align-items:center; gap:10px; } .ad-prog span { font-size:11.5px; color:var(--slate); font-weight:600; white-space:nowrap; }
.ad-num { font-weight:700; color:var(--ink); }
.ad-empty { text-align:center; color:var(--muted); padding:30px; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:980px) { .grid-2 { grid-template-columns:1fr; } }
@media (max-width:900px) { .sb-grid { grid-template-columns:1fr; } .anim-up > .grid { grid-template-columns:1fr; } }
@media (max-width:880px) { .stats { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) {
  .layout { grid-template-columns:72px 1fr; }
  .brand-text, .nav-item span, .side-progress, .su-info { display:none; }
  .uf-grid { grid-template-columns:1fr; }
}
@media (max-width:640px) { .hero .ring { display:none; } .mini-stats { grid-template-columns:repeat(2,1fr); } .tb-right .chip { display:none; } .grid2 { grid-template-columns:1fr; } }

/* ===========================================================
   PRODUCCIÓN V5 · navegación superior, ejercicios y admin funcional
   =========================================================== */
:root {
  --inmega:#2563EB; --inmega-bright:#60A5FA; --inmega-deep:#1D4ED8; --inmega-dark:#0F172A;
  --bg:#F5F7FB; --surface-2:#F8FAFC; --line:#E2E8F0; --line-2:#EDF2F7;
  --ink:#111827; --ink-2:#374151; --slate:#64748B; --muted:#94A3B8;
  --sh-emerald:0 10px 24px rgba(37,99,235,.18);
}
::selection { background:var(--inmega); color:#fff; }
body { background:var(--bg); }
.app-shell { min-height:100%; display:flex; flex-direction:column; }
.app-topbar { height:76px; display:flex; align-items:center; gap:20px; padding:0 28px; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.brand-light { min-width:230px; }
.brand-mark.neutral { background:#111827; box-shadow:none; }
.brand-text-light { display:flex; flex-direction:column; line-height:1.15; }
.brand-text-light strong { color:var(--ink); font-family:'Sora'; font-size:15px; }
.brand-text-light span { color:var(--slate); font-size:12px; font-weight:600; }
.top-nav { display:flex; align-items:center; gap:8px; flex:1; min-width:0; overflow-x:auto; }
.top-nav-item { display:inline-flex; align-items:center; gap:9px; height:42px; padding:0 14px; border:1px solid transparent; background:transparent; color:#64748B; font-size:13.5px; font-weight:700; border-radius:12px; white-space:nowrap; transition:all .18s var(--ease); }
.top-nav-item:hover { background:#F1F5F9; color:#0F172A; }
.top-nav-item.active { background:#EEF4FF; border-color:#D8E6FF; color:#111827; box-shadow:var(--sh-sm); }
.top-nav-item.active .icon { color:var(--inmega); }
.top-progress { display:flex; align-items:center; gap:10px; min-width:170px; color:var(--slate); font-size:13px; }
.top-progress .track { flex:1; height:8px; }
.icon-btn { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; border:1px solid var(--line); background:#fff; color:var(--slate); }
.icon-btn:hover { color:var(--ink); border-color:#CBD5E1; }
.page-wide { max-width:1440px; padding:34px 36px; }
.tb-av, .avatar { background:linear-gradient(135deg,var(--av,#2563EB),color-mix(in srgb,var(--av,#2563EB) 72%,#000)); color:#fff; box-shadow:0 10px 26px color-mix(in srgb,var(--av,#2563EB) 28%,transparent); }
.lb-av, .ad-av { background:color-mix(in srgb,var(--av,#2563EB) 12%,#fff); color:var(--av,#2563EB); border:1px solid color-mix(in srgb,var(--av,#2563EB) 25%,#fff); }
.badge-basic { background:#E0F2FE; color:#0369A1; }
.badge-inter { background:#FEF3C7; color:#B45309; }
.badge-hard { background:#FCE7F3; color:#BE185D; }
.badge-adv { background:#EDE9FE; color:#6D28D9; }
.badge-biz,.badge-emerald { background:#ECFDF5; color:#047857; }
.btn-primary { background:linear-gradient(135deg,#2563EB,#1D4ED8); box-shadow:var(--sh-emerald); }
.btn-primary:hover { box-shadow:0 12px 30px rgba(37,99,235,.28); }
.stat-ico { background:#EEF4FF; color:#1D4ED8; }
.hero { background:linear-gradient(120deg,#fff 0%,#fff 62%,#F8FAFC 100%); }
.hero-eyebrow, .cc-num, .ch-breadcrumb, .ex-num, .pct, .ex-xp, .role, .fact .icon, .ring-label strong { color:#1D4ED8; }
.track > i, .ring-fg { background:#2563EB; stroke:#2563EB; }
.catalog-tools { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:22px; }
.catalog-tools .filters { margin-bottom:0; }
.catalog-tools .select { max-width:280px; }
.challenge-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:18px; }
.challenge-card { overflow:hidden; display:flex; flex-direction:column; cursor:pointer; }
.challenge-card:hover { transform:translateY(-4px); box-shadow:var(--sh-lg); border-color:#CBD5E1; }
.challenge-card.done { border-color:#86EFAC; }
.challenge-cover { min-height:150px; display:flex; flex-direction:column; justify-content:space-between; padding:18px; background:linear-gradient(135deg,#0F172A,#1E293B); color:#fff; position:relative; overflow:hidden; }
.challenge-cover::after { content:''; position:absolute; inset:auto -30px -45px auto; width:160px; height:160px; border-radius:50%; background:rgba(37,99,235,.35); }
.challenge-cover strong { color:#fff; font-family:'Sora'; font-size:20px; line-height:1.2; max-width:90%; position:relative; z-index:1; }
.challenge-cover small,.cover-course { position:relative; z-index:1; color:#CBD5E1; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.challenge-body { padding:20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.challenge-tags { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.challenge-body h3 { font-size:18px; line-height:1.3; }
.challenge-body p { color:var(--slate); font-size:13.5px; line-height:1.6; flex:1; }
.challenge-meta { display:flex; justify-content:space-between; gap:10px; color:var(--slate); font-size:12.5px; font-weight:700; }
.challenge-meta span { display:inline-flex; align-items:center; gap:6px; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin:18px 0 26px; border-bottom:1px solid var(--line); }
.step { display:flex; align-items:center; gap:12px; padding:0 0 20px; color:#9CA3AF; font-weight:800; position:relative; }
.step::after { content:''; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:transparent; }
.step b { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#EEF2F7; color:#94A3B8; }
.step.active { color:#111827; }
.step.active b { background:#111827; color:#fff; }
.step.active::after { background:#2563EB; }
.step.done b { background:#16A34A; }
.exercise-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start; }
.exercise-main { padding:34px; }
.exercise-main h1 { font-size:clamp(32px,4vw,52px); line-height:1.05; margin:24px 0 18px; }
.lead { color:#64748B; font-size:18px; line-height:1.7; margin-bottom:24px; }
.brief-block { border:1px solid var(--line); border-radius:14px; padding:22px; margin:18px 0; background:#fff; }
.brief-block h3 { font-size:15px; margin-bottom:10px; }
.brief-block p { color:#475569; font-size:16px; line-height:1.75; }
.muted-block { background:#F8FAFC; }
.criteria-list { list-style:none; display:flex; flex-direction:column; gap:12px; margin:14px 0 22px; }
.criteria-list li { display:flex; align-items:flex-start; gap:10px; color:#475569; font-size:14.5px; }
.criteria-list .icon { color:#2563EB; margin-top:3px; }
.brief-actions { display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 28px; }
.solution-form { border-top:1px solid var(--line); padding-top:24px; margin-top:22px; display:flex; flex-direction:column; gap:13px; }
.textarea { resize:vertical; min-height:220px; line-height:1.55; }
.exercise-side { display:flex; flex-direction:column; gap:14px; position:sticky; top:96px; }
.side-stat span { display:block; color:#64748B; text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:800; }
.side-stat b { display:block; font-family:'Sora'; font-size:28px; margin-top:6px; }
.side-link { display:flex; align-items:center; justify-content:center; gap:10px; font-weight:800; color:#334155; }
.side-keywords h4 { margin-bottom:10px; }
.side-keywords p { display:flex; gap:7px; flex-wrap:wrap; }
.side-keywords span { display:inline-flex; padding:5px 9px; border-radius:8px; background:#F1F5F9; color:#475569; font-size:12px; font-weight:700; }
.review-box { margin-top:22px; border-radius:14px; padding:18px 20px; border:1px solid var(--line); }
.review-box.ok { background:#F0FDF4; border-color:#BBF7D0; }
.review-box.fail { background:#FFF7ED; border-color:#FED7AA; }
.review-box h4 { margin-bottom:8px; }
.review-box ul { padding-left:20px; color:#475569; }
.review-box p { margin-top:10px; color:#475569; }
.review-box.review-warning { background:#FEF2F2; border-color:#FECACA; }
.review-box.review-warning h4 { color:#B91C1C; display:flex; align-items:center; gap:8px; }
.solution-form .retry-note { margin-top:6px; margin-bottom:12px; font-size:13px; padding:10px 12px; background:#F0FDF4; border:1px solid #BBF7D0; border-radius:10px; color:#166534; }
.color-picker { margin-top:18px; padding:14px; border:1px solid var(--line); border-radius:14px; text-align:left; }
.color-picker span { display:block; font-size:12px; color:var(--slate); font-weight:800; margin-bottom:10px; text-transform:uppercase; letter-spacing:.06em; }
.color-picker div { display:flex; gap:9px; flex-wrap:wrap; }
.color-dot { width:30px; height:30px; border-radius:50%; border:3px solid #fff; outline:1px solid var(--line); background:var(--dot); box-shadow:var(--sh-sm); }
.color-dot.active { outline:3px solid #111827; }
.ad-detail-row td { background:#F8FAFC !important; }
.ad-detail { display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:14px; }
.ad-detail h4 { margin-bottom:10px; }
.detail-list { display:flex; flex-direction:column; gap:8px; }
.detail-item { padding:12px; border:1px solid var(--line); border-radius:12px; background:#fff; display:grid; grid-template-columns:1fr auto; gap:8px 12px; align-items:center; }
.detail-item strong { font-size:13px; color:var(--ink); }
.detail-item span { font-size:12px; color:var(--slate); font-weight:700; }
.detail-item .track { grid-column:1 / -1; height:6px; }
.cert-line { text-decoration:none; }
@media (max-width:1100px) { .app-topbar { flex-wrap:wrap; height:auto; padding:14px 18px; } .brand-light { min-width:auto; } .top-nav { order:3; width:100%; } .top-progress { display:none; } .exercise-layout { grid-template-columns:1fr; } .exercise-side { position:static; grid-row:auto; } }
@media (max-width:760px) { .page-wide { padding:22px 16px; } .steps { grid-template-columns:1fr; gap:8px; border-bottom:none; } .step { padding:0; } .step::after { display:none; } .catalog-tools .select { max-width:none; } .catalog-tools { align-items:stretch; } .catalog-tools > * { width:100%; } .ad-detail { grid-template-columns:1fr; } .challenge-grid { grid-template-columns:1fr; } }

/* ===========================================================
   PRODUCCIÓN V6 · ranking por periodo, material de ejercicio y simulador 120 min
   =========================================================== */
.fact-button { width:100%; border:0; cursor:pointer; font:inherit; text-align:left; }
.fact-button small { margin-left:auto; color:var(--slate); font-size:11px; font-weight:800; }
.rank-panel { margin-top:18px; }
.rank-panel-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.rank-panel-head h3 { font-family:'Sora'; font-size:18px; margin-bottom:4px; }
.rank-periods { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rank-period { border:1px solid var(--line); background:#fff; color:#475569; border-radius:10px; padding:8px 11px; font-weight:800; font-size:12px; }
.rank-period:hover { border-color:#CBD5E1; color:#0F172A; }
.rank-period.active { background:#EEF4FF; border-color:#BFDBFE; color:#1D4ED8; }
.rank-list { max-height:520px; overflow:auto; padding-right:4px; }
.side-material h4 { margin-bottom:8px; }
.side-material p { color:var(--slate); font-size:13px; line-height:1.55; margin-bottom:12px; }
.side-material div { display:flex; flex-direction:column; gap:8px; }
.intro-exam { padding:42px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.intro-exam h3 { font-size:28px; font-family:'Sora'; }
.intro-exam p { max-width:720px; color:var(--slate); font-size:15px; line-height:1.7; }
.exam-badge { display:inline-flex; align-items:center; justify-content:center; padding:9px 14px; border-radius:999px; background:#EEF4FF; color:#1D4ED8; font-weight:900; letter-spacing:.04em; text-transform:uppercase; font-size:12px; }
.exam-domains { display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin:4px 0 8px; }
.exam-domains span { padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:#475569; font-size:12px; font-weight:800; background:#fff; }
.exam-card .quiz-top { flex-wrap:wrap; }
.exam-card .q-track { width:100%; flex:0 0 100%; }
.exam-domain { display:inline-flex; align-items:center; justify-content:center; padding:7px 10px; border-radius:999px; background:#F8FAFC; border:1px solid var(--line); color:#475569; font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.exam-timer { margin-left:auto; font-family:'Sora'; font-weight:900; color:#111827; background:#fff7ed; border:1px solid #fed7aa; border-radius:12px; padding:8px 12px; min-width:86px; text-align:center; }
.opt.selected { border-color:#2563EB; background:#EEF4FF; box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.answered-count { color:var(--slate); font-size:12.5px; font-weight:800; }
.quiz-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.missed-list { width:100%; max-width:820px; text-align:left; margin-top:12px; border-top:1px solid var(--line); padding-top:18px; }
.missed-list h4 { margin-bottom:12px; }
.missed-list ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.missed-list li { padding:12px; border:1px solid var(--line); border-radius:12px; background:#F8FAFC; display:flex; flex-direction:column; gap:5px; }
.missed-list li b { color:#1D4ED8; font-size:12px; text-transform:uppercase; letter-spacing:.06em; }
.missed-list li span { color:#334155; font-weight:700; }
.missed-list li small { color:#64748B; line-height:1.45; }
@media (max-width:760px) { .rank-panel-head { flex-direction:column; } .exam-timer { margin-left:0; } .quiz-foot { align-items:stretch; flex-direction:column; } .quiz-actions { justify-content:stretch; } .quiz-actions .btn { flex:1; } }


/* ===========================================================
   HOTFIX V7 · restauración visual post-login
   Corrige conflicto del card de login sin tocar lógica ni datos.
   =========================================================== */
.app-shell .card {
  min-height:0;
  grid-template-columns:none;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--sh-sm);
  color:var(--ink);
}
.app-shell .hero { min-height:0; }
.app-shell .stat,
.app-shell .mini-course,
.app-shell .challenge-card,
.app-shell .ex,
.app-shell .cert,
.app-shell .quiz,
.app-shell .result,
.app-shell .empty { min-height:0; }

/* Sandbox · vista previa opcional para prompts visuales */
.sp-preview-card { padding:24px; }
.sp-preview-card h3 { display:flex; align-items:center; gap:9px; }
.sp-preview-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.sp-preview-note { margin-top:18px; border:1px solid #BFDBFE; background:#EFF6FF; color:#1E3A8A; border-radius:14px; padding:13px 14px; display:flex; align-items:flex-start; gap:9px; font-size:13px; line-height:1.55; }
.sp-preview-modal.hidden { display:none; }
.sp-preview-modal { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:22px; }
.sp-preview-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.68); backdrop-filter:blur(6px); }
.sp-preview-shell { position:relative; width:min(1240px,96vw); height:min(820px,92vh); background:#FFFFFF; border:1px solid #E2E8F0; border-radius:24px; overflow:hidden; box-shadow:0 40px 120px rgba(15,23,42,.35); display:flex; flex-direction:column; }
.sp-preview-topbar { min-height:78px; padding:16px 18px; border-bottom:1px solid #E2E8F0; background:#F8FAFC; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sp-preview-topbar h3 { font-size:18px; margin-top:4px; }
.sp-preview-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.sp-device { border:1px solid #D9E2EC; background:#FFFFFF; color:#475569; border-radius:999px; padding:8px 12px; font-weight:900; font-size:12px; cursor:pointer; transition:background .18s, color .18s, border-color .18s; }
.sp-device:hover { border-color:#BFDBFE; color:#1D4ED8; }
.sp-device.active { background:#0F172A; border-color:#0F172A; color:#FFFFFF; }
.sp-preview-stage { flex:1; min-height:0; background:linear-gradient(135deg,#E2E8F0,#F8FAFC); padding:18px; display:flex; justify-content:center; align-items:stretch; overflow:auto; }
.sp-preview-stage iframe { width:100%; max-width:100%; height:100%; min-height:600px; border:1px solid #CBD5E1; border-radius:18px; background:#FFFFFF; box-shadow:0 18px 45px rgba(15,23,42,.12); transition:max-width .2s ease; }
.sp-preview-stage iframe.is-tablet { max-width:820px; }
.sp-preview-stage iframe.is-mobile { max-width:390px; }

@media (max-width: 760px) {
  .sp-preview-card .sp-title-row.compact { align-items:flex-start; }
  .sp-preview-actions { width:100%; justify-content:stretch; }
  .sp-preview-actions .btn { width:100%; }
  .sp-preview-modal { padding:10px; }
  .sp-preview-shell { height:94vh; border-radius:18px; }
  .sp-preview-topbar { align-items:flex-start; flex-direction:column; }
  .sp-preview-tools { justify-content:flex-start; }
  .sp-preview-stage { padding:10px; }
}

/* ============================================================
   v20260611 · Funciones nuevas: bloqueo, ranking, certificado
   ============================================================ */

/* Editar nombre */
.profile-name{display:flex;align-items:center;gap:8px;justify-content:center}
.name-edit{border:1px solid var(--line);background:#fff;border-radius:8px;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--slate);transition:.15s}
.name-edit:hover{color:var(--blue);border-color:var(--blue);background:#eff4ff}

/* Cursos bloqueados */
.badge-locked{background:#f1f5f9;color:#64748b;border:1px solid #e2e8f0}
.locked-card{opacity:.62;filter:grayscale(.6)}
.locked-card .challenge-cover{background:linear-gradient(135deg,#475569,#334155)!important}
.locked-card .btn[disabled]{cursor:not-allowed;opacity:.8}

/* Admin · gestor de bloqueo */
.lock-manager .lock-head h3{display:flex;align-items:center;gap:8px}
.lock-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.lock-row{display:grid;grid-template-columns:1.6fr 1.2fr auto auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}
.lock-row.is-locked{background:#fef2f2;border-color:#fecaca}
.lock-info strong{display:block;font-size:14px}
.lock-info span{font-size:12px;color:var(--slate);display:flex;align-items:center;gap:4px}
.lock-date{max-width:230px;font-size:13px}
.lock-toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--slate);white-space:nowrap}
@media(max-width:820px){.lock-row{grid-template-columns:1fr;gap:8px}}

/* Ranking · medallas y cofres */
.lb-prize,.lb-prize-slot{font-size:16px;line-height:1}
.lb-prize-slot{width:22px;display:inline-flex;justify-content:center}
.rk-flyout{margin-top:16px;border-top:1px dashed var(--line);padding-top:16px}
.rk-flyout-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;flex-wrap:wrap;gap:6px}
.rk-flyout-head b{display:flex;align-items:center;gap:6px}
.rk-flyout-head span{font-size:12px;color:var(--slate)}
.rk-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.rk-pod{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;border-radius:14px;background:#f8fafc;border:1px solid var(--line);position:relative;animation:popIn .5s ease both}
.rk-pod-1{background:linear-gradient(160deg,#fffbeb,#fef3c7);border-color:#fcd34d;transform:translateY(-6px)}
.rk-pod-2{background:linear-gradient(160deg,#f8fafc,#eef2f7);border-color:#cbd5e1}
.rk-pod-3{background:linear-gradient(160deg,#fff7ed,#ffedd5);border-color:#fdba74}
.rk-pod.me{outline:2px solid var(--blue)}
.rk-pod .rk-medal{font-size:26px}
.rk-pod .rk-av{width:38px;height:38px;border-radius:50%;background:var(--av,#2563EB);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.rk-pod strong{font-size:13px} .rk-pod span{font-size:11px;color:var(--slate)}
@keyframes popIn{0%{opacity:0;transform:scale(.8) translateY(6px)}100%{opacity:1;transform:scale(1)}}
.rk-pod-1{animation-delay:.05s}.rk-pod-2{animation-delay:.12s}.rk-pod-3{animation-delay:.2s}
.rk-fly-list{max-height:320px;overflow:auto}

/* Evaluación · sección informativa */
.cert-info{display:flex;gap:18px;align-items:flex-start;padding:24px;margin-bottom:18px;background:linear-gradient(135deg,#eff6ff,#f5f3ff);border:1px solid #dbe5ff}
.cert-info-ico{flex:none;width:54px;height:54px;border-radius:16px;background:#fff;border:1px solid #dbe5ff;display:flex;align-items:center;justify-content:center;color:#f59e0b;animation:bulbGlow 2.4s ease-in-out infinite}
@keyframes bulbGlow{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.0);transform:translateY(0)}50%{box-shadow:0 0 22px 4px rgba(245,158,11,.35);transform:translateY(-3px)}}
.cert-info-body h3{margin-bottom:6px}
.cert-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.cii{display:flex;gap:10px;align-items:flex-start;padding:12px;background:#fff;border:1px solid var(--line);border-radius:12px}
.cii span{color:var(--blue);flex:none} .cii b{font-size:13.5px;display:block} .cii small{color:var(--slate);font-size:12.5px}
@media(max-width:760px){.cert-info{flex-direction:column}.cert-info-grid{grid-template-columns:1fr}}

/* Botón certificado */
.btn-cert{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;box-shadow:0 12px 28px rgba(217,119,6,.32);margin-right:10px;animation:certPulse 2s ease-in-out infinite}
.btn-cert:hover{filter:brightness(1.05)}
@keyframes certPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* Overlay del certificado 3D */
.cert-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(8,12,28,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.cert-overlay.show{opacity:1}
.cert-stage{perspective:1400px;display:flex;flex-direction:column;align-items:center;gap:18px;padding:20px;max-width:680px;width:100%}
.cert3d{position:relative;width:100%;background:linear-gradient(135deg,#ffffff,#eef4ff);border:10px solid #2563EB;border-radius:14px;padding:38px 42px;transform-style:preserve-3d;transform:rotateY(-90deg);opacity:0;box-shadow:0 40px 90px rgba(0,0,0,.5);overflow:hidden}
.cert-overlay.show .cert3d{animation:certReveal .9s cubic-bezier(.2,.8,.2,1) .15s forwards}
@keyframes certReveal{0%{transform:rotateY(-90deg) scale(.9);opacity:0}60%{opacity:1}100%{transform:rotateY(0) scale(1);opacity:1}}
.cert3d-shine{position:absolute;top:0;left:-60%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg);animation:certShine 2.8s ease-in-out 1s infinite}
@keyframes certShine{0%{left:-60%}55%,100%{left:130%}}
.cert-brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.cert-logo{width:46px;height:46px;border-radius:12px;background:#0f172a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}
.cert-brand b{font-size:18px}.cert-brand small{display:block;color:var(--slate)}
.cert-seal{position:absolute;top:30px;right:38px;width:74px;height:74px;border-radius:50%;background:radial-gradient(circle,#f59e0b,#b45309);color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:0 8px 20px rgba(180,83,9,.45);transform:translateZ(40px)}
.cert-kicker{color:var(--blue);letter-spacing:3px;text-transform:uppercase;font-size:12px;font-weight:800;margin-top:6px}
.cert-title{font-size:26px;margin:4px 0 16px;color:#0f172a;line-height:1.1}
.cert-sub{color:var(--slate);font-size:14px}
.cert-name{font-size:34px;color:#1e3a8a;margin:6px 0 14px;border-bottom:2px solid #c7d6f5;display:inline-block;padding-bottom:6px}
.cert-desc{color:#334155;font-size:14px;line-height:1.65;max-width:560px}
.cert-foot{display:flex;justify-content:space-between;margin-top:24px}
.cert-foot b{font-size:15px;color:#0f172a}.cert-foot small{display:block;color:var(--slate);font-size:11px}
.cert-note{margin-top:18px;color:#94a3b8;font-size:11px}
.cert-actions{display:flex;gap:12px}
@media(max-width:560px){.cert3d{padding:26px 22px}.cert-name{font-size:26px}.cert-title{font-size:20px}}

/* ============================================================
   v20260611b · Modales centrados, KPI clicable, foquito
   ============================================================ */

/* Modal centrado reutilizable */
.ui-modal-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(8,12,28,.66);backdrop-filter:blur(5px);opacity:0;transition:opacity .26s}
.ui-modal-overlay.show{opacity:1}
.ui-modal{position:relative;width:100%;max-width:560px;max-height:88vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:0 40px 90px rgba(8,12,28,.45);transform:translateY(14px) scale(.97);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.ui-modal-overlay.show .ui-modal{transform:translateY(0) scale(1)}
.ui-modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--slate);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.ui-modal-x:hover{color:#dc2626;border-color:#fecaca;background:#fef2f2}
.ui-modal-rank{max-width:600px}

/* KPI de ranking clicable */
.stat-click{cursor:pointer;position:relative;transition:transform .15s,box-shadow .15s,border-color .15s}
.stat-click:hover{transform:translateY(-2px);border-color:#c7d6f5;box-shadow:0 14px 30px rgba(37,99,235,.14)}
.stat-arrow{margin-left:auto;color:var(--blue);align-self:center}
.rk-modal-head{margin-bottom:16px;padding-right:30px}
.rk-modal-head h3{display:flex;align-items:center;gap:8px}

/* Foquito flotante en la esquina */
.cert-fab{position:fixed;right:22px;bottom:24px;z-index:60;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(217,119,6,.4);animation:fabGlow 2.4s ease-in-out infinite}
.cert-fab:hover{filter:brightness(1.06);transform:scale(1.06)}
@keyframes fabGlow{0%,100%{box-shadow:0 14px 30px rgba(217,119,6,.34)}50%{box-shadow:0 14px 40px 6px rgba(245,158,11,.55)}}
@media(max-width:560px){.cert-fab{right:16px;bottom:18px;width:50px;height:50px}}

/* Contenido del modal CCF-A */
.ccf-info-head{display:flex;gap:14px;align-items:center;margin-bottom:14px;padding-right:30px}
.ccf-info-ico{flex:none;width:50px;height:50px;border-radius:14px;background:#fff7ed;border:1px solid #fed7aa;display:flex;align-items:center;justify-content:center;color:#f59e0b;animation:bulbGlow 2.4s ease-in-out infinite}
.ccf-info-head h3{margin:0}
.ccf-lead{color:#334155;line-height:1.65;font-size:14.5px;margin-bottom:16px}
.ccf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ccf-grid .cii{background:#f8fafc}
.ccf-foot{margin-top:16px;color:var(--slate);font-size:13px;display:flex;align-items:center;gap:6px}
@media(max-width:560px){.ccf-grid{grid-template-columns:1fr}}

/* ============================================================
   v20260612b · Modal de nombre, fechas de bloqueo, CCA-F real,
                 animación de logros al frente del certificado
   ============================================================ */

/* Modal cambiar nombre */
.ui-modal-name{max-width:440px;text-align:center}
.name-modal-ico{width:54px;height:54px;border-radius:16px;background:#eff4ff;border:1px solid #dbe5ff;color:var(--blue);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.name-modal h3{margin-bottom:4px}
.name-modal-input{width:100%;margin:16px 0 18px;text-align:center;font-size:16px;font-weight:600}
.name-modal-actions{display:flex;gap:10px;justify-content:center}

/* Fecha/hora de bloqueo en tarjetas de ejercicios */
.lock-when{display:flex;align-items:center;gap:6px;font-size:12px;color:#b45309;background:#fff7ed;border:1px solid #fed7aa;border-radius:9px;padding:7px 10px;margin-top:10px}
.lock-when.scheduled{color:#b45309}

/* CCA-F · dominios reales */
.ccf-block{margin:6px 0 16px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#f8fafc}
.ccf-block h4{display:flex;align-items:center;gap:7px;margin-bottom:12px;font-size:14px}
.ccf-dom{margin-bottom:10px}
.ccf-dom:last-child{margin-bottom:0}
.ccf-dom-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.ccf-dom-top b{color:var(--blue)}
.ccf-dom-bar{height:7px;border-radius:99px;background:#e2e8f0;overflow:hidden}
.ccf-dom-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2563eb,#7c3aed);animation:domGrow .9s ease both}
@keyframes domGrow{0%{width:0!important}}
.ccf-sim{margin-top:16px;padding:14px;border-radius:12px;background:#fffbeb;border:1px solid #fde68a}
.ccf-sim b{display:flex;align-items:center;gap:6px;color:#b45309;margin-bottom:4px}
.ccf-sim p{color:#92400e;font-size:13px;line-height:1.55}

/* Certificado · banner + glow + estallido de logros al frente */
.cert-banner{align-self:center;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-weight:800;padding:8px 18px;border-radius:999px;box-shadow:0 10px 24px rgba(217,119,6,.4);opacity:0;transform:translateY(-14px) scale(.9);animation:bannerPop .6s cubic-bezier(.2,1.4,.4,1) .5s forwards;font-size:15px}
@keyframes bannerPop{0%{opacity:0;transform:translateY(-14px) scale(.9)}60%{transform:translateY(0) scale(1.06)}100%{opacity:1;transform:translateY(0) scale(1)}}
.cert-glow{position:absolute;width:560px;height:560px;max-width:90vw;max-height:90vw;border-radius:50%;background:radial-gradient(circle,rgba(245,158,11,.4),transparent 62%);filter:blur(6px);opacity:0;animation:glowPulse 2.6s ease-in-out .4s infinite;pointer-events:none;z-index:0}
@keyframes glowPulse{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.6;transform:scale(1.08)}}
.cert-burst{position:absolute;top:50%;left:50%;width:0;height:0;z-index:5;pointer-events:none}
.cert-spark{position:absolute;top:0;left:0;transform:translate(-50%,-50%);opacity:0;animation:sparkFly 1.3s ease-out forwards;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
@keyframes sparkFly{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(1.1) rotate(var(--rot))}}
.cert-stage{position:relative}

/* ============================================================
   v20260613b · Certificado CCF-A · animación épica 3D
   ============================================================ */

/* Anula la entrada antigua de la tarjeta interna (ahora la entrada va en el wrapper). */
.cert-overlay.show .cert3d{animation:none}
.cert3d{transform:none;opacity:1}

/* Fondo más oscuro y envolvente para dar dramatismo */
.cert-overlay{background:radial-gradient(circle at 50% 42%, rgba(30,41,90,.55), rgba(5,8,20,.86))}

/* Wrappers 3D anidados: entrada → flotado → tarjeta (parallax del mouse) */
.cert3d-enter{width:100%;transform-style:preserve-3d;opacity:0;transform:translateZ(-900px) translateY(-40px) rotateX(34deg) scale(.5)}
.cert-overlay.show .cert3d-enter{animation:certEpicIn 1s cubic-bezier(.16,.84,.28,1) .12s forwards}
@keyframes certEpicIn{
  0%{opacity:0;transform:translateZ(-900px) translateY(-46px) rotateX(34deg) rotateZ(-8deg) scale(.46)}
  55%{opacity:1;transform:translateZ(70px) translateY(0) rotateX(-6deg) rotateZ(1deg) scale(1.06)}
  74%{transform:translateZ(0) rotateX(3deg) scale(.99)}
  100%{opacity:1;transform:translateZ(0) rotateX(0) rotateZ(0) scale(1)}
}
.cert3d-float{width:100%;transform-style:preserve-3d;animation:certFloaty 5.5s ease-in-out 1.15s infinite}
@keyframes certFloaty{
  0%{transform:translateY(0) rotateY(-5deg)}
  50%{transform:translateY(-12px) rotateY(5deg)}
  100%{transform:translateY(0) rotateY(-5deg)}
}
.cert3d{position:relative;z-index:2}
.cert-seal{transform:translateZ(60px)}

/* Aura dorada reforzada */
.cert-glow{z-index:0;background:radial-gradient(circle,rgba(245,158,11,.5),transparent 60%)}

/* Rayos de luz giratorios detrás de la tarjeta */
.cert-rays{position:absolute;width:1100px;height:1100px;max-width:140vw;max-height:140vw;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(255,225,150,.16) 0deg 8deg, transparent 8deg 20deg);
  -webkit-mask:radial-gradient(circle, #000 0%, #000 30%, transparent 66%);
          mask:radial-gradient(circle, #000 0%, #000 30%, transparent 66%);
  opacity:0;animation:raysIn .8s ease .3s forwards, raysSpin 16s linear infinite}
@keyframes raysIn{to{opacity:1}}
@keyframes raysSpin{to{transform:rotate(360deg)}}

/* Destello al "aterrizar" la tarjeta */
.cert-flash{position:absolute;inset:-40%;z-index:8;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 46%, rgba(255,255,255,.95), rgba(255,240,200,.5) 24%, transparent 55%)}
.cert-flash.go{animation:certFlash .65s ease-out forwards}
@keyframes certFlash{0%{opacity:0;transform:scale(.4)}18%{opacity:1}100%{opacity:0;transform:scale(1.2)}}

/* Onda de choque expansiva */
.cert-shockwave{position:absolute;top:46%;left:50%;width:40px;height:40px;border-radius:50%;z-index:1;pointer-events:none;
  transform:translate(-50%,-50%) scale(0);border:4px solid rgba(245,158,11,.85);opacity:0}
.cert-shockwave.go{animation:shock .9s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes shock{0%{opacity:.9;transform:translate(-50%,-50%) scale(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(16)}}

/* Banner más imponente */
.cert-banner{z-index:10;letter-spacing:.5px;text-transform:uppercase;background:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 12px 30px rgba(217,119,6,.5),0 0 0 4px rgba(255,255,255,.12)}

/* Estallido de logros y acciones por encima */
.cert-burst{z-index:7}
.cert-actions{z-index:10;position:relative}

/* Chispas ascendentes (ambiente) */
.cert-embers{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.cert-ember{position:absolute;bottom:8%;width:8px;height:8px;border-radius:50%;background:#f59e0b;
  box-shadow:0 0 8px 2px rgba(245,158,11,.7);opacity:0;animation:emberUp var(--dur,2s) ease-out forwards}
@keyframes emberUp{0%{opacity:0;transform:translateY(0) translateX(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-340px) translateX(var(--drift,0)) scale(1)}}

@media(prefers-reduced-motion:reduce){
  .cert3d-enter,.cert3d-float,.cert-rays,.cert-banner{animation-duration:.01s!important;animation-iteration-count:1!important}
}

/* ============================================================
   v20260614b · Certificado CCF-A · giro 3D completo + reverso
   ============================================================ */

/* Contenedor de la tarjeta (gira y recibe el parallax del mouse) */
.cert3d-card{position:relative;width:100%;z-index:2;transform-style:preserve-3d}

/* Entrada con giro 3D completo (sustituye la entrada anterior) */
.cert-overlay.show .cert3d-enter{animation:certSpinIn 1.25s cubic-bezier(.16,.84,.28,1) .12s forwards}
@keyframes certSpinIn{
  0%{opacity:0;transform:translateZ(-1100px) translateY(-30px) rotateY(-540deg) rotateX(18deg) scale(.4)}
  60%{opacity:1;transform:translateZ(80px) translateY(0) rotateY(10deg) rotateX(-5deg) scale(1.07)}
  80%{transform:translateZ(0) rotateY(-4deg) scale(.99)}
  100%{opacity:1;transform:translateZ(0) rotateY(0) rotateX(0) scale(1)}
}

/* Cara frontal: el certificado (toma el estilo visual de la tarjeta) */
.cert3d-front{position:relative;width:100%;background:linear-gradient(135deg,#ffffff,#eef4ff);
  border:10px solid #2563EB;border-radius:14px;padding:38px 42px;overflow:hidden;
  box-shadow:0 40px 90px rgba(0,0,0,.5);backface-visibility:hidden;-webkit-backface-visibility:hidden}

/* Cara trasera: reverso de marca, visible mientras gira */
.cert3d-back{position:absolute;inset:0;border-radius:14px;border:10px solid #1e3a8a;
  background:linear-gradient(135deg,#1e3a8a,#0f172a);color:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;transform:rotateY(180deg);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.cert3d-back .back-logo{width:64px;height:64px;border-radius:16px;background:#fff;color:#1e3a8a;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:24px}
.cert3d-back b{letter-spacing:1px;font-size:15px;opacity:.9}
.cert3d-back .back-star{font-size:30px;color:#fbbf24}

/* Escena épica detrás (canvas) por encima del fondo oscuro, debajo de la tarjeta */
.epic-canvas{z-index:0}
.cert-overlay{background:radial-gradient(circle at 50% 42%, rgba(20,28,66,.5), rgba(3,6,16,.9))}

/* Dos logos en el login (INMEGA + Claude) */
.brand-logos { display:flex; align-items:center; gap:10px; position:relative; z-index:2; }
.brand-logos .brand-logo { width:82px; height:82px; border-radius:18px; padding:9px; }

/* Dos logos en la barra superior (reemplazo del recuadro "IN") */
.brand-mark-wrap { display:flex; align-items:center; gap:6px; }
.brand-mark-wrap .bmk { width:52px; height:52px; border-radius:13px; object-fit:contain; background:#fff; padding:6px; box-shadow:0 2px 8px rgba(8,40,24,.12); }
.brand-mark-wrap .bmk.hide { display:none; }
/* La "IN" de respaldo solo aparece si ambas imágenes fallan */
.brand-mark-wrap .bmk-fb { display:none; }
.brand-mark-wrap .bmk.hide ~ .bmk.hide ~ .bmk-fb { display:grid; }