@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root{
  --brand:#21a607; --brand-dim:rgba(33,166,7,.08); --brand-glow:rgba(33,166,7,.25);
  --bg:#060708; --bg2:#0c0e10; --bg3:#111416; --bg4:#171b1f;
  --brd:rgba(255,255,255,.06); --brd2:rgba(255,255,255,.11);
  --tx:#d4dbe6; --txm:#6b7685; --txs:#f1f5f9;
  --green:#21a607; --red:#ef4444; --yellow:#f59e0b; --blue:#3b82f6;
  --green-dim:rgba(33,166,7,.12); --red-dim:rgba(239,68,68,.12); --yellow-dim:rgba(245,158,11,.12);
  --head:'Syne',sans-serif; --body:'DM Sans',sans-serif; --mono:'DM Mono',monospace;
  --r:12px; --rl:18px; --rxl:26px;
  --shadow: 0 1px 2px rgba(0,0,0,.25), 0 14px 32px -16px rgba(0,0,0,.6);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --topbar-h:64px; --nav-w:240px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--body);background:var(--bg);color:var(--tx);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{font-family:var(--head);color:var(--txs);}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--brd2);border-radius:8px;}
::selection{background:var(--brand-glow);}

/* ── LOGIN ── */
.login-page{
  display:flex;align-items:center;justify-content:center;min-height:100vh;
  background:
    radial-gradient(circle at 18% 20%, rgba(33,166,7,.14), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(33,166,7,.10), transparent 42%),
    var(--bg);
}
.login-box{background:var(--bg2);border:1px solid var(--brd2);border-radius:var(--rxl);padding:44px 40px;width:100%;max-width:400px;box-shadow:var(--shadow);}
.login-logo{
  font-size:26px;width:60px;height:60px;border-radius:16px;
  background:linear-gradient(135deg,var(--brand),#3ad11a);
  display:flex;align-items:center;justify-content:center;color:#06250a;
  margin:0 auto 18px;box-shadow:0 10px 28px -10px var(--brand-glow);
}
.login-title{font-size:22px;font-weight:800;text-align:center;color:var(--txs);margin-bottom:4px;font-family:var(--head);}
.login-sub{font-size:13px;color:var(--txm);text-align:center;margin-bottom:28px;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:11.5px;font-weight:700;color:var(--txm);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg3);border:1px solid var(--brd2);color:var(--txs);
  border-radius:var(--r);padding:10px 14px;font-size:13.5px;outline:none;transition:.15s;font-family:inherit;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-dim);}
.alert-error{background:var(--red-dim);border:1px solid rgba(239,68,68,.3);color:#fca5a5;border-radius:var(--r);padding:10px 14px;font-size:13px;margin-bottom:16px;}
.alert-success{background:var(--green-dim);border:1px solid rgba(33,166,7,.3);color:#86efac;border-radius:var(--r);padding:10px 14px;font-size:13px;margin-bottom:16px;}

/* ── BOTONES ── */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--brand);color:#06250a;border:none;padding:10px 18px;border-radius:var(--r);font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s;text-decoration:none;box-shadow:0 4px 14px -4px var(--brand-glow);}
.btn-primary:hover{background:#28c108;transform:translateY(-1px);box-shadow:0 6px 18px -4px var(--brand-glow);}
.btn-primary.full{width:100%;}
.btn-secondary{display:inline-flex;align-items:center;gap:6px;background:var(--bg3);color:var(--txs);border:1px solid var(--brd2);padding:9px 16px;border-radius:var(--r);font-size:13px;font-weight:600;cursor:pointer;transition:.15s;text-decoration:none;}
.btn-secondary:hover{background:var(--bg4);}
.btn-sm{display:inline-flex;align-items:center;gap:4px;background:var(--bg3);color:var(--txm);border:1px solid var(--brd);padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:.15s;text-decoration:none;}
.btn-sm:hover{background:var(--bg4);color:var(--txs);}

/* ── LAYOUT ── */
.app-layout{display:flex;min-height:100vh;}
.sidebar{width:var(--nav-w);background:var(--bg2);border-right:1px solid var(--brd);display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;}
.sidebar-logo{padding:22px 22px 18px;font-family:var(--head);font-weight:800;font-size:18px;color:var(--txs);display:flex;align-items:center;gap:8px;}
.sidebar-logo span{background:linear-gradient(135deg,var(--brand),#3ad11a);-webkit-background-clip:text;background-clip:text;color:transparent;}
.sidebar-nav{flex:1;padding:8px 12px;display:flex;flex-direction:column;gap:2px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r);color:var(--txm);font-size:13.5px;font-weight:600;transition:.15s;}
.nav-item:hover{background:var(--bg3);color:var(--txs);}
.nav-item.active{background:var(--brand-dim);color:var(--brand);}
.nav-icon{font-size:16px;width:20px;text-align:center;}
.sidebar-user{padding:16px;border-top:1px solid var(--brd);display:flex;align-items:center;gap:10px;}
.user-avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-dim);color:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0;}
.user-name{font-size:12.5px;font-weight:700;color:var(--txs);}
.user-sub{font-size:11px;color:var(--txm);}

.main-wrap{flex:1;min-width:0;}
.topbar{height:var(--topbar-h);background:var(--bg2);border-bottom:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:30;box-shadow:0 4px 16px -12px rgba(0,0,0,.5);}
.topbar-title{font-family:var(--head);font-weight:700;font-size:17px;color:var(--txs);}
.main-content{padding:28px;max-width:1000px;}

/* ── CARDS ── */
.card{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--rl);overflow:hidden;box-shadow:var(--shadow-sm);}
.card-header{padding:16px 20px;border-bottom:1px solid var(--brd);display:flex;align-items:center;justify-content:space-between;}
.card-title{font-size:14px;font-weight:700;color:var(--txs);font-family:var(--head);}

