/* ============================================================
   nBC LMS — Hoja de estilos compartida
   Basada en el branding de la landing de nBC Comunidad SuccessFactors
   ============================================================ */
:root{
  --ink:#131A38;
  --brand:#212A56;
  --brand-light:#4A5A9E;
  --brand-soft:#7C8AC9;
  --paper:#F4F6FB;
  --paper-alt:#EAEEF7;
  --accent:#29ABE2;
  --accent-soft:#AEE0F7;
  --line:#D8DEEC;
  --line-dark:#2C3766;
  --white:#FFFFFF;
  --success:#3E9C7F;
  --danger:#D0483E;
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
  --max:1200px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--brand);
  font-weight:600;
  letter-spacing:-.01em;
}
.wrap{ max-width:var(--max); margin:0 auto; padding:0 clamp(20px,4vw,48px); }
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--brand-light);
  text-transform:uppercase;
  margin-bottom:10px;
  display:block;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  padding:12px 22px; border-radius:100px; cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:var(--ink); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -8px rgba(41,171,226,.5); }
.btn-brand{ background:var(--brand); color:#fff; }
.btn-brand:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -8px rgba(33,42,86,.45); }
.btn-ghost{ background:transparent; color:var(--brand); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--brand); }
.btn-danger{ background:transparent; color:var(--danger); border-color:#EFC9C5; }
.btn-danger:hover{ background:#FBEEED; }
.btn-sm{ padding:8px 16px; font-size:13px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

/* ---------- Header / Nav app ---------- */
.app-header{
  position:sticky; top:0; z-index:50;
  background:rgba(244,246,251,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.app-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,4vw,48px); max-width:var(--max); margin:0 auto;
}
.app-logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; color:var(--brand); font-size:17px; }
.app-logo .mark{
  width:34px; height:34px; border-radius:9px; background:var(--brand);
  color:var(--accent-soft); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:13px; font-weight:700;
}
.app-nav-links{ display:flex; align-items:center; gap:26px; font-size:14px; font-weight:500; }
.app-nav-links a{ color:var(--brand); opacity:.75; }
.app-nav-links a.active, .app-nav-links a:hover{ opacity:1; }
.app-nav-user{ display:flex; align-items:center; gap:14px; }
.app-nav-user .role-badge{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em;
  padding:4px 10px; border-radius:100px; background:var(--paper-alt); color:var(--brand-light);
}
.burger{
  display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line);
  background:var(--white); cursor:pointer; align-items:center; justify-content:center;
  flex-direction:column; gap:4px; flex-shrink:0;
}
.burger span{ display:block; width:18px; height:2px; background:var(--brand); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.mobile-panel{
  display:none; flex-direction:column; gap:4px; padding:6px clamp(20px,4vw,48px) 20px;
  border-top:1px solid var(--line); background:var(--paper);
}
.mobile-panel.open{ display:flex; }
.mobile-panel a{ padding:12px 6px; font-size:15px; font-weight:600; color:var(--brand); border-bottom:1px solid var(--line); }
.mobile-panel .app-nav-user{ flex-wrap:wrap; padding:14px 6px 4px; gap:10px; }
.mobile-panel .app-nav-user .btn{ flex:1; }

/* ---------- Layout genérico ---------- */
.page{ padding:44px 0 80px; }
.page-head{ margin-bottom:34px; }
.page-head h1{ font-size:clamp(24px,3vw,32px); margin-bottom:8px; }
.page-head p{ color:#4B5378; font-size:15px; max-width:640px; }

/* ---------- Tarjetas / KPIs ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:36px; }
.kpi-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.kpi-card .kpi-label{ font-family:var(--font-mono); font-size:11.5px; color:var(--brand-light); letter-spacing:.04em; text-transform:uppercase; }
.kpi-card .kpi-value{ font-family:var(--font-display); font-size:30px; color:var(--brand); margin-top:8px; }

/* ---------- Grid de cursos ---------- */
.courses-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.course-card{
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  padding:24px; display:flex; flex-direction:column; gap:12px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.course-card:hover{ transform:translateY(-3px); box-shadow:0 16px 28px -18px rgba(19,26,56,.3); border-color:var(--brand-soft); }
.course-code{
  font-family:var(--font-mono); font-size:11.5px; color:var(--brand-light);
  background:var(--paper-alt); display:inline-block; padding:4px 10px; border-radius:100px;
  width:fit-content; letter-spacing:.04em;
}
.course-card h3{ font-size:18px; }
.course-card p{ font-size:13.5px; color:#4B5378; flex:1; }
.course-meta{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--brand-light); font-family:var(--font-mono); }
.course-actions{ display:flex; gap:10px; margin-top:6px; }
.level-dots{ display:flex; gap:4px; }
.level-dots i{ width:14px; height:4px; border-radius:2px; background:var(--line); display:inline-block; }
.level-dots i.on{ background:var(--accent); }

/* ---------- Barra de progreso ---------- */
.progress-bar{ width:100%; height:8px; background:var(--paper-alt); border-radius:100px; overflow:hidden; }
.progress-bar > span{ display:block; height:100%; background:var(--accent); border-radius:100px; transition:width .3s ease; }
.progress-label{ display:flex; justify-content:space-between; font-size:12px; color:var(--brand-light); font-family:var(--font-mono); margin-top:6px; }

/* ---------- Tablas admin ---------- */
.table-wrap{ background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
table{ width:100%; border-collapse:collapse; font-size:14px; }
thead{ background:var(--paper-alt); }
th{ text-align:left; padding:12px 18px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--brand-light); text-transform:uppercase; }
td{ padding:14px 18px; border-top:1px solid var(--line); vertical-align:middle; }
tr:hover td{ background:var(--paper); }
.badge{ font-family:var(--font-mono); font-size:11px; padding:3px 9px; border-radius:100px; letter-spacing:.03em; }
.badge-admin{ background:#EAE0FB; color:#5B3FA8; }
.badge-alumno{ background:var(--accent-soft); color:#146B94; }
.badge-active{ background:#DCF3E8; color:var(--success); }

/* ---------- Formularios ---------- */
.auth-shell{ min-height:calc(100vh - 68px); display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.auth-card{ width:100%; max-width:420px; background:var(--white); border:1px solid var(--line); border-radius:20px; padding:36px 34px; }
.auth-card h1{ font-size:24px; margin-bottom:6px; }
.auth-card .sub{ color:#4B5378; font-size:14px; margin-bottom:26px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--brand); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:10px;
  font-family:var(--font-body); font-size:14.5px; background:var(--paper); color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brand-soft); background:var(--white); }
.field-hint{ font-size:12px; color:#8A93BE; margin-top:5px; }
.form-msg{ font-size:13.5px; padding:10px 14px; border-radius:10px; margin-bottom:16px; display:none; }
.form-msg.show{ display:block; }
.form-msg.error{ background:#FBEEED; color:var(--danger); }
.form-msg.success{ background:#DCF3E8; color:var(--success); }
.auth-foot{ margin-top:20px; font-size:13.5px; color:#4B5378; text-align:center; }
.demo-box{ margin-top:18px; background:var(--paper-alt); border-radius:10px; padding:12px 14px; font-size:12.5px; color:var(--brand-light); font-family:var(--font-mono); line-height:1.7; }

/* ---------- Empty state ---------- */
.empty-state{ text-align:center; padding:60px 20px; color:#8A93BE; }
.empty-state h3{ color:var(--brand); margin-bottom:8px; }

/* ---------- Modal simple ---------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(19,26,56,.55); display:none; align-items:center; justify-content:center; z-index:200; padding:20px; }
.modal-overlay.show{ display:flex; }
.modal{ background:var(--white); border-radius:18px; padding:30px; width:100%; max-width:460px; max-height:90vh; overflow-y:auto; }
.modal h3{ margin-bottom:18px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:22px; }

/* ---------- Section title with action ---------- */
.section-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.section-title-row h2{ font-size:20px; }

/* ---------- Insignias por nivel (Beginner / Pro / Master) ---------- */
.badge-level-grid{ display:flex; flex-wrap:wrap; gap:22px; }
.badge-level-card{ display:flex; flex-direction:column; align-items:center; gap:10px; width:112px; text-align:center; }
.badge-level-ring{
  width:66px; height:66px; border-radius:100px; border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:22px;
  color:var(--brand-light); background:var(--white); flex-shrink:0;
}
.badge-level-ring.level-beginner{ border-color:var(--brand-soft); color:var(--brand-soft); }
.badge-level-ring.level-pro{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.badge-level-ring.level-master{ border-color:#D9A526; color:#B9840E; background:#FBF1DA; }
.badge-level-card .code{ font-family:var(--font-mono); font-size:11px; color:var(--brand-light); letter-spacing:.05em; }
.badge-level-card .level-label{ font-size:12.5px; font-weight:700; color:var(--brand); }
.badge-level-card .course-name{ font-size:11.5px; color:#8A93BE; line-height:1.3; }

/* ---------- Insignias (legado, tarjetas con fecha) ---------- */
.badges-row{ display:flex; flex-wrap:wrap; gap:14px; }
.badge-chip{
  display:flex; align-items:center; gap:10px; background:var(--white); border:1px solid var(--line);
  border-radius:14px; padding:12px 16px; min-width:180px;
}
.badge-chip .icon{ font-size:26px; }
.badge-chip .name{ font-weight:600; font-size:13.5px; color:var(--brand); }
.badge-chip .date{ font-size:11.5px; color:#8A93BE; font-family:var(--font-mono); }
.badge-locked{ opacity:.45; filter:grayscale(1); }
.course-card .earned-badge{ position:absolute; top:14px; right:14px; font-size:20px; }
.course-card{ position:relative; }

/* ---------- Visor de contenido (curso-contenido.html) ---------- */
.content-shell{ display:grid; grid-template-columns:300px 1fr; gap:24px; align-items:start; }
.lesson-list{ background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; position:sticky; top:90px; }
.lesson-toggle-mobile{ display:none; }
.lesson-item{
  display:flex; align-items:center; gap:12px; padding:14px 16px; cursor:pointer;
  border-bottom:1px solid var(--line); font-size:13.5px; transition:background .15s ease;
}
.lesson-item:last-child{ border-bottom:none; }
.lesson-item:hover{ background:var(--paper); }
.lesson-item.active{ background:var(--paper-alt); border-left:3px solid var(--accent); }
.lesson-item .check{
  width:22px; height:22px; border-radius:100px; border:2px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:12px; color:transparent;
}
.lesson-item.done .check{ background:var(--success); border-color:var(--success); color:#fff; }
.lesson-item .type-tag{ font-family:var(--font-mono); font-size:10px; color:var(--brand-light); text-transform:uppercase; }
.content-main{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:22px; min-height:520px; }
.content-frame-wrap{ border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#000; }
.content-frame-wrap iframe, .content-frame-wrap video{ width:100%; display:block; border:0; }
.scorm-frame{ height:min(72vh,700px); }
.video-frame{ max-height:72vh; background:#000; }
.pdf-frame{ height:min(78vh,760px); }
.content-actions-row{ display:flex; align-items:center; justify-content:space-between; margin-top:16px; flex-wrap:wrap; gap:10px; }

/* ---------- Panel de administración de contenido ---------- */
.content-admin-item{
  display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--line);
  border-radius:10px; margin-bottom:8px; font-size:13.5px; background:var(--paper);
}
.content-admin-item .grow{ flex:1; }
.upload-drop{
  border:2px dashed var(--line); border-radius:14px; padding:28px; text-align:center;
  color:var(--brand-light); font-size:13.5px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.upload-drop:hover, .upload-drop.dragover{ border-color:var(--accent); background:var(--paper-alt); }

/* ---------- Galería de multimedia ---------- */
.media-filters-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
.category-select{
  padding:9px 14px; border:1px solid var(--line); border-radius:100px; background:var(--white);
  font-family:var(--font-body); font-size:13.5px; color:var(--brand); cursor:pointer;
}
.media-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.media-card{
  background:var(--white); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display:flex; flex-direction:column;
}
.media-card:hover{ transform:translateY(-3px); box-shadow:0 16px 28px -18px rgba(19,26,56,.3); border-color:var(--brand-soft); }
.media-thumb{
  height:150px; display:flex; align-items:center; justify-content:center; font-size:40px; cursor:pointer;
  background:linear-gradient(135deg,var(--brand) 0%,#0F1530 100%); color:#fff; position:relative;
}
.media-thumb .play-badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(19,26,56,.15);
}
.media-thumb.pdf-thumb{ background:linear-gradient(135deg,#4A5A9E 0%,#212A56 100%); }
.media-card-body{ padding:16px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.media-card-body h3{ font-size:15px; line-height:1.35; cursor:pointer; }
.media-card-body .meta{ font-size:12px; color:#8A93BE; font-family:var(--font-mono); }
.media-category-tag{
  align-self:flex-start; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em;
  background:var(--paper-alt); color:var(--brand-light); padding:3px 9px; border-radius:100px;
}
.media-admin-controls{ display:flex; gap:8px; padding:0 18px 16px; }
.media-admin-controls .btn{ flex:1; }

.media-modal-overlay{
  position:fixed; inset:0; background:rgba(19,26,56,.72); display:none; align-items:center; justify-content:center;
  z-index:300; padding:20px;
}
.media-modal-overlay.show{ display:flex; }
.media-modal{ background:var(--white); border-radius:18px; width:100%; max-width:820px; max-height:92vh; overflow:hidden; display:flex; flex-direction:column; }
.media-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line); }
.media-modal-head h3{ font-size:16px; }
.media-modal-close{ background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:var(--brand-light); }
.media-modal-body{ padding:0; background:#000; }
.media-modal-body video{ width:100%; max-height:70vh; display:block; }
.media-modal-body iframe{ width:100%; height:70vh; border:0; display:block; background:#fff; }

/* ---------- Selector de biblioteca en el modal de contenido admin ---------- */
.library-picker{ display:flex; flex-wrap:wrap; gap:8px; max-height:180px; overflow-y:auto; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--paper); margin-bottom:10px; }
.library-picker .lib-item{
  display:flex; align-items:center; gap:6px; padding:6px 12px; border-radius:100px; border:1px solid var(--line);
  background:var(--white); font-size:12.5px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.library-picker .lib-item:hover{ border-color:var(--brand-soft); }
.library-picker .lib-item.selected{ background:var(--accent-soft); border-color:var(--accent); color:#146B94; font-weight:600; }
.library-picker .empty{ font-size:12.5px; color:#8A93BE; padding:6px; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .app-nav-links{ display:none; }
  .app-nav-user{ display:none; }
  .burger{ display:flex; }
  .kpi-grid{ grid-template-columns:repeat(2,1fr); }
  .courses-grid{ grid-template-columns:1fr; }
  .media-grid{ grid-template-columns:1fr; }
  .media-filters-row{ flex-direction:column; align-items:stretch; }
  .media-filters-row #newResourceBtn{ margin-left:0 !important; }
  .content-shell{ grid-template-columns:1fr; }
  .lesson-list{ position:static; top:auto; max-height:none; order:1; }
  .lesson-list.collapsed .lesson-items{ display:none; }
  .lesson-toggle-mobile{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    padding:14px 16px; background:var(--paper-alt); border:none; cursor:pointer;
    font-family:var(--font-body); font-weight:600; font-size:13.5px; color:var(--brand);
  }
  .content-main{ order:2; }
}
@media (min-width:901px){
  .mobile-panel{ display:none !important; }
}