/* ==========================================================================
   Dafoimagen - Paleta de marca sobre el LEARNING AREA de Tutor LMS 4.0
   Agente Gestor 2026-08-02 (re-merge Tutor 4.0.4).

   POR QUE SE REESCRIBIO ENTERO:
   La version 3.9 de este archivo apuntaba a .tutor-course-topic-single-header,
   .tutor-course-topic-item.is-active y .tutor-course-single-sidebar-title.
   Tutor 4.0 reemplazo la vista de leccion por el arbol templates/learning-area/
   con clases nuevas (.tutor-learning-header, .tutor-learning-sidebar,
   .tutor-learning-nav-item.active, .tutor-progress-bar-fill...), asi que TODOS
   los selectores viejos quedaron sin match. Version previa guardada en
   wp-content/px-backups/pre-reconstruccion-2026-08-02/assets/tutor-player.css.pre-4.0

   DECISION DEL CLIENTE: la vista de leccion ADOPTA el layout moderno de 4.0;
   aca solo se le aplica la paleta Dafo (no se reconstruye el diseno viejo).

   GOTCHA: las --dafo-* NO estan declaradas en :root en esta vista (solo viven
   en .dafo-dashboard y en los :root de dafo-woocommerce.css, que no cargan aca).
   Por eso se redeclaran abajo, acotadas a .tutor-learning-area.

   Valores medidos del sitio en 3.9 (04-baseline-visual-y-paleta.md, tabla 2.1).
   4.0 sirve este area en tema OSCURO (#161B26 / #2D3039 / Inter): por eso los
   overrides de fondo y color llevan !important.
   ========================================================================== */

