/* =====================================================
   EduPlatform - Estilos principales
   ===================================================== */
:root{
  --primary: #5B3DF5;
  --primary-dark: #4529c9;
  --primary-light: #efeaff;
  --accent: #00C2A8;
  --dark: #14142B;
  --gray-900: #1E1E2F;
  --gray-700: #4B4B63;
  --gray-500: #8888A0;
  --gray-200: #E7E7F0;
  --gray-100: #F5F5FA;
  --white: #ffffff;
  --danger: #E5484D;
  --success: #1AA36B;
  --radius: 12px;
  --shadow: 0 4px 20px rgba(20,20,43,0.08);
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family: var(--font-body);
  color: var(--gray-900);
  background: var(--gray-100);
  line-height:1.6;
}
h1,h2,h3,h4{font-family:var(--font-heading); color:var(--dark); line-height:1.25;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
ul{list-style:none;}

.container{
  max-width:1180px;
  margin:0 auto;
  padding: 0 24px;
}

/* ---------- Navbar ---------- */
.navbar{
  background:var(--white);
  border-bottom:1px solid var(--gray-200);
  position:sticky; top:0; z-index:50;
}
.navbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.logo{font-family:var(--font-heading); font-weight:800; font-size:1.4rem; color:var(--dark);}
.logo span{color:var(--primary);}
.nav-links{display:flex; gap:28px;}
.nav-links a{font-weight:600; color:var(--gray-700); font-size:.95rem;}
.nav-links a:hover{color:var(--primary);}
.nav-actions{display:flex; align-items:center; gap:12px;}
.user-chip{font-size:.85rem; font-weight:600; color:var(--gray-700);}
.user-chip small{color:var(--gray-500); font-weight:400;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding:10px 20px;
  border-radius:8px;
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
  border:2px solid transparent;
  transition:all .15s ease;
}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-outline{border-color:var(--gray-200); color:var(--gray-900); background:#fff;}
.btn-outline:hover{border-color:var(--primary); color:var(--primary);}
.btn-accent{background:var(--accent); color:#fff;}
.btn-danger{background:var(--danger); color:#fff;}
.btn-sm{padding:6px 14px; font-size:.8rem;}
.btn-block{display:block; width:100%; text-align:center;}

/* ---------- Alerts ---------- */
.alert{
  margin:18px 0; padding:14px 18px; border-radius:8px; font-weight:500; font-size:.9rem;
}
.alert-success{background:#e6f7ef; color:var(--success); border:1px solid #b6e6cf;}
.alert-danger{background:#fdecec; color:var(--danger); border:1px solid #f7c3c4;}
.alert-info{background:var(--primary-light); color:var(--primary-dark); border:1px solid #d5c9fb;}

/* ---------- Hero ---------- */
.hero{
  background: linear-gradient(135deg, var(--dark) 0%, #2c1e6e 100%);
  color:#fff;
  padding:70px 0;
}
.hero h1{color:#fff; font-size:2.6rem; max-width:700px;}
.hero p{color:#c9c8e0; margin-top:14px; max-width:560px; font-size:1.05rem;}
.hero-search{
  margin-top:28px; display:flex; gap:10px; max-width:520px;
}
.hero-search input{
  flex:1; padding:14px 16px; border-radius:8px; border:none; font-size:.95rem;
}

/* ---------- Course grid ---------- */
.section{padding:50px 0;}
.section-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px;}
.section-title h2{font-size:1.6rem;}
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px;}
.filters a{
  padding:8px 16px; border-radius:20px; background:#fff; border:1px solid var(--gray-200);
  font-size:.85rem; font-weight:600; color:var(--gray-700);
}
.filters a.active, .filters a:hover{background:var(--primary); color:#fff; border-color:var(--primary);}

.course-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(270px,1fr));
  gap:24px;
}
.course-card{
  background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
  transition:transform .15s ease;
  display:flex; flex-direction:column;
}
.course-card:hover{transform:translateY(-4px);}
.course-thumb{
  height:150px; background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.9rem;
  background-size:cover; background-position:center;
}
.course-body{padding:18px; flex:1; display:flex; flex-direction:column;}
.course-cat{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--primary); font-weight:700;}
.course-title{font-size:1.05rem; margin:8px 0 6px;}
.course-instructor{font-size:.82rem; color:var(--gray-500); margin-bottom:12px;}
.course-meta{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:10px; border-top:1px solid var(--gray-200);}
.course-price{font-weight:800; color:var(--dark);}
.badge{
  display:inline-block; font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:12px;
  background:var(--gray-100); color:var(--gray-700);
}

/* ---------- Forms ---------- */
.form-card{
  background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:36px; max-width:460px; margin:50px auto;
}
.form-card h1{font-size:1.5rem; margin-bottom:6px;}
.form-card .sub{color:var(--gray-500); font-size:.9rem; margin-bottom:24px;}
.form-wide{max-width:760px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block; font-weight:600; font-size:.85rem; margin-bottom:6px; color:var(--gray-700);}
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:11px 14px; border:1px solid var(--gray-200); border-radius:8px; font-size:.92rem; font-family:inherit;
  background:#fff;
}
.form-group textarea{resize:vertical; min-height:100px;}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:2px solid var(--primary); border-color:var(--primary);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form-footer-link{margin-top:18px; font-size:.87rem; text-align:center; color:var(--gray-500);}
.form-footer-link a{color:var(--primary); font-weight:600;}
.demo-hint{background:var(--primary-light); border-radius:8px; padding:10px 14px; font-size:.78rem; color:var(--primary-dark); margin-bottom:20px;}

/* ---------- Course detail ---------- */
.course-header{background:var(--dark); color:#fff; padding:46px 0;}
.course-header h1{color:#fff; font-size:2rem;}
.course-header p{color:#c9c8e0; margin-top:10px; max-width:640px;}
.course-header .meta-row{display:flex; gap:18px; margin-top:18px; flex-wrap:wrap; font-size:.85rem; color:#c9c8e0;}
.detail-grid{display:grid; grid-template-columns:2fr 1fr; gap:34px; margin-top:34px;}
@media(max-width:860px){.detail-grid{grid-template-columns:1fr;}}

.module-block{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px; overflow:hidden;}
.module-header{padding:16px 20px; background:var(--gray-100); font-weight:700; display:flex; justify-content:space-between; align-items:center;}
.lesson-row{
  padding:13px 20px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--gray-200); font-size:.9rem;
}
.lesson-row a{font-weight:600; display:flex; align-items:center; gap:10px;}
.lesson-row .dur{color:var(--gray-500); font-size:.8rem;}
.lesson-icon{width:22px; height:22px; border-radius:50%; background:var(--primary-light); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:.7rem; flex-shrink:0;}
.lesson-icon.done{background:var(--success); color:#fff;}

.side-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; margin-bottom:20px;}
.side-card h3{font-size:1rem; margin-bottom:12px;}

/* ---------- Lesson viewer ---------- */
.lesson-page{display:grid; grid-template-columns:1fr 320px; gap:0; min-height:calc(100vh - 72px);}
@media(max-width:960px){.lesson-page{grid-template-columns:1fr;}}
.lesson-main{padding:30px; max-width:900px;}
.video-wrapper{position:relative; padding-bottom:56.25%; height:0; background:#000; border-radius:var(--radius); overflow:hidden;}
.video-wrapper iframe, .video-wrapper video{position:absolute; top:0; left:0; width:100%; height:100%; border:0;}
.lesson-tabs{display:flex; gap:6px; margin:24px 0 14px; border-bottom:1px solid var(--gray-200);}
.lesson-tabs button{
  background:none; border:none; padding:10px 18px; font-weight:600; font-size:.9rem; color:var(--gray-500); cursor:pointer; border-bottom:2px solid transparent;
}
.lesson-tabs button.active{color:var(--primary); border-color:var(--primary);}
.tab-content{display:none;}
.tab-content.active{display:block;}
.material-item{
  display:flex; align-items:center; justify-content:between; gap:10px; padding:12px 16px; background:#fff; border:1px solid var(--gray-200); border-radius:8px; margin-bottom:10px;
}
.material-item .m-info{flex:1;}
.material-item .m-title{font-weight:600; font-size:.9rem;}
.material-item .m-type{font-size:.75rem; color:var(--gray-500); text-transform:uppercase;}

.lesson-sidebar{background:#fff; border-left:1px solid var(--gray-200); overflow-y:auto; max-height:calc(100vh - 72px); position:sticky; top:72px;}
.lesson-sidebar h4{padding:18px 20px 10px; font-size:.95rem;}
.mark-complete{margin:16px 20px; }

/* ---------- Dashboard ---------- */
.dash-header{padding:40px 0 10px;}
.dash-tabs{display:flex; gap:24px; border-bottom:1px solid var(--gray-200); margin-bottom:30px;}
.dash-tabs a{padding:12px 4px; font-weight:600; color:var(--gray-500); border-bottom:3px solid transparent;}
.dash-tabs a.active{color:var(--primary); border-color:var(--primary);}
.progress-bar{background:var(--gray-200); border-radius:6px; height:8px; overflow:hidden; margin-top:8px;}
.progress-bar span{display:block; height:100%; background:var(--accent);}

table.data-table{width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
table.data-table th, table.data-table td{padding:14px 16px; text-align:left; font-size:.88rem; border-bottom:1px solid var(--gray-200);}
table.data-table th{background:var(--gray-100); font-weight:700; color:var(--gray-700);}
.table-actions{display:flex; gap:8px;}
.empty-state{text-align:center; padding:60px 20px; color:var(--gray-500);}

/* ---------- Instructor panel ---------- */
.panel-header{display:flex; justify-content:space-between; align-items:center; margin:34px 0 20px;}
.builder-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
@media(max-width:860px){.builder-grid{grid-template-columns:1fr;}}
.mini-list li{
  display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--gray-100); border-radius:8px; margin-bottom:8px; font-size:.87rem;
}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark); color:#9c9bbb; padding:26px 0; margin-top:60px; font-size:.85rem; text-align:center;}

@media(max-width:700px){
  .nav-links{display:none;}
  .hero h1{font-size:1.9rem;}
  .form-row{grid-template-columns:1fr;}
}