body {
			margin: 0;
			padding: 0;
			min-height: 100vh;


			justify-content: center;
			align-items: center;

			background: linear-gradient(180deg, rgb(233, 251, 244), #ffffff);
			font-family: 'Poppins', sans-serif;
			color: #1e1e1e;
		}

		nav {
			background: rgba(178, 245, 218, 0.95);
			height: 60px;
			border-bottom: 3px solid rgb(72, 181, 164);
			backdrop-filter: blur(6px);
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		}

		nav img {
			width: 90px;
			transition: transform 0.3s ease;
		}

		nav a {
			transition: all 0.3s ease;

		}

		nav a:hover {
			transform: scale(1.08);
			color: #00b894 !important;
		}

		/* ===================== */
		/* CONTENEDOR LOGIN      */
		/* ===================== */

		.login-container {
			width: 100%;
			max-width: 420px;

			background: rgba(255, 255, 255, 0.92);
			backdrop-filter: blur(8px);

			padding: 40px 35px;
			border-radius: 22px;

			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

			border-top: 5px solid #00b894;
		}

		/* ===================== */
		/* TITULO                */
		/* ===================== */

		h2 {
			font-family: 'Poppins', sans-serif;
			font-weight: 700;
			text-align: center;

			background: linear-gradient(90deg, #00b894, #00cec9);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;

			text-transform: uppercase;
			letter-spacing: 2px;

			margin-bottom: 35px;
			position: relative;
		}

		h2::after {
			content: "";
			display: block;
			width: 120px;
			height: 4px;

			background: linear-gradient(90deg, #00b894, #00cec9);

			margin: 12px auto 0;
			border-radius: 10px;
		}

		/* ===================== */
		/* FORMULARIO            */
		/* ===================== */

		form p {
			margin-bottom: 22px;
		}

		form {
			width: 20%;
			margin: 0 auto;
		}

		input {
			width: 100%;
			padding: 15px 18px;

			border: 2px solid rgba(0, 184, 148, 0.15);
			border-radius: 14px;

			background: #f8fffc;

			font-size: 15px;
			font-family: 'Poppins', sans-serif;

			transition: all 0.3s ease;

			box-sizing: border-box;
		}

		input:focus {
			outline: none;

			border-color: #00b894;

			box-shadow: 0 0 12px rgba(0, 184, 148, 0.25);

			background: white;
		}

		/* ===================== */
		/* BOTON                 */
		/* ===================== */

		button {
			width: 100%;
			padding: 15px;

			border: none;
			border-radius: 14px;

			background: linear-gradient(90deg, #00b894, #00cec9);
			color: white;

			font-size: 16px;
			font-weight: 600;

			cursor: pointer;

			transition: all 0.3s ease;

			box-shadow: 0 8px 18px rgba(0, 184, 148, 0.25);
		}

		button:hover {
			transform: translateY(-3px);

			box-shadow: 0 12px 24px rgba(0, 184, 148, 0.35);
		}

		button:disabled {
			opacity: 0.7;
			cursor: not-allowed;
		}

		/* ===================== */
		/* MENSAJES              */
		/* ===================== */

		#resultado {
			margin-top: 20px;
			text-align: center;

			font-size: 14px;
			color: #d63031;
			font-weight: 500;
		}

		/* ===================== */
		/* RESPONSIVE            */
		/* ===================== */

		@media (max-width: 768px) {

			body {
				padding: 20px;
				align-items: center;
			}

			.login-container {
				padding: 30px 22px;
				border-radius: 18px;
			}

			nav {
				padding: 10px 15px;
				min-height: 80px;
			}

			.navbar-brand {
				font-size: 14px;
			}

			nav img {
				width: 65px;
			}

			.navbar-toggler {
				border: none;
				box-shadow: none !important;
			}

			nav a {
				height: auto;
				font-size: 18px;
			}

			h2 {
				font-size: 24px;
				letter-spacing: 1px;
			}

			form {
				width: 90%;
				margin: 0 auto;
			}

			input {
				padding: 14px;
				font-size: 14px;
			}

			button {
				padding: 14px;
				font-size: 15px;
			}
		}