@layer components {
	body {
		display: grid;
		place-items: center;
		min-height: 100vh;
		background: url(../../assets/img/fondo-Sihowin.png) no-repeat center/cover;
		background-color: #0f172a;

		.auth-wrapper {
			width: 100%;
			max-width: 360px;
			position: relative;
			padding-top: 60px;

			.auth-card {
				background: rgba(0, 0, 0, 0.85);
				backdrop-filter: blur(10px);
				padding: 2.5rem 2rem;
				border-radius: 1.5rem;
				box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
				border: 1px solid rgba(255, 255, 255, 0.1);
				color: white;

				/* Transición de visibilidad */
				transition: opacity 0.3s ease, transform 0.3s ease;

				.auth-header {
					text-align: center;
					margin-bottom: 2rem;
					.avatar {
						width: 80px;
						margin-top: -60px;
						border-radius: 50%;
						box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
					}
					h1 {
						font-size: 1.5rem;
						margin-top: 1rem;
					}
				}

				/* Inputs Flotantes (Floating Labels) */
				.input-group {
					position: relative;
					margin-bottom: 1.5rem;

					.floating-input {
						width: 100%;
						background: transparent;
						border: none;
						border-bottom: 1px solid #64748b;
						color: white;
						padding: 0.5rem 0;
						font-size: 1rem;
						transition: border-color 0.3s;

						/* Fix para autocompletado de Chrome/Edge */
						&:-webkit-autofill,
						&:-webkit-autofill:hover,
						&:-webkit-autofill:focus {
							-webkit-text-fill-color: white;
							-webkit-box-shadow: 0 0 0 1000px transparent inset;
							background-color: transparent !important;
							transition: background-color 5000s ease-in-out 0s;
						}

						&:focus {
							outline: none;
							border-color: var(--color-secondary);
						}

						/* LABEL ANIMADO */
						&:focus + label,
						&:not(:placeholder-shown) + label {
							transform: translateY(-20px) scale(0.85);
							color: var(--color-secondary);
						}

						/* Label arriba cuando hay autofill */
						&:-webkit-autofill + label {
							transform: translateY(-20px) scale(0.85);
							color: var(--color-secondary);
						}
					}

					label {
						position: absolute;
						left: 0;
						top: 0.5rem;
						color: #94a3b8;
						pointer-events: none;
						transition: all 0.2s ease;
						transform-origin: left top;
					}

					/* VALIDACIÓN VISUAL NATIVA (Magia CSS) */
					/* Muestra rojo solo si el usuario escribió y está mal */
					.floating-input:user-invalid {
						border-color: #ef4444;
					}
					.floating-input:user-invalid + label {
						color: #ef4444;
					}
				}

				.options-group {
					margin-bottom: 1.5rem;
					.checkbox-container {
						display: flex;
						align-items: center;
						gap: 0.5rem;
						font-size: 0.9rem;
						color: #cbd5e1;
						cursor: pointer;
						user-select: none;

						input[type='checkbox'] {
							width: 1rem;
							height: 1rem;
							accent-color: var(--color-secondary);
							cursor: pointer;
						}
					}
				}

				.btn-submit {
					width: 100%;
					padding: 0.8rem;
					background: linear-gradient(135deg, var(--color-secondary), #4f46e5);
					color: white;
					border: none;
					border-radius: 0.5rem;
					font-weight: bold;
					cursor: pointer;
					transition: transform 0.2s;

					&:hover:not(:disabled) {
						transform: translateY(-2px);
						box-shadow: 0 10px 15px -3px rgba(99, 102, 241, 0.4);
					}
					&:disabled {
						opacity: 0.7;
						cursor: wait;
						filter: grayscale(1);
					}
				}

				.auth-links {
					text-align: center;
					margin-top: 1.5rem;
					font-size: 0.9rem;
					color: #cbd5e1;

					a,
					.link-btn {
						color: var(--color-secondary);
						text-decoration: none;
						font-weight: 600;
						cursor: pointer;
						background: none;
						border: none;
						font-size: inherit;
					}
					.link-btn:hover {
						text-decoration: underline;
					}
				}

				.feedback-message {
					background: #ef4444;
					color: white;
					padding: 0.75rem;
					border-radius: 0.5rem;
					margin-bottom: 1.5rem;
					text-align: center;
					font-size: 0.9rem;
					&.hidden {
						display: none;
					}
				}

				meter {
					width: 100%;
					height: 6px;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 3px;
					margin-top: 8px;
					display: block;
					/* Reset de estilos nativos */
					-webkit-appearance: none;
					appearance: none;

					&::-webkit-meter-bar {
						background: rgba(255, 255, 255, 0.1);
						border-radius: 3px;
						border: none;
					}

					/* Colores según el valor (value="1", value="2", etc) */
					&::-webkit-meter-optimum-value {
						transition: width 0.3s ease;
						border-radius: 3px;
					}

					/* Firefox usa selectores diferentes, pero para Chrome/Edge (webkit): */
					/* Truco: Usamos clases que el JS inyecta o selectores de atributo */
					&[value='1']::-webkit-meter-optimum-value {
						background: #ef4444;
					}
					&[value='2']::-webkit-meter-optimum-value {
						background: #f97316;
					}
					&[value='3']::-webkit-meter-optimum-value {
						background: #eab308;
					}
					&[value='4']::-webkit-meter-optimum-value {
						background: #22c55e;
					}
				}
			}

			&.view-register .login-card {
				display: none;
			}

			&:not(.view-register) .register-card {
				display: none;
			}
		}

		.success-message {
			background: rgba(34, 197, 94, 0.15);
			color: #22c55e;
			border: 1px solid rgba(34, 197, 94, 0.3);
			padding: 1rem;
			border-radius: 0.5rem;
			margin-bottom: 1.5rem;
			text-align: center;
			font-size: 0.9rem;
			line-height: 1.5;
			&.hidden {
				display: none;
			}
		}

		.hospital-group {
			.hospital-select {
				width: 100%;
				background: transparent;
				border: none;
				border-bottom: 1px solid #64748b;
				color: white;
				padding: 0.5rem 0;
				font-size: 0.9rem;
				margin-top: 0.5rem;
				cursor: pointer;

				option {
					background: #1e293b;
					color: white;
				}

				&:focus {
					outline: none;
					border-color: var(--color-secondary);
				}
			}
		}

		.auth-form.hidden {
			display: none;
		}
	}
}