/* ============================================================
   MB Video Progress - estilos del reproductor con checks
   Prefijo .mbyt-  |  Acento naranja #f97316  |  Check verde #16a34a
   ============================================================ */

.mbyt-player{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,sans-serif;
  max-width:1030px; margin:0 auto;
}
.mbyt-boot{
  background:#fff; border:1px solid rgba(15,23,42,.10); border-radius:12px;
  padding:48px 20px; text-align:center; color:#64748b; font-size:14px;
}

.mbyt-wrap{
  display:flex; flex-direction:row; align-items:stretch; width:100%;
  background:#fff; border-radius:12px; overflow:hidden;
  box-shadow:0 8px 26px rgba(15,23,42,.08); border:1px solid rgba(15,23,42,.10);
}
.mbyt-wrap-single{ flex-direction:column; }

.mbyt-main{ flex:1; min-width:0; background:#fff; position:relative; align-self:flex-start; }
/* En layout de video solo (columna) el video debe ocupar todo el ancho */
.mbyt-wrap-single .mbyt-main{ align-self:stretch; width:100%; }
.mbyt-frame{ position:relative; width:100%; padding-bottom:56.25%; height:0; overflow:hidden; }
.mbyt-frame iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:none; }

/* Boton "Lista" (escritorio): oculta/muestra la barra lateral */
.mbyt-toggle-btn{
  position:absolute; top:8px; right:8px; z-index:10;
  background:rgba(15,23,42,.7); color:#fff; border:none; border-radius:6px;
  padding:6px 10px; font-size:12px; cursor:pointer; font-family:inherit; transition:background .2s ease;
}
.mbyt-toggle-btn:hover{ background:#f97316; }
.mbyt-side.mbyt-hidden{ display:none; }

/* ---------- Barra lateral ---------- */
.mbyt-side{
  width:270px; min-width:270px; background:#f8fafc; display:flex; flex-direction:column;
  border-left:1px solid rgba(15,23,42,.10); overflow:hidden;
}
.mbyt-head{
  padding:10px 12px; background:#fff; color:#0f172a; font-size:13px; font-weight:700;
  border-bottom:1px solid rgba(15,23,42,.10); display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.mbyt-cnt{ color:#64748b; font-weight:700; font-size:12px; white-space:nowrap; }
.mbyt-list{
  flex:1; overflow-y:auto; padding:4px 0;
  scrollbar-width:thin; scrollbar-color:#f97316 #f1f5f9;
}
.mbyt-list::-webkit-scrollbar{ width:6px; }
.mbyt-list::-webkit-scrollbar-track{ background:#f1f5f9; }
.mbyt-list::-webkit-scrollbar-thumb{ background:#f97316; border-radius:3px; }

/* ---------- Fila de video ---------- */
.mbyt-item{
  display:flex; align-items:center; gap:8px; padding:6px 10px; cursor:pointer;
  transition:background .2s ease;
}
.mbyt-item:hover{ background:rgba(249,115,22,.08); }
.mbyt-item.mbyt-active{ background:rgba(249,115,22,.12); }

.mbyt-num{ color:#64748b; font-size:11px; min-width:16px; text-align:center; }
.mbyt-item.mbyt-active .mbyt-num{ color:#f97316; font-weight:bold; }

.mbyt-thumb{ width:60px; min-width:60px; height:34px; border-radius:4px; overflow:hidden; position:relative; }
.mbyt-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.mbyt-it-title{
  color:#0f172a; font-size:11px; line-height:1.3; flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.mbyt-item.mbyt-active .mbyt-it-title{ font-weight:600; }

/* Check a la derecha de la fila */
.mbyt-item .mbyt-chk{ order:5; margin-left:4px; }

/* ---------- Check ---------- */
.mbyt-chk{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  border:2px solid #cbd5e1; background:#fff; cursor:pointer; padding:0;
  position:relative; transition:all .15s ease;
}
.mbyt-chk:hover{ border-color:#16a34a; }
.mbyt-chk::after{
  content:'\2713'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.6);
  color:#fff; font-size:12px; font-weight:bold; opacity:0; transition:all .15s ease;
}
.mbyt-item.mbyt-done .mbyt-chk{ background:#16a34a; border-color:#16a34a; }
.mbyt-item.mbyt-done .mbyt-chk::after{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.mbyt-item.mbyt-done .mbyt-it-title{ color:#64748b; }

/* ---------- Tema con varios videos: boton 'Marcar video como visto' ----------
   Mismo branding que el 'Marcar como completado' de LearnDash (el JS copia su
   color/fuente/radio en --mbyt-ld-bg; aqui va el valor de reserva). */
.mbyt-vbtn-wrap{ display:flex; justify-content:center; padding:16px 0 4px; }
.mbyt-vbtn{
  --mbyt-ld-bg:#019e7c;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  box-sizing:border-box; padding:12px 20px; border-radius:20px; border:0;
  background:var(--mbyt-ld-bg); color:#fff;
  font-family:'Poppins',sans-serif; font-size:12px; font-weight:800; line-height:1.25;
  transition:filter .15s ease, background .15s ease, color .15s ease;
}
.mbyt-vbtn:hover{ filter:brightness(1.08); }
.mbyt-vbtn-ico{ font-size:1.15em; line-height:1; opacity:.55; }
/* Visto: contorno con sombra interior (sin borde, para no cambiar el tamano) */
.mbyt-vbtn.mbyt-done{ background:transparent; color:var(--mbyt-ld-bg); box-shadow:inset 0 0 0 2px var(--mbyt-ld-bg); }
.mbyt-vbtn.mbyt-done .mbyt-vbtn-ico{ opacity:1; }

/* 'Marcar como completado' de LearnDash bloqueado hasta ver todos los videos */
.mbyt-ld-locked{ opacity:.45 !important; cursor:not-allowed !important; filter:grayscale(.4); }
.mbyt-ld-note{ text-align:center; font-size:13px; color:#64748b; margin:8px 0; }

/* ---------- Toggle movil ---------- */
.mbyt-mtoggle{
  display:none; width:100%; padding:10px; background:#f8fafc; color:#0f172a;
  border:none; border-top:1px solid rgba(15,23,42,.10);
  font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; text-align:center;
}
.mbyt-mtoggle:hover{ background:rgba(249,115,22,.08); }

.mbyt-err{
  background:#fff; border:1px solid rgba(15,23,42,.10); border-radius:12px;
  color:#dc2626; text-align:center; padding:30px 20px; font-size:13px; line-height:1.5;
}

@media (max-width:768px){
  .mbyt-wrap{ flex-direction:column; }
  .mbyt-main{ align-self:stretch; width:100%; }
  /* La lista pasa debajo del video, a lo ancho, con su propio scroll */
  .mbyt-side{ width:100%; min-width:100%; max-height:60vh; border-left:none; border-top:none; }
  .mbyt-side:not(.mbyt-open){ display:none; }
  .mbyt-mtoggle{ display:block; }
  /* En movil manda el boton de "Mostrar lista"; ocultamos el de escritorio */
  .mbyt-toggle-btn{ display:none; }
  /* Filas mas altas y checks mas grandes para el dedo */
  .mbyt-item{ padding:10px 12px; }
  .mbyt-item .mbyt-chk{ width:24px; height:24px; }
  .mbyt-item .mbyt-chk::after{ font-size:14px; }
  .mbyt-thumb{ width:68px; min-width:68px; height:38px; }
  .mbyt-it-title{ font-size:12.5px; }
  .mbyt-head{ font-size:14px; }
}

/* ============================================================
   Modo oscuro (plugin Dark/Light Mode -> html.mb-dark)
   ============================================================ */
html.mb-dark .mbyt-boot,
html.mb-dark .mbyt-err{ background:#1A1A1C; border-color:#2E2E31; color:#A09A94; }
html.mb-dark .mbyt-wrap{ background:#1A1A1C; border-color:#2E2E31; box-shadow:0 8px 26px rgba(0,0,0,.35); }
html.mb-dark .mbyt-main{ background:#1A1A1C; }
html.mb-dark .mbyt-side{ background:#1A1A1C; border-left-color:#2E2E31; }
html.mb-dark .mbyt-head{ background:#1A1A1C; color:#F2F0EE; border-bottom-color:#2E2E31; }
html.mb-dark .mbyt-cnt{ color:#A09A94; }
html.mb-dark .mbyt-list{ scrollbar-color:#f97316 #242427; }
html.mb-dark .mbyt-list::-webkit-scrollbar-track{ background:#242427; }
html.mb-dark .mbyt-item:hover{ background:rgba(249,115,22,.12); }
html.mb-dark .mbyt-item.mbyt-active{ background:rgba(249,115,22,.16); }
html.mb-dark .mbyt-num{ color:#A09A94; }
html.mb-dark .mbyt-it-title{ color:#F2F0EE; }
html.mb-dark .mbyt-item.mbyt-done .mbyt-it-title{ color:#A09A94; }
html.mb-dark .mbyt-chk{ background:#1A1A1C; border-color:#3A3A3E; }
html.mb-dark .mbyt-ld-note{ color:#A09A94; }
html.mb-dark .mbyt-mtoggle{ background:#1A1A1C; color:#F2F0EE; border-top-color:#2E2E31; }