/* Diagfram - Grid System */

.diag-container {
    width: 100%;
    margin: 0 auto;
    /* padding: 15px; */
	box-sizing: border-box;
}

.diag-container a {
	text-decoration: none;
}
.diag-container a:hover {
	text-decoration: underline;
}
.diag-row {
	width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* margin: 0 -15px; */
}

.diag-col {
    box-sizing: border-box; /* Asegura que el padding y los bordes se incluyan en el ancho */
    padding: 10px; /* Control del padding */
    max-width: 100%; /* Asegura que no haya desbordamiento en las columnas */
    flex-basis: auto; /* Deja que las columnas se ajusten automáticamente */
    overflow: hidden; /* Oculta cualquier contenido que se salga del contenedor */
}

/* Base grid system (for extra small devices) */
.diag-col-1 { flex: 0 0 100%; }
.diag-col-2 { flex: 0 0 100%; }
.diag-col-3 { flex: 0 0 100%; }
.diag-col-4 { flex: 0 0 100%; }
.diag-col-5 { flex: 0 0 100%; }
.diag-col-6 { flex: 0 0 100%; }
.diag-col-7 { flex: 0 0 100%; }
.diag-col-8 { flex: 0 0 100%; }
.diag-col-9 { flex: 0 0 100%; }
.diag-col-10 { flex: 0 0 100%; }
.diag-col-11 { flex: 0 0 100%; }
.diag-col-12 { flex: 0 0 100%; }

/* Media queries for tablets (≥ 768px) */
@media (min-width: 768px) {
    .diag-col-1 { flex: 0 0 8.33%; }
    .diag-col-2 { flex: 0 0 16.66%; }
    .diag-col-3 { flex: 0 0 25%; }
    .diag-col-4 { flex: 0 0 33.33%; }
    .diag-col-5 { flex: 0 0 41.66%; }
    .diag-col-6 { flex: 0 0 50%; }
    .diag-col-7 { flex: 0 0 58.33%; }
    .diag-col-8 { flex: 0 0 66.66%; }
    .diag-col-9 { flex: 0 0 75%; }
    .diag-col-10 { flex: 0 0 83.33%; }
    .diag-col-11 { flex: 0 0 91.66%; }
    .diag-col-12 { flex: 0 0 100%; }
}

/* Media queries for desktops (≥ 992px) */
@media (min-width: 992px) {
    .diag-col-1 { flex: 0 0 8.33%; }
    .diag-col-2 { flex: 0 0 16.66%; }
    .diag-col-3 { flex: 0 0 25%; }
    .diag-col-4 { flex: 0 0 33.33%; }
    .diag-col-5 { flex: 0 0 41.66%; }
    .diag-col-6 { flex: 0 0 50%; }
    .diag-col-7 { flex: 0 0 58.33%; }
    .diag-col-8 { flex: 0 0 66.66%; }
    .diag-col-9 { flex: 0 0 75%; }
    .diag-col-10 { flex: 0 0 83.33%; }
    .diag-col-11 { flex: 0 0 91.66%; }
    .diag-col-12 { flex: 0 0 100%; }
}

/* Media queries for large desktops (≥ 1200px) */
@media (min-width: 1200px) {
    .diag-col-1 { flex: 0 0 8.33%; }
    .diag-col-2 { flex: 0 0 16.66%; }
    .diag-col-3 { flex: 0 0 25%; }
    .diag-col-4 { flex: 0 0 33.33%; }
    .diag-col-5 { flex: 0 0 41.66%; }
    .diag-col-6 { flex: 0 0 50%; }
    .diag-col-7 { flex: 0 0 58.33%; }
    .diag-col-8 { flex: 0 0 66.66%; }
    .diag-col-9 { flex: 0 0 75%; }
    .diag-col-10 { flex: 0 0 83.33%; }
    .diag-col-11 { flex: 0 0 91.66%; }
    .diag-col-12 { flex: 0 0 100%; }
}

.diag-text-ellipsis {
	text-overflow: ellipsis; /* Muestra los puntos suspensivos "..." */
    white-space: nowrap; /* Mantiene el texto en una sola línea */
    overflow: hidden; /* Oculta el texto que se desborda */   
}

.diag-center-cols {
    display: flex;
    justify-content: center; /* Centra las columnas horizontalmente */
    align-items: center; /* Centra las columnas verticalmente si el contenedor tiene una altura fija */
    flex-wrap: wrap; /* Asegura que las columnas se distribuyan bien si exceden el ancho */
}

.diag-center-first-col {
    display: flex;
    justify-content: center; /* Centrar horizontalmente solo el primer diag-col */
}

