/*sociodiggital/includes/css/academia.css  */
/* Ocupa toda la pantalla disponible (tu barra superior global va fuera) */
body{
    background-color:  var(--sd-white) !important;
}

.sd-acad-wrap { position: relative; width: 100%; min-height: calc(100vh - 60px); }

/* Barra de progreso superior */
.sd-acad-progress { height: 3px; background: transparent; }
.sd-acad-progress-bar { height: 100%; width: 0; background: var(--sd-blue-400); transition: width .3s ease; }

/* Layout */
.sd-acad-content { display: grid; grid-template-columns: 320px 1fr; gap: 0; min-height: calc(100vh - 66px); }

/* Sidebar */
.sd-acad-sidebar { 
    background: var(--sd-white); color: var(--sd-blue-900); padding: 0px; overflow-y: auto; 
    border: 1px solid #E5E7EB;
    border-bottom: 0px solid #E5E7EB;
}
.sd-acad-sidebar a { color: inherit; text-decoration: none; }
.sd-acad-sidebar-header { display:flex; align-items:center; gap:10px; justify-content: space-between; }
.sd-acad-menu-close { display:none; background:none; border:0; color:var(--sd-blue-900) font-size:18px; }
.sd-acad-curso-title { margin: 0; font-size: 16px; font-weight: 600; padding:16px;}

.sd-acad-modulo { 
    border-top: 1px solid rgba(255,255,255,.08); 
    padding-top: 10px; 
    margin-top: 10px; 
}
.sd-acad-modulo-toggle { width:100%; background:none; color:var(--sd-blue-900); border:0; display:flex; justify-content:space-between; padding:8px 0; font-weight:600; cursor:pointer; }
.sd-acad-temas { list-style:none; margin:0; padding:0 0 4px 0; }
.sd-acad-tema { padding:0px; }
/*.sd-acad-tema.is-done .sd-acad-check { color: #4ade80; }
.sd-acad-check { display:inline-block; width:20px; text-align:center; margin-right:6px; }
*/


/* Iconos de estado del tema */
.sd-acad-check{
  width:14px;                 /* antes 18px */
  height:14px;                /* antes 18px */
  min-width:14px;
  border-radius:50%;
  border:2px solid var(--sd-gray-300);
  background:var(--sd-gray-300);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:8px;
  position:relative;
  font-size:0;
  line-height:1;
  box-sizing:content-box;
  vertical-align:middle;
}

/* completado */
.sd-acad-tema.is-done .sd-acad-check{
  background:var(--sd-blue-600);         /* verde corporativo OK */
  border-color:var(--sd-blue-600);
}
/* tick más grande, con stroke grueso y puntas redondas */
.sd-acad-tema.is-done .sd-acad-check::after{
  content:"";
  width:14px;                 /* antes 10px */
  height:14px;                /* antes 10px */
  display:block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;  /* asegura proporción */
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' \
       stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'>\
    <path d='M5 13l4 4L19 7'/></svg>");
}



/* (opcional) Alínea mejor el enlace del tema con el icono */
.sd-acad-tema a{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#0b1a2f;
}
.sd-acad-tema a:hover .sd-acad-tema-title{ text-decoration:none; }


/* Main */
.sd-acad-main { 
    background: var(--sd-white); padding: 0px; position: relative; 
    padding-left: 32px;
    padding-right: 48px;
    border-top: 0px solid #E5E7EB;
}


        

.sd-acad-top { display:flex; align-items:center; gap:12px; }
.sd-acad-menu-btn { display:none; background:none; border:0; font-size:24px; }
.sd-acad-tema-title {     
    font-size: 1.0rem;
    font-weight: 400;
    color: #1e2a39;
    line-height: 1em;
    margin: 0 0 6px;
}

.sd-acad-tema-title-big {     
    font-size: 1.5rem;
    font-weight: 400;
    color: #1e2a39;
    line-height: 1em;
    margin: 0 0 6px;
    padding-top: 24px;
}





.sd-acad-body { margin-top: 16px; }

