/*
 * Finaurum — Player / Curso inscripto (learning-area de Tutor LMS 4.0.1).
 * Ronda 2. Reskin visual completo sobre el markup de los overrides en
 * finaurum-child/tutor/learning-area/*. Usa los tokens de finaurum-tokens.css
 * (ya enqueado antes que este archivo — ver functions.php Ronda 1).
 *
 * Convencion de nombres: todo lo nuevo de esta pantalla usa el prefijo fin-player-*
 * para no pisar clases nativas tutor-*. Donde reutilizamos markup/JS nativo de
 * Tutor (botones Alpine, modales, tabs, comments AJAX) restilizamos las clases
 * tutor-* nativas puntualmente (scopeadas dentro de .fin-player-*) en vez de
 * reescribir su HTML, para no romper la interactividad ya cableada por Tutor.
 */

/* ==========================================================================
   Reset local del documento standalone (el player no pasa por el theme)
   ========================================================================== */

.tutor-learning-area {
	background: #ffffff; /* Ronda 52, Punto 8: mockup en vivo confirma bg-white puro rgb(255,255,255), no el crema --fin-bg-alt (#faf5ec) */
	font-family: var(--fin-font-body);
}

.tutor-learning-area-body {
	background: #ffffff;
}

/* ==========================================================================
   1) BARRA SUPERIOR (fin-player-header)
   ========================================================================== */

.tutor-learning-header,
.fin-player-header {
	background: var(--fin-navy);
	border: none;
}

/* Ronda 7: el header estaba position:static (perdio el position:fixed/top:0 nativo
   de Tutor porque header.php override no lleva la clase .tutor-learning-header) y al
   scrollear se iba de la pantalla, dejando ver el fondo crema detras del sidebar
   (fixed, top:62px, siempre pinneado). Sticky lo fija arriba sin sacarlo del flujo,
   asi que no requiere compensar padding en el resto del layout (mas seguro que
   fixed en los breakpoints donde el header pasa a 2 filas). */
.fin-player-header {
	position: sticky;
	top: 0;
	z-index: 30;
	display: grid; /* Ronda 52, Punto 1: grid de 3 columnas para centrar de verdad la pill de progreso (mockup en vivo: PROGRESO DEL CURSO queda en el medio real del header). El flex anterior con header-left creciendo (flex:1 1 260px) empujaba todo a la derecha, dejando el centro corrido ~236px. */
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
	padding: 14px 28px;
	color: #ffffff;
	min-height: 64px;
}

.fin-player-header-left {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
	justify-self: start; /* Ronda 52: item de grid, ya no necesita flex-grow para ocupar espacio */
}

.fin-player-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(255, 255, 255, 0.85);
	font-weight: 700;
	font-size: 14px;
	padding:4px 12px;
	border-radius:8px;
	text-decoration: none;
	white-space: nowrap;
	transition: color .15s ease;
}
.fin-player-back:hover {
	
	color: rgba(255, 255, 255, 0.85);
	background-color: #ffffff1a;
}
.fin-player-back-arrow {
	display: inline-flex;
	align-items: center;
}
.fin-player-back-arrow svg {
	width: 14px;
	height: 14px;
}

.fin-player-course-label {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	padding-left: 20px;
}
.fin-player-course-eyebrow {
	font-size: 12px; /* Ronda 52, Punto 4: valores reales del mockup via getComputedStyle */
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}
.fin-player-course-title {
	font-family: var(--fin-font-heading);
	font-weight: 700;
	font-size: 16px;
	color: #ffffff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 42ch;
}

/* Punto 3 (restyle 2026-07-15, completado): pill visual alineado al markup nuevo
   de header.php (columna de texto right-aligned .fin-player-progress-text-col +
   track fijo 80px, en fila). Reemplaza la adaptacion CSS-only anterior (markup
   viejo de 2 filas apiladas) — ver Contexto_Finaurum.md, Ronda 6. */
.fin-player-header-center {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-self: center; /* Ronda 52, Punto 1 */
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 6px 14px;
}
.fin-player-progress-text-col {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	white-space: nowrap;
}
.fin-player-progress-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1;
}
.fin-player-progress-track {
	flex: 0 0 80px;
	width: 80px;
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	overflow: hidden;
}
.fin-player-progress-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--fin-mostaza);
	transition: width .3s ease;
}
.fin-player-progress-text {
	font-family: var(--fin-font-body), monospace;
	font-size: 12px;
	font-weight: 800;
	color: #ffffff;
	line-height: 1;
}

.fin-player-header-right {
	display: flex;
	align-items: center;
	gap: 16px;
	justify-self: end; /* Ronda 52, Punto 1 */
}

.fin-btn-complete {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--fin-font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	padding: 6px 14px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease;
}
.fin-btn-complete:hover:not(:disabled):not(.is-done),
.fin-btn-complete:focus:not(:disabled):not(.is-done),
.fin-btn-complete:focus-visible:not(:disabled):not(.is-done) {
	/* Ronda 53: se agrego :focus/:focus-visible (antes solo :hover) - mismo root cause que
	   el Punto 7 de Ronda 52 (hello-elementor/reset.css pinta TODO button:focus,button:hover
	   de magenta #cc3366) pero disparado por FOCUS, no hover: al hacer click el boton queda
	   focuseado nativamente y como esta clase nunca declaraba background para :focus, el
	   reset ganaba (confirmado en vivo: btn.matches(":focus") con mouse lejos -> magenta
	   rgb(204,51,102); con :hover cubierto la especificidad de esta regla ya le ganaba al
	   reset, por eso el hover solo nunca se vio magenta). */
	background: rgba(255, 255, 255, 0.2);
}
.fin-btn-complete:disabled:hover,
.fin-btn-complete:disabled:focus {
	/* Ronda 53: blindaje preventivo - un boton disabled puede igual recibir :hover del mouse
	   (no bloqueado por el navegador como :focus si lo esta); sin este override tambien caeria
	   en el button:hover magenta del reset. */
	background-color: rgba(255, 255, 255, 0.1);
}
.fin-btn-complete:disabled {
	opacity: .5;
	cursor: not-allowed;
}
.fin-btn-complete.is-done {
	background: var(--fin-verde);
	border-color: var(--fin-verde);
	cursor: default;
}
/* Ronda 56, Punto 1: el boton de 'Marcar como completada' de la vista de leccion ahora
   envia el form nativo tutor_complete_lesson (necesario para el mecanismo real de Tutor,
   ver header.php) - display:contents para que el <form> no participe como caja propia en
   el layout flex de .fin-player-header-right, el <button> adentro sigue viendose y
   comportandose exactamente igual que antes (hijo directo del flex, mismo gap). */
.fin-btn-complete-form {
	display: contents;
}

.fin-btn-complete-icon {
	width: 14px;
	height: 14px;
	opacity: .6;
}
.fin-btn-complete.tutor-btn-loading {
	opacity: .7;
	pointer-events: none;
}

.fin-player-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 28px;
	border-radius: 8px;
	color: #ffffff;
	font-size: 22px;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease;
}
.fin-player-close:hover {
	background: #e7000b;
	color: var(--fin-mostaza);
}

.fin-player-header-toggle-mobile {
	display: none;
}
.fin-player-sidebar-toggle {
	background: none;
	border: none;
	border-radius: 8px;
	color: #ffffff;
	font-size: 20px;
	cursor: pointer;
	padding: 4px 8px;
	transition: background-color .15s ease;
}
/* 2026-07-28 (Gestor, mobile fixes r64) - Punto 2: fondo rosa/magenta solido al tocar
   el boton hamburguesa (reportado por el usuario, confirmado en vivo: tras un tap real
   el boton queda con background-color:rgb(204,51,102), matches(':hover')===true).
   Root cause CONFIRMADA leyendo hello-elementor/assets/css/reset.css: el tema padre
   trae una regla sitewide "button:focus,button:hover{background-color:#cc3366;
   color:#fff}" para dar feedback visual a botones NATIVOS sin estilo (ej. submit de
   WooCommerce) - .fin-player-sidebar-toggle nunca declaro su propio background para
   :hover/:focus (a diferencia de .fin-btn-complete, que SI lo hace desde Ronda 53 por
   el mismo motivo), asi que sobre el cae ese fondo generico. Preexistente desde que se
   creo este boton - Ronda 63 no toco esta regla (solo reordeno el WRAPPER
   .fin-player-header-toggle-mobile en el breakpoint <=600px). No es un falso
   positivo (una memoria vieja del sitio lo habia catalogado asi) - se ve en vivo. */
.fin-player-sidebar-toggle:hover,
.fin-player-sidebar-toggle:focus,
.fin-player-sidebar-toggle:focus-visible,
.fin-player-sidebar-toggle:active {
	background-color: rgba(255, 255, 255, 0.15);
	color: #ffffff;
}

@media (max-width: 1000px) {
	.fin-player-header {
		display: flex; /* Ronda 52: el grid de 3 columnas de escritorio no aplica en tablet/mobile, se restaura flex-wrap tal cual estaba (sin tocar Rondas 33/34/47) */
		flex-wrap: wrap;
		row-gap: 10px;
	}
	.fin-player-header-center {
		order: 3;
		max-width: none;
		flex: 1 1 100%;
	}
	.fin-player-header-toggle-mobile {
		display: block;
	}
}

@media (max-width: 600px) {
	.fin-player-course-title {
		max-width: 22ch;
	}
}

