@import url('./variables.css');

#enfoqueComunidad,
#espaciosTrabajo {
	scroll-margin-top: 6rem;
	/* ~96px */
}

/*
 =======================================
 INICIO SECCIÓN "ENFOQUE EN COMUNIDAD Y CONECTIVIDAD"
 Sobreescritura de MDB: SÍ
 Enfoque: Desktop-First
 =======================================   
*/
/* --- Cards --- */
.card-perfil {
	border: 2px rgba(0, 0, 0, 0.13) solid;
}

.card-perfil .mask-card-perfil {
	background-image:
		linear-gradient(to top,
			rgba(0, 0, 0, 0.75) 0%,
			rgba(0, 0, 0, 0.35) 20%,
			rgba(0, 0, 0, 0.08) 35%,
			rgba(0, 0, 0, 0) 50%);
}

.card-perfil .etiqueta-card-perfil {
	position: absolute;
	top: 0;
	right: 1rem;
	padding: 0.7rem 0.7rem 1.5rem 0.7rem;
	background-color: var(--bg-color, var(--as-secondary));
	/* Esto tiene que ser acorde al borde de "card" */
	transform: translateY(-2px);
	z-index: 3;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 70'%3E%3Cpath d='M 0 8 A 8 8 0 0 1 8 0 L 42 0 A 8 8 0 0 1 50 8 L 50 62 A 8 8 0 0 1 42 70 L 25 58 L 8 70 A 8 8 0 0 1 0 62 Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 70'%3E%3Cpath d='M 0 8 A 8 8 0 0 1 8 0 L 42 0 A 8 8 0 0 1 50 8 L 50 62 A 8 8 0 0 1 42 70 L 25 58 L 8 70 A 8 8 0 0 1 0 62 Z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* --- Carrusel --- */
#enfoqueComunidad .multi-carousel .multi-carousel-item {
	height: 300px !important;
}

#enfoqueComunidad .multi-carousel .carousel-control-prev,
#enfoqueComunidad .multi-carousel .carousel-control-next {
	z-index: 5 !important;
	width: 10% !important;
}

#enfoqueComunidad .multi-carousel .multi-carousel-inner .multi-carousel-item img {
	max-height: 100% !important;
}

/* ARREGLADO CON EL JS
#enfoqueComunidad .multi-carousel .multi-carousel-item {
	width: 20% !important;
}

@media (max-width: 1199.98px) {
	#enfoqueComunidad .multi-carousel .multi-carousel-item {
		width: 25% !important;
	}
}

@media (max-width: 991.98px) {
	#enfoqueComunidad .multi-carousel .multi-carousel-item {
		width: 33.333% !important;
	}
}

@media (max-width: 767.98px) {
	#enfoqueComunidad .multi-carousel .multi-carousel-item {
		width: 50% !important;
	}
}

@media (max-width: 575.98px) {
	#enfoqueComunidad .multi-carousel .multi-carousel-item {
		width: 100% !important;
	}
}
*/
/*
 =================================================
 FIN SECCIÓN "ENFOQUE EN COMUNIDAD Y CONECTIVIDAD"
 =================================================   
*/

/*
 =================================================
 INICIO SECCIÓN "ESPACIOS DE TRABAJO"
 Sobreescritura de MDB: SÍ
 Enfoque: Desktop-First
 =================================================   
*/
#espaciosTrabajo {
	container-type: inline-size;
	container-name: tabs-container;
}

/* ======= TABS ======= */
#espaciosTrabajo .nav.nav-tabs {
	gap: 0.1rem;
	position: relative;
	z-index: 2;
	justify-content: center;
	flex-wrap: nowrap;
	overflow-x: auto;
	/* Firefox */
	/*scrollbar-width: none;
	-webkit-overflow-scrolling: touch;*/
}

#espaciosTrabajo .nav.nav-tabs::-webkit-scrollbar {
	/* Chrome/Safari */
	/*display: none;*/
}

#espaciosTrabajo .tabs-scroll-wrapper {
	position: relative;
	width: 100%;
	z-index: 2;
}

/*Inicio Pseudo*/
#espaciosTrabajo .tabs-scroll-wrapper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 2rem;
	height: 100%;
	background: linear-gradient(to right, #c7e3ff 10%, rgba(255, 255, 255, 0) 100%);
	z-index: 3;
	pointer-events: none;
}

#espaciosTrabajo .tabs-scroll-wrapper::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 2rem;
	height: 100%;
	background: linear-gradient(to left, #c7e3ff 10%, rgba(255, 255, 255, 0) 100%);
	z-index: 3;
	pointer-events: none;
}

/*Fin Pseudo*/

#espaciosTrabajo .nav.nav-tabs .nav-item .nav-link {
	color: var(--as-secondary);
	margin-bottom: 0 !important;
	text-transform: none;
	padding: 0.7rem 1rem;
	border-top-left-radius: 0.8rem;
	border-top-right-radius: 0.8rem;
	white-space: nowrap;
	border-bottom: none !important;
}

#espaciosTrabajo .nav.nav-tabs .nav-item .nav-link:hover {
	background-color: var(--as-secondary-10);
}

#espaciosTrabajo .nav.nav-tabs .nav-item .nav-link.active {
	background-color: white !important;
	/*border-left: 2px var(--as-secondary) solid !important;*/
	/*border-top: 2px var(--as-secondary) solid !important;*/
	/*border-right: 2px var(--as-secondary) solid !important;*/
	border-top-left-radius: 0.8rem;
	border-top-right-radius: 0.8rem;
}

#espaciosTrabajo #tabs-contenido {
	position: relative;
	z-index: 1;
	/*border: 2px var(--as-secondary) solid;*/
	border-radius: 1rem;
	background-color: white;
	padding: 1rem;
	/*margin-top: -1px;*/
}

@media (max-width: 767.98px) {
	#espaciosTrabajo .nav.nav-tabs {
		justify-content: flex-start;
		padding: 0 2rem;
	}

	#espaciosTrabajo .nav.nav-tabs {}

	#espaciosTrabajo #tabs-contenido {
		/*border-top-left-radius: unset;
		border-top-right-radius:  unset;
		border-bottom-left-radius: 1rem;
		border-bottom-right-radius: 1rem;*/
	}
}

/* ======= PILLS ======= */
#espaciosTrabajo .nav.nav-pills {
	transition: gap 0.3s ease;
	border-radius: 50px;
	gap: 0.2rem;
	background-color: var(--as-secondary-20);
	padding: 0.3rem;
}

#espaciosTrabajo .nav.nav-pills .nav-link {
	text-transform: none;
	padding: 0.4rem 1rem;
	background-color: transparent;
	color: var(--as-secondary);
	border-radius: 50px;
	margin: 0 !important;
}

#espaciosTrabajo .nav.nav-pills .nav-link.active {
	background-color: var(--as-secondary);
	color: white !important;
}

/* Cambiar la apariencia de los pills para antes que ocurra el wrap */
@container tabs-container (max-width: 650px) {
	#espaciosTrabajo .nav.nav-pills {
		gap: 0.6rem;
		background-color: transparent !important;
		padding: 0 !important;
		justify-content: center;
	}

	#espaciosTrabajo .nav.nav-pills .nav-link:not(.active) {
		background-color: var(--as-secondary-10);
	}
}

/*
 =================================================
 FIN SECCIÓN "ESPACIOS DE TRABAJO"
 =================================================   
*/