/* Inscripción */
.sd-acad-enroll { background:#fff; padding:16px; border:1px solid #e5e7eb; border-radius:8px; }
.sd-btn { background:#0b1a2f; color:#fff; border:0; border-radius:8px; padding:10px 14px; cursor:pointer; }
.sd-btn-primary { background:#1e6fff; }

/* Acciones */
.sd-acad-actions { position: sticky; bottom: 0; display:flex; align-items:center; gap:12px; padding:10px 0; margin-top:20px; }
.sd-tag { display:inline-block; font-size:13px; padding:6px 10px; border-radius:8px; background:#eef2ff; color:#1e3a8a; }
.sd-tag-done { background:#dcfce7; color:#14532d; }

/* FAB Siguiente */
.sd-fab-next { 
    position: fixed; right: 20px; bottom: 20px; padding: 3px 16px; 
    border-radius: 6px; border: solid 2px #2192fd; 
    background:#fff; 
    color: #2192fd; 
    cursor:pointer; 
    z-index: 999999;
    font-weight: 500;
}

/* Responsive: móvil con overlay */
@media (max-width: 1024px){
  .sd-acad-content { grid-template-columns: 1fr; }
  .sd-acad-sidebar { position: fixed; inset:0 0 0 0; transform: translateX(-100%); transition: transform .25s ease; z-index: 9999; }
  .sd-acad-sidebar.open { transform: translateX(0); }
  .sd-acad-menu-close { display:block; }
  .sd-acad-menu-btn { 
    display:inline-block; 
    color: var(--sd-blue-900);
}
}

/* ===== Video full width y estable (16:9) ===== */
/* ===== Video full width, 16:9 y borde azul acento ===== */
.mejs-controls .mejs-time-rail .mejs-time-current{
    background : var(--sd-blue-400) !important;    /* azul acento */
}

.mejs-controls{
 background : #0b1a2f !important;
 opacity: 0.6 !important;
 height: 58px !important;
}


.mejs-mediaelement{
    background-color: var(--sd-white) !important;
}
.sd-acad-body .sd-video{
  z-index: 999;
  width:100%;
  max-width:100%;
  aspect-ratio:16/9;           /* altura estable */
  background:#87b8ff;
  position:relative;
  margin: 8px 0 18px 0;

  /* 👇 Estilo que pides */
  border:2px solid #87b8ff;    /* azul acento */
  border-radius:24px;          /* esquinas redondeadas */
  overflow:hidden;             /* recorta vídeo/controles a las esquinas */
  box-sizing: border-box; 
}

/* El player debe heredar el redondeado y ocupar todo */
.sd-acad-body .sd-video video,
.sd-acad-body .sd-video iframe,
.sd-acad-body .sd-video .wp-video-shortcode,
.sd-acad-body .sd-video .mejs-container{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  border-radius:inherit;
}

/* Capas/controles de MediaElement con el mismo redondeado */
.sd-acad-body .sd-video .mejs-layer,
.sd-acad-body .sd-video .mejs-controls{
  border-radius:inherit;
}

/* (opcional) realce al enfocar con teclado */
.sd-acad-body .sd-video:focus-within{
  box-shadow:0 0 0 1px #87b8ff;
}


/* Controles del reproductor pegados abajo y a ancho completo */
.sd-acad-body .sd-video .mejs-controls{
  position:absolute; left:0; right:0; bottom:0;
  width:100% !important;
}


/* ===== Tarjetas de módulos (en la sidebar) ===== */
.sd-acad-modulos{ margin-top:0px; }
.sd-acad-modulo{
  background:#fff;
  color:#0b1a2f;
  border:0px solid #E5E7EB;
  border-top:1px solid #E5E7EB;  
  border-radius:0px;
  margin: 0 0 12px 0;
  overflow:hidden;
}
.sd-acad-modulo-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 12px; cursor:pointer;
}
.sd-modulo-left{ display:flex; flex-direction:column; }
.sd-modulo-number{ color:#6B7280; font-size:12px; font-weight:600; line-height:1.2; }

.sd-modulo-title{ font-size:15px; font-weight:600; line-height:1.2; color:#0b1a2f; padding-top: 5px;}

.sd-modulo-right{ display:flex; align-items:center; gap:10px; }
.sd-acad-modulo-progress{ color:#0b3a8a; font-weight:600; font-size:13px; }

/* Flechita */
.sd-caret{
  width:16px; height:16px; flex:0 0 16px;
  background-repeat:no-repeat; background-position:center; background-size:16px 16px;
  transition: transform .2s ease;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8l4 4 4-4'/></svg>");
}
/* Colapsado: apunta a la derecha */
.sd-acad-modulo:not(.is-open) .sd-caret{ transform: rotate(-90deg); }

.sd-acad-temas{ list-style:none; margin:0; padding:0px; display:none; }
.sd-acad-modulo.is-open > .sd-acad-temas{ display:block; }

/* Enlaces de temas dentro de la tarjeta */
.sd-acad-modulo .sd-acad-tema a{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; text-decoration:none; color:#0b1a2f;
}
.sd-acad-modulo .sd-acad-tema a:hover .sd-acad-tema-title{ text-decoration:underline; }

/* tema en curso*/

/* Texto en dos líneas: título + tipo */
.sd-acad-tema a{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 8px; text-decoration:none; color:#0b1a2f;
}
.sd-acad-tema-text{ display:flex; flex-direction:column; gap:2px; line-height:1.25; }
.sd-acad-tema-type{ color:#6B7280; font-size:12px; font-weight:500; } /* gris claro como “Módulo X” */

/* Resaltado del tema actual */
.sd-acad-tema{ border-left:3px solid transparent; }
.sd-acad-tema.is-current{ border-left-color:#1e3a8a; }        /* azul acento */
.sd-acad-tema.is-current > a{ background:#eef2ff; }            /* azul muy claro */

/* (Se mantienen los checks que ya pusimos) */
.icon-flecha{
    position: relative;
    top: 5px;
}

:root{ --sd-topbar-h:56px; --sd-footer-h:0px; }

.sd-acad-progress{ position:sticky; top:var(--sd-topbar-h); }
.sd-acad-sidebar{ position:sticky; top:calc(var(--sd-topbar-h) + 0px); max-height:calc(100vh - var(--sd-topbar-h) - 16px - var(--sd-footer-h)); overflow:auto; }
.sd-fab-next{ position:fixed; right:48px; bottom:calc(16px + var(--sd-footer-h)); }


/* ======= Fix ancho en móvil / evitar overflow ======= */

/* La página de Academia nunca debe desbordar en X */
.sd-acad-page{ overflow-x: hidden; }

/* Asegura que nuestros contenedores no superen el viewport */
.sd-acad-wrap,
.sd-acad-content,
.sd-acad-main,
.sd-acad-progress{ max-width: 100vw; }

/* El vídeo ocupa el 100% SIN sumar el borde (evita 100%+4px) */
.sd-acad-body .sd-video{
  width: 100%;
  box-sizing: border-box;   /* <- clave del fix */
}

/* Progress bar sin desbordes */
.sd-acad-progress{ left: 0; right: 0; box-sizing: border-box; }

/* Sidebar overlay y contenido en móvil totalmente fluidos */
@media (max-width: 980px){
  .sd-acad-wrap{ padding-left: 12px; padding-right: 12px; }
  .sd-acad-content{ grid-template-columns: 1fr; gap: 14px; }

  .sd-acad-sidebar{
    position: fixed;
    top: var(--sd-topbar-h);
    left: 0; right: 0;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
  }

  .sd-acad-main{
    padding-left: 0; padding-right: 0;
    min-width: 0;                 /* por si acaso algún flex/grid intenta forzar ancho */
    padding-bottom: calc(20px + var(--sd-footer-h));
  }

  /* El botón flotante “Siguiente” no tapa ni genera scroll */
  .sd-fab-next{ right: 16px; bottom: calc(12px + var(--sd-footer-h)); }
}