/* 2026-07-28 (Gestor, Ronda 67): la regla que ocultaba el <span> de texto del boton
   "Marcar como completada" en <=600px (dejando solo el icono visible) se REVIERTE a
   pedido explicito del usuario - ahora el texto se muestra igual que en desktop. Ronda 6
   (2026-07-15) documento esa ocultacion como "comportamiento correcto" en su momento;
   el pedido actual es el opuesto, asi que se revierte la regla existente en vez de
   agregar una capa nueva que la pelee por especificidad. El espacio que libera esto en
   la fila se recupera en el bloque "Ronda 67" mas abajo (reduccion de tamano/padding del
   pill + gaps del header, SOLO en este breakpoint), para que
   texto+icono+X+divisor+hamburguesa sigan entrando en una sola fila a 375px sin
   desbordar ni apretar la hamburguesa (medido en vivo antes de escribir). */

/* 2026-07-28 (Gestor, mobile header/card + Q&A) - Punto 1a: en <=600px el header queda
   'desprolijo' (reportado por el usuario con captura real a 375px, no resize_page): 3
   grupos (identidad / progreso / controles) sin relacion de grilla clara entre si. El
   header ya colapsa a 3 filas via flex-wrap desde el bloque de max-width:1000px de
   arriba (fila1=header-left, luego header-right+toggle-mobile en la fila2 porque son
   los siguientes items order:0 en el DOM, y header-center al final por order:3) - ese
   orden deja los controles ANTES que la barra de progreso, sin relacion visual entre
   ambos. Reordenamos SOLO en este breakpoint angosto (no toca >600px, incluido el
   768px de tablet que ya funciona bien con el orden actual): 1) identidad (sin tocar),
   2) progreso (order:2, pasa a ser la 2da fila, mismo ancho full-width que ya tenia),
   3) controles agrupados como una fila 'toolbar' (order:3): boton
   completar/pill+cerrar quedan juntos a la izquierda, el toggle del sidebar
   (hamburguesa) se separa a la derecha con margin-left:auto + un divisor sutil - dos
   grupos con una relacion deliberada en vez de 3 iconos sueltos. */
@media (max-width: 600px) {
	.fin-player-header {
		row-gap: 14px; /* un poco mas de aire que el 10px heredado del breakpoint de tablet */
		column-gap: 8px; /* Ronda 67: "gap: 24px" del grid de escritorio (regla base de
			.fin-player-header) nunca se reseteaba en su componente column-gap para este
			breakpoint flex - solo row-gap fue overrideado (aca y en el breakpoint de
			tablet). Con el texto del pill "Marcar como completada" visible de nuevo (ver
			mas arriba), esos 24px entre header-right y el toggle-mobile hacian que el
			grupo completo no entrara en una fila y la hamburguesa cayera sola. Se reduce
			a 8px SOLO en este breakpoint - medido en vivo antes de escribir. */
	}
	.fin-player-header-center {
		order: 2;
	}
	.fin-player-header-right {
		order: 3;
		gap: 8px; /* Ronda 67: gap interno pill<->X reducido de 16px a 8px (mismo motivo que
			el column-gap de arriba) para que el grupo vuelva a entrar en una sola fila
			junto con la hamburguesa. */
	}
	.fin-player-header-toggle-mobile {
		order: 3;
		margin-left: auto;
		padding-left: 12px;
		border-left: 1px solid rgba(255, 255, 255, 0.14);
	}
	/* Ronda 68: Ronda 67 habia reducido tamano/padding del pill "Marcar como completada"
	   (10.5px/6px 10px/gap 4px/icono 12px) para que entrara en la fila junto con la X. Esta
	   ronda repuntea "Volver" a la landing del curso (mismo destino que la X, ver header.php)
	   y oculta la X en este mismo breakpoint por quedar redundante (ver regla
	   .fin-player-close mas abajo) - eso libera el ancho que forzaba el achique. Medido en
	   vivo ANTES de escribir (Chrome DevTools, 375px, con la X ya oculta): los valores
	   ORIGINALES pre-Ronda-67 (12px/.05em/padding 6px 14px/gap 6px/icono 14px) entran en una
	   sola fila junto con la hamburguesa sin desbordar (scrollWidth===clientWidth=375) ni
	   cortar texto, probado con el texto largo "Marcar como completada" - se restauran tal
	   cual, no hace falta un tamano intermedio. */
	.fin-player-header-right .fin-btn-complete {
		font-size: 12px;
		letter-spacing: .05em;
		padding: 6px 14px;
		gap: 6px;
	}
	.fin-player-header-right .fin-btn-complete-icon {
		width: 14px;
		height: 14px;
	}
	/* Ronda 68, Punto 2: la X (".fin-player-close") queda redundante en este breakpoint una
	   vez que "Volver" se repuntea a la landing del curso actual (mismo destino, ver
	   header.php) - decision explicita del usuario de aplicar el cambio SOLO en mobile
	   (<=600px). En tablet/desktop "Volver" tambien cambio de destino (el href vive en PHP,
	   no puede diferenciarse por breakpoint), pero ahi la X NO se oculta todavia - queda
	   pendiente de decision del usuario si tambien se oculta ahi (ver Backlog en
	   Contexto_Finaurum.md). Se oculta por CSS en vez de borrar el markup en header.php:
	   rollback mas simple (revertir esta regla sola) sin tocar PHP de nuevo. */
	.fin-player-close {
		display: none;
	}
}

/* ==========================================================================
   2) SIDEBAR IZQUIERDA — CONTENIDO DEL CURSO
   ========================================================================== */

.tutor-learning-sidebar {
	background: #ffffff;
	border-right: 1px solid rgba(12, 60, 96, 0.08);
	gap:0px;
}
.tutor-learning-sidebar.fin-player-sidebar{
	padding:0px ;
}
.tutor-learning-sidebar-curriculum{
	border-radius:0px !important;	
}

.tutor-learning-sidebar .tutor-learning-sidebar-curriculum .tutor-learning-nav{
	gap:0px;
}

span.fin-player-nav-icon.is-done{
	border: 1px solid #000;
    border-radius: 100px;
}

span.fin-player-nav-icon.is-done svg{
    border-radius: 100px;
}

/* Tutor 4.x trae un "dark mode" nativo del learning-area vía [data-tutor-theme="dark"]
   (wp-content/plugins/tutor/assets/css/tutor-core.min.css redefine --tutor-surface-l1 y
   afines a tonos casi negros bajo ese atributo). Mantuvimos las clases nativas
   .tutor-learning-sidebar-curriculum / .tutor-learning-nav en el markup (necesarias para que
   Alpine/JS de Tutor siga funcionando 1:1), y esa regla nativa (2 clases encadenadas) le gana
   en especificidad a nuestro .tutor-learning-sidebar de arriba (1 clase) sin importar el orden
   de carga. Finaurum no tiene toggle de tema — forzamos SIEMPRE el tema claro acá, con
   !important para neutralizar el atributo [data-tutor-theme="dark"] sea cual sea su origen
   (preferencia del OS/navegador o toggle nativo). */
.tutor-learning-sidebar .tutor-learning-sidebar-curriculum,
.tutor-learning-sidebar .tutor-learning-nav {
	background-color: #ffffff !important;
	padding:0px !important;
}

/* Ronda 7 — mismo problema que arriba pero en el area de contenido: Tutor pinta
   .tutor-lesson-content-tab (nativo, envuelve video+head+tabs) con --tutor-surface-l1
   (#1f242f en dark, blanco en light) via [data-tutor-theme="dark"], que Tutor setea
   solo segun prefers-color-scheme del visitante. Se nos escapo en la Ronda 6 (QA se
   hizo con navegador en modo claro, nunca broto el charcoal). El video ya trae su
   propio fondo navy (.fin-player-video-placeholder) y cada panel de tab su propio
   fondo blanco explicito — esta clase nativa no necesita fondo/borde propio: forzada
   siempre transparente, sin importar el tema del visitante (mismo criterio que el
   sidebar de arriba: Finaurum no tiene toggle de tema, siempre claro). */
.tutor-lesson-content-tab.tutor-tabs-horizontal {
	background-color: transparent !important;
	border-color: transparent !important;
}
/* Ronda 7 (fix sobre la marcha, detectado en QA 375px): a max-width:576px Tutor tiene
   una regla nativa MAS especifica y aparte (3 clases: .tutor-lesson-content
   .tutor-lesson-content-tab .tutor-tabs-content) que le pinta su propio fondo
   --tutor-surface-l1 al panel de contenido de tab (Descripcion/Preguntas/Adjuntos),
   independiente del wrapper de arriba — neutralizar el wrapper no alcanza en mobile. */
.tutor-lesson-content-tab .tutor-tabs-content,
.tutor-lesson-content-tab .tutor-tabs-nav {
	background-color: transparent !important;
	border-color: transparent !important;
}

/* Ronda 8, Punto 1: valores reales del mockup via getComputedStyle (h4 "CONTENIDO DEL
   CURSO") — font-family Inter (body, NO Playfair/heading-serif), 12px, weight 900,
   letter-spacing ~0.05em (0.6px a 12px). text-transform/color ya coincidian. */
.fin-player-sidebar-title {
	font-family: var(--fin-font-body);
	font-weight: 900;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--fin-navy);
	padding: 18px 20px 12px;
	border-bottom: 1px solid rgba(12, 60, 96, 0.06);
}

.fin-player-nav-topic {
	border-bottom: 1px solid rgba(12, 60, 96, 0.06);
}

.fin-player-nav-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 20px 14px 16px;
	border-left: 4px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
.fin-player-nav-header:hover {
	background: rgba(12, 60, 96, 0.05);
}

