/* inecbarra — barra superior/inferior del reproductor (escritorio y móvil ≤768px). Tokens: únicos colores literales. */
html[data-inecbarra-escritorio], html[data-inecbarra-movil]{
	--inecbarra-fondo: #ffffff;
	--inecbarra-item: #000000;
	--inecbarra-sub: #636363;
	--inecbarra-hover: #f4f5f6;
	--inecbarra-activo-fondo: var(--inec-marca-suave, #fdece8);
	--inecbarra-primario: var(--inec-marca, #f16645);
	--inecbarra-borde: rgba(0, 0, 0, .12);
	--inecbarra-blanco: #ffffff;
	--inecbarra-tooltip-fondo: #1f2328;
	--inecbarra-tooltip-color: #ffffff;
	--inecbarra-sombra: rgba(0, 0, 0, .18);
	--inecbarra-velo: rgba(0, 0, 0, .35);
}
html.inec-oscuro[data-inecbarra-escritorio], html.inec-oscuro[data-inecbarra-movil]{
	--inecbarra-fondo: #1f2630;
	--inecbarra-item: #e8eaed;
	--inecbarra-sub: #a9b0b8;
	--inecbarra-hover: #2a3340;
	--inecbarra-borde: rgba(255, 255, 255, .1);
	--inecbarra-tooltip-fondo: #f3f4f6;
	--inecbarra-tooltip-color: #111827;
	--inecbarra-sombra: rgba(0, 0, 0, .45);
	--inecbarra-velo: rgba(0, 0, 0, .65);
}
/* fin tokens */
header.inecbarra{ display: none; }

/* Componentes compartidos por escritorio y móvil (botones, iconos, panel de búsqueda,
   línea de progreso, pista de scroll propia). Sin media: la geometría de cada canal
   (sticky vs fixed, tamaños de barra) va en su propia media más abajo. */
header.inecbarra .inecbarra-fila{ height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; box-sizing: border-box; }
header.inecbarra .inecbarra-izq, header.inecbarra .inecbarra-der{ display: flex; align-items: center; gap: 4px; flex: none; }
header.inecbarra .inecbarra-centro{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: 1; min-width: 0; }
header.inecbarra .inecbarra-info{ display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; min-width: 0; padding-left: 8px; }
header.inecbarra .inecbarra-indice{ font-size: 13px; font-weight: 500; color: var(--inecbarra-sub); white-space: nowrap; }
header.inecbarra .inecbarra-mod{
	font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--inecbarra-sub);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
header.inecbarra .inecbarra-tit{
	font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--inecbarra-item);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* Línea de progreso naranja: va en la barra de escritorio y en la de móvil (Addendum B). */
header.inecbarra .inecbarra-scrollprog{ position: absolute; bottom: 0; left: 0; height: 2px; width: 0; background: var(--inecbarra-primario); pointer-events: none; }

/* Reset contra el tema (padding:7px 24px en todo <button>, spans/svg pisados). */
header.inecbarra button{ margin: 0; padding: 0; min-width: 0; min-height: 0; font: inherit; line-height: 1; box-shadow: none; text-transform: none; letter-spacing: normal; }
header.inecbarra svg.inecbarra-ico{ display: block; flex: none; color: inherit; fill: none; stroke: currentColor; }

header.inecbarra .inecbarra-btn{
	width: 40px; height: 40px; border-radius: 8px; border: 0; background: transparent; color: var(--inecbarra-item);
	display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
	box-sizing: border-box; position: relative; transition: background .15s ease, color .15s ease;
}
header.inecbarra .inecbarra-btn:hover{ background: var(--inecbarra-hover); }
header.inecbarra .inecbarra-btn:focus-visible,
header.inecbarra .inecbarra-pastilla-btn:focus-visible{ outline: 2px solid var(--inecbarra-primario); outline-offset: 2px; }
header.inecbarra .inecbarra-btn[data-inecbarra-accion="tema"][aria-pressed="true"]{ color: var(--inecbarra-primario); background: var(--inecbarra-activo-fondo); }
header.inecbarra .deshabilitado{ opacity: .4; pointer-events: none; cursor: default; }
header.inecbarra .inecbarra-badge{
	position: absolute; top: 4px; right: 4px; background: var(--inecbarra-primario); color: var(--inecbarra-blanco);
	font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 4px; border-radius: 999px; pointer-events: none;
}

@keyframes inecbarraGiro{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
header.inecbarra .inecbarra-girando{ animation: inecbarraGiro .8s linear; }

/* Comentarios: cajón nativo vestido como .p-lec-coment-drawer del mockup (ambos canales;
   la geometría — ancho/posición/velo — sigue por canal en su propia media). Solo CSS: no se
   mueven nodos; los textos que cambian van por ::after con font-size:0 en el original. */
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper{
	display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
}

/* Cabecera: span:first-child. Título = strong (texto sustituido). Flecha (cierra) -> botón ×
   a la derecha (order tras el título; el align-right se oculta y no ocupa hueco visible). */
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper > span:first-child,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper > span:first-child{
	height: 56px; flex: none; display: flex; align-items: center; justify-content: space-between;
	padding: 0 16px; box-sizing: border-box; border-bottom: 0.8px solid var(--inecbarra-borde);
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper > span:first-child > strong,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper > span:first-child > strong{
	font-size: 0; font-weight: 600; color: var(--inecbarra-item); margin: 0; line-height: 1;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper > span:first-child > strong::after,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper > span:first-child > strong::after{
	content: "Discusión de la lección"; font-size: 16px;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper > span:first-child > span:first-child,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper > span:first-child > span:first-child{
	order: 2; flex: none; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center;
	justify-content: center; cursor: pointer; transition: background .15s ease; box-sizing: border-box;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper > span:first-child > span:first-child:hover,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper > span:first-child > span:first-child:hover{
	background: var(--inecbarra-hover);
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vicon-arrow-left,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vicon-arrow-left{
	font-size: 0; position: relative; display: inline-block; width: 20px; height: 20px;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vicon-arrow-left::after,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vicon-arrow-left::after{
	content: "×"; font-size: 20px; line-height: 20px; font-family: Arial, sans-serif; color: var(--inecbarra-item);
	position: absolute; inset: 0; text-align: center;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vicon-align-right,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vicon-align-right{
	display: none;
}

/* Pestañas Comments/Notes: NO se ocultan (Notes es funcionalidad); estilo plano + traducción. */
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vibe_tabs,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vibe_tabs{
	display: flex; flex: none; border-bottom: 0.8px solid var(--inecbarra-borde); background: transparent; padding: 0 16px;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vibe_tab,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vibe_tab{
	font-size: 13px; font-weight: 600; color: var(--inecbarra-sub); background: transparent; border: 0;
	border-bottom: 2px solid transparent; padding: 10px 0; margin-right: 20px; cursor: pointer;
	width: auto; flex: none; border-radius: 0;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vibe_tab.active,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vibe_tab.active{
	color: var(--inecbarra-primario); border-bottom-color: var(--inecbarra-primario); background: transparent;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vibe_tab:first-child,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vibe_tab:first-child{ font-size: 0; }
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vibe_tab:first-child::after,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vibe_tab:first-child::after{ content: "Comentarios"; font-size: 13px; }
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vibe_tab:last-child,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vibe_tab:last-child{ font-size: 0; }
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vibe_tab:last-child::after,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .vibe_tab:last-child::after{ content: "Notas"; font-size: 13px; }

/* Lista de comentarios */
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments{
	padding: 16px; display: flex; flex-direction: column; gap: 16px; flex: 1; overflow-y: auto; box-sizing: border-box;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments > .vbp_message:first-child,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments > .vbp_message:first-child{
	background: none; box-shadow: none; margin: 0; padding: 32px 16px; text-align: center; font-size: 0; color: var(--inecbarra-sub);
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments > .vbp_message:first-child > *,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments > .vbp_message:first-child > *{
	display: none;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments > .vbp_message:first-child::after,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments > .vbp_message:first-child::after{
	content: "Sé el primero en iniciar la discusión sobre esta lección."; font-size: 13px;
}
/* Ítems de comentario existentes: sin fixture, estilos genéricos seguros. */
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments > *:not(.vbp_message):not(.loadmore_wrapper),
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments > *:not(.vbp_message):not(.loadmore_wrapper){
	font-size: 13px; line-height: 1.5; color: var(--inecbarra-item); word-break: break-word;
}

/* Pie: siempre al fondo del cajón (wrapper en flex column a alto completo). */
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action{
	padding: 14px 16px; border-top: 0.8px solid var(--inecbarra-borde); background: var(--inecbarra-fondo);
	display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px 8px; flex: none; box-sizing: border-box;
	margin: 0; width: 100%;
}
/* Form abierto: ocupa la fila entera; Contactar a la derecha del botón principal. */
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action > .addcomment,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action > .addcomment{
	width: 100%; display: flex; flex-direction: column; gap: 10px;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action > a.button.is-primary:nth-of-type(2),
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action > a.button.is-primary:nth-of-type(2){ order: 1; }
/* Botón principal "Añadir comentario": primero de unit_comments_action (estado sin form), y el
   de .addcomment_buttons (estado con form abierto). */
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action > a.button.is-primary:first-of-type,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action > a.button.is-primary:first-of-type,
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action .addcomment_buttons a.button.is-primary,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action .addcomment_buttons a.button.is-primary{
	height: 36px; padding: 0 16px; background: var(--inecbarra-primario); color: var(--inecbarra-blanco); border: 0;
	border-radius: 6px; font-size: 13px; font-weight: 600; box-shadow: none; align-self: flex-end; box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
	flex: none; margin: 0; width: auto;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action > a.button.is-primary:first-of-type:hover,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action > a.button.is-primary:first-of-type:hover,
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action .addcomment_buttons a.button.is-primary:hover,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action .addcomment_buttons a.button.is-primary:hover{
	opacity: .9;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action > a.button.is-primary:first-of-type .vicon,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action > a.button.is-primary:first-of-type .vicon,
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action .addcomment_buttons a.button.is-primary .vicon,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action .addcomment_buttons a.button.is-primary .vicon{
	display: none;
}
/* "Contactar": segundo a.button de unit_comments_action, secundario transparente. */
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action > a.button.is-primary:nth-of-type(2),
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action > a.button.is-primary:nth-of-type(2){
	height: 36px; padding: 0 16px; background: transparent; color: var(--inecbarra-sub);
	border: 0.8px solid var(--inecbarra-borde); border-radius: 6px; font-size: 13px; font-weight: 600; box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
	flex: none; margin: 0; width: auto;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action > a.button.is-primary:nth-of-type(2) .vicon,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .unit_comments_action > a.button.is-primary:nth-of-type(2) .vicon{
	display: none;
}
/* Formulario: textarea como .p-lec-coment-input + botonera. */
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .addcomment textarea,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .addcomment textarea{
	width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 13px; font-family: inherit;
	border: 0.8px solid var(--inecbarra-borde); border-radius: 8px; background: var(--inecbarra-hover);
	color: var(--inecbarra-item); resize: none; outline: none; min-height: 72px;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .addcomment textarea:focus,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .addcomment textarea:focus{
	border-color: var(--inecbarra-primario); background: var(--inecbarra-fondo);
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .addcomment_buttons,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .addcomment_buttons{
	display: flex; justify-content: flex-end; align-items: center; gap: 8px;
}
html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .addcomment_buttons a.link,
html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure > div.unit_comments_wrapper .addcomment_buttons a.link{
	font-size: 12px; font-weight: 600; color: var(--inecbarra-sub); text-decoration: none;
}

/* Panel de búsqueda (buscar.js lo cuelga de header.inecbarra, fuera de la fila repintada).
   La geometría (ancho/posición) se afina por canal más abajo. */
header.inecbarra .inecbarra-buscar{
	position: absolute; top: calc(100% + 2px); right: 16px; width: min(480px, calc(100vw - 32px)); max-height: min(500px, 75vh);
	background: var(--inecbarra-fondo); border: 0.8px solid var(--inecbarra-borde); border-radius: 12px;
	box-shadow: 0 8px 24px var(--inecbarra-sombra); z-index: 90; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
}
header.inecbarra .inecbarra-buscar[hidden]{ display: none; }
header.inecbarra .inecbarra-buscar-cab{ display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 0.8px solid var(--inecbarra-borde); flex: none; color: var(--inecbarra-sub); }
header.inecbarra .inecbarra-buscar-input{ flex: 1; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--inecbarra-item); outline: none; padding: 0; margin: 0; box-shadow: none; height: auto; }
header.inecbarra .inecbarra-buscar-res{ flex: 1; overflow-y: auto; padding: 8px 0; display: flex; flex-direction: column; gap: 6px; }
header.inecbarra .inecbarra-buscar-grupo{ font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--inecbarra-sub); padding: 6px 16px 2px; }
header.inecbarra .inecbarra-buscar-item{ display: block; width: 100%; text-align: left; padding: 8px 16px; border: 0; border-radius: 0; background: transparent; color: var(--inecbarra-item); font-size: 13px; line-height: 1.4; cursor: pointer; }
header.inecbarra .inecbarra-buscar-item:hover, header.inecbarra .inecbarra-buscar-item:focus-visible{ background: var(--inecbarra-hover); outline: none; }
header.inecbarra .inecbarra-buscar-item mark{ background: var(--inecbarra-activo-fondo); color: inherit; padding: 0; }
header.inecbarra .inecbarra-buscar-vacio{ padding: 12px 16px; font-size: 13px; color: var(--inecbarra-sub); }
html[data-inecbarra-escritorio] .inecbarra-resaltado,
html[data-inecbarra-movil] .inecbarra-resaltado{ outline: 2px solid var(--inecbarra-primario) !important; background-color: var(--inecbarra-activo-fondo) !important; border-radius: 6px; }

/* Barra propia de course_status (montar.js: crearScrollUI/actualizarScrollUI). Pista fixed,
   pegada al borde derecho; top/height los fija montar.js en línea. Compartida por los dos canales. */
html[data-inecbarra-escritorio] .inecbarra-scroll,
html[data-inecbarra-movil] .inecbarra-scroll{
	position: fixed; width: 8px; pointer-events: none; z-index: 35;
}
html[data-inecbarra-escritorio] .inecbarra-scroll[hidden],
html[data-inecbarra-movil] .inecbarra-scroll[hidden]{ display: none; }
html[data-inecbarra-escritorio] .inecbarra-scroll-pulgar,
html[data-inecbarra-movil] .inecbarra-scroll-pulgar{
	position: absolute; top: 0; right: 0; width: 8px; min-height: 40px; border-radius: 4px;
	background: color-mix(in srgb, currentColor 25%, transparent); pointer-events: auto; will-change: transform; cursor: pointer;
}
html[data-inecbarra-escritorio] .inecbarra-scroll-pulgar:hover,
html[data-inecbarra-escritorio] .inecbarra-scroll-pulgar.is-scrolling,
html[data-inecbarra-escritorio] .inecbarra-scroll-pulgar.is-arrastrando,
html[data-inecbarra-movil] .inecbarra-scroll-pulgar:hover,
html[data-inecbarra-movil] .inecbarra-scroll-pulgar.is-scrolling,
html[data-inecbarra-movil] .inecbarra-scroll-pulgar.is-arrastrando{
	background: color-mix(in srgb, currentColor 40%, transparent);
}
html[data-inecbarra-escritorio] body.inecbarra-arrastrando-scroll,
html[data-inecbarra-movil] body.inecbarra-arrastrando-scroll{ user-select: none; }

@media (min-width: 769px){
	html[data-inecbarra-escritorio] body.inecbarra-on{ margin: 0; }
	html[data-inecbarra-escritorio] body.inecbarra-on div.course_status{ margin: 0; }
	html[data-inecbarra-escritorio] body.inecbarra-on div.course_content > div.course_content_header{ display: none !important; }
	html[data-inecbarra-escritorio] body.inecbarra-on div.course_status .course_content_content > span.lesson_info,
	html[data-inecbarra-escritorio] body.inecbarra-on div.course_status .course_content_content > h2{ display: none !important; }
	html[data-inecbarra-escritorio] body.inecbarra-on header.inecbarra{
		display: block; position: sticky; top: 0; z-index: 30; height: 56px;
		margin: -16px -16px 16px; width: calc(100% + 32px); max-width: none; box-sizing: border-box;
		background: var(--inecbarra-fondo) !important; border-bottom: 0.8px solid var(--inecbarra-borde);
		font-family: 'Inter', sans-serif; line-height: normal; text-align: left;
	}

	header.inecbarra .inecbarra-pastilla{ display: flex; align-items: center; height: 32px; border: 1px solid var(--inecbarra-borde); border-radius: 6px; background: var(--inecbarra-fondo); overflow: hidden; box-sizing: border-box; flex: none; }
	header.inecbarra .inecbarra-pastilla-btn{
		display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; height: 100%; border: 0; background: transparent;
		font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--inecbarra-item);
		cursor: pointer; user-select: none; transition: background .15s ease;
	}
	header.inecbarra .inecbarra-pastilla-btn:hover{ background: var(--inecbarra-hover); }
	header.inecbarra .inecbarra-pastilla-sep{ width: 1px; height: 16px; background: var(--inecbarra-borde); }
	header.inecbarra .inecbarra-ico-atras{ transform: rotate(180deg); }

	/* Tableta (769-1180 con temario abierto): la barra mide ~500 px y la pastilla con texto
	   montaba encima de los iconos. Se mide la barra, no la ventana: plegar el temario la ensancha. */
	html[data-inecbarra-escritorio] body.inecbarra-on header.inecbarra{ container: inecbarra / inline-size; }
	@container inecbarra (max-width: 720px){
		header.inecbarra .inecbarra-pastilla-btn{ padding: 0 9px; }
		header.inecbarra .inecbarra-pastilla-btn > span{
			position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
		}
		header.inecbarra .inecbarra-centro{ gap: 8px; }
	}
	@container inecbarra (max-width: 560px){
		header.inecbarra .inecbarra-fila{ padding: 0 8px; }
		header.inecbarra .inecbarra-der{ gap: 0; }
		header.inecbarra .inecbarra-btn{ width: 36px; height: 36px; }
	}

	/* Comentarios: el panel nativo vestido de cajón derecho. */
	html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure{
		position: fixed !important; top: 0 !important; right: 0 !important; left: auto !important; width: 380px !important;
		height: 100dvh !important; z-index: 120 !important; background: var(--inecbarra-fondo);
		border-left: 0.8px solid var(--inecbarra-borde); box-shadow: -8px 0 24px var(--inecbarra-sombra); overflow-y: auto; box-sizing: border-box;
	}
	html[data-inecbarra-escritorio] .inecbarra-velo{ position: fixed; inset: 56px 0 0 0; background: var(--inecbarra-velo); z-index: 110; }
	html[data-inecbarra-escritorio] .inecbarra-velo[hidden]{ display: none; }
	/* Cajón de comentarios y velo empiezan bajo la barra: la barra sigue pulsable con comentarios abiertos. */
	html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure{ top: 56px !important; bottom: 0 !important; height: auto !important; max-height: none !important; }
	html[data-inecbarra-escritorio] body.inecbarra-on div.course_status > div.course_timeline.comments_shown{ z-index: 40 !important; }

	/* course_status: la nativa se oculta, montar.js pinta la propia (inecbarra-scroll). */
	html[data-inecbarra-escritorio] body.inecbarra-on div.course_status{
		scrollbar-width: none;
	}
	html[data-inecbarra-escritorio] body.inecbarra-on div.course_status::-webkit-scrollbar{
		width: 0; height: 0;
	}

	/* Comentarios: sigue con CSS nativo, fina y muy transparente. */
	html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure::-webkit-scrollbar,
	html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure *::-webkit-scrollbar{
		width: 3px; background: transparent;
	}
	html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure::-webkit-scrollbar-thumb,
	html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure *::-webkit-scrollbar-thumb{
		background: color-mix(in srgb, currentColor 14%, transparent); border-radius: 4px;
	}
	html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure::-webkit-scrollbar-track,
	html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure *::-webkit-scrollbar-track{
		background: transparent;
	}
	html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure::-webkit-scrollbar-corner,
	html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure *::-webkit-scrollbar-corner{
		background: transparent;
	}
	html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure::-webkit-scrollbar-button,
	html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure *::-webkit-scrollbar-button{
		display: none;
	}
	@supports not selector(::-webkit-scrollbar){
		html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure,
		html[data-inecbarra-escritorio] body.inecbarra-on div.unit_comments_enclosure *{
			scrollbar-width: thin;
			scrollbar-color: color-mix(in srgb, currentColor 14%, transparent) transparent;
		}
	}

	/* Congela el temario durante el refresco por arrastre: sin esto se ve el nativo saltar
	   de ancho (319→386px) mientras inecnav se remonta (montar.js: congelarVista). */
	html[data-inecbarra-escritorio] body.inecbarra-on.inecbarra-refrescando div.course_status > div.course_timeline{
		width: var(--inecbarra-tl-ancho) !important; min-width: var(--inecbarra-tl-ancho) !important; max-width: var(--inecbarra-tl-ancho) !important;
	}
	html[data-inecbarra-escritorio] body.inecbarra-on.inecbarra-refrescando div.course_status > div.course_timeline > *{
		visibility: hidden !important;
	}
}

@media (hover: hover) and (min-width: 769px){
	header.inecbarra .inecbarra-btn[data-tooltip]::after{
		content: attr(data-tooltip); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
		background: var(--inecbarra-tooltip-fondo); color: var(--inecbarra-tooltip-color); font-size: 11px; font-weight: 500; line-height: 1.2;
		padding: 4px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden;
		transition: opacity .15s ease, visibility .15s ease; z-index: 1000; box-shadow: 0 4px 12px var(--inecbarra-sombra);
	}
	header.inecbarra .inecbarra-btn[data-tooltip]:hover::after{ opacity: 1; visibility: visible; }
	header.inecbarra .inecbarra-der .inecbarra-btn:last-child[data-tooltip]::after{ left: auto; right: 0; transform: none; }
}

/* Móvil (≤768px): dos barras fijas (arriba 48px, abajo 56px), course_status entre ambas,
   menú azul nativo oculto mientras la barra propia está montada (Addendum B: sin botón "mas"). */
@media (max-width: 768px){
	html[data-inecbarra-movil] body.inecbarra-on div.course_content > div.course_content_header{ display: none !important; }
	html[data-inecbarra-movil] body.inecbarra-on .inecrail-bar{ display: none !important; }
	html[data-inecbarra-movil] body.inecbarra-on .profile_menu{ display: none !important; }
	html[data-inecbarra-movil] body.inecbarra-on div.course_status{
		position: fixed !important; left: 0 !important; right: 0 !important;
		top: 48px !important; bottom: 56px !important; height: auto !important; max-height: none !important;
		overflow-y: auto; scrollbar-width: none;
	}
	html[data-inecbarra-movil] body.inecbarra-on div.course_status::-webkit-scrollbar{ width: 0; height: 0; }
	html[data-inecbarra-movil] body.inecbarra-on div.course_content{ padding-bottom: 24px !important; }
	html[data-inecbarra-movil] body.inecbarra-on .grecaptcha-badge{ bottom: 66px !important; }
	/* Mockup .p-lec-m-tit: título compacto en el contenido (17/600/1.3), sin la línea Unidad N/M · duración */
	html[data-inecbarra-movil] body.inecbarra-on div.course_status .course_content_content > span.lesson_info{ display: none !important; }
	/* Hueco barra→título 16 px como el mockup: solo queda el padding de course_content (16); fuera margin 24 del wrapper y padding 12 */
	html[data-inecbarra-movil] body.inecbarra-on div.course_status div.course_content_content_wrapper{ margin-top: 0 !important; }
	html[data-inecbarra-movil] body.inecbarra-on div.course_status div.course_content_content{ padding-top: 0 !important; }
	html[data-inecbarra-movil] body.inecbarra-on div.course_status .course_content_content > h2{ font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; margin: 0 0 12px !important; padding: 0 !important; }
	/* En móvil course_status es position:fixed (contexto de apilamiento propio, z-index:auto),
	   así que el cajón de comentarios (z10001, hijo de course_status) queda atrapado dentro de
	   ESE contexto y nunca gana por z-index sobre la pista (hermana de course_status en body,
	   z9999): el z-index no resuelve el solape. Lo resuelve montar.js/actualizarScrollUI
	   ocultando la pista mientras modelo.comentariosAbierto es true (review r1, ronda 2 N1). */
	html[data-inecbarra-movil] .inecbarra-scroll{ z-index: 9999; }

	html[data-inecbarra-movil] body.inecbarra-on header.inecbarra{
		display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 10002; height: 48px; margin: 0; box-sizing: border-box;
		background: var(--inecbarra-fondo) !important; border-bottom: 0.8px solid var(--inecbarra-borde);
		font-family: 'Inter', sans-serif; line-height: normal; text-align: left;
	}
	header.inecbarra--movil .inecbarra-fila{ padding: 0 4px; gap: 2px; }
	header.inecbarra--movil .inecbarra-izq, header.inecbarra--movil .inecbarra-der, header.inecbarra--movil .inecbarra-centro{ gap: 2px; }
	header.inecbarra--movil .inecbarra-btn{ width: 36px; height: 36px; }
	header.inecbarra--movil [data-inecbarra-accion=cerrar]{ margin-right: 8px; }
	@media (max-width: 375px){
		header.inecbarra--movil .inecbarra-btn:not([data-inecbarra-accion="temario"]){ width: 32px; height: 32px; }
		header.inecbarra--movil [data-inecbarra-accion=cerrar]{ margin-right: 2px; }
		header.inecbarra--movil .inecbarra-fila{ padding: 0 2px; }
	}
	html[data-inecbarra-movil] .inecbarra-leyenda{
		position: absolute; top: calc(50% + 11px); left: 50%; transform: translateX(-50%);
		font-size: 10px; font-weight: 500; line-height: 1; color: var(--inecbarra-sub); white-space: nowrap; pointer-events: none;
	}

	html[data-inecbarra-movil] body.inecbarra-on nav.inecbarra-abajo{
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 10002; height: 56px; box-sizing: border-box; padding: 0 16px;
		display: flex; align-items: center; justify-content: space-between;
		background: var(--inecbarra-fondo); border-top: 1px solid var(--inecbarra-borde); font-family: 'Inter', sans-serif;
	}
	/* BUG A (ronda 3, vivo): `.inecbarra-btn` (línea ~41) sólo resetea fondo/borde
	   bajo `header.inecbarra`. `.inecbarra-abajo-lec` vive en `nav.inecbarra-abajo`
	   (hermano, no descendiente de header), así que nunca heredaba ese reset y el
	   `button{background:...}` del tema ganaba (medido en vivo: azul 77/95/227,
	   cuadrado 44x44 con la etiqueta recortada). El reset genérico de abajo
	   tampoco tocaba background/border/box-shadow — sólo margin/padding/min-*. */
	nav.inecbarra-abajo button{ margin: 0; padding: 0; min-width: 0; min-height: 0; box-shadow: none; text-transform: none; letter-spacing: normal; }
	nav.inecbarra-abajo .inecbarra-abajo-nav{
		display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; cursor: pointer;
		font-size: 14px !important; font-weight: 600; color: var(--inecbarra-item);
	}
	nav.inecbarra-abajo .inecbarra-abajo-sig > span{ color: var(--inecbarra-primario); }
	nav.inecbarra-abajo .deshabilitado{ opacity: .3; pointer-events: none; }
	html[data-inecbarra-movil] nav.inecbarra-abajo .inecbarra-abajo-lec,
	html[data-inecbarra-movil] nav.inecbarra-abajo button.inecbarra-abajo-lec{
		position: relative; width: 44px; height: 44px; display: inline-flex; flex-direction: column;
		align-items: center; justify-content: center; gap: 2px; box-sizing: border-box;
		background: transparent !important; border: 0 !important; border-radius: 8px; padding: 0 !important;
		box-shadow: none !important; color: var(--inecbarra-item); cursor: pointer;
	}
	html[data-inecbarra-movil] nav.inecbarra-abajo .inecbarra-abajo-lec:active,
	html[data-inecbarra-movil] nav.inecbarra-abajo .inecbarra-abajo-lec[aria-expanded="true"]{
		background: var(--inecbarra-hover) !important;
	}
	html[data-inecbarra-movil] nav.inecbarra-abajo .inecbarra-abajo-lec .inecbarra-leyenda{
		position: static; transform: none; font-size: 10px; line-height: 1; color: var(--inecbarra-sub);
	}
	nav.inecbarra-abajo svg.inecbarra-ico{ display: block; flex: none; fill: none; stroke: currentColor; color: var(--inecbarra-item); }
	nav.inecbarra-abajo .inecbarra-ico-atras{ transform: rotate(180deg); }

	/* BUG 1: con el temario cerrado, course_status.moveonside deja course_timeline (comments_shown)
	   en display:none nativo -> el cajón (hijo, aunque fixed) no renderiza ni mide nada. Se fuerza
	   el timeline a visible pero sin ocupar hueco en el flex de course_status (fixed 0x0, overflow
	   visible para que su hijo fixed siga viéndose), y se ocultan sus demás hijos para que el
	   temario no aparezca. Con el temario ABIERTO (sin moveonside) esto también aplica: el timeline
	   deja de ocupar ancho y solo se ve el cajón encima; al cerrar comentarios (se quita
	   comments_shown) el timeline vuelve a su comportamiento nativo normal.	*/
	html[data-inecbarra-movil] body.inecbarra-on div.course_status > div.course_timeline.comments_shown{
		display: block !important; position: fixed !important; width: 0 !important; height: 0 !important;
		min-width: 0 !important; overflow: visible !important; border: 0 !important; padding: 0 !important;
		box-sizing: border-box !important;
		/* fixed = contexto de apilamiento propio: sin z-index el cajón (z10001) queda bajo course_content. */
		z-index: 10001 !important; top: 0 !important; left: 0 !important; transform: none !important;
	}
	html[data-inecbarra-movil] body.inecbarra-on div.course_status > div.course_timeline.comments_shown > *:not(.unit_comments_enclosure){
		display: none !important;
	}

	/* Comentarios y velo: entre las dos barras, a todo el ancho. */
	html[data-inecbarra-movil] body.inecbarra-on div.unit_comments_enclosure{
		position: fixed !important; top: 48px !important; bottom: 56px !important; left: 0 !important; right: 0 !important;
		width: 100vw !important; max-width: none !important; min-width: 0 !important; height: auto !important; max-height: none !important; z-index: 10001 !important;
		background: var(--inecbarra-fondo); overflow: hidden; box-sizing: border-box;
	}
	html[data-inecbarra-movil] .inecbarra-velo{ position: fixed; inset: 48px 0 56px 0; background: var(--inecbarra-velo); z-index: 10000; }
	html[data-inecbarra-movil] .inecbarra-velo[hidden]{ display: none; }

	/* Buscador: panel bajo la barra, casi a todo el ancho. */
	html[data-inecbarra-movil] header.inecbarra--movil .inecbarra-buscar{
		position: fixed; top: 48px; left: 8px; right: 8px; width: calc(100vw - 16px); max-height: min(500px, 75vh);
	}
}