@import url(css/uicons-solid-straight.css);
:root {
	--white: #FFFFFF !important;
}	
footer {
    background: none;
}
.loginform {
    margin: 30px 0px 0px 0px;
    padding: 5px 0 5px 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: unset;
    border: none;
}
.login-field a, .login-field a:visited {
    text-decoration: none;
    font-size: 1.2m;
    font-weight: bold;
    color: var(--white);
}
 /* Conteneur principal */
.header-container {
	background-color: #5D3271;
	width: 100%;
	margin: 0;
	padding: 5px;
	height: auto; /* Hauteur ajustable */
	
	/* Flexbox pour aligner les éléments horizontalement */
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Conteneur texte */
.header-text {
	display: flex;
	align-items: center;
	flex-wrap: wrap; /* Permet le passage à la ligne sur petits écrans */
	justify-content: center;
	gap: 15px; /* Ajoute de l'espace entre les éléments */
}

/* Chaque élément (icône + texte) */
.header-item {
	display: flex;
	align-items: center;
	gap: 5px; /* Espacement entre icône et texte */
}

/* Icônes */
.header-item .icon {
	color: #A9FBB3;
	font-size: 0.8em;
}

/* Texte */
.header-item span {
	font-size: 14px;
	color: #ffffff;
}
/* Centrage de l'image */
.image-container {
	text-align: center;
	padding: 0;
	margin-top: 5px;
	cursor: pointer;
}

/* Image principale */
.header-image {
	width: 60%;
	height: auto;
	display: block;
	margin: auto; /* Centre l'image horizontalement */
}

/* Conteneur des options */
.options-container {
	display: flex;
	justify-content: center;
	gap: 30px; /* Espacement entre les carrés */
	margin-top: 20px;
}
.options-container a, .options-container a:link, .options-container a:visited{
	text-decoration: none;
}
/* Style des carrés */
.option-box {
	width: 150px;
	height: 150px;
	background-color: var(--green-color);
	color: var(--primary-color) !important;
	text-decoration: none;
	font-family: var(--font-main);
	font-size: 16px;
	font-weight: bold;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 10px; /* Coins arrondis */
	padding: 15px;
	text-align: center;
	transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Icône dans le carré */
.option-box .icon {
	font-size: 50px;
	flex-grow: 1; /* Permet de centrer verticalement */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Texte sous l’icône */
.option-box span {
	flex-grow: 0; /* Le texte reste en bas */
}

/* Effet au survol */
.option-box:hover {
	background-color: var(--primary-color);
	color: var(--green-color) !important;
	transform: scale(1.05); /* Légère augmentation de taille */
}

#frm_SolicitarInformacion_ConsultarSolicitudes {
	display: block;
	width: 60%; /* Par défaut, la même largeur que l’image */
	max-width: 800px; /* Évite que le formulaire soit trop large sur grands écrans */
	margin: auto; /* Centre horizontalement */
	padding: 20px;
	background: white;
	border-radius: 10px;
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
/* Centrage du texte */
.text-container {
	text-align: center;
}

/* Taille par défaut (PC) */
.text-container h1 {
	font-size: 28px; /* Taille normale pour PC */
	font-weight: bold;
}

.text-container h2 {
	font-size: 18px; /* Taille normale pour PC */
	font-weight: normal;
}
.aligncenter
{
	text-align: center;
}
#GridSolicitudes {
	display: flex;
	justify-content: center; /* Centre horizontalement */
	align-items: center; /* Centre verticalement si nécessaire */
	width: 100%; /* Ajuste la largeur pour qu'il ne déborde pas */
}
#detailSolicitud {
	margin: 20px auto;
	padding: 20px;
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	width: 100%; /* Ajuste la largeur pour qu'il ne déborde pas */
	max-width: 60%;
}
#agregarComentario {
	margin: 20px auto;
	padding: 20px;
	background-color: #ffffff;
	border: 1px solid #ccc;
	width: 100%; /* Ajuste la largeur pour qu'il ne déborde pas */
	max-width: 60%;
}
.solicitudes-table {
	width: 100%;
	max-width: 60%;
	border-collapse: collapse;
	margin-top: 20px;
}

.solicitudes-table th, .solicitudes-table td {
	border: 1px solid #ddd;
	padding: 12px; /* Ajoute de l'espace autour du texte */
	text-align: left;
}

.solicitudes-table th {
	background-color: var(--green-color);
	color: var(--primary-color);
	font-weight: bold;
}

.solicitudes-table tr:nth-child(even) {
	background-color: #f9f9f9;
}

.solicitudes-table tr:hover {
	background-color: #f1f1f1;
}

@media screen and (max-width: 768px) {
	.header-text {
		font-size: 12px;
		gap: 10px; /* Réduit l'espace entre éléments */
	}
	.nav-container {
		flex-direction: column;
		height: auto;
	}
	.nav-container {
		display: none;
	}
	.header-image {
		width: 100%; /* Sur mobile, l'image prend toute la largeur */
	}
	.options-container {
		flex-direction: column; /* Met les carrés en colonne */
		align-items: center;
		gap: 20px;
	}

	.option-box {
		width: 80%; /* Adapté aux petits écrans */
		height: auto;
		padding: 20px;
	}

	.option-box .icon {
		font-size: 50px; /* L'icône prend 40% du cadre sur mobile */
		margin-bottom: 20px;
	}
	#frm_SolicitarInformacion {
		width: 100%; /* Prend toute la largeur sur mobile */
		max-width: none; /* Désactive la limite de largeur */
		padding: 15px; /* Réduction du padding pour mobile */
	}
	.text-container h1 {
		font-size: 22px; /* Plus petit sur mobile */
	}

	.text-container h2 {
		font-size: 16px; /* Ajustement de la taille */
	}
	.solicitudes-table {
		max-width: 100%; /* La table prend toute la largeur sur mobile */
	}
	.hide-on-mobile {
		display: none;
	}
	#detailSolicitud, #agregarComentario {
		max-width: 100%; /* La table prend toute la largeur sur mobile */
	}
}


@media screen and (max-width: 480px) {
	.header-text {
		flex-direction: column; /* Passe en colonne */
		text-align: center;
		gap: 5px;
	}

	.header-item {
		justify-content: center;
		font-size: 12px; /* Réduit encore la taille */
	}

	.header-item .icon {
		font-size: 0.7em; /* Icônes plus petites */
	}
	.text-container h1 {
		font-size: 20px;
	}

	.text-container h2 {
		font-size: 14px;
	}
}