* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html, body {
			height: 100%;
			font-family: Arial, sans-serif;
			background-color: #0000;/*f4f4f4*/
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			color: #333;
		}

		.page-container {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
			flex-grow: 1;
		}

		h1 {
			font-size: 1.5rem;
			margin-bottom: 5px;
			margin-top: 5px;
		}

		.container {
			width: 100%;
			padding: 15px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			border-radius: 10px;
			
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		#resultados{
			display: flex;
			justify-content: center;
			background-color: #fff;
			color: black;
		}
		
		/* Estilo para el mensaje de error */
		.error {
			/*background-color: red;*/
			color: red !important;
			/*border: 1px solid darkred;*/
			font-weight: bold;
		}

		/* Estilo para el mensaje de éxito */
		.success {
			/*background-color: green;*/
			color: black  !important;
			/*border: 1px solid darkgreen;*/
			/*font-weight: bold;*/
		}

		form {
			width: 100%;
			text-align: center;
		}


input[type="radio"] {

/* Ocultar Radios button */
		

  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

		.radio-group {
			display: flex;
			justify-content: center; /* Centra horizontalmente los elementos */
			gap: 20px;
			margin-bottom: 5px;
		}

		.radio-group label {
			font-size: 16px;
			
			display: flex;
            align-items: center;
            gap: 5px;
			cursor: pointer; /* Aparece la mano cuando el usuario pasa sobre el texto o el radio button */
		}

		.radio-group input[type="radio"] {
			width: 21px;
			height: 21px;
			margin-right: 6px;
			
			-webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            border-radius: 50%;
            border: 2px solid #007bff;
            /*outline: none;*/
            cursor: pointer;
			transform: scale(0.8); /* Reducir el tamaño de los radiobuttons */
			/*position: relative; *//* Para posicionar el pseudo-elemento */
		}
		
		input[type="radio"]:checked {
            /*background-color: #007bff;*/
        }
		
		/* Crear el relleno interior del radio button */
		.radio-group input[type="radio"]:checked::before, 
		.radio-group input[type="radio"]:not(:checked)::before {
			content: '';
			position: absolute;
			top: 2px; /* Desplazarlo un poco hacia abajo */
			left: 2px; /* Desplazarlo un poco hacia la izquierda */
			width: 13px; /* Tamaño interior */
			height: 13px; /* Tamaño interior */
			border-radius: 50%; /* Asegurar que el interior sea redondeado */
			/*background-color: #333;*/ /* Color del círculo interior */
			transition: background-color 0.3s ease; /* Transición suave */
		}

		/* Cambiar el color del círculo interior cuando esté seleccionado */
		.radio-group input[type="radio"]:checked::before {
			background-color: #007bff; /* Color cuando está seleccionado */
		}
		
		.input-group {
			display: flex;
			align-items: center;
			justify-content: center; /* Centra horizontalmente los elementos */
			gap: 20px;
			margin-bottom: 8px;
			width: 100%;
		}

		.input-group .logo-container {
			max-width: 80px; /* Tamaño reducido para el logo */
			text-align: center;
		}

		.input-group .logo-container img {
			width: 100%;
			height: auto;
		}

		.input-group input {
			/*width: 60%;*/
			padding: 10px;
			font-size: 16px;
			border: 1px solid #ccc;
			border-radius: 4px;			
		}

		.input-group button {
			padding: 10px 20px;
			background-color: #007bff;
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
		}

		.input-group button:hover {
			background-color: #0056b3;
		}

		.resultado-container {
			display: flex;
			justify-content: center; /* Centra horizontalmente los elementos */
			align-items: center;
			gap: 10px;
			/*margin-top: 20px;*/
			width: 100%;/*65%;*/
			flex-wrap: wrap;
			border: 1px solid #ddd;
            border-radius: 4px;
			padding: 10px;
			background-color: #f9f9f9;
		}

		.imagen-container {
			max-width: 200px;
			/*flex-shrink: 0;
			flex-grow: 1;*/
			text-align: center;
			border-radius: 4px;			
			border: 2px solid blue;
			padding-top: 5px;
			padding-bottom: 5px;
			padding-left: 0;
			padding-right: 0;
			
			/*flex: 1;*/
		}

		.imagen-container img {
			width: 100%;
			max-width: 90%;
			height: auto;
			border-radius: 4px;
		}

		.informacion-persona {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: 100%;
			max-width: 400px;
			/*margin-left: 20px;*/
			padding: 10px;
			border-radius: 4px;
			border: 1px solid #ddd;
			
			/*flex-shrink: 0;*/  /* Evitar que los elementos se encojan */
			/*flex-grow: 1;*/
			
			/*flex: 1;*/
		}

		/*.informacion-persona p {
			margin: 5px 0;
			font-size: 14px;
		}*/

		.linkCertificado, .idHabilidad {
			display: flex !important;
			align-items: center;
			gap: 20px;
			width: 100%;
			max-width: 600px;			
			border-radius: 4px;
			border: 1px solid #ddd;
			padding: 10px;
			
			justify-content: center; /* Esto centra los hijos horizontalmente */
			/*flex-wrap: wrap;*/
			text-align: center;
		}

		.hidden {
			display: none !important;
		}

		.flex-1 {
			flex: 1 !important;
		}
		
		.informacion-persona p, .linkCertificado p, .idHabilidad p {
			margin: 5px 0;
			font-size: 14px;
		}

		.btn-certificado {
			padding: 10px 20px;
			background-color: #007bff;
			color: white;
			text-align: center;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			min-width: 150px;
		}

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

		footer {
			padding: 10px;
			background-color: #fffff0/*#333*/;
			/*color: white;*/
			text-align: left;
			font-size: 14px;
			width: 100%;
		}

		/* Media Queries */
		@media (max-width: 768px) {
			.resultado-container {
				flex-direction: column;
				align-items: center; /* Centra los elementos verticalmente en pantallas pequeñas */
			}

			.informacion-persona {
				margin-left: 0;
				text-align: center;
			}

			.input-group {
				flex-direction: column;
				align-items: center; /* Centra los elementos en columna */
			}

			.input-group input {
				width: 100%;
				margin-bottom: 10px;
			}

			.input-group button {
				width: 100%;
			}
		
			.linkCertificado, .idHabilidad {
				flex-direction: column;      /* Cambia de fila a columna */
				align-items: center;         /* Centra los elementos verticalmente */
				justify-content: center;     /* Centra horizontalmente */
				text-align: center;          /* Asegura que el texto esté centrado */
			}

			.informacion-persona p, .linkCertificado p, .idHabilidad p {
				width: 100%;
				margin: 5px 0;
			}

			.btn-certificado {
				width: 90%;                  /* El botón se adapta al ancho del contenedor */
				max-width: 250px;            /* Evita que se haga demasiado grande */
			}
		}

		@media (max-width: 480px) {
			.input-group input {
				width: 90%;
			}

			.input-group button {
				width: 90%;
			}

			.imagen-container {
				max-width: 150px;
			}

			.informacion-persona {
				max-width: 90%;
			}

			.informacion-persona p, .linkCertificado p, .idHabilidad p {
				text-align: center;
				margin: 0px;
			}
			
			h1{
			    text-align: center;
			}
		}