/* ── MÓDULOS / DASHBOARD ── */
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.module-card{
  background:var(--bg2);border:1px solid var(--brd);border-radius:var(--rl);padding:20px;
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm);
  transition:transform .15s,border-color .15s,box-shadow .15s;text-decoration:none;
}
.module-card:hover{transform:translateY(-2px);border-color:var(--brd2);box-shadow:var(--shadow);}
.module-icon{width:44px;height:44px;border-radius:12px;background:var(--brand-dim);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:20px;}
.module-title{font-family:var(--head);font-weight:700;font-size:15px;color:var(--txs);}
.module-desc{font-size:12.5px;color:var(--txm);line-height:1.6;flex:1;}
.module-progress-track{height:6px;border-radius:6px;background:var(--bg4);overflow:hidden;}
.module-progress-fill{height:100%;background:linear-gradient(90deg,var(--brand),#3ad11a);border-radius:6px;transition:width .3s;}
.module-meta{font-size:11px;color:var(--txm);display:flex;justify-content:space-between;}

/* ── LECCIONES ── */
.lesson-list{display:flex;flex-direction:column;gap:8px;}
.lesson-item{
  display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r);
  background:var(--bg2);border:1px solid var(--brd);transition:.15s;text-decoration:none;
}
.lesson-item:hover{border-color:var(--brd2);background:var(--bg3);}
.lesson-item.active{border-color:var(--brand);background:var(--brand-dim);}
.lesson-check{width:28px;height:28px;border-radius:50%;background:var(--bg3);border:1px solid var(--brd2);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;color:var(--txm);}
.lesson-item.done .lesson-check{background:var(--brand);color:#06250a;border-color:var(--brand);}
.lesson-name{font-size:13.5px;font-weight:600;color:var(--txs);}
.lesson-dur{font-size:11.5px;color:var(--txm);margin-top:2px;}

/* ── PLAYER ── */
.player-wrap{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--rl);
  overflow:hidden;box-shadow:var(--shadow);
}
.player-wrap iframe{width:100%;height:100%;border:0;}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;}
.badge-green{background:var(--green-dim);color:#4ade80;}
.badge-yellow{background:var(--yellow-dim);color:#fbbf24;}
.badge-gray{background:var(--bg3);color:var(--txm);}

@media(max-width:860px){
  .sidebar{position:fixed;left:-100%;transition:left .2s;z-index:100;height:100vh;}
  .sidebar.open{left:0;}
  .main-content{padding:16px;}
  .topbar{padding:0 16px;}
}