@tailwind base;
@tailwind components;
@tailwind utilities;

body {
	background-image: url("../../public/wave.svg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.texto-gradiente {
	background: linear-gradient(270deg, #127ae2, #0768b0);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.progress {
	transition: width 0.5s ease-out;
}

.estilo-empresa {
	background: rgb(232, 232, 232);
	padding: 10px;
	border-radius: 10px;
}
.estilo-empresa h1 {
	color: #0768b0;
	font-weight: 700;
}
.estilo-empresa p {
	margin-bottom: 10px;
}

/* ProgressIndicator.css */
.progress-indicator {
	position: relative;
	padding: 20px 0; /* Da espacio para los círculos */
	margin: auto; /* Centra el indicador si no ocupa el ancho completo */
	max-width: 380px; /* Ancho máximo del indicador */
}

.progress-bar {
	width: 100%;
	height: 8px; /* Altura de la barra de progreso */
	border-radius: 4px; /* Bordes redondeados */
	position: absolute;
	top: 50%;
	transform: translateY(-50%); /* Centrado vertical */
	z-index: 0; /* Detrás de los círculos */
}

/* Gradientes dinámicos */
.gradient-0 {
	background: linear-gradient(to right, #ff0000, #ffcc00);
}
.gradient-1 {
	background: linear-gradient(to right, #ff0000, #ffcc00);
}
.gradient-2 {
	background: linear-gradient(to right, #ff0000, #ffcc00, #84c400);
}
.gradient-3 {
	background: linear-gradient(to right, #ff0000, #ffcc00, #84c400, #009100);
}

.progress-circles {
	width: 400px; /* El SVG ocupa todo el ancho del contenedor */
	height: auto; /* Altura automática para mantener la relación de aspecto */
	z-index: 1; /* Encima de la barra de progreso */
}
@media (max-width: 768px) {
	.progress-indicator {
		max-width: 95%; /* Ajusta para pantallas más pequeñas */
	}

	.progress-circles {
		width: 100%; /* Ajusta el ancho del SVG */
	}

	/* Otros ajustes responsivos aquí */
}
.iconos-informe {
	background-color: #0768b0;
	width: 40px;
	height: 40px; /* Asegura que la altura sea igual a la anchura */
	border-radius: 50%; /* Crea un círculo perfecto */
	padding: 7px;
}

.contenedor-transversal {
	background-color: #0768b0;
	color: #ffffff;
	padding: 8px;
	border-radius: 10px;
}
.contenedor-transversal h2 {
	font-weight: 700;
}

.titulo_transversales {
	color: #0768b0;
	font-weight: 700;
}
.list-disc {
	list-style-type: disc;
	padding-left: 40px;
}
.titulo-seccion {
	color: #0768b0;
	font-weight: 700;
}
.radar-options {
	width: 400px;
}
/* media querys */
@media (max-width: 768px) {
	.radar-options {
		width: 100%;
	}
}