body {
	margin: 0;
	color: #001F3F;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Título que aparece en el header */
.body-title-page {
	font-size: 30px;
	font-weight: 500;
	text-align: left;
}

/* Sombra */
.shadow{
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
}

/* Border Radius */
.br{
	border-radius: 7px;
}

/* Fondo azul para contenedor */
.blue-container{
    background-color: #001F3F;
}

/* Fondo blanco para contenedor */
.white-container{
	background-color: #ffffff;
}

/* Espacio de 20 px */
.gap-20{
	gap: 20px;
}

/* Quitar decoraciones de links */
.no-text-decoration {
	text-decoration: none;
}

/* Texto en color blanco */
.text-white-css {
	color: #FBFBFB;
}

/* Texto en azul claro */
.text-light-blue-css {
	color: #0074D9;
}

.text-orange-css {
	color: #FF851B;
	font-weight: bold;
}

/* Texto en azul fuerte */
.text-blue-css {
	color: #001F3F;
}

/* Estilo para h4 */
.text-title-h4 {
	font-size: 24px;
	font-weight: 500;
	text-align: center;
	margin: 10px;
}

/* Estilo para h5 */
.text-title-h5 {
	font-size: 24px;
	font-weight: 500;
	text-align: left;
	margin: 10px;
}

/* Estilo para h6 */
.text-title-h6 {
	font-size: 20px;
	font-weight: 500;
	text-align: left;
}

.text-title-h6:hover {
	color: #FF851B;
}

/*Contenedor*/
.container-css {
	display: flex;
	flex-wrap: nowrap;
	padding: 3vh 7vw 0vh;
	/* background-color: #FBFBFB; */
	justify-content: center;
}

/* Contenedor con sidebar */
.content-css {
	flex: 0 75%; /* 9/12 columnas */
}

/* Contenedor sin sidebar */
.content-css-ns {
	flex: 0 100%; /* 9/12 columnas */
}

/* Sidebar */
.sidebar {
	flex: 0 0 25%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	box-sizing: border-box;
	overflow: hidden; /* Oculta el contenido que se desborda */
	padding: 0 20px;
	height: 100%;
}

/* Titulos de los widget (Manuales, articulos, etc) */
.title-widget {
	font-size: 1.3vw;
	font-weight: 600;
	margin: 0;
	word-wrap: break-word; /* Permite el ajuste de palabras largas */
}

/* Categorias de los widget (Manuales, articulos, etc) */
.categories {
	font-size: 0.8vw;
	color: #0074D9;
	word-wrap: break-word; /* Permite el ajuste de palabras largas */
}

/* Descripciones de los widget (Manuales, articulos, etc) */
.description {
	font-size: 1vw;
	margin-top: 5px;
	word-wrap: break-word; /* Permite el ajuste de palabras largas */
}

/* Iconos Redes Sociales Sidebar */
.fab:hover{
    color: #FF851B;
}

.fa-facebook, .fa-linkedin, .fa-instagram, .fa-youtube, .fa-whatsapp{
    font-size: 25px;
}

/* Paginación */
.pagination {
    display: flex;
    justify-content: center;
    padding: 20px;
    margin-top: 20px;
}

.pagination a {
    color: #0074D9;
    padding: 10px 20px;
    text-decoration: none;
    border: 1px solid #ddd;
    margin: 0 5px;
    border-radius: 5px;
}

.pagination a:hover {
    background-color: #ddd;
}

.pagination a.active {
    background-color: #007bff;
    color: white;
    border: 1px solid #007bff;
}

@media (max-width: 980px) {
	.content-css {
		flex: 0 0 100%;
	}

	.container-css {
		flex-wrap: wrap;
	}

	.body-title-page {
		text-align: center;
	}

    .title-widget {
        font-size: 1.8vw;
    }

    .categories {
        font-size: 1.2vw;
    }
    
    .description {
        font-size: 1.4vw;
    }
}

@media (min-width: 1560px) {
	.content-css {
		flex: 0 75%;
	}

	.sidebar-css {
		flex: 0 0 20%;
		display: flex;
		align-items: center;
	}
}


@media (max-width: 750px) {
	.title-widget {
		font-size: 16px;
	}

	.description, .categories {
		font-size: 16px;
	}

	.title-widget {
		font-size: 20px;
	}
}

@media (min-width: 2000px) {
	.title-widget {
		font-size: 1vw;
	}

	.categories {
		font-size: 1vw;
		margin: 0;
	}

	.description {
		font-size: 1vw;
	}

}