.diag-center-first-col > .diag-col {
    align-items: center; /* Centra las columnas verticalmente si el contenedor tiene una altura fija */
    flex-wrap: wrap; /* Asegura que las columnas se distribuyan bien si exceden el ancho */
}


/* Diagfram - Buttons */
.diag-btn {
    padding: 10px 20px;
    font-size: 16px;
    border: 2px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.diag-btn-primary {
    background-color: #007bff;
    color: #fff;
}

.diag-btn-primary:hover {
    background-color: #0056b3;
}

.diag-btn-secondary {
    background-color: #6c757d;
    color: #fff;
}

.diag-btn-secondary:hover {
    background-color: #5a6268;
}

/* Media queries for buttons (smaller on mobile) */
@media (max-width: 767.98px) {
    .diag-btn {
        font-size: 14px;
        padding: 8px 15px;
    }
}

/* Diagfram - Inputs */
.diag-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 16px;
    margin-bottom: 15px;
}

.diag-input:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Inputs smaller on mobile */
@media (max-width: 767.98px) {
    .diag-input {
        font-size: 14px;
        padding: 8px;
    }
}

/* Diagfram - Cards */
.diag-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-bottom: 20px;
}

.diag-card-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.diag-card-body {
    font-size: 16px;
    color: #333;
}

/* Cards smaller on mobile */
@media (max-width: 767.98px) {
    .diag-card {
        padding: 15px;
    }
    .diag-card-header {
        font-size: 16px;
    }
    .diag-card-body {
        font-size: 14px;
    }
}

/* Diagfram - Badges */
.diag-badge {
    display: inline-block;
    padding: 5px 15px;
    font-size: 14px;
    border-radius: 15px;
    color: #fff;
}

.diag-badge-primary {
    background-color: #007bff;
}

.diag-badge-secondary {
    background-color: #6c757d;
}

.diag-badge-success {
    background-color: #009600;
}
.diag-badge-premium {
    background-color: #e7ba00;
	color: #FFF;
}

/* Badges smaller on mobile */
@media (max-width: 767.98px) {
    .diag-badge {
        font-size: 12px;
        padding: 3px 7px;
    }
}

.d-flex {
    display: flex;
}

.img-fluid {
    max-width: 100%;
    height: auto;
    display: block;
}

.ml-auto {
    margin-left: auto !important;
}

.mr-auto {
    margin-right: auto !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

/* Alineación de texto */

/* Texto alineado a la izquierda */
.text-left {
    text-align: left !important;
}

/* Texto alineado a la derecha */
.text-right {
    text-align: right !important;
}

/* Texto centrado */
.text-center {
    text-align: center !important;
}

/* Alineación de elementos con float (opcional para estructura clásica) */
.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

/* Margin (m) - All sides */
.m-0 { margin: 0 !important; }
.m-1 { margin: 5px !important; }
.m-2 { margin: 10px !important; }
.m-3 { margin: 15px !important; }
.m-4 { margin: 20px !important; }
.m-5 { margin: 30px !important; }

/* Margin (m) - Top (t), Right (r), Bottom (b), Left (l), X-axis (x), Y-axis (y) */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 5px !important; }
.mt-2 { margin-top: 10px !important; }
.mt-3 { margin-top: 15px !important; }
.mt-4 { margin-top: 20px !important; }
.mt-5 { margin-top: 30px !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 5px !important; }
.mr-2 { margin-right: 10px !important; }
.mr-3 { margin-right: 15px !important; }
.mr-4 { margin-right: 20px !important; }
.mr-5 { margin-right: 30px !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 5px !important; }
.mb-2 { margin-bottom: 10px !important; }
.mb-3 { margin-bottom: 15px !important; }
.mb-4 { margin-bottom: 20px !important; }
.mb-5 { margin-bottom: 30px !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 5px !important; }
.ml-2 { margin-left: 10px !important; }
.ml-3 { margin-left: 15px !important; }
.ml-4 { margin-left: 20px !important; }
.ml-5 { margin-left: 30px !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 5px !important; margin-right: 5px !important; }
.mx-2 { margin-left: 10px !important; margin-right: 10px !important; }
.mx-3 { margin-left: 15px !important; margin-right: 15px !important; }
.mx-4 { margin-left: 20px !important; margin-right: 20px !important; }
.mx-5 { margin-left: 30px !important; margin-right: 30px !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 5px !important; margin-bottom: 5px !important; }
.my-2 { margin-top: 10px !important; margin-bottom: 10px !important; }
.my-3 { margin-top: 15px !important; margin-bottom: 15px !important; }
.my-4 { margin-top: 20px !important; margin-bottom: 20px !important; }
.my-5 { margin-top: 30px !important; margin-bottom: 30px !important; }

