/**
* Archivo: cvo_files/css_consultoria_sap/cvo_nav_secciones.css
* FUNCION: Barra fija de secciones de los hubs de /cursos y de las paginas de carrera (cvo_nav_secciones.js)
*          y menu de secciones de la carrera en la pagina (nav#cvo_nav_secciones, usa las pildoras .cvohub_solapa
*          de estilo_rsp.css).
* HERENCIA: estilo_rsp.css (.cvohub_solapas / .cvohub_solapa)
* FECHA DE CREACION: 27 Octubre 2026   -> IA-CHG-CLAUDE | ID: 27OCT2026-16:50:00 | MENU STICKY SECCIONES
* Propiedad intelectual : (c) CHristian Adrian Calzada.
*  El autor se reserva de manera exclusiva todos los derechos de distribucion,
*  copia y reproduccion ya sea total o parcial de este documento.
*
* NOTA: archivo propio (no dentro de estilo_rsp.css) para versionarlo en la URL desde plan_carrera::_getNavSeccionesRecursos.
*       ASCII puro.
* --------------------------------------------------------------------------------*/


/* Menu de secciones en la pagina de la carrera: mismas pildoras que el hub, un poco mas de aire arriba
   (va despues del recuadro de trazabilidad) */
nav.cvo_nav_secciones_carrera{
	padding-top:2.5em;
	padding-bottom:0;
	}

/* Inscripcion destacada (amarillo de marca) */
a.cvohub_solapa.cvo_solapa_cta{
	color:#17466e !important;
	background-color:#f6c119;
	border-color:#e0ad10;
	}

a.cvohub_solapa.cvo_solapa_cta:hover{
	color:#ffffff !important;
	background-color:#0e67a8;
	border-color:#0e67a8;
	}


/* BARRA FIJA: debajo del menu superior (el script le pone el top real); por debajo de los paneles del menu PC
   (z-index 101) y del propio menu (999), para que los desplegables queden por encima */
.cvo_barra_secciones{
	position:fixed;
	left:0;
	right:0;
	top:70px;
	z-index:98;
	/* Degrade amarillo suave de marca: resalta la barra sin competir con el menu superior   -> IA-CHG-CLAUDE | ID: 27OCT2026-17:25:00 | MENU STICKY OTROS CURSOS */
	/*background-color:#fff8e1;*/   /* -> IA-CHG-OFF | CLAUDE | ID: 27OCT2026-17:40:00 | MENU STICKY TITULO */
	/*background-image:linear-gradient(90deg, #fffdf5 0%, #fff4cf 35%, #ffefbd 65%, #fffaea 100%);*/   /* -> IA-CHG-OFF | CLAUDE | ID: 27OCT2026-17:40:00 | MENU STICKY TITULO */
	/* Centro mas claro (antes #ffefbd)   -> IA-CHG-CLAUDE | ID: 27OCT2026-17:40:00 | MENU STICKY TITULO */
	background-color:#fffbec;
	background-image:linear-gradient(90deg, #fffef9 0%, #fff9e3 35%, #fff6d8 65%, #fffcf2 100%);
	border-bottom:0.0625em solid #f3d77a;
	box-shadow:0 0.25em 0.75em rgba(219,167,52,0.18);
	opacity:0;
	visibility:hidden;
	-webkit-transform:translateY(-0.75em);
	transform:translateY(-0.75em);
	-webkit-transition:opacity .2s, visibility .2s, -webkit-transform .2s;
	transition:opacity .2s, visibility .2s, transform .2s;
	}

.cvo_barra_secciones.cvo_barra_visible{
	opacity:1;
	visibility:visible;
	-webkit-transform:translateY(0);
	transform:translateY(0);
	}

/* Contenido centrado al ancho de la pagina (#div_pagina_cont_central: 80em); con muchas secciones desliza de costado */
.cvo_barra_int{
	display:flex;
	align-items:center;
	gap:0.25em;
	max-width:80em;
	margin:0 auto;
	padding:0 1em;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
	}

.cvo_barra_int::-webkit-scrollbar{
	display:none;
	}

/* Titulo de la pagina al inicio de la barra ("Curso ABAP:"): negrita, azul CVO, 14px; si es muy largo se corta con ...   -> IA-CHG-CLAUDE | ID: 27OCT2026-17:40:00 | MENU STICKY TITULO */
.cvo_barra_titulo{
	flex:0 1 auto;
	min-width:6em;
	max-width:22em;
	padding:0 0.75em 0 0;
	font-size:14px;
	font-weight:700;
	line-height:1.3em;
	color:#0e67a8;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	}

a.cvo_barra_item{
	display:inline-block;
	flex:0 0 auto;
	padding:0.8em 1em 0.65em 1em;
	font-size:15px;
	font-weight:600;
	line-height:1.3em;
	white-space:nowrap;
	color:#4a4a4a !important;
	text-decoration:none;
	border-bottom:0.1875em solid transparent;
	-webkit-transition:.2s;
	transition:.2s;
	}

a.cvo_barra_item:hover{
	color:#0e67a8 !important;
	background-color:rgba(255,255,255,0.65);
	}

/* Seccion que se esta leyendo: azul de marca con filete azul (sobre el fondo amarillo el filete amarillo no se ve)   -> IA-CHG-CLAUDE | ID: 27OCT2026-17:25:00 | MENU STICKY OTROS CURSOS */
a.cvo_barra_item.cvo_nav_activo{
	color:#0e67a8 !important;
	border-bottom-color:#0e67a8;
	}

/* Inscripcion: boton amarillo junto a las demas secciones   -> IA-CHG-CLAUDE | ID: 27OCT2026-17:25:00 | MENU STICKY OTROS CURSOS */
a.cvo_barra_item.cvo_barra_cta{
	margin-left:0.5em;
	padding:0.45em 1.4em;
	font-weight:700;
	color:#17466e !important;
	background-color:#f6c119;
	border-bottom:0;
	border-radius:2em;
	box-shadow:0 0.0625em 0.1875em rgba(160,110,0,0.35);
	}

a.cvo_barra_item.cvo_barra_cta:hover{
	color:#ffffff !important;
	background-color:#0e67a8;
	}

a.cvo_barra_item.cvo_barra_cta.cvo_nav_activo{
	box-shadow:0 0 0 0.125em #0e67a8;
	}

/* Otros Cursos <area> (solo en la carrera): boton gris a la derecha que lleva al hub   -> IA-CHG-CLAUDE | ID: 27OCT2026-17:25:00 | MENU STICKY OTROS CURSOS */
a.cvo_barra_item.cvo_barra_hub{
	margin-left:auto;
	padding:0.45em 1.3em;
	font-weight:600;
	color:#4a4a4a !important;
	background-color:#eceeef;
	border:0.0625em solid #c9cdd1;
	border-radius:2em;
	}

a.cvo_barra_item.cvo_barra_hub:hover{
	color:#ffffff !important;
	background-color:#6b7279;
	border-color:#6b7279;
	}

/* MENU SUPERIOR COMPACTO: mientras la barra de secciones esta a la vista (clase en <html> que pone el script), el menu
   superior PC queda mas fino: heraldica chica + filete dorado + la palabra CVOSOFT del mismo tamanio, sin IT-ACADEMY.
   Al volver arriba (la barra se oculta) se quita la clase y el menu vuelve a su estado normal.
   Los !important pisan los estilos en linea del logo (func_menu_pagina)   -> IA-CHG-CLAUDE | ID: 27OCT2026-17:55:00 | MENU STICKY HUB Y CABECERA */
html.cvo_cabecera_compacta #div_nav_ppal_desktop{
	padding-top:0.125em;
	padding-bottom:0.125em;
	}

html.cvo_cabecera_compacta #img_logo_nav_ppal_desktop{
	display:none;
	}

