/*
 * MONSAT 8.1 - DISEÑO DEL LOGIN — EDITAR AQUÍ
 * ============================================
 *
 * Este archivo controla únicamente la pantalla de inicio de sesión.
 * Para cambiar fondo, tarjeta, logotipo, campos o botones del login, editar aquí.
 */
		#login,
		#login input,
		#login select,
		#login button {
			font-family: 'Inter', Arial, sans-serif !important;
		}

		body#login {
			min-height: 100vh !important;
			margin: 0 !important;
			display: block !important;
			overflow: auto !important;
			background-color: #f4f8fc !important;
			background-image:
				linear-gradient(90deg, rgba(248, 250, 252, 0.97) 0%, rgba(248, 250, 252, 0.91) 44%, rgba(239, 246, 255, 0.58) 100%),
				url('../../img/background.png') !important;
			background-position: center center !important;
			background-size: cover !important;
			color: #172033 !important;
		}

		#login #loading_panel {
			display: none !important;
		}

		#login * {
			box-sizing: border-box;
		}

		#login .wrapper {
			position: relative;
			z-index: 1;
			min-height: 100vh;
			display: flex !important;
			align-items: center;
			justify-content: space-between;
			gap: clamp(28px, 6vw, 96px);
			width: 100%;
			padding: clamp(24px, 5vw, 72px);
		}

		#login .login-hero {
			max-width: 610px;
			color: #172033;
		}

		#login .login-kicker {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			margin-bottom: 18px;
			padding: 8px 12px;
			border: 1px solid rgba(191, 219, 254, 0.85);
			border-radius: 999px;
			background: rgba(255, 255, 255, 0.78);
			color: #2563eb;
			box-shadow: 0 10px 28px rgba(37, 99, 235, 0.10);
			font-size: 12px;
			font-weight: 700;
			letter-spacing: .08em;
			text-transform: uppercase;
		}

		#login .login-hero h1 {
			max-width: 560px;
			margin: 0;
			color: #102033;
			font-size: clamp(38px, 5vw, 64px);
			line-height: 1.02;
			font-weight: 700;
			letter-spacing: 0;
		}

		#login .login-hero p {
			max-width: 540px;
			margin: 20px 0 0;
			color: #475569;
			font-size: 17px;
			line-height: 1.6;
		}

		#login .login-hero-metrics {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 12px;
			max-width: 520px;
			margin-top: 30px;
		}

		#login .login-hero-metrics div {
			padding: 16px;
			border: 1px solid rgba(203, 213, 225, 0.82);
			border-radius: 14px;
			background: rgba(255, 255, 255, 0.78);
			box-shadow: 0 16px 40px rgba(15, 23, 42, 0.10);
			backdrop-filter: blur(14px);
			-webkit-backdrop-filter: blur(14px);
		}

		#login .login-hero-metrics strong {
			display: block;
			color: #1d4ed8;
			font-size: 20px;
			line-height: 1;
		}

		#login .login-hero-metrics span {
			display: block;
			margin-top: 8px;
			color: #475569;
			font-size: 12px;
			font-weight: 600;
		}

		#login .wrapper .inner-wrapper {
			flex: 0 0 min(430px, 100%);
			width: min(430px, 100%) !important;
			margin: 0 !important;
			float: none !important;
			padding: 30px !important;
			border: 1px solid rgba(203, 213, 225, 0.86) !important;
			border-radius: 22px !important;
			background: rgba(255, 255, 255, 0.90) !important;
			box-shadow: 0 28px 80px rgba(15, 23, 42, 0.16) !important;
			backdrop-filter: blur(22px) saturate(1.2);
			-webkit-backdrop-filter: blur(22px) saturate(1.2);
		}

		#login .logo-block {
			float: none !important;
			width: 100%;
			text-align: center !important;
			margin: 0 0 16px !important;
		}

		#login .logo-block img,
		#login .login-logo-img {
			width: min(172px, 64%) !important;
			max-width: 172px !important;
			height: auto !important;
			display: inline-block !important;
			filter: drop-shadow(0 12px 26px rgba(15, 23, 42, 0.12));
		}

		#login .login-title {
			margin: 4px 0 18px;
			text-align: center;
		}

		#login .login-title h2 {
			margin: 0;
			color: #102033;
			font-size: 25px;
			line-height: 1.15;
			font-weight: 700;
		}

		#login .login-title p {
			margin: 8px 0 0;
			color: #64748b;
			font-size: 13px;
			line-height: 1.45;
		}

		#login .login-survey-link {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			width: 100%;
			min-height: 42px;
			padding: 10px 14px;
			border: 1px solid rgba(147, 197, 253, 0.68);
			border-radius: 12px;
			background: #eff6ff;
			color: #2563eb;
			font-size: 13px;
			font-weight: 700;
			text-decoration: none;
			transition: background .16s ease, border-color .16s ease, transform .16s ease;
		}

		#login .login-survey-link:hover {
			background: #dbeafe;
			border-color: rgba(96, 165, 250, 0.70);
			transform: translateY(-1px);
		}

		#login .material-symbols-outlined {
			font-size: 19px;
			line-height: 1;
			font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
		}

		#login .server-select .row3,
		#login .content-block .row3 {
			margin-bottom: 12px;
		}

		#login .server-select .ms-parent,
		#login .footer .ms-parent {
			width: 100% !important;
		}

		#login .server-select .ms-choice,
		#login .footer .ms-choice {
			height: 46px !important;
			border: 1px solid rgba(203, 213, 225, 0.88) !important;
			border-radius: 12px !important;
			background: rgba(248, 250, 252, 0.92) !important;
			color: #172033 !important;
			box-shadow: none !important;
		}

		#login .server-select .ms-choice span,
		#login .footer .ms-choice span {
			top: 12px !important;
			color: #172033 !important;
			font-size: 13px !important;
			font-weight: 600;
		}

		#login .server-select .ms-choice div,
		#login .footer .ms-choice div {
			top: 13px !important;
			filter: none;
			opacity: .62;
		}

		#login .ms-drop {
			border: 1px solid rgba(203, 213, 225, 0.90) !important;
			border-radius: 12px !important;
			background: #ffffff !important;
			color: #172033 !important;
			box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
		}

		#login .ms-drop ul > li label {
			color: #172033 !important;
		}

		#login .wrapper .inner-wrapper .content {
			width: 100% !important;
			height: 244px !important;
			overflow: hidden !important;
		}

		#login .wrapper .inner-wrapper .content .content-block {
			height: 244px !important;
		}

		#login input.inputbox {
			width: 100% !important;
			height: 48px !important;
			padding-left: 48px !important;
			padding-right: 16px !important;
			border: 1px solid rgba(203, 213, 225, 0.88) !important;
			border-radius: 12px !important;
			background-color: rgba(248, 250, 252, 0.94) !important;
			color: #172033 !important;
			font-size: 14px !important;
			transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
		}

		#login input.inputbox::placeholder {
			color: #94a3b8;
		}

		#login input.inputbox:focus {
			border-color: rgba(96, 165, 250, 0.86) !important;
			background-color: #ffffff !important;
			box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
			outline: none !important;
		}

		#login .icon {
			background-size: 18px 18px !important;
		}

		#login .wrapper .content-block input.button,
		#login .login-notify-card input.button {
			width: 100% !important;
			height: 50px !important;
			border: 0 !important;
			border-radius: 12px !important;
			background: #3b82f6 !important;
			background-image: none !important;
			color: #ffffff !important;
			font-size: 15px !important;
			font-weight: 700 !important;
			cursor: pointer !important;
			letter-spacing: 0 !important;
			transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
			box-shadow: 0 14px 28px rgba(37, 99, 235, 0.28);
		}

		#login .wrapper .content-block input.button:hover,
		#login .login-notify-card input.button:hover {
			background: #2563eb !important;
			opacity: 1 !important;
			transform: translateY(-1px);
		}

		#login .content-block .reveal {
			right: 14px !important;
			top: 14px !important;
			width: 20px !important;
			height: 20px !important;
			opacity: .78;
		}

		#login .wrapper .content-block .submit-btn .remember-block {
			top: 17px !important;
			right: 16px !important;
		}

		#login .recover-register-block {
			margin: 20px 0 0 !important;
			padding: 0 !important;
			text-align: center !important;
		}

		#login .recover-register-block li a {
			color: #2563eb !important;
			font-size: 13px !important;
			font-weight: 700 !important;
			text-decoration: none !important;
		}

		#login .recover-register-block span {
			color: #64748b;
			margin: 0 8px;
		}

		#login .footer {
			display: flex !important;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			height: auto !important;
			margin-top: 12px;
			padding-top: 16px !important;
			border-top: 1px solid rgba(203, 213, 225, 0.78) !important;
		}

		#login .footer .float-left,
		#login .footer .float-right {
			float: none !important;
		}

		#login .footer .mobile-v {
			color: #475569 !important;
			font-size: 12px;
			font-weight: 700;
			text-decoration: none;
			opacity: .9;
		}

		#login .footer select {
			min-width: 132px;
			height: 38px;
			border: 1px solid rgba(203, 213, 225, 0.88) !important;
			border-radius: 10px !important;
			background: #f8fafc !important;
			color: #172033 !important;
		}

		#login .text {
			color: #64748b;
			font-size: 12px;
			line-height: 1.45;
		}

		#login #dialog_notify.login-notify-modal {
			position: fixed;
			inset: 0;
			z-index: 10000;
			display: none !important;
			align-items: center;
			justify-content: center;
			padding: 24px;
			background: rgba(2, 6, 23, 0.66);
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			color: #0f172a;
		}

		#login #dialog_notify.login-notify-modal.is-open {
			display: flex !important;
		}

		#login .login-notify-card {
			width: min(390px, 100%);
			padding: 22px;
			border: 1px solid rgba(226, 232, 240, 0.9);
			border-radius: 18px;
			background: #ffffff;
			box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
			text-align: center;
		}

		#login .login-notify-card .material-symbols-outlined {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 46px;
			height: 46px;
			margin-bottom: 12px;
			border-radius: 14px;
			background: #eff6ff;
			color: #2563eb;
			font-size: 26px;
		}

		#login #dialog_notify_text {
			display: block;
			margin-bottom: 18px;
			color: #1e293b;
			font-size: 14px;
			font-weight: 700;
			line-height: 1.45;
		}

		@media (max-width: 980px) {
			body#login {
				background-image:
					linear-gradient(180deg, rgba(248, 250, 252, 0.97), rgba(239, 246, 255, 0.88)),
					url('../../img/background.png') !important;
			}

			#login .wrapper {
				justify-content: center;
				padding: 24px;
			}

			#login .login-hero {
				display: none;
			}
		}

		@media (max-width: 520px) {
			#login .wrapper {
				min-height: 100svh;
				padding: 16px;
			}

			#login .wrapper .inner-wrapper {
				padding: 22px !important;
				border-radius: 18px !important;
			}

			#login .login-title h2 {
				font-size: 22px;
			}

			#login .wrapper .inner-wrapper .content,
			#login .wrapper .inner-wrapper .content .content-block {
				height: 238px !important;
			}

			#login .footer {
				flex-direction: column;
				align-items: stretch;
			}

			#login .footer .float-right,
			#login .footer .ms-parent {
				width: 100% !important;
			}
		}