.fin-player-nav-topic.is-active .fin-player-nav-header {
	background: rgba(0, 144, 84, 0.05); /* var(--fin-verde) al 5% — no hay token, rgba directo */
	border-left-color: var(--fin-verde);
}
.fin-player-nav-topic.is-active .fin-player-nav-header .fin-player-nav-title {
	color: var(--fin-verde); /* mockup: titulo de la fila activa en VERDE, no navy */
}
.fin-player-nav-topic.is-active .fin-player-nav-header .fin-player-nav-eyebrow,
.fin-player-nav-topic.is-active .fin-player-nav-header .fin-player-nav-meta {
	color: var(--fin-navy);
}

.fin-player-nav-topic.is-locked .fin-player-nav-header {
	cursor: default;
	opacity: .55;
}

.fin-player-nav-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}
.fin-player-nav-icon svg {
	width: 20px;
	height: 20px;
}
.fin-player-nav-icon.is-done svg { color: var(--fin-verde); }
.fin-player-nav-icon.is-pending svg { color: var(--fin-gray); }
.fin-player-nav-icon.is-locked svg { color: #a9b2bc; }

.fin-player-nav-body-text {
	min-width: 0;
	flex: 1 1 auto;
}
.fin-player-nav-eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fin-gray);
	margin-bottom: 2px;
}
.fin-player-nav-title {
	display: block;
	font-weight: 700;
	font-size: 14px;
	color: var(--fin-navy);
	line-height: 1.3;
}
.fin-player-nav-meta {
	display: block;
	font-size: 11px;
	color: var(--fin-gray);
	margin-top: 4px;
}

.fin-player-nav-arrow {
	flex: 0 0 auto;
	margin-top: 4px;
	transition: transform .2s ease;
	color: var(--fin-gray);
}
.fin-player-nav-topic.is-active .fin-player-nav-arrow { color: var(--fin-navy); }
.fin-player-nav-topic[x-cloak] { display: none !important; }

.fin-player-nav-lessons {
	padding: 0 20px 0px 52px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* Punto 1C (restyle sidebar 2026-07-16): fila de leccion con doble icono
   (tipo a la izquierda, siempre visible + estado a la derecha), eyebrow
   "MODULO N - TITULO" y duracion real con fallback al label generico. */
.fin-player-nav-lesson {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	text-decoration: none;
	color: inherit;
	padding: 4px 0;
}
.fin-player-nav-lesson-type-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	color: var(--fin-navy);
}
.fin-player-nav-lesson-type-icon svg {
	width: 14px;
	height: 14px;
}
.fin-player-nav-lesson-body {
	min-width: 0;
	flex: 1 1 auto;
}
.fin-player-nav-lesson-eyebrow {
	display: block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(12, 60, 96, 0.5);
	margin-bottom: 2px;
	line-height: 1;
}
.fin-player-nav-lesson-title {
	display: block;
	font-weight: 700;
	font-size: 13px;
	color: var(--fin-navy);
	line-height: 1.3;
}
.fin-player-nav-lesson.is-active {
	/* Ronda 52, Punto 5b: mismo lenguaje visual que el modulo activo (fondo verde claro + borde izquierdo verde), analogo a .fin-player-nav-topic.is-active .fin-player-nav-header de arriba, adaptado al contexto angosto/indentado de la fila de leccion. */
	/* Ronda 53: padding-left y margin-left recalculados con getBoundingClientRect en vivo.
	   Antes (padding-left:9px + margin:-8px) el borde verde de la leccion activa quedaba en
	   x=60px mientras el borde del modulo activo (.fin-player-nav-topic.is-active
	   .fin-player-nav-header) esta en x=16px -> 44px de diferencia, se veian como dos cajas
	   verdes desconectadas en vez de un mismo tratamiento visual continuo. margin-left pasa a
	   -52px (cancela completo el padding-left:52px de .fin-player-nav-lessons) para que el
	   borde quede exactamente en x=16px, igual que el modulo. padding-left sube de 9px a 49px
	   para compensar y dejar el texto en la MISMA posicion horizontal que las lecciones no
	   activas (medido: title x=94px en ambos casos tras el fix). margin-right se deja igual
	   (-8px), no formaba parte del bug reportado. */
	background: rgba(0, 144, 84, 0.06);
	border-left: 4px solid var(--fin-verde);
	border-radius: 0px;
	/* Ronda 56, Punto 3: margin-right paso de -8px a -20px para cancelar COMPLETO el
	   padding-right:20px de .fin-player-nav-lessons (antes solo cancelaba 8px de los 20,
	   dejando el borde derecho de esta caja 12px mas adentro que el de
	   .fin-player-nav-topic.is-active .fin-player-nav-header - medido en vivo: modulo
	   activo llega a x=288 (limite real de la columna, antes del scrollbar), leccion
	   activa solo hasta x=276). padding-right subido de 8px a 20px en la misma medida para
	   que el icono de estado (ultimo hijo flex) NO se corra de posicion - mismo patron ya
	   usado en Ronda 53 para el lado izquierdo (ahi se compenso padding-left al cambiar
	   margin-left). Verificado: right edge pasa de 276 a 288, igual que el modulo. */
	padding: 6px 20px 6px 49px;
	margin: 0 -20px 0 -52px;
}
.fin-player-nav-lesson.is-active .fin-player-nav-lesson-title {
	color: var(--fin-verde);
	text-decoration: underline;
}
.fin-player-nav-lesson-meta {
	display: block;
	font-family: var(--fin-font-body), monospace;
	font-size: 10px;
	color: rgba(72, 84, 96, 0.7);
	margin-top: 2px;
}
.fin-player-nav-lesson-status-icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.fin-player-nav-lesson-status-icon.is-done {
	background: var(--fin-verde);
	color: #fff;
}
.fin-player-nav-lesson-status-icon.is-done svg {
	width: 12px;
	height: 12px;
}
.fin-player-nav-lesson-status-icon.is-pending {
	border: 1px solid rgba(12, 60, 96, 0.3);
	background: #fff;
	transition: border-color .15s ease;
}
.fin-player-nav-lesson:hover .fin-player-nav-lesson-status-icon.is-pending {
	border-color: var(--fin-verde);
}
.fin-player-nav-lesson-status-icon.is-locked {
	color: rgba(72, 84, 96, 0.4);
}
.fin-player-nav-lesson-status-icon.is-locked svg {
	width: 14px;
	height: 14px;
}
.fin-player-nav-lesson.is-locked {
	pointer-events: none;
	opacity: .55;
}

/* Sub-nav de paginas (course info / qna / announcements / reviews) heredado de Tutor */
.tutor-learning-sidebar-pages {
	border-top: 1px solid rgba(12, 60, 96, 0.08);
	background: var(--fin-bg-alt);
}
.tutor-learning-pages-item {
	color: var(--fin-gray) !important;
	font-weight: 600;
}
.tutor-learning-pages-item.active {
	color: var(--fin-verde-dark) !important;
}

/* Botón "Más" (Popover trigger nativo de Tutor::components\Popover en sidebar.php, visible al
   pie del sidebar cuando NO se está viendo una subpágina) no está en el mockup de Finaurum —
   se oculta puntualmente por su x-ref, sin tocar el bloque de navegación de subpáginas nativo
   (course-info / qna / announcements / reviews) que usa otro branch del mismo template. */
.tutor-learning-sidebar-pages [x-ref="trigger"] {
	display: none !important;
}

/* Punto 2 (restyle 2026-07-15): ocultar el contenedor COMPLETO de "Mas" (no solo
   su boton trigger) cuando no hay subpagina activa. El trigger ya estaba oculto
   arriba, pero el div contenedor (fondo navy propio nativo de Tutor) quedaba
   vacio y visible, dejando una franja oscura flotando al fondo del sidebar. La
   clase `.expanded` ya la agrega condicionalmente sidebar.php ($active_menu) —
   CSS puro, no requiere tocar PHP. */
.tutor-learning-sidebar-pages:not(.expanded) {
	display: none !important;
}

/* Ronda 9, P1 (residual documentado en Ronda 8): en la franja angosta
   992-1000px el header pasa a 2 filas (~118.5px, sticky top:0 — ver seccion 1)
   pero el sidebar nativo de Tutor (.tutor-learning-sidebar, fuera de este
   archivo) trae top:62px fijo, pensado para un header de 1 sola fila — el
   heading "Contenido del curso" queda tapado casi por completo. Aditivo, no
   toca las reglas de neutralizacion de dark-mode de Ronda 7. */
/* Ronda 55, Punto 3: reemplaza el hack de 2 breakpoints fijos (119px para 992-1000px,
   66px!important para >=1001px) por UNA sola regla que usa la altura REAL del header
   medida en JS (--fin-header-h, seteada en header.php via ResizeObserver). Root cause
   de fondo: los valores 66/119 asumian un header de altura fija en cada rango, pero
   CUALQUIER cambio de contenido del header (texto mas largo, wrap, tooltip) podia volver
   a destapar el bug original de Ronda 54 P3 (heading 'CONTENIDO DEL CURSO' tapado/con
   hueco en blanco bajo el header). Con la var CSS el sidebar SIEMPRE arranca justo donde
   termina el header real, sin importar cuantas filas ocupe. Fallback 66px si el JS no
   corrio todavia (primer paint). Unifica el rango 993-1000px (antes 992-1000px) con el
   resto de docked (>=993px) - alineado con el comentario ya existente en la seccion de
   video mas abajo que fija el corte overlay/docked en 992/993px. */