.tutor-learning-area {
    --dafo-deep:       #04044A;
    --dafo-navy:       #000877;
    --dafo-blue:       #00A3FF;
    --dafo-icy:        #AFE2FF;
    --dafo-bg:         #F7F8FC;
    --dafo-text:       #141414;
    --dafo-border:     #E6EDF5;
    --dafo-green2:     #16A34A;
    --dafo-side-bg:    #EFF1F6;
    --dafo-side-tx:    rgb(51, 65, 85);
    --dafo-side-line:  rgb(224, 226, 234);
    --dafo-head: "adineue PRO", "Space Grotesk", Montserrat, sans-serif;
    --dafo-body: Gotham, Montserrat, Inter, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Barra superior -> gradiente de marca (NO es color plano)
   -------------------------------------------------------------------------- */
.tutor-learning-area .tutor-learning-header {
    background: linear-gradient(90deg, #04044A 0%, #000877 100%) !important;
    font-family: var(--dafo-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    padding: 8px 16px !important;
    min-height: 60px;
}
.tutor-learning-area .tutor-learning-header,
.tutor-learning-area .tutor-learning-header a,
.tutor-learning-area .tutor-learning-header span,
.tutor-learning-area .tutor-learning-header svg,
.tutor-learning-area .tutor-learning-header-back,
.tutor-learning-area .tutor-learning-header-title,
.tutor-learning-area .tutor-learning-header-content {
    color: #FFFFFF !important;
}
.tutor-learning-area .tutor-learning-header svg { fill: currentColor; }
.tutor-learning-area .tutor-learning-header-title {
    font-family: var(--dafo-head) !important;
}

/* --------------------------------------------------------------------------
   2. Sidebar "Contenido del curso" -> gris claro de marca
   -------------------------------------------------------------------------- */
.tutor-learning-area .tutor-learning-sidebar {
    background: var(--dafo-side-bg) !important;
    color: var(--dafo-side-tx) !important;
    font-family: var(--dafo-body) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}
.tutor-learning-area .tutor-learning-sidebar a,
.tutor-learning-area .tutor-learning-sidebar span,
.tutor-learning-area .tutor-learning-sidebar p,
.tutor-learning-area .tutor-learning-nav-header-title,
.tutor-learning-area .tutor-learning-progress-text,
.tutor-learning-area .tutor-learning-pages-item,
.tutor-learning-area .tutor-learning-nav-item {
    color: var(--dafo-side-tx) !important;
}
.tutor-learning-area .tutor-learning-nav-header-title,
.tutor-learning-area .tutor-learning-sidebar-curriculum > .tutor-learning-nav-header-title {
    font-family: var(--dafo-head) !important;
    color: var(--dafo-deep) !important;
}

/* Items de leccion: separador fino, sin pastilla oscura */
.tutor-learning-area .tutor-learning-nav-item {
    background: transparent !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--dafo-side-line) !important;
    padding: 12px 44px 12px 16px !important;
}
.tutor-learning-area .tutor-learning-nav-item:hover {
    background: #E3E8F2 !important;
}

/* Item activo -> navy de marca (en 4.0 la clase es .active, no .is-active) */
.tutor-learning-area .tutor-learning-nav-item.active,
.tutor-learning-area .tutor-learning-nav-item.is-active {
    background: #EAF1FF !important;
    box-shadow: inset 3px 0 0 var(--dafo-navy) !important;
}
.tutor-learning-area .tutor-learning-nav-item.active,
.tutor-learning-area .tutor-learning-nav-item.active a,
.tutor-learning-area .tutor-learning-nav-item.active span,
.tutor-learning-area .tutor-learning-nav-item.is-active,
.tutor-learning-area .tutor-learning-nav-item.is-active a,
.tutor-learning-area .tutor-learning-nav-item.is-active span {
    color: var(--dafo-navy) !important;
    font-weight: 600 !important;
}

/* Pages del sidebar (Overview / Notas / Discusiones...) */
.tutor-learning-area .tutor-learning-pages-item.active,
.tutor-learning-area .tutor-learning-pages-item[aria-current="page"] {
    background: #EAF1FF !important;
    color: var(--dafo-navy) !important;
}

/* --------------------------------------------------------------------------
   3. Progreso y completado -> verde de marca
   -------------------------------------------------------------------------- */
.tutor-learning-area .tutor-progress-bar-fill {
    background-color: var(--dafo-green2) !important;
}
.tutor-learning-area .tutor-learning-nav-item svg[class*="check"],
.tutor-learning-area .tutor-learning-nav-item .tutor-icon-check,
.tutor-learning-area .tutor-learning-nav-item [class*="completed"] svg {
    color: var(--dafo-green2) !important;
    fill: var(--dafo-green2) !important;
}
.tutor-learning-area .tutor-mark-as-complete-button {
    background-color: var(--dafo-green2) !important;
    color: #FFFFFF !important;
    font-family: var(--dafo-body) !important;
    font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   4. Botones -> azul de acento (spec "VER CERTIFICADO")
   -------------------------------------------------------------------------- */
.tutor-learning-area .tutor-btn-primary,
.tutor-learning-area .tutor-learning-header .tutor-btn,
.tutor-learning-area a[href*="certificate"].tutor-btn,
.tutor-learning-area a[href*="certificado"].tutor-btn {
    background-color: var(--dafo-blue) !important;
    border-color: var(--dafo-blue) !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-family: var(--dafo-body) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.tutor-learning-area .tutor-btn-primary:hover,
.tutor-learning-area .tutor-learning-header .tutor-btn:hover {
    background-color: var(--dafo-navy) !important;
    border-color: var(--dafo-navy) !important;
}
/* El boton de completar NO se pinta de azul: manda la regla verde de arriba */
.tutor-learning-area .tutor-mark-as-complete-button.tutor-btn-primary {
    background-color: var(--dafo-green2) !important;
    border-color: var(--dafo-green2) !important;
}

/* --------------------------------------------------------------------------
   5. Tipografia general del area de contenido
   -------------------------------------------------------------------------- */
.tutor-learning-area .tutor-lesson-content,
.tutor-learning-area .tutor-learning-area-content {
    font-family: var(--dafo-body) !important;
}
.tutor-learning-area .tutor-lesson-content h1,
.tutor-learning-area .tutor-lesson-content h2,
.tutor-learning-area .tutor-lesson-content h3,
.tutor-learning-area .tutor-lesson-content h4 {
    font-family: var(--dafo-head) !important;
}

/* Foco de inputs (notas / discusiones) en navy */
.tutor-learning-area textarea:focus,
.tutor-learning-area input[type="text"]:focus {
    border-color: var(--dafo-navy) !important;
    box-shadow: 0 0 0 2px rgba(0, 8, 119, .12) !important;
    outline: none !important;
}

/* ==========================================================================
   RONDA 9 (2026-08-03) - 4 ajustes de layout pedidos por el usuario sobre
   captura real a ~1855px + fix de bug de paleta descubierto en el proceso.
   Backup pre-r9: dafo-backups/reproductor-layout-r9-2026-08-03-044738/
   ========================================================================== */

/* R9-0. BUGFIX: .tutor-learning-header-inner pinta blanco encima del
   gradiente navy del header (background:#fff propio de Tutor 4.0) -> el
   gradiente de marca casi no se veia (solo una franja de 8px abajo, tapada
   arriba por la admin bar). Necesario para A4 (boton sobre navy real) y
   para el criterio 2.2(a) del baseline (colores de la tabla aplicados). */
.tutor-learning-area .tutor-learning-header-inner,
.tutor-learning-area .tutor-learning-header-content {
    background: transparent !important;
}

/* R9-A1. Sidebar sin padding en el contenedor exterior; el padding se
   redistribuye a nivel de bloque/item para que el texto no quede pegado
   al borde. */
.tutor-learning-area .tutor-learning-sidebar {
    padding: 0 !important;
}
.tutor-learning-area .tutor-learning-progress {
    padding: 16px 16px !important;
}
.tutor-learning-area .tutor-learning-nav {
    padding: 12px 8px !important;
}
.tutor-learning-area .tutor-learning-sidebar-pages {
    padding: 8px 16px 48px !important;
}

/* R9-A2. Un solo scroll vertical: el contenedor exterior y el wrapper de la
   curricula NUNCA scrollean; el UNICO scroll permitido es el de la lista
   de modulos/lecciones (.tutor-learning-nav), que soporta los 6 modulos /
   25 lecciones completos. */
.tutor-learning-area .tutor-learning-sidebar {
    overflow: hidden !important;
}
.tutor-learning-area .tutor-learning-sidebar-curriculum {
    overflow: hidden !important;
}
.tutor-learning-area .tutor-learning-nav {
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

/* R10-1 (reemplaza R9-A3). Decision explicita del usuario: el video ocupa
   TODO el ancho del panel derecho, sin tope de altura. En r9 se limitaba a
   max-height:62vh via width:min(100%, calc(62vh*16/9)) para que los tabs
   quedaran siempre visibles sin scroll -> eso dejaba franjas blancas
   laterales gruesas en pantallas anchas. El usuario evaluo el trade-off
   (video mas grande vs tabs siempre visibles sin scroll) y eligio el
   video: se saca el tope de altura, width pasa a 100% fijo, aspect-ratio
   16/9 sigue siendo la UNICA fuente de la proporcion (nunca dos
   dimensiones fijas a la vez, ver gotcha de letterboxing de r9). Los tabs
   y "Tomar nota" pueden quedar debajo del fold: siguen existiendo y
   funcionando, solo que ahora requieren scroll en pantallas anchas y
   bajas donde el 16:9 a ancho completo supera el alto del viewport. */
.tutor-learning-area .tutor-learning-area-container {
    max-width: 100% !important;
    width: 100% !important;
}
.tutor-learning-area .tutor-lesson-content-tab {
    border-radius: 0 !important;
    margin: 0 !important;
}
.tutor-learning-area .tutor-lesson-video-wrapper {
    width: 100% !important;
}
.tutor-learning-area .tutor-ratio.tutor-ratio-16x9 {
    aspect-ratio: 16 / 9 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding-top: 0 !important;
    margin: 0 auto !important;
}
.tutor-learning-area .tutor-ratio.tutor-ratio-16x9 > * {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
}

/* R9-A4. Boton "Completado" arriba a la derecha de la barra navy superior.
   No hay forma de mover el <form> del footer al DOM del header sin tocar
   el template PHP (regla #2 CLAUDE.md raiz -> solo CSS/snippet en este
   pedido); se usa position:fixed anclado a la MISMA variable de offset que
   usa el propio header de Tutor (--wp-admin--admin-bar--height) para que
   quede alineado al navy bar con o sin admin bar. Solo >=1200px: en
   mobile/tablet ese lugar lo ocupa el toggle del drawer
   (.tutor-learning-header-toggle-mobile) y superponer lo rompe, asi que ahi
   el boton se queda en su posicion original junto a "Siguiente". */
@media (min-width: 1200px) {
    /* .tutor-learning-area-footer es position:sticky -> crea su propio
       stacking context a nivel raiz (stack level 0/auto). Sin esto, el
       z-index:20 del form solo gana DENTRO de ese contexto local y sigue
       perdiendo contra el header (fixed, z-index:10) al comparar globalmente. */
    .tutor-learning-area .tutor-learning-area-footer {
        z-index: 20 !important;
    }
    .tutor-learning-area .tutor-learning-area-footer form:has(.tutor-mark-as-complete-button) {
        position: fixed !important;
        top: calc(var(--wp-admin--admin-bar--height, 0px) + 12px) !important;
        right: 24px !important;
        left: auto !important;
        z-index: 20 !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   RONDA 10 (2026-08-03) - Tarea 2 (boton volver desbordado) y Tarea 3
   (espacio muerto en el borde izquierdo del sidebar). La Tarea 1 (video
   full width) esta arriba, reemplazando el bloque R9-A3 in-place.
   Backup pre-r10: dafo-backups/reproductor-layout-r10-<timestamp>/
   ========================================================================== */

/* R10-2. BUGFIX boton volver (flecha, arriba-izq de la barra navy).
   CAUSA RAIZ (no es regresion nueva de r9): la regla generica de la seccion
   4 de este archivo, '.tutor-learning-area .tutor-btn-primary/.tutor-btn'
   dentro del header, aplica background azul + padding:8px 16px + border-
   radius:6px a CUALQUIER .tutor-btn del header -- pensada para el boton
   'VER CERTIFICADO', pero el boton volver es TAMBIEN un <a class=tutor-btn
   tutor-btn-ghost tutor-btn-icon> dentro de un wrapper fijo de 48x48. Esa
   regla generica le agregaba padding:8px 16px (box-sizing:border-box) al
   <a>, dandole 52x36px reales dentro de un contenedor de 48x48 -> el boton
   se desbordaba 2-4px del wrapper por cada lado. Antes de r9 no se notaba
   (header-inner tapaba el gradiente con fondo blanco); al sacar ese fondo
   blanco en r9 el desborde quedo expuesto contra el navy. Fix: excluir el
   boton ghost/icon de la regla de acento azul y darle un tamano explicito
   que respeta el wrapper de 48x48 sin desbordar. */
.tutor-learning-area .tutor-learning-header-back .tutor-btn,
.tutor-learning-area .tutor-learning-header-back a {
    background: transparent !important;
    border-color: transparent !important;
    color: #FFFFFF !important;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: none;
}
.tutor-learning-area .tutor-learning-header-back .tutor-btn:hover,
.tutor-learning-area .tutor-learning-header-back a:hover {
    background: rgba(255, 255, 255, .15) !important;
}

/* R10-3. Espacio muerto en el borde izquierdo del sidebar. CAUSA: Tutor
   4.0.4 reserva '.tutor-learning-nav-body{padding-left:30px}' como indent
   nativo de arbol (modulo -> lecciones), que se SUMA al padding del propio
   item (16px) y al padding del contenedor .tutor-learning-nav (8px, r9-A1)
   -> 54px totales de hueco antes del check/texto de cada leccion, visible
   como una franja blanca vertical. El titulo del modulo (arriba) no tiene
   ese mismo padding de 30px, por eso el desbalance salta a la vista. Fix:
   bajar el padding-left del nav-body a un valor chico (4px) que preserva
   un indent minimo (se sigue viendo que la leccion cuelga del modulo) sin
   dejar la franja vacia; el aire que pidio el usuario para que el texto no
   quede pegado al borde queda a cargo del padding propio del item (16px,
   sin tocar). */
.tutor-learning-area .tutor-learning-nav-body {
    padding-left: 4px !important;
}

/* ==========================================================================
   RONDA 11 (2026-08-03) - Tarea 1: indicador de item activo duplicado.
   Backup pre-r11: dafo-backups/reproductor-layout-r11-<timestamp>/
   ========================================================================== */

/* R11-1. CAUSA RAIZ: Tutor 4.0.4 dibuja su PROPIO indicador nativo de item
   activo via '.tutor-learning-nav-item.active::before' (pseudo-elemento,
   position:absolute, width:2px, height:40px, background:rgb(0,8,119) --
   casualmente el mismo navy de marca). Ese pseudo-elemento usa un offset FIJO
   'left:-9px' relativo a la propia caja del item (no relativo al padding del
   contenedor). Mientras '.tutor-learning-nav-body' tenia padding-left:30px (
   valor por defecto de Tutor, anterior a esta migracion), ese -9px lo dejaba
   dentro de la zona de indentacion, sin verse como una barra suelta.
   En la r10 bajamos ese padding a 4px (fix de espacio muerto, R10-3) para
   sacar la franja blanca del arbol -- el item se desplazo 26px a la
   izquierda, y el pseudo-elemento nativo (que viaja CON el item por su
   left:-9px relativo) quedo pegado contra el borde izquierdo real del
   sidebar, separado y desalineado del propio item. Resultado visible: DOS
   barras navy verticales -- la nativa (flotando contra el borde del sidebar,
   x~3px) y la nuestra (R9, box-shadow inset 3px sobre el item mismo, sec.2
   de este archivo). Confirmado en vivo: al ocultar '.tutor-learning-nav-topic
   .active' desaparecen ambas; al deshabilitar SOLO este archivo (tutor-
   player.css) la barra nativa persiste sola -- prueba de que es 100% nativa
   de Tutor, no un residuo nuestro.
   DECISION: se conserva la barra NUESTRA (box-shadow inset, sec.2 -- queda
   pegada al propio item, que es la que el usuario prefiere) y se anula la
   nativa via 'content:none', sin tocar el archivo del plugin (regla #2). */
.tutor-learning-area .tutor-learning-nav-item.active::before,
.tutor-learning-area .tutor-learning-nav-item.is-active::before {
    content: none !important;
}

/* ==========================================================================
   RONDA 12 (2026-08-03) - Tarea 1: linea vertical gris conectora en el
   sidebar (arbol modulo->lecciones). Tarea 2: check blanco en el boton
   Completado. Backup pre-r12: dafo-backups/reproductor-layout-r12-<ts>/
   ========================================================================== */

/* R12-1. CAUSA RAIZ (distinta de R11): Tutor 4.0.4 dibuja un conector de
   arbol nativo via '.tutor-learning-nav-body::before' -- position:absolute,
   top:0, height igual al alto del cuerpo del topic (~436px en el modulo con
   6 lecciones), left:21px, width:1.5px, background:rgb(245,245,246) (gris
   muy tenue). Es UN elemento por cada topic/modulo (6 en esta pagina), no
   por item, y corre TODO el largo de la lista de lecciones de ese modulo --
   distinto del '.tutor-learning-nav-item.active::before' que se neutralizo
   en R11 (ese era el indicador de item activo duplicado, this uno es el
   conector de arbol visible SIEMPRE, este o no haya item activo). Verificado
   con getComputedStyle(nav-body, '::before') en vivo antes de tocar nada.
   No afecta los separadores horizontales entre lecciones (border-bottom en
   .tutor-learning-nav-item, seccion 2 de este archivo, selector distinto) ni
   la barra navy del item activo (box-shadow inset, tambien seccion 2). */
.tutor-learning-area .tutor-learning-nav-body::before {
    content: none !important;
}

/* R12-2. El boton 'Marcar como completado / Completado' usa DOS SVGs
   distintos segun estado (no el mismo icono recoloreado):
   - Pendiente: check simple 20x20, path stroke="currentColor" -> YA sale
     blanco porque hereda el color:#FFFFFF !important del boton (seccion 3
     de este archivo). No requiere fix.
   - Completado: badge/sello 40x40 con DOS paths: el primero (forma del
     sello) trae fill="white" hardcodeado (ya blanco), el SEGUNDO (el
     check interior) trae stroke="#1C7731" hardcodeado (verde oscuro fijo,
     NO currentColor) -> por eso el check se veia verde en vez de blanco.
   Fix acotado al path con atributo stroke explicito (el check), sin tocar
   el path de la forma del sello (ya blanco) ni el icono del estado
   pendiente (selector scope .completado). Verificado visualmente en los
   dos estados tras el cambio. */
.tutor-learning-area .tutor-mark-as-complete-button.completed svg path[stroke] {
    stroke: #FFFFFF !important;
}