body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background: linear-gradient(135deg, #028e1b, #00b894);
			color: #fff;
		}
		.register-container {
			background: rgba(255, 255, 255, 0.9);
			color: #333;
			padding: 30px 20px;
			border-radius: 10px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			width: 100%;
			max-width: 400px;
			text-align: center;
		}
		.register-container img {
			max-width: 100px;
			margin-bottom: 20px;
		}
		.register-container h1 {
			margin-bottom: 20px;
			font-size: 1.8rem;
			color: #028e1b;
		}
		.register-container form {
			display: flex;
			flex-direction: column;
			gap: 15px;
		}
		.register-container input {
			padding: 10px;
			border: 1px solid #ddd;
			border-radius: 5px;
			font-size: 1rem;
		}
		.password-container {
			position: relative;
		}
		/* Ajuste: el input ocupa 100% y deja espacio al botón ojo */
		.password-container input {
			width: 100%;
			padding-right: 2.4rem; /* espacio para el botón 👁️ */
			box-sizing: border-box;
		}
		.password-container .toggle-password {
			position: absolute;
			top: 50%;
			right: 10px;
			transform: translateY(-50%);
			background: none;
			border: none;
			cursor: pointer;
			font-size: 1rem;
			color: #028e1b;
			line-height: 1;
		}
		.register-container button {
			background-color: #028e1b;
			color: #fff;
			padding: 10px;
			border: none;
			border-radius: 5px;
			font-size: 1rem;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}
	
		.register-container .login-link {
			margin-top: 15px;
			font-size: 0.9rem;
		}
		.register-container .login-link a {
			color: #028e1b;
			text-decoration: none;
			font-weight: bold;
		}
		.register-container .login-link a:hover {
			text-decoration: underline;
		}

		/* Responsive: contenedor más angosto y bajo en móviles */
		@media (max-width: 720px) {
			.register-container {
				max-width: 360px;
				padding: 22px 18px;
				border-radius: 10px;
			}
			.register-container img { max-width: 84px; margin-bottom: 16px; }
			.register-container h1 { font-size: 1.6rem; margin-bottom: 14px; }
			.register-container form { gap: 12px; }
			.register-container input { padding: 12px; font-size: 1rem; }
			.register-container button { padding: 12px; font-size: 1rem; }
		}

		@media (max-width: 480px) {
			body { padding: 12px; height: auto; min-height: 100vh; }
			.register-container {
				max-width: 320px;
				padding: 16px 14px;
				border-radius: 8px;
			}
			.register-container img { max-width: 74px; margin-bottom: 12px; }
			.register-container h1 { font-size: 1.4rem; margin-bottom: 10px; }
			.register-container form { gap: 10px; }
			.register-container input { padding: 11px; font-size: 0.98rem; }
			.register-container button { padding: 11px; font-size: 0.98rem; }
			.password-container .toggle-password { right: 8px; font-size: 0.95rem; }
			.password-container input { padding-right: 2.2rem; }
		}

		/* Estados de validación y mensajes */
		.register-container .error-msg {
			display: none;
			color: #d64545;
			font-size: 0.85rem;
			text-align: left;
			margin-top: 6px;
		}
		.register-container input.is-invalid {
			border-color: #d64545;
			outline-color: #d64545;
		}
		.register-container input.is-valid {
			border-color: #1e8f4a;
		}
		.register-container button[disabled] {
			opacity: .7;
			cursor: not-allowed;
		}