/* Ronda 54, Punto 3: el header custom de Finaurum (.fin-player-header) mide 66px
   de alto en el layout de escritorio de 1 sola fila (>1000px, grid de Ronda 52), pero
   el offset nativo de Tutor para el sidebar docked (.tutor-learning-sidebar{top:62px;
   height:calc(100dvh - 62px)}) asume un header nativo de 62px -> 4px de desfasaje
   (el sidebar arranca 4px ANTES de que termine el header), reportado por el usuario
   como "el sidebar invade el header". Ya existe un hack analogo arriba para el rango
   angosto 992-1000px (top:119px, header 2 filas, Ronda 8/9) - este bloque cubre el
   resto del rango desktop (>1000px, header de 1 sola fila) sin tocarlo. z-index
   explicito (menor al del header, 30) como blindaje adicional para que el header
   quede siempre como bloque solido por encima, aunque geometricamente ya no deberia
   haber overlap real. NO toca <=992px: ahi el sidebar nativo cambia a comportamiento
   totalmente distinto (overlay/drawer full-screen: position:fixed, top:0, height:100dvh,
   width:100%, transform:translate(100%)/is-open) que no depende del alto del header -
   patron responsive intencional preexistente, confirmado leyendo tutor-learning-area.min.css
   antes de tocar nada. */
@media (min-width: 993px) {
	.tutor-learning-sidebar {
		top: var(--fin-header-h, 66px) !important;
		height: calc(100dvh - var(--fin-header-h, 66px)) !important;
		z-index: 10;
	}
}

/* 2026-07-28 (Gestor, mobile fixes r64) - Punto 3a: el drawer del sidebar (<=992px,
   overlay full-screen nativo de Tutor: position:fixed;top:0;height:100dvh) queda TAPADO
   por el header custom sticky (z-index:30, mas alto que el z-index:20 nativo del
   sidebar) - al abrirlo, el titulo "CONTENIDO DEL CURSO" queda 100% oculto detras del
   header y la fila visible inmediatamente debajo del header es la que geometricamente
   cae ahi (ej. "Modulo 1"), pegada, sin ningun gap deliberado. Confirmado en vivo
   (getBoundingClientRect: titulo top=0, contenido arranca en 44.8px, header real mide
   166px a 375px / 114px a 768px - ambos MAS ALTOS que donde arranca el contenido, asi
   que el header cubre bastante mas que solo el titulo). Reproducido igual a 375 y 768px
   (mismo mecanismo, la transicion overlay/docked es a los 992/993px ya establecidos en
   el resto de este archivo). Preexistente: Ronda 54 Punto 3 dejo esto explicitamente
   sin tocar ("el comportamiento nativo <=992px... patron responsive intencional
   preexistente") - la compensacion con --fin-header-h de Ronda 55 solo se aplico al
   sidebar DOCKED (>=993px, arriba). Mismo patron de fix, reutilizando la misma variable
   ya medida en vivo por el script de header.php (incluye offset de admin bar si
   corresponde, Ronda 56). box-sizing:border-box para que el padding-top no sume alto
   extra a los 100dvh ya fijados por Tutor. */
@media (max-width: 992px) {
	.tutor-learning-sidebar.is-open {
		box-sizing: border-box;
		padding-top: var(--fin-header-h, 166px);
	}
}

/* ==========================================================================
   3) AREA DE VIDEO + PLACEHOLDER BUNNY STREAM
   ========================================================================== */

.tutor-learning-area .tutor-learning-area-content {
	background: #ffffff;
	/* Ronda 55, Punto 1: `.tutor-learning-area-content` trae un padding-top:64px NATIVO
	   (tutor-learning-area.min.css) pensado para compensar un header FIJO/superpuesto de
	   64px. El header custom .fin-player-header es sticky EN FLUJO (ya ocupa su propio
	   espacio antes de este wrapper - confirmado en vivo: top de este wrapper = 66px,
	   justo despues del header, no superpuesto). Ese padding quedaba TOTALMENTE duplicado
	   sobre el padding-top:40px que Ronda 54 aplico en .tutor-learning-area-container mas
	   abajo, inflando el hueco real medido en vivo sobre el video a 64+40+8(margin nativo
	   de .tutor-lesson-content)=112px en vez de los ~40px esperados - la causa real del
	   'hueco en blanco enorme' reportado. Se neutraliza el duplicado nativo aca. */
	padding-top: 0;
}
.tutor-learning-area-container {
	background: transparent;
}

/* Ronda 8, Punto 3: el cap nativo de Tutor (.tutor-learning-area-container max-width:
   760/860/944px segun breakpoint) dejaba ~245px de crema de mas a cada lado a 1440px
   (video card media 858px vs ~1041px del mockup). El mockup no tiene cap real en
   desktop estandar: usa max-w-7xl (1280px) que solo actua en pantallas MUY grandes
   (arriba de ~1664px con el sidebar de 320px + 32px de padding de cada lado
   descontados) — hasta ahi, el contenido ocupa TODO el ancho disponible con un
   respiro fijo de 32px (lg:p-8 de Tailwind) a cada lado. Replicamos ese criterio: en
   >=993px (justo arriba del breakpoint nativo 992px donde el sidebar pasa a overlay,
   para no interferir con el layout mobile/drawer) subimos el max-width a 1344px
   (1280 + 64 de padding, box-sizing border-box, asi el contenido interior tope
   exacto en 1280px como el mockup) y agregamos el padding lateral de 32px que el
   contenedor nativo no tenia (dependia solo del centrado via margin:auto). A 1440px
   el area disponible (1105px) es menor al cap, asi que el resultado es simplemente
   "ancho disponible menos 32px de cada lado" = ~1041px, identico al mockup medido
   en vivo. Mobile/tablet (<=992px) sin tocar — el padding-left/right:16px nativo ya
   coincide con el mockup (p-4) y el max-width base (760px) nunca se activa ahi. */
@media (min-width: 993px) {
	.tutor-learning-area .tutor-learning-area-container {
		max-width: none; /* Ronda 52, Punto 6: pedido explicito de full width - reemplaza el cap de 1344px de Ronda 8 */
		padding: 26px 20px; /* Ronda 55, Punto 1: pedido explicito - bajar el padding superior 75% sobre el valor REAL medido en vivo (no el nominal de 40px). Total padding-top efectivo antes del fix = 64px (duplicado de .tutor-learning-area-content, ver arriba) + 40px (este container) = 104px. 104*0.25=26px. Con el duplicado ya en 0, estos 26px son el 100% del padding-top restante -> hueco final ~26+8px(margin nativo tutor-lesson-content, sin tocar)=34px, baja de 112px real medido. Horizontal 20px sin cambios, fuera de alcance del pedido. */
		box-sizing: border-box;
	}
}

/* 2026-07-28 (Gestor, mobile fixes r64) - Punto 3b: a <=600px la card del video arranca
   PEGADA al header (reportado por el usuario, confirmado en vivo: gap real header->video
   = 1px). Root cause: `.tutor-learning-area-content` tiene padding-top:0 (neutralizacion
   del duplicado nativo, Ronda 55, sin @media - aplica siempre) y el padding-top
   deliberado de 26px de arriba esta scopeado SOLO a >=993px - nunca hubo un valor
   equivalente para mobile/tablet angosto, el nativo de Tutor ahi es padding-top:0 puro
   (confirmado con getComputedStyle: "0px 16px 96px"). Scopeado a <=600px (no a los
   768px de tablet, que ya tiene ~10px de aire real vía otro margen nativo y no fue
   reportado como roto - no tocar para no introducir un cambio no pedido ahi). */
@media (max-width: 600px) {
	.tutor-learning-area-container {
		padding-top: 20px;
	}
}

/* Ronda 7: mockup tiene el card del video flotando con las 4 esquinas redondeadas
   (rounded-2xl=16px) + borde sutil + shadow-2xl. Sitio tenia border-radius:0 (esquinas
   cuadradas). */
.fin-player-video-wrapper {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(12, 60, 96, 0.1);
}

.fin-player-video-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	/* Ronda 53: reemplaza min-height:420px fijo. Al pasar el contenedor a full-width (Ronda 52,
	   Punto 6) el ancho crecio (medido en vivo: 1023px a 1440px) pero el alto quedo fijo en
	   420px -> ratio 1023x420 = ~2.44:1, mucho mas achatado que el estandar de video 16:9
	   (1.78:1) que ya usan .fin-player-video-native video/iframe mas abajo en este mismo
	   archivo. aspect-ratio escala junto con el ancho real en cualquier breakpoint (a 1023px
	   da ~575px de alto). min-height:320px es un piso de seguridad para mobile/tablet, donde
	   el ancho disponible es chico y 16:9 puro daria un placeholder demasiado bajo (ej. a
	   375px de viewport, ancho util ~343px -> 16:9 da ~193px, el piso lo sube a 320px). */
	aspect-ratio: 64 / 27; /* Ronda 54, Punto 2: 25% MENOS alto que Ronda 53 -> (16/9)/0.75 = 64/27 (2.37:1). Medido en vivo a 1440px: ancho util 1023px, alto pasa de 576px (Ronda 53, 16:9) a 432px (=576*0.75 exacto). Escala proporcional en cualquier breakpoint. */
	min-height: 240px; /* Ronda 54: piso de seguridad para mobile tambien reducido 25% (320px->240px), misma proporcion de achique */
	background: linear-gradient(to bottom right, #0c3c60 0%, #0a2a44 100%); /* Ronda 7: stops reales del mockup (extraidos via getComputedStyle), antes #0a2f4d->#081f33 top-to-bottom, mas oscuro/desaturado */
	text-align: center;
	padding: 40px 20px;
}

