/**
* Archivo: cvo_files/css_consultoria_sap/carreras_y_hub.css
* FUNCION: definir css para propias usadas para mostrar las carreras y los hubs

* HERENCIA: Ninguna
* FECHA DE CREACION: 14 Octubre 2026
* Propiedad intelectual : © CHristian Adrian Calzada. 
*  El autor se reserva de manera exclusiva todos los derechos de distribucion,lear
*  copia y reproduccion ya sea total o parcial de este documento.
*
* MODIFICACIONES
* ==============
*
* Fecha: 
* Motivo:
*
* --------------------------------------------------------------------------------*/


.span_letra_circular
{
    display:inline-block;
    width:20px;
    height:20px;
    line-height:18px;
    padding:0;
    box-sizing:border-box;
    text-align:center;
    vertical-align:middle;
    border-radius:50%;
    font-size:10px;		
}

.button_nivel_carrera
{
	display: inline-flex;
	align-items: center; 
	gap: 3px; cursor: pointer;
 	border: none !important;
	background-color: transparent !important;
	border-bottom: none !important;
	font-size: 16px !important;
	color: #575757 !important;
	line-height: 28px !important; 
	word-spacing:3px !important;
	letter-spacing:0.2px !important;
	margin:0px !important;
	padding:0px !important;
}

	
/* --------------------------------------------------------
	   Estilos del indicador de nivel de formacion.
	   Prefijo "cvo-nf-" en todas las clases para evitar
	   colision con el CSS existente del sistema.
	   -------------------------------------------------------- */

	
	
	.cvo-nf-wrap
	{
		font-family : Arial, sans-serif;
		margin      : 0;
	}

	/* Etiqueta encima de la barra */
	.cvo-nf-encabezado
	{
		font-size      : 10px;
		text-transform : uppercase;
		letter-spacing : 1.2px;
		color          : #b0bec5;
		font-weight    : bold;
		margin         : 0 0 8px 0;
	}

	/* Contenedor de la barra: apila las 3 capas */
	.cvo-nf-barra-cont
	{
		position      : relative;
		height        : 32px;
		border-radius : 5px;
		overflow      : hidden;
		box-shadow    : 0 1px 4px rgba(0,0,0,0.13);
	}

	/* --------------------------------------------------------
	   CAPA 1: Rail gris con los 5 segmentos de referencia.
	   Siempre visible, muestra todos los niveles posibles.
	   -------------------------------------------------------- */
	.cvo-nf-rail
	{
		position : absolute;
		top      : 0;
		left     : 0;
		width    : 100%;
		height   : 100%;
		display  : -webkit-box;
		display  : -ms-flexbox;
		display  : flex;
		z-index  : 1;
	}

	.cvo-nf-rail-seg
	{
		-webkit-box-flex : 1;
		-ms-flex         : 1;
		flex             : 1;
		display          : -webkit-box;
		display          : -ms-flexbox;
		display          : flex;
		-webkit-box-align: center;
		-ms-flex-align   : center;
		align-items      : center;
		-webkit-box-pack : center;
		-ms-flex-pack    : center;
		justify-content  : center;
		font-size        : 10px;
		font-weight      : bold;
		text-transform   : uppercase;
		letter-spacing   : 0.4px;
		color            : #c8d4dc;
		background       : #e8edf2;
		position         : relative;
		border-right     : 2px solid #ffffff;
	}

	.cvo-nf-rail-seg:last-child { border-right: none; }

	/* Flecha CSS separadora entre segmentos */
	.cvo-nf-rail-seg:not(:last-child)::after
	{
		content       : "";
		position      : absolute;
		right         : -8px;
		top           : 0;
		width         : 0;
		height        : 0;
		border-top    : 16px solid transparent;
		border-bottom : 16px solid transparent;
		border-left   : 8px solid #ffffff;
		z-index       : 3;
	}

	/* --------------------------------------------------------
	   CAPA 2: Barra de progreso azul.

	   Arranca en left% (inicio del rango) con width=0
	   y se expande a width% via JS con transicion CSS.
	   El degradado va de cyan claro a azul marino.
	   -------------------------------------------------------- */
	.cvo-nf-barra
	{
		position        : absolute;
		top             : 0;
		height          : 100%;
		width           : 0%;
		z-index         : 2;
		background      : -webkit-linear-gradient(
			left,
			#8dd8f0 0%,
			#5bc4e8 25%,
			#2e8fc0 55%,
			#1a6fa8 80%,
			#0e3f6e 100%
		);
		background      : linear-gradient(
			90deg,
			#8dd8f0 0%,
			#5bc4e8 25%,
			#2e8fc0 55%,
			#1a6fa8 80%,
			#0e3f6e 100%
		);
		background-size : 300% 100%;
		-webkit-transition : width 1.6s cubic-bezier(0.4, 0, 0.2, 1);
		transition         : width 1.6s cubic-bezier(0.4, 0, 0.2, 1);
	}

	/* Borde luminoso en el frente de avance de la barra */
	.cvo-nf-barra::after
	{
		content    : "";
		position   : absolute;
		right      : 0;
		top        : 0;
		width      : 6px;
		height     : 100%;
		background : rgba(255,255,255,0.28);
		filter     : blur(3px);
	}

	/* Animacion shimmer que corre sobre la barra activa */
	@-webkit-keyframes cvo-nf-shimmer
	{
		0%   { background-position:  200% 0; }
		100% { background-position: -200% 0; }
	}

	@keyframes cvo-nf-shimmer
	{
		0%   { background-position:  200% 0; }
		100% { background-position: -200% 0; }
	}

	/* Clase que activa el shimmer (se agrega via JS) */
	.cvo-nf-barra.cvo-nf-visible
	{
		/*-webkit-animation : cvo-nf-shimmer 3.5s linear infinite;*/
		/*animation         : cvo-nf-shimmer 3.5s linear infinite;*/
		-webkit-animation : cvo-nf-shimmer 8.5s linear infinite;
		animation         : cvo-nf-shimmer 8.5s linear infinite;
	}

	/* --------------------------------------------------------
	   CAPA 3: Textos superpuestos sobre la barra.

	   Los del rango activo cambian a blanco con transicion
	   suave cuando la barra los "cubre".
	   -------------------------------------------------------- */
	.cvo-nf-textos
	{
		position        : absolute;
		top             : 0;
		left            : 0;
		width           : 100%;
		height          : 100%;
		display         : -webkit-box;
		display         : -ms-flexbox;
		display         : flex;
		z-index         : 4;
		pointer-events  : none;
	}

	.cvo-nf-txt
	{
		-webkit-box-flex : 1;
		-ms-flex         : 1;
		flex             : 1;
		display          : -webkit-box;
		display          : -ms-flexbox;
		display          : flex;
		-webkit-box-align: center;
		-ms-flex-align   : center;
		align-items      : center;
		-webkit-box-pack : center;
		-ms-flex-pack    : center;
		justify-content  : center;
		font-size        : 10px;
		font-weight      : bold;
		text-transform   : uppercase;
		letter-spacing   : 0.4px;
		color            : #c8d4dc;
		-webkit-transition : color 0.4s ease, text-shadow 0.4s ease;
		transition         : color 0.4s ease, text-shadow 0.4s ease;
	}

	/* Estado activo: texto blanco con sombra */
	.cvo-nf-txt.cvo-nf-activo
	{
		color       : #ffffff;
		text-shadow : 0 1px 3px rgba(0,0,0,0.35);
	}

	/* Pie debajo del indicador */
	.cvo-nf-footer
	{
		margin-top  : 8px;
		font-size   : 10px;
		color       : #b0bec5;
	}

	.cvo-nf-footer strong { color: #1a6fa8; }