main {
	display: flex; align-items: center; justify-content: center; padding: 24px;
	--margenTop: 20px;
	#loginPanel {
		display: flex; flex-direction: column; align-items: center;
		background: var(--blanco); color: var(--azul-oscuro);
		border: 1px solid var(--gris-claroInterm); box-shadow: 0 5px 16px var(--sombra-suave);
		width: min(100%, 405px); padding: 28px; border-radius: 10px;

		#sectorIconos {
			display: flex; align-items: center; justify-content: center; gap: 50px;
			margin-top: var(--margenTop);
			a, button {
				display: flex; align-items: center; justify-content: center;
				width: 44px; height: 44px; border-radius: 10px; color: var(--blanco);
				border: 0;
				i {font-size: 22px;}
			}
			a {background: var(--azul-intermedio); &:hover {background: var(--azul-oscuro);}}
			button {background: var(--verde-intermOscuro); &:hover {background: var(--verde-oscuro);}}
		}
	}
}
@media (max-width: 520px) {
	main {
		padding: 18px 14px 28px;
		#loginPanel {
			padding: 24px 18px 20px;
			> h1 {
				font-size: 25px;
			}
		}
	}
}