/* 2026-07-28 (Gestor, mobile header/card) - Punto 1b: a <=1000px (donde el ancho util
   del wrapper, ej. 343px a 375px de viewport, queda por debajo del resultado de
   min-height:240px * aspect-ratio:64/27 = ~568.9px), el navegador deriva un
   MIN-WIDTH AUTOMATICO desde ese min-height a traves del aspect-ratio (comportamiento
   real de CSS Sizing 4: min-width:auto + aspect-ratio + un min-height definido en el
   otro eje transfiere un minimo a este eje) - confirmado en vivo con getComputedStyle
   (ancho computado = 568.875px, EXACTO a 240*64/27). Ese minimo le gana al 'fill
   available' del contenedor (343px) y el placeholder se dibuja mas ancho que su
   wrapper -> el titulo y el badge quedan cortados contra el borde derecho (overflow
   horizontal interno, clippeado visualmente por el overflow:hidden del wrapper, sin
   generar scroll de pagina). A >=1000px el ancho disponible siempre supera 568.9px asi
   que este fix es un no-op ahi (confirmado en vivo a 768px: wrapper 726px = placeholder
   724px, sin diferencia) - no rompe tablet/desktop. */
@media (max-width: 1000px) {
	.fin-player-video-placeholder {
		/* min-width:0 solo (primer intento) NO alcanzo - confirmado en vivo que el ancho
		   computado seguia en 568.875px con min-width:0 aplicado. El width:100% explicito
		   de abajo SI resuelve el bug de punta a punta (confirmado en vivo: 568.875px ->
		   341px, igual al wrapper). Se deja min-width:0 igual como refuerzo/documentacion,
		   pero el fix real es el width. */
		min-width: 0;
		width: 100%;
	}
}
.fin-player-video-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--fin-mostaza);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fin-navy);
}
.fin-player-video-icon svg {
	width: 30px;
	height: 30px;
}
.fin-player-video-title {
	font-family: var(--fin-font-heading);
	font-weight: 700;
	font-size: 22px;
	color: #ffffff;
	margin: 0;
}
.fin-player-video-badge {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fin-mostaza);
}

/* .fin-player-video-note: bloque eliminado FISICAMENTE del DOM en content.php
   (Ronda 6, 2026-07-15) — el badge de Bunny Stream ya no se renderiza en ningun
   caso. La regla display:none que lo ocultaba (fallback de una ronda anterior,
   cuando el write de PHP a content.php estaba bloqueado por el sandbox del MCP)
   se retira aca por prolijidad: ya no tiene markup al que aplicar. Ver
   Contexto_Finaurum.md, Ronda 6. */

.fin-player-video-native video,
.fin-player-video-native iframe {
	width: 100%;
	display: block;
	aspect-ratio: 64 / 27; /* Ronda 54, Punto 2: mismo criterio -25% de alto que el placeholder, para que un video real futuro mantenga la misma proporcion */
	background: #000;
}

/* ==========================================================================
   4) TITULO + META + ANTERIOR/SIGUIENTE
   ========================================================================== */

.fin-player-lesson-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 0px 16px;
	flex-wrap: wrap;
}
.fin-player-lesson-title {
	font-family: var(--fin-font-heading);
	font-weight: 700;
	font-size: 26px;
	color: var(--fin-navy);
	margin: 0 0 6px;
}
.fin-player-lesson-meta {
	font-size: 14px;
	color: var(--fin-gray);
	font-weight: 500;
}

.fin-player-lesson-nav {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}
.fin-player-nav-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 14px;
	padding: 10px 18px;
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, transform .15s ease;
}
.fin-player-nav-btn.is-prev {
	color: var(--fin-navy);
	background: var(--fin-bg-alt);
	border: 1px solid rgba(12, 60, 96, 0.12);
}
.fin-player-nav-btn.is-prev:hover {
	background: #fff;
	border-color:#0c3c60;
}
.fin-player-nav-btn.is-next {
	color: #ffffff;
	background: var(--fin-verde);
}
.fin-player-nav-btn.is-next:hover {
	background: var(--fin-verde-dark);
}
.fin-player-nav-btn[aria-disabled="true"] {
	pointer-events: none;
	opacity: .4;
}

/* ==========================================================================
   5) TABS — Descripcion / Preguntas (Q&A) / Adjuntos
   ========================================================================== */

.tutor-tab-panel .tutor-p-6{
	padding:20px 0px;
}

.fin-player-tabs-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0px;
	border-bottom: 1px solid rgba(12, 60, 96, 0.08);
	background: transparent;
}
.fin-player-tab-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	padding: 14px 6px;
	margin-bottom: -1px;
	font-family: var(--fin-font-body);
	font-weight: 700;
	font-size: 14px;
	color: var(--fin-gray);
	cursor: pointer;
}
.fin-player-tab-btn:hover {
	color: var(--fin-navy);
	background-color: transparent; /* Ronda 52, Punto 7: neutraliza el bg magenta (#cc3366) que hello-elementor/reset.css aplica globalmente a button:hover/:focus - confirmado en vivo (matched CSS rules), esta regla nunca declaraba background-color propio. */
}
.fin-player-tab-btn.is-active {
	/* !important: neutraliza cualquier background/box-shadow que pise el estado ".is-active"
	   desde afuera de este archivo (Tutor core/pro reutilizan esa misma clase utilitaria en
	   decenas de componentes propios con colores de marca distintos a los de Finaurum — ver
	   incidente "tab Q&A en magenta"). El tab activo debe verse IGUAL que "Descripción": solo
	   color de texto + subrayado verde, sin relleno. */
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--fin-verde) !important; /* antes: var(--fin-verde-dark) — parity con mockup (#009054) */
	border-bottom-color: var(--fin-verde) !important;
}
.fin-player-tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	border-radius: 999px;
	background: var(--fin-mostaza);
	color: var(--fin-navy);
	font-size: 11px;
	font-weight: 800;
	padding: 0 5px;
}

.tutor-tabs-content {
	background: #ffffff;
}

/* "Take Note" (Tutor Pro Lesson Notes, TUTOR_PRO\LessonNotes::load_lesson_notes_nav_button,
   inyectado vía do_action('tutor_lesson_single_after_nav_items', ...) en content.php) no está
   en el mockup de Finaurum — se oculta sin desactivar la feature globalmente en el sitio. */
#tutor-lesson-nav-take-note-btn {
	display: none !important;
}

.tutor-learning-area div:has(+ .tutor-comments-list) .tutor-small.tutor-text-secondary, .tutor-learning-area div:has(+ .tutor-comments-list) .tutor-text-primary{
	color:var(--fin-navy) !important;
}

.tutor-border-t{
	border-color:#0c3c600d;
}

/* ==========================================================================
   6) DESCRIPCION — callout "Nota de Luis"
   ========================================================================== */

.fin-player-overview {
	padding: 20px 0px;
}
.fin-player-overview-question {
	font-family: "Inter";
	font-weight: 700;
	font-size: 14px;
	color: var(--fin-navy);
	margin: 0 0 16px;
}

/* Ronda 8, Punto 4a: mockup real (getComputedStyle) es un box COMPACTO de una sola
   linea/parrafo inline — bg #F9FAFC, border 1px rgba(navy,.05) en las 4 esquinas
   (NO border-left de acento), radius 12px (rounded-xl), padding 16px (p-4), TODO el
   texto (label + cuerpo) en 12px (text-xs) color rgba(navy,.8) — el label es
   simplemente un <strong> inline, no un bloque aparte arriba. Reemplaza el box
   grande multilinea anterior (label en bloque propio, cuerpo 15px gris, border-left
   mostaza). display:inline en body/p hace que el contenido de la nota siga en la
   MISMA linea que el label, como pide el mockup. */