/* Padding (p) - All sides */
.p-0 { padding: 0 !important; }
.p-1 { padding: 5px !important; }
.p-2 { padding: 10px !important; }
.p-3 { padding: 15px !important; }
.p-4 { padding: 20px !important; }
.p-5 { padding: 30px !important; }

/* Padding (p) - Top (t), Right (r), Bottom (b), Left (l), X-axis (x), Y-axis (y) */
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 5px !important; }
.pt-2 { padding-top: 10px !important; }
.pt-3 { padding-top: 15px !important; }
.pt-4 { padding-top: 20px !important; }
.pt-5 { padding-top: 30px !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 5px !important; }
.pr-2 { padding-right: 10px !important; }
.pr-3 { padding-right: 15px !important; }
.pr-4 { padding-right: 20px !important; }
.pr-5 { padding-right: 30px !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 5px !important; }
.pb-2 { padding-bottom: 10px !important; }
.pb-3 { padding-bottom: 15px !important; }
.pb-4 { padding-bottom: 20px !important; }
.pb-5 { padding-bottom: 30px !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 5px !important; }
.pl-2 { padding-left: 10px !important; }
.pl-3 { padding-left: 15px !important; }
.pl-4 { padding-left: 20px !important; }
.pl-5 { padding-left: 30px !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 5px !important; padding-right: 5px !important; }
.px-2 { padding-left: 10px !important; padding-right: 10px !important; }
.px-3 { padding-left: 15px !important; padding-right: 15px !important; }
.px-4 { padding-left: 20px !important; padding-right: 20px !important; }
.px-5 { padding-left: 30px !important; padding-right: 30px !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 5px !important; padding-bottom: 5px !important; }
.py-2 { padding-top: 10px !important; padding-bottom: 10px !important; }
.py-3 { padding-top: 15px !important; padding-bottom: 15px !important; }
.py-4 { padding-top: 20px !important; padding-bottom: 20px !important; }
.py-5 { padding-top: 30px !important; padding-bottom: 30px !important; }

/* Visibilidad en diferentes tamaños de pantalla */
.d-none { display: none !important; }
.d-block { display: block !important; }

@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
}

@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
}

@media (min-width: 1200px) {
  .d-xl-none { display: none !important; }
  .d-xl-block { display: block !important; }
}

/* Tipografía */
.text-sm { font-size: 12px !important; }
.text-md { font-size: 16px !important; }
.text-lg { font-size: 20px !important; }
.text-xl { font-size: 24px !important; }

/* Carousels */
.diag-carousel {
	position: relative;
}

.diag-carousel-inner {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.diag-carousel-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 600px; /* Ajusta la altura según sea necesario */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
	z-index: 1;
	opacity: 0;
	display: flex; /* Flexbox para centrar */
	justify-content: center; /* Centra horizontalmente */
	align-items: center; /* Centra verticalmente */
}

.diag-carousel-item.active {
	display: flex; /* Mantiene flexbox activo para el item activo */
	opacity: 1;
	z-index: 2;
	position: relative; /* El item activo debe estar en el flujo */
}


/* Estilo del contenido dentro del carrusel */
.diag-carousel-content {
	width: 100%;
	/* background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente para visibilidad del texto */
	padding: 20px;
	/* text-align: center; /* Texto centrado horizontalmente */
	/* text-shadow: 0px 3px 5px rgba(66, 68, 90, 1); */
}

.diag-carousel-content h2 {
	font-weight: bold;
}
.diag-carousel-content .diag-btn {
	text-shadow: none;
}

.diag-carousel-slide .diag-carousel-item-next {
	transform: translateX(100%);
	opacity: 0;
}

.diag-carousel-slide .diag-carousel-item-prev {
	transform: translateX(-100%);
	opacity: 0;
}

.diag-carousel-slide .diag-carousel-item.active {
	transform: translateX(0);
}

/* Controles del carrusel */
.diag-carousel-control-prev,
.diag-carousel-control-next {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15%;
	color: #fff;
	text-align: center;
	opacity: 0.5;
	transition: opacity 0.15s ease;
	/* background-color: rgba(0, 0, 0, 0.3); /* Fondo semitransparente */
}

.diag-carousel-control-prev:hover,
.diag-carousel-control-next:hover {
	color: #fff;
	text-decoration: none;
	opacity: 0.9;
}

.diag-carousel-control-prev {
	left: 0;
}

.diag-carousel-control-next {
	right: 0;
}