/* El logo deja de tener alto propio (la imagen esta oculta): mismo ancho que con la heraldica, asi las opciones del menu
   no se corren de lugar al pasar a compacto */
html.cvo_cabecera_compacta #div_menu_ppal_desktop_logo{
	position:relative;
	width:14.95em;
	height:2.4em;
	}

html.cvo_cabecera_compacta #div_menu_ppal_desktop_logo > div{
	margin-top:0 !important;
	}

/* Heraldica chica (header-heraldica-compacta.png: 49x64, se muestra a 25x32 y queda nitida en pantallas retina) y filete
   dorado vertical como el del logo normal, dibujado en CSS para que salga nitido   -> IA-CHG-CLAUDE | ID: 27OCT2026-18:05:00 | CABECERA COMPACTA HERALDICA */
html.cvo_cabecera_compacta #div_menu_ppal_desktop_logo::before{
	content:"";
	position:absolute;
	left:0.3125em;
	top:50%;
	width:25px;
	height:32px;
	margin-top:-16px;
	background-image:url(/cvo_files/template_web_consultoria_abap/images_consultoria_abap/headers/header-heraldica-compacta.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:25px 32px;
	}

html.cvo_cabecera_compacta #div_menu_ppal_desktop_logo::after{
	content:"";
	position:absolute;
	left:38px;
	top:50%;
	width:2px;
	height:28px;
	margin-top:-14px;
	border-radius:1px;
	background-image:linear-gradient(180deg, #e8c27a 0%, #d09c39 50%, #e8c27a 100%);
	}

html.cvo_cabecera_compacta #div_menu_ppal_desktop_logo .text_encima{
	position:absolute !important;
	/*left:0.3em;*/   /* -> IA-CHG-OFF | CLAUDE | ID: 27OCT2026-18:05:00 | CABECERA COMPACTA HERALDICA */
	left:48px;   /*-> IA-CHG-CLAUDE | ID: 27OCT2026-18:05:00 | CABECERA COMPACTA HERALDICA */
	top:50%;
	margin:0 !important;
	-webkit-transform:translateY(-50%) scaleY(1.1) !important;
	transform:translateY(-50%) scaleY(1.1) !important;
	line-height:1em !important;
	}

/* Franja IT-ACADEMY (unico div dentro del texto del logo) */
html.cvo_cabecera_compacta #div_menu_ppal_desktop_logo .text_encima div{
	display:none;
	}

html.cvo_cabecera_compacta #div_menu_ppal_desktop{
	padding-top:0.6em;
	}

html.cvo_cabecera_compacta #div_nav_acciones_desktop{
	padding-top:0.3em;
	}


/* Movil y pantallas chicas: sin barra fija (el menu en la pagina sigue, deslizable) */
@media all and (max-width: 767px){
	.cvo_barra_secciones{
		display:none !important;
		}

	nav.cvo_nav_secciones_carrera{
		padding-top:1.5em;
		}
}

@media (prefers-reduced-motion: reduce){
	.cvo_barra_secciones{
		-webkit-transition:none;
		transition:none;
		}
}