.fin-note-luis {
	background: #f9fafc;
	border: 1px solid rgba(12, 60, 96, 0.05);
	border-radius: 12px;
	padding: 16px;
	color: rgba(12, 60, 96, 0.8);
	font-size: 12px;
	line-height: 1.6;
}
.fin-note-luis-label {
	font-weight: 700;
	font-size: inherit;
	color: inherit;
	margin: 0;
}
.fin-note-luis-body,
.fin-note-luis-body p {
	display: inline;
	margin: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

/* Ronda 54, Punto 6/7: parrafo de descripcion real, SEPARADO del box de Nota de
   Luis (antes todo el post_content quedaba fusionado adentro del box). Valores
   EXACTOS del mockup via getComputedStyle sobre el <p> real de descripcion:
   Inter 14px/400, line-height 22.75px (1.625), color rgba(72,84,96,1) (#485460),
   margin-bottom 16px por parrafo (wpautop ya envuelve cada linea en su propio <p>). */
/* Ronda 55, Punto 2: bug de especificidad, no de valor. El nativo
   `.tutor-lesson-content .tutor-lesson-wrapper` (tutor-learning-area.min.css) es un
   selector de 2 clases (especificidad 0-2-0) que le GANABA a este selector de 1 clase
   (0-1-0) sin importar el orden de carga, inyectando color:var(--tutor-text-secondary)
   (rgb(206,207,210), casi blanco) y font-size:1rem (16px) por herencia rota - confirmado
   en vivo (getComputedStyle real: 16px/rgb(206,207,210) en vez de los 14px/#485460 ya
   documentados en Ronda 54). Se sube la especificidad a 0-2-0 (empatando al nativo)
   prefijando con `.tutor-lesson-content`, ya ancestro real del elemento - como esta
   hoja carga DESPUES de la del plugin, a igual especificidad gana esta regla. */
.tutor-lesson-content .fin-player-overview-description {
	font-family: var(--fin-font-body);
	font-size: 14px;
	line-height: 1.625;
	color: #485460;
	margin-bottom: 20px;
}
.fin-player-overview-description p {
	margin: 0 0 16px;
}
.fin-player-overview-description p:last-child {
	margin-bottom: 0;
}

.fin-player-overview-empty {
	color: var(--fin-gray);
	font-style: italic;
	margin-bottom: 20px;
}

/* ==========================================================================
   7) Q&A — "Hace tu pregunta a la comunidad"
   ========================================================================== */

.fin-qna-head {
	background: transparent;
	color: var(--fin-navy);
	border-radius: 0;
	padding: 0;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

/* Ronda 60, Punto 1: aire entre la fila "Preguntas (N)" + sort y la primera card -
   antes 0 (la card tocaba directo la linea divisoria tutor-border-t de la lista).
   20px = mismo valor ya establecido en el ritmo vertical de la tab (padding de
   .tutor-comment-form/.tutor-comment-reply-form, gap de .fin-attachments-list). */
.tutor-learning-area .tutor-comments-list {
	padding-top: 20px;
}

/* Ronda 54, Punto 4a: bug del fondo NEGRO en el textarea de respuesta anidada ("Write\
   your reply"). Root cause confirmado en vivo: ese formulario usa la clase nativa
   .tutor-comment-reply-form (y el de edicion .tutor-comment-edit-form), NO
   .tutor-comment-form -> nuestras reglas de Ronda 8 (bg blanco !important) nunca
   coincidian con ese elemento. Sin esa cobertura, gana la cascada nativa de Tutor:
   con [data-tutor-theme="dark"] (setea segun prefers-color-scheme del visitante,
   mismo mecanismo de Ronda 7) el textarea hereda --tutor-surface-l1/-l3 (#1f242f
   /#242a37, casi negro) vía .tutor-input-field .tutor-input:placeholder-shown y
   :focus. Fix: extender el mismo set de reglas a los 3 wrappers de formulario. */
.tutor-comment-form,
.tutor-comment-reply-form,
.tutor-comment-edit-form {
	background: #f9fafc;
	border: 1px solid rgba(12, 60, 96, 0.05) !important;
	border-radius: 16px !important;
	padding: 20px !important;
}
.tutor-comment-form textarea.tutor-input,
.tutor-comment-reply-form textarea.tutor-input,
.tutor-comment-edit-form textarea.tutor-input {
	background: #ffffff !important;
	color: var(--fin-navy) !important;
	border: 1px solid rgba(12, 60, 96, 0.1) !important;
	border-radius: 12px !important;
	padding: 12px !important;
	font-size: 14px !important;
}
.tutor-comment-form textarea.tutor-input:focus,
.tutor-comment-reply-form textarea.tutor-input:focus,
.tutor-comment-edit-form textarea.tutor-input:focus {
	outline: none !important;
	border-color: var(--fin-verde) !important;
	box-shadow: 0 0 0 3px rgba(0, 144, 84, 0.2) !important;
}
.tutor-comment-form .tutor-btn-primary-soft,
.tutor-comment-reply-form .tutor-btn-primary-soft,
.tutor-comment-edit-form .tutor-btn-primary-soft {
	background: var(--fin-verde) !important;
	color: #ffffff !important;
	border-radius: 999px !important;
	padding: 8px 20px !important;
	font-size: 12px !important;
	font-weight: 900 !important;
	box-shadow: 0 4px 12px rgba(0, 144, 84, .2) !important;
}
.tutor-comment-form .tutor-btn-primary-soft:hover,
.tutor-comment-reply-form .tutor-btn-primary-soft:hover,
.tutor-comment-edit-form .tutor-btn-primary-soft:hover {
	background: var(--fin-verde-dark) !important;
}

/* Card de pregunta/respuesta — clases nativas CONFIRMADAS leyendo el template real
   (wp-content/plugins/tutor/templates/learning-area/lesson/comment-card.php +
   comment-replies.php): las respuestas usan .tutor-comment-reply-item, los
   top-level (preguntas) NO. Estilo aplicado sobre esa base real, pero SIN
   verificacion visual en vivo — ninguna leccion de este curso tiene preguntas
   cargadas todavia (los 2 comentarios existentes en DB son del Q&A a nivel
   CURSO, comment_post_ID=144, no de ninguna leccion). El tag "PREGUNTA DE
   ALUMNO" del mockup NO existe en el markup nativo — requeriria un override de
   comment-card.php (fuera de alcance de esta corrida, ver Camino B). */
/* Ronda 54, Punto 4b/4c: rediseno de cards con contenido real de ejemplo verificado
   en vivo en el mockup (misma pagina, otro curso, con Q&A de ejemplo poblado) via
   getComputedStyle/outerHTML. Card blanca mas grande para la pregunta inicial
   (avatar circular, nombre, fecha relativa, badge 'PREGUNTA DE ALUMNO', texto en
   cursiva) + respuesta anidada en tratamiento verde distinto (bg muy claro, borde
   izquierdo verde, avatar+label 'Soporte academico'). El markup del badge/label
   requiere el override nuevo comment-card.php (ver Contexto_Finaurum.md Ronda 54). */
.tutor-comments-list .tutor-comment-item:not(.tutor-comment-reply-item) > .tutor-comment {
	background: #ffffff;
	border: 1px solid rgba(12, 60, 96, 0.06);
	border-radius: 16px;
	padding: 20px;
	box-shadow: 0 4px 16px rgba(12, 60, 96, 0.10); /* Ronda 55, Punto 5: elevacion insuficiente (alpha .04, card se veia plana) - subida a .10 mismo criterio de color (navy tintado) usado en el resto del sitio (ver seccion 9, tutor-course-info .tutor-card) */
}
.tutor-comments-list .tutor-comment-reply-item > .tutor-comment {
	background: rgba(0, 144, 84, 0.05);
	border-left: 4px solid var(--fin-verde);
	border-radius: 12px; /* Ronda 57 (continuacion): mockup usa radio uniforme (rounded-xl), no la forma asimetrica "bandera" que tenia el sitio */
	padding: 16px;
	margin-left: 8px;
	box-shadow: 0 1px 4px rgba(0, 144, 84, 0.10); /* Ronda 55, Punto 6: card de respuesta sin elevacion propia, quedaba pegada/plana contra el borde izquierdo verde */
}

/* 2026-07-28 (Gestor, mobile Q&A fixes r64) - Punto 1: la card verde de respuesta
   desborda por fuera de la card blanca a 375px (reportado por el usuario, confirmado
   en vivo con getBoundingClientRect: .tutor-comment-content, .tutor-replies-wrapper,
   .tutor-comment-reply-item y su card verde comparten TODOS el mismo right edge, unos
   px mas alla del borde de la card blanca padre). Root cause: .tutor-comment-content es
   flex-item (flex:1 1 0%) con min-width:auto NATIVO - su hijo .tutor-replies-wrapper
   (margin-left:-52px, Ronda 60) infla el min-content del item por encima de su "fair
   share" de ancho, y a viewports angostos (mobile) ese minimo excede el espacio
   disponible, empujando el right edge del item (y por lo tanto de todo lo anidado
   adentro) mas alla del padding derecho de la card blanca. Preexistente desde Ronda 60
   (el -52px nunca vino acompanado de un min-width:0 en el flex item que lo contiene) -
   nunca se detecto porque el chequeo historico de overflow es a nivel de PAGINA
   (document.body.scrollWidth), que sigue dando true aca (el desborde queda contenido
   dentro del viewport, solo rompe el padding interno de la card). min-width:0 es el fix
   estandar para este patron (mismo principio ya aplicado en Ronda 63 al video
   placeholder) - deja que el flex item se achique a su fair-share real en vez de forzar
   un minimo mayor. Sin @media: es un fix de correctitud de flexbox, inocuo en
   desktop/tablet (ahi el fair-share ya supera el min-content, min-width:0 no cambia el
   resultado - verificado en vivo a 768/1440px, 0 diferencia visual). */
.tutor-comments-list .tutor-comment-content {
	min-width: 0;
}

/* Badge 'PREGUNTA DE ALUMNO' (top-level) — mockup real: 9px, bg navy 5%, navy, font-mono,
   uppercase, font-black, pill. */
.fin-qna-badge-question {
	display: inline-flex;
	align-items: center;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: normal; /* Ronda 59, Punto 3: mockup medido en vivo = sin letter-spacing (antes .02em) */
	text-transform: uppercase;
	color: var(--fin-navy);
	background: rgba(12, 60, 96, 0.05);
	padding: 2px 8px;
	border-radius: 999px;
	white-space: nowrap;
	line-height: 1.6;
}

/* Texto de la pregunta — mockup real: font-serif (heading), italic, navy, leading-relaxed. */
.fin-qna-question-text {
	font-family: var(--fin-font-heading);
	font-style: italic;
	font-size: 14px; /* Ronda 59, Punto 3: mockup medido en vivo = 14px (antes 13px) */
	line-height: 1.625; /* Ronda 59, Punto 3: mockup mide 22.75px/14px = 1.625 exacto (leading-relaxed), antes 1.6 */
	color: var(--fin-navy);
	margin: 12px 0 0;
	padding-left: 4px;
}

/* Avatar/label de la respuesta de soporte — mockup real: circulo verde solido con
   letra blanca, label font-black uppercase verde tracking-wider. Ronda 54: el avatar
   reemplaza el slot nativo Avatar::make()->size(SIZE_40) (comment-card.php override),
   por eso hereda el mismo tamano 40px del componente nativo que sustituye. */
.fin-qna-support-avatar-outer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Ronda 60, Punto 3: 40px->20px, pedido explicito del usuario ("como el mockup") -
	   REVIERTE la decision de Ronda 57 de mantenerlo en 40px "por consistencia con el
	   avatar del alumno del mismo hilo" (esa nota queda marcada superseded en
	   Contexto_Finaurum.md). font-size 15px->9px, mismo criterio que el mockup
	   (avatar 20px con letra 9px). */
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--fin-verde);
	color: #ffffff;
	font-size: 9px;
	font-weight: 900;
}
.fin-qna-support-label {
	font-family: var(--fin-font-body);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .05em; /* Ronda 59, Punto 3: mockup medido en vivo = 0.6px\/12px = 0.05em exacto (antes .04em) */
	text-transform: uppercase;
	/* Ronda 57, Punto 1: color(--fin-verde-dark = #007644) NO coincidia exactamente con
	   el resto de los verdes de la card (avatar, borde izquierdo, box-shadow), todos
	   en --fin-verde = #009054. Barrido completo con getComputedStyle sobre TODA la tab
	   Q&A confirmo que este era el UNICO elemento con un verde distinto - normalizado. */
	color: var(--fin-verde);
}
.tutor-mark-as-complete-button,
.tutor-comments-list .tutor-btn-ghost {
	border-radius: 999px;
}