.diag-carousel-control-prev-icon,
.diag-carousel-control-next-icon {
	background-image: url('data:image/svg+xml;charset=utf8,%3Csvg fill="%23FFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8"%3E%3Cpath d="M4.354 0.646a.5.5 0 0 0-.708 0l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L1.707 4l2.647-2.646a.5.5 0 0 0 0-.708z"/%3E%3C/svg%3E');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 30px;
	height: 30px;
	fill: #fff;
}

.diag-carousel-control-next-icon {
	transform: rotate(180deg);
}

/* Indicadores del carrusel */
.diag-carousel-indicators {
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	z-index: 15;
	display: flex;
	justify-content: center;
	padding-left: 0;
	margin-right: 15%;
	margin-left: 15%;
	list-style: none;
}

.diag-carousel-indicators li {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 3px;
	margin: 1px;
	background-color: #fff;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.6s ease;
}

.diag-carousel-indicators li.active {
	opacity: 1;
}

/* Leyendas del carrusel */
.diag-carousel-caption {
	position: absolute;
	right: 15%;
	bottom: 20px;
	left: 15%;
	z-index: 10;
	padding-top: 20px;
	padding-bottom: 20px;
	color: #fff;
	text-align: center;
}

	/* Diagfram - Colores de Texto */

	.diag-text {
		color: #000000 !important;
	}

	.diag-text-primary {
		color: #007bff !important; /* Azul */
	}

	.diag-text-secondary {
		color: #6c757d !important; /* Gris oscuro */
	}

	.diag-text-success {
		color: #28a745 !important; /* Verde */
	}

	.diag-text-danger {
		color: #dc3545 !important; /* Rojo */
	}

	.diag-text-warning {
		color: #ffc107 !important; /* Amarillo */
	}

	.diag-text-info {
		color: #17a2b8 !important; /* Celeste */
	}

	.diag-text-light {
		color: #f8f9fa !important; /* Blanco claro */
	}

	.diag-text-dark {
		color: #343a40 !important; /* Negro */
	}

	.diag-text-muted {
		color: #6c757d !important; /* Gris claro */
	}

	.diag-text-white {
		color: #fff !important; /* Blanco */
	}
	.diag-text-premium {
		color: #e7ba00 !important; /* Amarillo */
	}

	/* Diagfram - Colores de Fondo */
	.diag-bg-primary {
		background-color: #007bff !important; /* Azul */
		color: #fff !important; /* Texto blanco sobre fondo azul */
	}

	.diag-bg-secondary {
		background-color: #6c757d !important; /* Gris oscuro */
		color: #fff !important; /* Texto blanco sobre fondo gris oscuro */
	}

	.diag-bg-success {
		background-color: #28a745 !important; /* Verde */
		color: #fff !important; /* Texto blanco sobre fondo verde */
	}

	.diag-bg-danger {
		background-color: #dc3545 !important; /* Rojo */
		color: #fff !important; /* Texto blanco sobre fondo rojo */
	}

	.diag-bg-warning {
		background-color: #ffc107 !important; /* Amarillo */
		color: #212529 !important; /* Texto oscuro sobre fondo amarillo */
	}

	.diag-bg-info {
		background-color: #17a2b8 !important; /* Celeste */
		color: #fff !important; /* Texto blanco sobre fondo celeste */
	}

	.diag-bg-light {
		background-color: #f8f9fa !important; /* Blanco claro */
		color: #212529 !important; /* Texto oscuro sobre fondo claro */
	}

	.diag-bg-dark {
		background-color: #343a40 !important; /* Negro */
		color: #fff !important; /* Texto blanco sobre fondo oscuro */
	}

	.diag-bg-white {
		background-color: #fff !important; /* Blanco */
		color: #212529 !important; /* Texto oscuro sobre fondo blanco */
	}
	.diag-bg-premium {
		background-color: #e7ba00 !important; /* Blanco */
		color: #212529 !important; /* Texto oscuro sobre fondo blanco */
	}

	.diag-bg-transparent {
		background-color: transparent !important; /* Fondo transparente */
	}

	.diag-copyright {
		width: 100%;
		text-align: right;
		color: #000000;
	}
	.diag-copyright a{
		color: #000000;
		text-decoration: none;
		font-weight: bold;
	}
	.diag-copyright a:hover{
		text-decoration: underline;
	}



	/* 
	------------------------------- 
	ANIMACIONES
	------------------------------- 
	*/

	@keyframes float {
		0% {
		transform: translatey(0px);
		}
		50% {
		transform: translatey(-20px);
		}
		100% {
		transform: translatey(0px);
		}
	}