/* Ronda 57, Punto 2 (formateo Q&A): el popover nativo de Tutor (usado tanto por el menu
	de tres puntos Edit/Delete de cada card como por el selector 'Newest First/Oldest First')
	nunca fue neutralizado del dark-mode nativo (mismo mecanismo de Ronda 7/54: Tutor pinta
	.tutor-popover con --tutor-surface-l1/-l3, casi negro, via [data-tutor-theme] o directamente
	como estilo base del componente). Quedaba una caja oscura flotando sobre una Q&A 100% clara
	- confirmado en vivo (getComputedStyle: bg rgb(31,36,47), texto rgb(240,241,241)). Restylado
	al mismo lenguaje visual claro del resto de la tab (blanco, borde navy sutil, texto navy). El
	item activo del sorting (.tutor-active) tambien traia un azul nativo (rgb(73,121,232)) ajeno
	a la paleta de marca (solo navy/verde) - pasado a verde bold, coherente con el resto de
	'estados activos' del sitio (ej. modulo activo del sidebar). */
.tutor-learning-area .tutor-popover {
	background: #ffffff;
	border: 1px solid rgba(12, 60, 96, 0.1);
	box-shadow: 0 4px 16px rgba(12, 60, 96, 0.12);
}
.tutor-learning-area .tutor-popover-menu-item {
	color: var(--fin-navy) !important;
}
.tutor-learning-area .tutor-popover-menu-item:hover {
	background: rgba(12, 60, 96, 0.05) !important;
}
.tutor-learning-area .tutor-popover-menu-item.tutor-active {
	background: rgba(0, 144, 84, 0.08) !important;
	color: var(--fin-verde) !important;
	font-weight: 700;
}
/* Ronda 57 (continuacion tras corte de conexion): el color de arriba no bastaba - habia
   un empate de especificidad (0-2-0) con el selector dark-mode nativo de Tutor y el orden
   de carga lo resolvia EN CONTRA nuestro (texto casi blanco sobre el popover ya blanco de
   arriba = practicamente invisible, confirmado con getComputedStyle en vivo). Blindado con
   !important. Mismo hallazgo aplico al boton disparador "outline" (ej. boton de ordenar
   'Open sorting options'), que traia fondo oscuro nativo sin neutralizar - se veia como un
   cuadrado negro flotando en la tab, ya clara. */
.tutor-learning-area .tutor-btn-outline.tutor-btn-icon {
	background: #ffffff !important;
	border: 1px solid rgba(12, 60, 96, 0.15) !important;
	color: var(--fin-navy) !important;
}
.tutor-learning-area .tutor-btn-outline.tutor-btn-icon:hover {
	background: rgba(12, 60, 96, 0.05) !important;
}
.tutor-learning-area .tutor-btn-outline.tutor-btn-icon svg {
	color: var(--fin-navy) !important;
}

/* Ronda 55, Puntos 5/6: contraste real medido en vivo (getComputedStyle + color efectivo
   COMPUESTO contra el fondo real, no el nominal - importante porque varias de estas cards
   usan backgrounds rgba() semitransparentes). 3 textos nativos de Tutor quedaban casi
   invisibles porque sus colores por defecto asumen un fondo OSCURO (dark-mode nativo) que
   este child theme nunca usa en las cards de Q&A (blancas / verde muy claro):
   - .tutor-discussion-card-author (nombre del autor): rgb(240,241,241) sobre blanco =
     contraste 1.13:1 (practicamente invisible).
   - .tutor-text-secondary DENTRO de una respuesta (.tutor-comment-reply-item): el texto
     de la respuesta en si heredaba rgb(206,207,210) sobre el fondo verde muy claro de la
     card (~rgb(242,249,246) compuesto) = 1.46:1. La pregunta SI tenia su propio color
     (.fin-qna-question-text, navy) desde Ronda 54, pero ese fix nunca alcanzo al texto de
     la respuesta anidada.
   Ambos muy por debajo del minimo AA (4.5:1) - confirmado NO verificado visualmente en
   Ronda 54 (comentario original: 'ninguna leccion de este curso tiene preguntas cargadas
   todavia'). */
.tutor-comments-list .tutor-discussion-card-author {
	color: var(--fin-navy);
	font-weight: 700;
	/* Ronda 57 (continuacion): mockup usa 12px, el sitio heredaba 14px de .tutor-small
	   nativo. text-transform:none neutraliza un capitalize nativo que en usernames sin
	   espacios (ej. "alumno_qa") producia "Alumno_qa" (bug cosmetico, no querido). */
	font-size: 12px;
	text-transform: none;
}
.tutor-comments-list .tutor-comment-reply-item .tutor-text-secondary {
	color: var(--fin-navy);
	/* Ronda 57 (continuacion): mockup usa 12px/500 (medium) para el cuerpo de la
	   respuesta, el sitio heredaba 14px/400 de .tutor-p2 nativo. */
	font-size: 12px;
	font-weight: 500;
}
/* "X hours ago" (.tutor-text-subdued) y el link "N more reply"/"Collapse all replies"
   (.tutor-comment-replies-toggle): pasaban AA por muy poco sobre blanco (4.55:1 y 4.05:1 -
   este ultimo en realidad NO pasa, 4.05<4.5) y caian claramente por debajo sobre el fondo
   verde claro de la respuesta (4.26:1 y 3.79:1). Oscurecidos lo suficiente para quedar
   comodos (>=5.9:1) en ambos fondos, calculado con la formula WCAG real, no a ojo. */
.tutor-comments-list .tutor-text-subdued {
	color: #5b6068;
	/* Ronda 57 (continuacion): mockup usa 9px para el timestamp (escala compacta, igual
	   que el badge). Se mantiene el color #5b6068 de Ronda 55 (WCAG) en vez del gris al
	   60% del mockup, que no pasa contraste AA - accesibilidad gana sobre fidelidad 1:1. */
	font-size: 9px;
}
.tutor-comments-list .tutor-comment-replies-toggle {
	color: #2554c7;
}
/* Hallazgo adicional (no listado en el pedido original de Ronda 55, mismo root cause de
   arriba): el boton "Cancelar" (.tutor-btn-ghost) de los formularios de reply/edit
   heredaba el mismo gris casi blanco (rgb(240,241,241)) pensado para fondo oscuro nativo.
   Ronda 54 forzo estos formularios a fondo blanco (fix del bug de fondo negro) pero no
   toco el color de este boton especifico - contraste real: 1.08:1. */
.tutor-comment-form .tutor-btn-ghost,
.tutor-comment-reply-form .tutor-btn-ghost,
.tutor-comment-edit-form .tutor-btn-ghost {
	color: var(--fin-navy);
}

/* Ronda 59, Punto 2: elimina el hilo vertical en "L" que el CSS nativo de Tutor dibuja
   con un ::before absolutamente posicionado sobre .tutor-comment cuando tiene respuestas
   (.tutor-comment:has(.tutor-comment-replies)::before, ver tutor-learning-area.min.css:
   content:""; border-inline-start + border-bottom formando el angulo, position:absolute).
   Se pidio quitar esta linea junto con el texto "Collapse all replies" (ver override nuevo
   comment-replies.php). content:none remueve el pseudo-elemento por completo - es
   position:absolute (no participa del flujo), no deja padding-left huerfano que limpiar. */
.tutor-learning-area .tutor-comment:has(.tutor-comment-replies)::before {
	content: none !important;
}

/* ==========================================================================
   8) ADJUNTOS — "Recurso oficial descargable"
   ========================================================================== */

/* 2026-07-28 (Gestor, mobile Q&A) - Punto 2: en <=600px las cards de respuesta de
   soporte se ven apretadas. Root cause confirmado en vivo con datos reales (pregunta
   152, comentario 15 + reply Luis): la fila de meta de una REPLY (label 'SOPORTE
   ACADEMICO (NOMBRE)' + timestamp) NUNCA recibe la clase .fin-qna-meta-stacked (esa
   clase la agrega comment-card.php SOLO para el nivel top, cuando NO es reply) - queda en
   fila (flex row, sin flex-wrap) con 2 spans de texto sin flex-shrink:0 ni
   white-space:nowrap, asi que bajo el ancho angosto de una reply (card indentada +
   padding + avatar) cada span se achica por debajo de su ancho de una sola linea y el
   texto rompe internamente en 2 lineas (label Y timestamp), quedando amontonados -
   exactamente lo reportado. Fix: mismo patron ya usado para la pregunta principal
   (Ronda 60), aplicado aca SOLO en mobile (>600px la fila entra comoda en una sola
   linea, confirmado que no hace falta tocarla ahi). Tambien se separa un poco el menu
   de tres puntos del borde derecho de la card (el padding de 20px de la card ya lo
   despega 21px del borde fisico, pero visualmente competia por espacio con el badge
   'Pregunta de alumno' en la misma fila estrecha - se reduce el gap entre badge y menu
   para dar mas aire a ambos lados). */
@media (max-width: 600px) {
	.tutor-comments-list .tutor-comment-reply-item .tutor-flex.tutor-items-center.tutor-gap-5 {
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}
	.tutor-comments-list .tutor-comment-item:not(.tutor-comment-reply-item) .tutor-flex.tutor-justify-between > .tutor-flex.tutor-items-center.tutor-gap-4 {
		gap: 10px;
		padding-right: 2px;
	}
}

/* Ronda 54, Punto 5: contenedor full-width en columna unica (antes tutor-grid-cols-2
   dejaba ~50% de espacio vacio con 1 sola card, o cards angostas con 2+). El mockup real
   (outerHTML) usa <div class="space-y-4 w-full"> - una columna, full width, gap 16px. */
.fin-attachments-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px 0px;
}
.fin-attachment-card {
	background: #f9fafc;
	border: 1px solid rgba(12, 60, 96, 0.05);
	border-radius: 12px;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 14px;
	padding: 14px;
	transition: background-color .15s ease;
}
.fin-attachment-card:hover {
	background: #fdfdfd;
}
.fin-attachment-icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #ffffff;
	border: 1px solid rgba(12, 60, 96, 0.1);
	color: var(--fin-navy);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .15s ease;
}
.fin-attachment-card:hover .fin-attachment-icon { color: var(--fin-verde); }
.fin-attachment-icon svg { width: 20px; height: 20px; }
.fin-attachment-body { min-width: 0; flex: 1 1 auto; }
.fin-attachment-title {
	font-weight: 700;
	font-size: 14px;
	color: var(--fin-navy);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Ronda 54, Punto 5c: valores EXACTOS del mockup via getComputedStyle sobre el span
   real ("Recurso oficial descargable" de "Planilla maestra.xlsx") - font-mono, 10px,
   weight 400 (NO bold), sin letter-spacing, sin uppercase, color gris rgba(72,84,96,.7)
   (NO verde). Reemplaza los valores anteriores que no coincidian en ningun eje. */
.fin-attachment-tag {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: rgba(72, 84, 96, 0.7);
	margin-top: 2px;
}
.fin-attachment-meta {
	display: block;
	font-size: 11px;
	color: var(--fin-gray);
	margin-top: 2px;
}
.fin-attachment-action {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1px solid rgba(12, 60, 96, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--fin-navy) !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.fin-attachment-action:hover {
	border-color: var(--fin-verde);
	background: rgba(0, 144, 84, 0.1);
	color: var(--fin-verde) !important;
}

.fin-player-attachments-empty {
	padding: 28px;
	color: var(--fin-gray);
	font-style: italic;
}

/* ==========================================================================
   9) Course-info subpage (fin-card por seccion — override liviano)
   ========================================================================== */

.tutor-course-info .tutor-card {
	border-radius: 24px;
	box-shadow: 0 12px 32px rgba(12, 60, 96, 0.07);
}
.tutor-course-info-table .tutor-table {
	border-radius: 16px;
	overflow: hidden;
}

/* ==========================================================================
   10) Q&A — Ronda 60: alineacion izquierda del cuerpo/respuesta al avatar
   ========================================================================== */

/* Punto 4: en el mockup, solo nombre+timestamp quedan a la derecha del avatar -
   el cuerpo de la pregunta, el link "Responder", el formulario de respuesta y el
   card verde de la respuesta arrancan a ras del borde IZQUIERDO del avatar (full
   width), no indentados a la altura del texto del nombre. El sitio real anidaba
   los 4 dentro de la misma columna que el nombre (avatar 40px + gap nativo de
   .tutor-comment 12px = 52px de indent). Se cancela ese indent con margin-left
   negativo (mismo patron ya usado en Ronda 53 para el margin-left del sidebar).
   El card verde conserva su propio margin-left:8px (seccion 7) -> queda con un
   indent chico de 8px desde el borde real, igual al "ml-2" del mockup. */
.tutor-comments-list .tutor-comment-item:not(.tutor-comment-reply-item) .fin-qna-question-text,
.tutor-comments-list .tutor-comment-item:not(.tutor-comment-reply-item) > .tutor-comment > .tutor-comment-content > .tutor-mt-6,
.tutor-comments-list .tutor-comment-item:not(.tutor-comment-reply-item) > .tutor-comment > .tutor-comment-content > .tutor-replies-wrapper {
	margin-left: -52px;
}

/* Punto 2: timestamp de la pregunta principal en 2 lineas apiladas (nombre arriba,
   timestamp abajo en gris chico), en vez de 1 sola linea "nombre * timestamp".
   Mockup medido: nombre 12px/700/navy, timestamp 9px/400 (gap ~vertical chico,
   se usa 2px, mismo valor ya establecido en el archivo para pares eyebrow+titulo). */
.tutor-comments-list .fin-qna-meta-stacked {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

/* Addendum Ronda 60 (2026-07-27), Punto 1: el nativo .tutor-discussion-card-author:after
   (Tutor core, tutor-learning-area.min.css, activo desde min-width:576px) dibuja un
   separador punto (4x4px) pensado para el layout nativo en 1 sola linea
   "nombre * timestamp". Al apilar el meta de la pregunta principal en 2 lineas
   (fin-qna-meta-stacked de arriba, Ronda 60 Punto 2), el bullet queda colgando al
   final del nombre sin timestamp al lado en la misma fila. Se anula el pseudo-
   elemento SOLO dentro del bloque apilado de la pregunta principal - las respuestas
   (is_reply, sin esta clase) y cualquier otro listado de comentarios del sitio
   siguen en 1 linea con el bullet nativo intacto. content:none (no solo "") saca
   el pseudo-elemento por completo, sin dejar una caja de 4x4px vacia posicionada. */
.tutor-comments-list .fin-qna-meta-stacked .tutor-discussion-card-author:after {
	content: none;
}

/* ==========================================================================
   11) Q&A (Ronda 66, Gestor mobile 375px) - badge "PREGUNTA DE ALUMNO" apilado
   ========================================================================== */

/* Reporte: en 375px, la columna derecha de la fila de la pregunta principal
   (badge "PREGUNTA DE ALUMNO" + boton de tres puntos, div .tutor-flex.tutor-items-
   center.tutor-gap-4) se desbordaba por el borde derecho de la card blanca. Root
   cause medido en vivo (getBoundingClientRect): esa columna es un flex-item sin
   min-width:0 cuyo contenido (badge white-space:nowrap ~105px + boton ⋮ 32px +
   gaps) no encoge; con un autor de nombre/email largo (ej. "finanzasconldd@gmail
   .com") la columna izquierda del meta empuja el ancho disponible de la derecha muy
   por debajo de ese minimo. Confirmado que el badge SOLO (sin dueño del comentario,
   por lo tanto sin boton ⋮) ya desbordaba ~1.5px con cualquier autor largo, y hasta
   ~43px cuando ademas se mostraba el ⋮ (el dueño viendo su propio comentario).
   Se descartaron las otras 2 opciones evaluadas: (a) dejar el badge en la misma fila
   permitiendo wrap (flex-wrap en tutor-justify-between) - el ⋮ quedaria flotando en
   un limbo vertical a mitad del bloque de autor/pregunta, dependiendo de cuantas
   lineas ocupe el texto de la pregunta; (b) achicar el badge - ya esta en el piso de
   legibilidad (9px monoespaciada, sin letter-spacing desde Ronda 59), reducirlo mas
   lo vuelve dificil de leer sin resolver el caso mas largo de autor. En cambio, se
   apila el badge debajo de nombre+timestamp (patron ya establecido en Ronda 60 para
   ese mismo bloque): el boton ⋮ queda solo en su columna (32px, jamas se acerca al
   limite) y el badge pasa a la columna izquierda de ancho casi completo, donde sobra
   espacio de sobra. Implementacion: comment-card.php renderiza una 2da copia del
   badge (clase adicional fin-qna-badge-question-stacked) dentro de .fin-qna-meta-
   stacked, oculta en todo ancho salvo <=600px, momento en que se oculta la copia
   original de la columna derecha. Verificado con datos reales (pregunta 152/
   comentario 15, autor "finanzasconldd@gmail.com") + comentario de prueba propio:
   scrollWidth===clientWidth en 375px, badge y ⋮ dentro del borde de la card en
   ambos casos, sin regresion en 768/1440px (la regla nueva no aplica fuera de
   <=600px) ni en el desborde de la card verde de respuesta (Ronda 64, intacto). */
.fin-qna-badge-question-stacked {
	display: none;
}
@media (max-width: 600px) {
	.tutor-comments-list .tutor-comment-item:not(.tutor-comment-reply-item) .tutor-flex.tutor-items-center.tutor-gap-4 > .fin-qna-badge-question {
		display: none;
	}
	.tutor-comments-list .fin-qna-meta-stacked .fin-qna-badge-question-stacked {
		display: inline-flex;
		margin-top: 6px;
	}
}